fix: styles

BrunoQuaresma · BrunoQuaresma · commit 73ed5cd559b7 · 2022-04-06T17:10:42.000Z
diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown.tsx
@@ -70,7 +70,7 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
 
           <Divider />
 
-          <Link to="/preferences">
+          <Link to="/preferences" className={styles.link}>
             <MenuItem className={styles.menuItem} onClick={handleDropdownClick}>
               <ListItemIcon className={styles.icon}>
                 <AccountIcon />
@@ -79,7 +79,7 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
             </MenuItem>
           </Link>
 
-          <a href="https://coder.com/docs" target="_blank" rel="noreferrer">
+          <a href="https://coder.com/docs" target="_blank" rel="noreferrer" className={styles.link}>
             <MenuItem className={styles.menuItem} onClick={handleDropdownClick}>
               <ListItemIcon className={styles.icon}>
                 <DocsIcon />
@@ -115,18 +115,15 @@ export const useStyles = makeStyles((theme) => ({
 
   userInfo: {
     marginBottom: theme.spacing(1),
-
-    "& a": {
-      textDecoration: "none",
-      color: "inherit",
-    },
   },
+
   arrowIcon: {
     color: fade(theme.palette.primary.contrastText, 0.7),
     marginLeft: theme.spacing(1),
     width: 16,
     height: 16,
   },
+
   arrowIconUp: {
     color: theme.palette.primary.contrastText,
   },
@@ -141,6 +138,11 @@ export const useStyles = makeStyles((theme) => ({
     },
   },
 
+  link: {
+    textDecoration: "none",
+    color: "inherit",
+  },
+
   icon: {
     color: theme.palette.text.secondary,
   },
diff --git a/site/src/pages/preferences/index.tsx b/site/src/pages/preferences/index.tsx
@@ -1,24 +1,15 @@
+import Box from "@material-ui/core/Box"
 import Paper from "@material-ui/core/Paper"
-import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { Header } from "../../components/Header"
 import { Footer } from "../../components/Page"
 
 export const PreferencesPage: React.FC = () => {
-  const styles = useStyles()
-
   return (
-    <div className={styles.root}>
+    <Box display="flex" flexDirection="column">
       <Header title="Preferences" />
       <Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>Preferences here!</Paper>
       <Footer />
-    </div>
+    </Box>
   )
 }
-
-const useStyles = makeStyles(() => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-  },
-}))
