Fix banner styling

launchdarkly · Aug 14, 2024 · 2608532 · 2608532
1 parent 078e4a2
commit 2608532
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 20 deletions.
diff --git a/internal/dev_server/ui/src/App.css b/internal/dev_server/ui/src/App.css
@@ -17,7 +17,7 @@
 	font-weight: 400;
 	font-display: swap;
 	src: url('Audimat3000-Regulier.var-subset.woff2') format('woff2');
-}  
+}
 
 html,
 body,
@@ -31,6 +31,19 @@ body,
   padding: 2rem;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Audimat 3000 Regulier', sans-serif;
+} 
+
+span {
+  font-family: 'Inter', sans-serif;
+}
+
 .container {
   max-width: 40rem;
   margin: 0 auto;

diff --git a/internal/dev_server/ui/src/App.tsx b/internal/dev_server/ui/src/App.tsx
@@ -2,14 +2,15 @@ import './App.css';
 import { useState } from 'react';
 import Flags from './Flags.tsx';
 import ProjectSelector from './ProjectSelector.tsx';
-import { Box } from '@launchpad-ui/core';
+import { Box, Alert, CopyToClipboard } from '@launchpad-ui/core';
 import SyncButton from './Sync.tsx';
 import { LDFlagSet } from 'launchdarkly-js-client-sdk';
+import { Heading, Text } from '@launchpad-ui/components';
 
 function App() {
   const [selectedProject, setSelectedProject] = useState<string | null>(null);
-
   const [flags, setFlags] = useState<LDFlagSet | null>(null);
+  const [showBanner, setShowBanner] = useState(false);
 
   return (
     <div
@@ -34,20 +35,40 @@ function App() {
           padding="1rem"
           maxWidth="1200px"
         >
-          <Box
-            display="flex"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-            marginBottom="2rem"
-            width="100%"
-          >
-            <ProjectSelector
-              selectedProject={selectedProject}
-              setSelectedProject={setSelectedProject}
-            />
-            <SyncButton selectedProject={selectedProject} setFlags={setFlags} />
-          </Box>
+          {showBanner && (
+            <Box margin="0rem 0rem 2rem 0rem" width="100%">
+              <Alert kind="error">
+                <Heading>No projects.</Heading>
+                <Text>Add one via</Text>
+                <CopyToClipboard
+                  kind="basic"
+                  text="ldcli dev-server add-project --help"
+                >
+                  ldcli dev-server add-project --help
+                </CopyToClipboard>
+              </Alert>
+            </Box>
+          )}
+          {!showBanner && (
+            <Box
+              display="flex"
+              flexDirection="row"
+              justifyContent="space-between"
+              alignItems="center"
+              marginBottom="2rem"
+              width="100%"
+            >
+              <ProjectSelector
+                selectedProject={selectedProject}
+                setSelectedProject={setSelectedProject}
+                setShowBanner={setShowBanner}
+              />
+              <SyncButton
+                selectedProject={selectedProject}
+                setFlags={setFlags}
+              />
+            </Box>
+          )}
           {selectedProject && (
             <Box width="100%">
               <Flags

diff --git a/internal/dev_server/ui/src/ProjectSelector.tsx b/internal/dev_server/ui/src/ProjectSelector.tsx
@@ -8,6 +8,7 @@ import {
   MenuTrigger,
   Popover,
   ProgressBar,
+  Text,
   Tooltip,
   TooltipTrigger,
 } from '@launchpad-ui/components';
@@ -25,14 +26,20 @@ const fetchProjects = async () => {
 type Props = {
   selectedProject: string | null;
   setSelectedProject: (selectedProject: string) => void;
+  setShowBanner: (showBanner: boolean) => void;
 };
 
-function ProjectSelector({ selectedProject, setSelectedProject }: Props) {
+function ProjectSelector({
+  selectedProject,
+  setSelectedProject,
+  setShowBanner,
+}: Props) {
   const [projects, setProjects] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   const setProjectsAndUpdateSelectedProject = (projects: string[]) => {
     setProjects(projects);
+    setShowBanner(projects.length == 0);
     if (projects.length == 1) {
       setSelectedProject(projects[0]);
     }
@@ -44,8 +51,9 @@ function ProjectSelector({ selectedProject, setSelectedProject }: Props) {
       .then(setProjectsAndUpdateSelectedProject)
       .catch((error) => {
         console.error(error);
-        setIsLoading(false);
+        setIsLoading(false); //bad
       });
+    setProjects([]);
   }, []);
 
   if (isLoading) {
@@ -94,7 +102,7 @@ function ProjectSelector({ selectedProject, setSelectedProject }: Props) {
   ) : (
     <Alert kind="error">
       <Heading>No projects.</Heading>
-      Add one via{' '}
+      <Text>Add one via</Text>
       <CopyToClipboard kind="basic" text="ldcli dev-server add-project --help">
         ldcli dev-server add-project --help
       </CopyToClipboard>