minor style fixes to site dashboard page (#908)

* make it 2 lines before truncating instead of 1 * change to subhead-1 * remove unused const * quick fix - standardize navbar * update stories * change to subhead-2
opengovsg · Dec 2, 2024 · 6308a7f · 6308a7f
1 parent e77e40d
commit 6308a7f
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 32 deletions.
diff --git a/apps/studio/src/components/AppNavbar.tsx b/apps/studio/src/components/AppNavbar.tsx
@@ -1,7 +1,12 @@
 import Image from "next/image"
 import NextLink from "next/link"
 import { Flex, HStack } from "@chakra-ui/react"
-import { AvatarMenu, Button, Link, Menu } from "@opengovsg/design-system-react"
+import {
+  AvatarMenu,
+  Button,
+  IconButton,
+  Menu,
+} from "@opengovsg/design-system-react"
 import { BiLinkExternal } from "react-icons/bi"
 
 import { ADMIN_NAVBAR_HEIGHT } from "~/constants/layouts"
@@ -19,29 +24,32 @@ export function AppNavbar(): JSX.Element {
         w="100%"
         justify="space-between"
         align="center"
-        px={{ base: "1.5rem", md: "1.8rem", xl: "2rem" }}
+        px={{ base: 0, md: "0.5rem" }}
         pl={{ base: `calc(1rem + ${ADMIN_NAVBAR_HEIGHT})`, sm: "1.5rem" }}
-        py="0.375rem"
+        py={{ base: 0, md: "0.5rem" }}
         bg="white"
         borderBottomWidth="1px"
         borderColor="base.divider.medium"
         transition="padding 0.1s"
       >
-        <Link
-          as={NextLink}
-          href={DASHBOARD}
-          mx={{ base: "auto", sm: 0 }}
-          transition="margin 0.1s"
-        >
-          <Image
-            src="/assets/isomer-logo-color.svg"
-            height={24}
-            width={22}
-            alt="Isomer Logo"
-            aria-hidden
-            priority
+        <Flex alignItems="center">
+          <IconButton
+            mr="0.5rem"
+            as={NextLink}
+            href={DASHBOARD}
+            variant="clear"
+            aria-label="Back to dashboard"
+            icon={
+              <Image
+                src="/assets/isomer-logo-color.svg"
+                height={24}
+                width={22}
+                alt="Back to dashboard"
+                priority
+              />
+            }
           />
-        </Link>
+        </Flex>
         <HStack
           textStyle="subhead-1"
           spacing={{ base: "0.75rem", md: "1.5rem" }}

diff --git a/apps/studio/src/components/SearchableHeader.tsx b/apps/studio/src/components/SearchableHeader.tsx
@@ -24,6 +24,7 @@ export const SearchableHeader = ({ siteId }: SearchableHeaderProps) => {
       py={{ base: 0, md: "0.5rem" }}
       px={{ base: 0, md: "0.5rem" }}
       background="white"
+      alignItems="start"
     >
       <Flex alignItems="center" as={GridItem}>
         <IconButton

diff --git a/apps/studio/src/constants/layouts.ts b/apps/studio/src/constants/layouts.ts
@@ -5,15 +5,3 @@ export const APP_GRID_TEMPLATE_COLUMN = {
 export const APP_GRID_COLUMN = { base: "1 / 5", md: "1 / 12", lg: "4 / 10" }
 
 export const ADMIN_NAVBAR_HEIGHT = "3.5rem"
-
-export const ADMIN_DASHBAR_WIDTHS = {
-  base: "2.75rem",
-  md: "10.5rem",
-  lg: "13.5rem",
-}
-
-export const APP_GRID_TEMPLATE_AREA = {
-  base: `${ADMIN_NAVBAR_HEIGHT} 1fr / ${ADMIN_DASHBAR_WIDTHS.base} 1fr`,
-  md: `${ADMIN_NAVBAR_HEIGHT} 1fr / ${ADMIN_DASHBAR_WIDTHS.md} 1fr`,
-  lg: `${ADMIN_NAVBAR_HEIGHT} 1fr / ${ADMIN_DASHBAR_WIDTHS.lg} 1fr`,
-}
diff --git a/apps/studio/src/features/dashboard/SiteList.tsx b/apps/studio/src/features/dashboard/SiteList.tsx
@@ -65,9 +65,8 @@ const Site = ({
             </Box>
           </Box>
           <Text
-            as="h6"
-            textStyle="h6"
-            noOfLines={1}
+            textStyle="subhead-2"
+            noOfLines={2}
             overflow="hidden"
             textOverflow="ellipsis"
           >

diff --git a/apps/studio/tests/msw/handlers/sites.ts b/apps/studio/tests/msw/handlers/sites.ts
@@ -31,6 +31,28 @@ const siteListQuery = ({
           isGovernment: true,
         } as PrismaJson.SiteJsonConfig,
       },
+      {
+        id: 2,
+        name: "Having a really long name is cool i guess",
+        config: {
+          theme: "isomer-next",
+          siteName: "MTI",
+          logoUrl: "",
+          search: undefined,
+          isGovernment: true,
+        } as PrismaJson.SiteJsonConfig,
+      },
+      {
+        id: 3,
+        name: "But not if it's too long then nobody can read your name anyway so why even bother",
+        config: {
+          theme: "isomer-next",
+          siteName: "MTI",
+          logoUrl: "",
+          search: undefined,
+          isGovernment: true,
+        } as PrismaJson.SiteJsonConfig,
+      },
     ]
   })
 }