feat: Use consistent colors for links and highlighting (#1989)

* feat: consistent highlight colors

* update user dropdown menu border

* update borderedmenurow active color

site/src/components/BorderedMenu/BorderedMenu.tsx

@@ -31,8 +31,8 @@ const useStyles = makeStyles((theme) => ({
   },
   paperRoot: {
     width: "292px",
-    border: `2px solid ${theme.palette.primary.main}`,
+    border: `2px solid ${theme.palette.secondary.dark}`,
     borderRadius: 7,
-    boxShadow: `4px 4px 0px ${fade(theme.palette.primary.main, 0.2)}`,
+    boxShadow: `4px 4px 0px ${fade(theme.palette.secondary.dark, 0.2)}`,
   },
 }))

site/src/components/BorderedMenuRow/BorderedMenuRow.tsx

@@ -78,12 +78,12 @@ const useStyles = makeStyles((theme) => ({
     },
 
     "&[data-status='active']": {
-      color: theme.palette.primary.main,
+      color: theme.palette.secondary.dark,
       "& .BorderedMenuRow-description": {
         color: theme.palette.text.primary,
       },
       "& .BorderedMenuRow-icon": {
-        color: theme.palette.primary.main,
+        color: theme.palette.secondary.dark,
       },
     },
   },

site/src/components/BuildsTable/BuildsTable.tsx

@@ -106,7 +106,7 @@ const useStyles = makeStyles((theme) => ({
     },
 
     "&:focus": {
-      outline: `1px solid ${theme.palette.primary.dark}`,
+      outline: `1px solid ${theme.palette.secondary.dark}`,
     },
   },
 }))

site/src/components/NavbarView/NavbarView.tsx

@@ -116,7 +116,7 @@ const useStyles = makeStyles((theme) => ({
         content: `" "`,
         bottom: 0,
         left: theme.spacing(3),
-        background: "#C16800",
+        background: theme.palette.secondary.dark,
         right: theme.spacing(3),
         height: 2,
         position: "absolute",

site/src/components/TabSidebar/TabSidebar.tsx

@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.text.primary,
     },
     "&.active": {
-      color: theme.palette.primary.dark,
+      color: theme.palette.secondary.dark,
     },
 
     "&.active, &:hover": {

site/src/components/UserDropdownContent/UserDropdownContent.tsx

@@ -127,7 +127,7 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(0.5),
   },
   chipRoot: {
-    backgroundColor: "#7057FF",
+    backgroundColor: theme.palette.secondary.dark,
   },
   link: {
     textDecoration: "none",

site/src/theme/palettes.ts

@@ -11,6 +11,7 @@ export const darkPalette: PaletteOptions = {
   secondary: {
     main: "#008510",
     contrastText: "#f8f8f8",
+    dark: "#7057FF",
   },
   background: {
     default: "#1F1F1F",