Add new design to links (#320)

conda-incubator · Oct 27, 2023 · 7545a5b · 7545a5b
1 parent 9ca3ef4
commit 7545a5b
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 2 deletions.
diff --git a/src/features/artifacts/components/ArtifactsItem.tsx b/src/features/artifacts/components/ArtifactsItem.tsx
@@ -1,6 +1,8 @@
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import React from "react";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { useTheme } from "@mui/material/styles";
 
 import { Artifact } from "../../../common/models";
 import { PrefContext } from "../../../preferences";
@@ -19,13 +21,36 @@ export const ArtifactItem = ({ artifact }: IArtifactsProps) => {
     ? pref.apiUrl
     : `${window.location.origin}${pref.apiUrl}`;
   const route = new URL(artifact.route, url).toString();
+  const theme = useTheme();
 
   return (
-    <Box sx={{ display: "flex", alignItems: "center" }}>
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-around",
+        "&:hover": {
+          borderBottom: "1px solid"
+        },
+        "&:focus": {
+          borderBottom: `1px solid ${theme.palette.primary.main}`,
+          backgroundColor: theme.palette.primary[50],
+          color: theme.palette.primary[600]
+        }
+      }}
+    >
+      <OpenInNewIcon />
       <Link
         href={route}
+        color="secondary"
         underline="none"
-        sx={{ color: "#333", fontSize: "13px" }}
+        sx={{
+          fontSize: "14px",
+          marginLeft: "5px",
+          "&:focus": {
+            color: theme.palette.primary[600]
+          }
+        }}
         target="_blank"
       >
         {artifact.name}

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -1,8 +1,46 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { createTheme, ThemeProvider } from "@mui/material";
+import { PaletteColorOptions } from "@mui/material/styles";
 import React from "react";
 
 import { green, purple, gray, white, red, orange, blue, black } from "./colors";
 
+declare module "@mui/material/styles" {
+  interface Palette {
+    accent: PaletteColor;
+  }
+
+  interface PaletteOptions {
+    accent?: PaletteColorOptions;
+  }
+
+  interface PaletteColor {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  }
+
+  interface SimplePaletteColorOptions {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+  }
+}
+
 const baseTheme = createTheme({
   typography: {
     fontFamily: '"Inter", sans-serif'