fix - add tooltip for navbar logo (#945)

* add tooltip for navbar logo * make icon on homepage non clickable
opengovsg · Jan 3, 2025 · 8005093 · 8005093
1 parent be289bb
commit 8005093
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 40 deletions.
diff --git a/apps/studio/src/components/AppNavbar.tsx b/apps/studio/src/components/AppNavbar.tsx
@@ -1,17 +1,11 @@
 import Image from "next/image"
 import NextLink from "next/link"
 import { Flex, HStack } from "@chakra-ui/react"
-import {
-  AvatarMenu,
-  Button,
-  IconButton,
-  Menu,
-} from "@opengovsg/design-system-react"
+import { AvatarMenu, Button, Menu } from "@opengovsg/design-system-react"
 import { BiLinkExternal } from "react-icons/bi"
 
 import { ADMIN_NAVBAR_HEIGHT } from "~/constants/layouts"
 import { useMe } from "~/features/me/api"
-import { DASHBOARD } from "~/lib/routes"
 
 export function AppNavbar(): JSX.Element {
   const { me, logout } = useMe()
@@ -32,22 +26,19 @@ export function AppNavbar(): JSX.Element {
         borderColor="base.divider.medium"
         transition="padding 0.1s"
       >
-        <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
-              />
-            }
+        <Flex
+          justifyContent="center"
+          alignItems="center"
+          mr="0.5rem"
+          minH="2.75rem"
+          minW="2.75rem"
+        >
+          <Image
+            src="/assets/isomer-logo-color.svg"
+            height={24}
+            width={22}
+            alt="Back to sites"
+            priority
           />
         </Flex>
         <HStack

diff --git a/apps/studio/src/components/SearchableHeader.tsx b/apps/studio/src/components/SearchableHeader.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image"
 import NextLink from "next/link"
-import { Flex, Grid, GridItem, Text } from "@chakra-ui/react"
+import { Flex, Grid, GridItem, Text, Tooltip } from "@chakra-ui/react"
 import { AvatarMenu, IconButton, Menu } from "@opengovsg/design-system-react"
 
 import { Searchbar, useSearchStyle } from "~/components/Searchbar"
@@ -27,22 +27,24 @@ export const SearchableHeader = ({ siteId }: SearchableHeaderProps) => {
       alignItems="start"
     >
       <Flex alignItems="center" as={GridItem}>
-        <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
-            />
-          }
-        />
+        <Tooltip label={"Back to sites"} placement="right">
+          <IconButton
+            mr="0.5rem"
+            as={NextLink}
+            href={DASHBOARD}
+            variant="clear"
+            aria-label="Back to sites"
+            icon={
+              <Image
+                src="/assets/isomer-logo-color.svg"
+                height={24}
+                width={22}
+                alt="Back to sites"
+                priority
+              />
+            }
+          />
+        </Tooltip>
         <Text textStyle="subhead-2" noOfLines={1}>
           {name}
         </Text>