Extract arrow components, navHeight

coder · presleyp · Apr 8, 2022 · Apr 5, 2022 · Apr 5, 2022 · Apr 6, 2022
commit 88bac07af51c8aeb0884d4d2dca77d4a101d1c9c
diff --git a/site/src/components/Navbar/Arrows.tsx b/site/src/components/Navbar/Arrows.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
+import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
+import { fade, makeStyles, Theme } from "@material-ui/core/styles"
+
+const useStyles = makeStyles((theme: Theme) => ({
+  arrowIcon: {
+    color: fade(theme.palette.primary.contrastText, 0.7),
+    marginLeft: theme.spacing(1),
+    width: 16,
+    height: 16,
+  },
+  arrowIconUp: {
+    color: theme.palette.primary.contrastText,
+  },
+}))
+
+export const OpenDropdown = () => {
+  const styles = useStyles()
+  return <KeyboardArrowDown className={styles.arrowIcon} />
+}
+
+export const CloseDropdown = () => {
+  const styles = useStyles()
+  return <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
+}
diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown.tsx
@@ -12,6 +12,7 @@ import { BorderedMenu } from "../BorderedMenu"
 import { LogoutIcon } from "../Icons"
 import { UserAvatar } from "../User"
 import { UserProfileCard } from "../User/UserProfileCard"
+import { CloseDropdown, OpenDropdown } from "./Arrows"
 
 export interface UserDropdownProps {
   user: UserResponse
@@ -38,9 +39,9 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
               <UserAvatar username={user.username} />
             </Badge>
             {anchorEl ? (
-              <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
+              <CloseDropdown />
             ) : (
-              <KeyboardArrowDown className={styles.arrowIcon} />
+              <OpenDropdown />
             )}
           </div>
         </MenuItem>
@@ -94,15 +95,6 @@ export const useStyles = makeStyles((theme) => ({
   userInfo: {
     marginBottom: theme.spacing(1),
   },
-  arrowIcon: {
-    color: fade(theme.palette.primary.contrastText, 0.7),
-    marginLeft: theme.spacing(1),
-    width: 16,
-    height: 16,
-  },
-  arrowIconUp: {
-    color: theme.palette.primary.contrastText,
-  },
 
   menuItem: {
     height: 44,

diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts
@@ -6,3 +6,4 @@ export const MONOSPACE_FONT_FAMILY =
 export const BODY_FONT_FAMILY = `"Inter", sans-serif`
 export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)"
 export const emptyBoxShadow = "none"
+export const navHeight = 56