ENH - Add new sidebar design (#331)

* Add new style to left sidebar * define react_app_version env variable * Add custom icons, fix typography in link and do style changes from review * Add trailing whitespace to fix lint error
conda-incubator · Nov 10, 2023 · 26e9a12 · 26e9a12
1 parent 7dc9228
commit 26e9a12
Show file tree

Hide file tree

Showing 15 changed files with 236 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -3,25 +3,25 @@
   "version": "0.1.5",
   "description": "UI elements for building a frontend for conda-store",
   "scripts": {
-    "build": "tsc --build",
+    "build": "REACT_APP_VERSION=$npm_package_version tsc --build",
     "build:watch": "tsc --build --watch",
     "clean": "rimraf coverage lib storybook-static types .env  *.tsbuildinfo",
     "clean:slate": "yarn run clean && rimraf node_modules",
     "eslint": "eslint . --ext .ts,.tsx --fix",
     "eslint:check": "eslint . --ext .ts,.tsx",
     "prepare": "yarnpkg run build && husky install",
     "prepublishOnly": "yarnpkg run clean && yarnpkg run webpack:prod",
-    "start": "webpack server --history-api-fallback",
+    "start": "REACT_APP_VERSION=$npm_package_version webpack server --history-api-fallback",
     "start:chromium": "webpack serve --open 'chromium'",
     "start:prod": "NODE_ENV=production webpack serve",
     "storybook": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
     "test": "jest --coverage",
     "report": "open ./coverage/lcov-report/index.html",
     "watch": "npm-run-all -p *:watch",
-    "webpack": "webpack --color",
-    "webpack:prod": "NODE_ENV=production webpack --color",
-    "webpack:watch": "webpack --color --watch"
+    "webpack": "REACT_APP_VERSION=$npm_package_version webpack --color",
+    "webpack:prod": "REACT_APP_VERSION=$npm_package_version NODE_ENV=production webpack --color",
+    "webpack:watch": "REACT_APP_VERSION=$npm_package_version webpack --color --watch"
   },
   "keywords": [
     "conda-store"

diff --git a/src/components/icons/ArrowIcon.tsx b/src/components/icons/ArrowIcon.tsx
@@ -14,7 +14,7 @@ export const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M0 12.82l6.29-6.41L0 0v12.82z"
-        fill={theme.palette.primary.main}
+        fill={theme.palette.secondary.dark}
       />
     </svg>
   );

diff --git a/src/components/icons/BookIcon.tsx b/src/components/icons/BookIcon.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { useTheme } from "@mui/material/styles";
+
+export const BookIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8 4.3335V12.3335"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.667 4.3335V12.3335"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M2.33301 4.3335V12.3335"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.6667 12.3333C13.6667 12.3333 13 11 10.6667 11C8.33333 11 8 12.3333 8 12.3333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M2.33333 12.3333C2.33333 12.3333 3 11 5.33333 11C7.66667 11 8 12.3333 8 12.3333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.6667 4.33333C13.6667 4.33333 13 3 10.6667 3C8.33333 3 8 4.33333 8 4.33333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+      <path
+        d="M2.33333 4.33333C2.33333 4.33333 3 3 5.33333 3C7.66667 3 8 4.33333 8 4.33333"
+        stroke={theme.palette.secondary.main}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/CondaLogo.tsx b/src/components/icons/CondaLogo.tsx
@@ -11,8 +11,8 @@ export const CondaLogo = (props: React.SVGProps<SVGSVGElement>) => {
 
   return (
     <svg
-      width={233}
-      height={266}
+      width="inherit"
+      height="inherit"
       viewBox="0 0 233 266"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -21,17 +21,14 @@ export const CondaLogo = (props: React.SVGProps<SVGSVGElement>) => {
       <path
         d="M104.02 145.337c-29.376-16.22-58.646-32.615-87.987-48.905-9.366-5.2-15.938-1.338-15.95 9.33-.035 16.783-.011 33.566-.011 50.36 0 16.783.117 33.578-.07 50.361-.06 5.727 1.947 9.424 7.205 12.064 29.693 14.929 59.257 30.116 88.89 45.162 8.122 4.119 14.648.035 14.648-9.166.035-32.627-.071-65.242.094-97.869.035-5.469-2.16-8.767-6.819-11.337z"
         fill={isGrayscaleStyleType ? colorTheme.gray[0] : colorTheme.green[0]}
-        fillOpacity={0.4}
       />
       <path
         d="M128.877 145.337c29.376-16.22 58.646-32.615 87.987-48.905 9.365-5.2 15.937-1.338 15.949 9.33.035 16.783.012 33.566.012 50.36 0 16.783-.117 33.578.07 50.361.059 5.727-1.948 9.424-7.206 12.064-29.692 14.929-59.256 30.116-88.89 45.162-8.122 4.119-14.647.035-14.647-9.166-.035-32.627.07-65.242-.094-97.869-.035-5.469 2.16-8.767 6.819-11.337zM174.25 15.487h-18.203v10.035h18.203s-3.134-3.556-3.333-4.695c-.2-1.138 3.333-5.34 3.333-5.34z"
         fill={isGrayscaleStyleType ? colorTheme.gray[1] : colorTheme.green[1]}
-        fillOpacity={0.4}
       />
       <path
         d="M153.312 58.289c-1.526-1.96-4.178-4.002-7.957-6.103-3.779-2.1-7.054-3.709-9.812-4.8-2.769-1.092-7.053-2.723-12.863-4.906-5.668-2.183-9.776-4.107-12.323-5.774-2.546-1.667-3.814-3.52-3.814-5.563 0-2.617 1.091-4.612 3.274-5.997 2.089-1.326 4.39-1.995 6.89-2.054v-.082c10.374.692 22.557 1.901 32.626 2.5 1.808.105 2.183-.376 2.078-2.066-.751-12.37-10.129-20.515-22.346-22.534a50.123 50.123 0 00-3.462-.422c-7.429-.939-12.406-.282-14.096-.012-8.438.892-15.62 3.732-21.547 8.532-7.277 5.892-10.903 13.556-10.903 23.003 0 9.307 2.875 16.537 8.614 21.7 5.74 5.165 13.767 9.484 24.095 12.981 7.417 2.324 12.499 4.296 15.269 5.892 2.758 1.596 4.142 3.568 4.142 5.891 0 2.618-1.161 4.73-3.497 6.326-2.324 1.596-5.528 2.394-9.6 2.394a41.42 41.42 0 01-5.141-.328c-11.29-.822-19.834-2.054-31.124-2.934-1.55-.118-1.948.234-1.925 1.76.188 11.913 9.26 21.196 21.102 22.827 2.171.294 7.699 1.385 12.358 1.432 1.491.094 2.993.141 4.518.141 13.521 0 23.802-3.052 30.855-9.154 7.054-6.103 10.575-14.096 10.575-23.99 0-4.06-.623-7.698-1.855-10.902-1.22-3.216-2.605-5.798-4.131-7.758zM131.494 7.647c2.653.13 4.589 2.242 4.472 4.87-.118 2.641-2.254 4.578-4.894 4.46-2.606-.117-4.624-2.3-4.519-4.882.118-2.57 2.336-4.565 4.941-4.448z"
         fill={isGrayscaleStyleType ? colorTheme.gray[0] : colorTheme.green[0]}
-        fillOpacity={0.4}
       />
     </svg>
   );

diff --git a/src/components/icons/GroupIconAlt.tsx b/src/components/icons/GroupIconAlt.tsx
@@ -5,39 +5,41 @@ export const GroupIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
   const theme = useTheme();
   return (
     <svg
-      width={27}
-      height={22}
-      viewBox="0 0 27 22"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
       {...props}
     >
+      <circle
+        cx="12"
+        cy="8"
+        r="2.5"
+        stroke={theme.palette.secondary[500]}
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.7679 6.5C13.9657 6.15743 14.2607 5.88121 14.6154 5.70625C14.9702 5.5313 15.3689 5.46548 15.7611 5.51711C16.1532 5.56874 16.5213 5.73551 16.8187 5.99632C17.1161 6.25713 17.3295 6.60028 17.4319 6.98236C17.5342 7.36445 17.521 7.76831 17.3939 8.14288C17.2667 8.51745 17.0313 8.8459 16.7175 9.08671C16.4037 9.32751 16.0255 9.46985 15.6308 9.49572C15.2361 9.52159 14.8426 9.42983 14.5 9.23205"
+        stroke={theme.palette.secondary[500]}
+      />
+      <path
+        d="M10.2321 6.5C10.0343 6.15743 9.73935 5.88121 9.38458 5.70625C9.02981 5.5313 8.63113 5.46548 8.23895 5.51711C7.84677 5.56874 7.47871 5.73551 7.18131 5.99632C6.88391 6.25713 6.67053 6.60028 6.56815 6.98236C6.46577 7.36445 6.47899 7.76831 6.60614 8.14288C6.73329 8.51745 6.96866 8.8459 7.28248 9.08671C7.5963 9.32751 7.97448 9.46985 8.36919 9.49572C8.76391 9.52159 9.15743 9.42983 9.5 9.23205"
+        stroke={theme.palette.secondary[500]}
+      />
+      <path
+        d="M12 12.5C16.0802 12.5 17.1335 15.8022 17.4054 17.507C17.4924 18.0524 17.0523 18.5 16.5 18.5H7.5C6.94771 18.5 6.50763 18.0524 6.59461 17.507C6.86649 15.8022 7.91976 12.5 12 12.5Z"
+        stroke={theme.palette.secondary[500]}
+        strokeLinecap="round"
+      />
       <path
-        d="M13.092 7.547a3.773 3.773 0 100-7.547 3.773 3.773 0 000 7.547z"
-        fill={theme.palette.primary.main}
+        d="M19.2964 15.4162L18.8113 15.5377L19.2964 15.4162ZM13.0869 12.5859L12.7177 12.2488L12.0972 12.9283L13.0049 13.0791L13.0869 12.5859ZM17.1811 16.5L16.7008 16.639L16.8053 17H17.1811V16.5ZM15.4998 12C16.5275 12 17.2493 12.5027 17.7781 13.2069C18.3175 13.9253 18.6343 14.8306 18.8113 15.5377L19.7814 15.2948C19.5902 14.5315 19.2327 13.4787 18.5778 12.6065C17.9124 11.7203 16.92 11 15.4998 11V12ZM13.4562 12.923C13.9565 12.375 14.6105 12 15.4998 12V11C14.2826 11 13.3734 11.5306 12.7177 12.2488L13.4562 12.923ZM13.0049 13.0791C15.3055 13.4614 16.2788 15.1801 16.7008 16.639L17.6614 16.361C17.1903 14.7326 16.0188 12.5663 13.1689 12.0927L13.0049 13.0791ZM18.3948 16H17.1811V17H18.3948V16ZM18.8113 15.5377C18.8651 15.7526 18.7073 16 18.3948 16V17C19.2655 17 20.015 16.2277 19.7814 15.2948L18.8113 15.5377Z"
+        fill={theme.palette.secondary[500]}
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21.757 21.614c0-.515-2.155-10.294-8.08-10.294-5.926 0-8.081 9.78-8.081 10.294 0 .515 16.16.515 16.16 0z"
-        fill={theme.palette.primary.main}
+        d="M10.913 12.5859L10.995 13.0791L11.9027 12.9283L11.2823 12.2488L10.913 12.5859ZM4.70355 15.4162L5.18857 15.5377L4.70355 15.4162ZM6.8188 16.5V17H7.19465L7.2991 16.639L6.8188 16.5ZM8.50011 12C9.38944 12 10.0434 12.375 10.5438 12.923L11.2823 12.2488C10.6266 11.5306 9.71735 11 8.50011 11V12ZM5.18857 15.5377C5.36566 14.8306 5.6824 13.9253 6.22179 13.2069C6.7506 12.5027 7.47238 12 8.50011 12V11C7.07993 11 6.08755 11.7203 5.42211 12.6065C4.76725 13.4787 4.40968 14.5315 4.21853 15.2948L5.18857 15.5377ZM5.6051 16C5.29259 16 5.13477 15.7526 5.18857 15.5377L4.21853 15.2948C3.9849 16.2277 4.73436 17 5.6051 17V16ZM6.8188 16H5.6051V17H6.8188V16ZM7.2991 16.639C7.72116 15.1801 8.69448 13.4614 10.995 13.0791L10.831 12.0927C7.98113 12.5663 6.80962 14.7326 6.3385 16.361L7.2991 16.639Z"
+        fill={theme.palette.secondary[500]}
       />
-      <g opacity={0.72} fill={theme.palette.primary.main}>
-        <path d="M21.27 11.53a2.886 2.886 0 100-5.771 2.886 2.886 0 000 5.77z" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M26.532 21.63c0-.361-1.374-7.215-5.155-7.215S16.22 21.27 16.22 21.63c0 .361 10.311.361 10.311 0z"
-        />
-      </g>
-      <g opacity={0.72} fill={theme.palette.primary.main}>
-        <path d="M5.05 11.53a2.886 2.886 0 100-5.771 2.886 2.886 0 000 5.77z" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10.312 21.63c0-.361-1.375-7.215-5.156-7.215C1.375 14.415 0 21.27 0 21.63c0 .361 10.312.361 10.312 0z"
-        />
-      </g>
     </svg>
   );
 };
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
@@ -6,3 +6,4 @@ export * from "./DeleteIconAlt";
 export * from "./UploadIcon";
 export * from "./ChannelIcon";
 export * from "./CodeIcon";
+export * from "./BookIcon";
diff --git a/src/features/environments/components/Environment.tsx b/src/features/environments/components/Environment.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import CircleIcon from "@mui/icons-material/Circle";
 import ListItemIcon from "@mui/material/ListItemIcon";
+import Button from "@mui/material/Button";
 import { Environment as EnvironmentModel } from "../../../common/models";
-import { StyledIconButton } from "../../../styles";
 import { useTheme } from "@mui/material/styles";
 
 interface IEnvironmentProps {
@@ -27,28 +27,46 @@ export const Environment = ({
   return (
     <>
       <ListItemIcon
-        sx={{ width: "5px", minWidth: "auto", marginRight: "12px" }}
+        sx={{
+          width: "5px",
+          minWidth: "auto",
+          marginRight: "12px"
+        }}
       >
         <CircleIcon
           sx={{
-            width: "9px",
-            height: "9px",
+            width: "5px",
+            height: "5px",
             color: isSelected
-              ? theme.palette.primary.light
-              : theme.palette.primary.main
+              ? theme.palette.primary.main
+              : theme.palette.common.black
           }}
         />
       </ListItemIcon>
-      <StyledIconButton
+      <Button
         onClick={onClick}
         sx={{
+          color: isSelected
+            ? theme.palette.primary.main
+            : theme.palette.common.black,
+          backgroundColor: isSelected ? theme.palette.primary[50] : "none",
+          borderRadius: "0px",
+          padding: "0px",
+          minWidth: "auto",
           textTransform: "none",
           fontSize: "13px",
-          fontWeight: isSelected ? 600 : 400
+          fontWeight: isSelected ? 600 : 400,
+          textDecoration: isSelected ? "underline" : "none",
+          textUnderlineOffset: "0.3em",
+          ":hover": {
+            boxShadow: "none",
+            textDecoration: "underline",
+            textUnderlineOffset: "0.3em"
+          }
         }}
       >
         {environment.name}
-      </StyledIconButton>
+      </Button>
     </>
   );
 };
diff --git a/src/features/environments/components/EnvironmentDropdown.tsx b/src/features/environments/components/EnvironmentDropdown.tsx
@@ -7,6 +7,7 @@ import Box from "@mui/material/Box";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
+import useTheme from "@mui/material/styles/useTheme";
 import { Environment } from "./Environment";
 import { INamespaceEnvironments } from "../../../common/interfaces";
 import {
@@ -35,6 +36,7 @@ export const EnvironmentDropdown = ({
   const { selectedEnvironment } = useAppSelector(state => state.tabs);
   const [isExpanded, setIsExpanded] = useState(false);
   const dispatch = useAppDispatch();
+  const { palette } = useTheme();
 
   const onCreateNewEnvironmentTab = (
     event: React.SyntheticEvent,
@@ -85,7 +87,7 @@ export const EnvironmentDropdown = ({
             sx={{
               fontWeight: 600,
               fontSize: "14px",
-              color: " #333"
+              color: palette.common.black
             }}
           >
             {namespace}