ENH - Design system implementation

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"

src/App.tsx

@@ -12,7 +12,7 @@ import {
   prefGlobal
 } from "./preferences";
 import { store } from "./store";
-import { theme } from "./theme";
+import { condaStoreTheme, grayscaleTheme } from "./theme";
 
 import "../style/index.css";
 
@@ -78,7 +78,13 @@ export class App<
   render(): React.ReactNode {
     return (
       <PrefContext.Provider value={this.state.pref}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider
+          theme={
+            this.state.pref.styleType === "grayscale"
+              ? grayscaleTheme
+              : condaStoreTheme
+          }
+        >
           <Provider store={store}>
             <AppRouter />
           </Provider>

src/colors.tsx

@@ -0,0 +1,48 @@
+export const green = {
+  50: "#D6EEDC",
+  100: "#ADDCBA",
+  200: "#85CB97",
+  300: "#5CB975",
+  400: "#36AB55",
+  500: "#298642",
+  600: "#206532",
+  700: "#144321",
+  800: "#0A2210",
+  900: "#051108"
+};
+
+export const gray = {
+  50: "#F7F8F8",
+  100: "#E1E3E4",
+  200: "#C3C7CB",
+  300: "#A6ACB2",
+  400: "#90969C",
+  500: "#5B5F63",
+  600: "#44474A",
+  700: "#3C3C3B",
+  800: "#242628",
+  900: "#1A1C1D"
+};
+
+export const purple = {
+  50: "#E7E0F0",
+  100: "#D0C0E5",
+  200: "#B9A1DA",
+  300: "#A78BD0",
+  400: "#8966C2",
+  500: "#6643A8",
+  600: "#55309D",
+  700: "#3B216E",
+  800: "#2F1957",
+  900: "#231240"
+};
+
+export const red = "#D72D47";
+
+export const orange = "#F66A0A";
+
+export const blue = "#276BE9";
+
+export const white = "#FFFFFF";
+
+export const black = "#000000";

src/components/BlockContainerEditMode.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
-import Switch from "@mui/material/Switch";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import { CodeIcon } from "../components";
+import { StyledSwitch } from "../styles";
 
 interface IBlockContainerProps {
   title: string;
@@ -43,21 +44,46 @@ export const BlockContainerEditMode = ({
           >
             {title}
           </Typography>
-          <FormControlLabel
-            control={
-              <Switch
+          <Grid
+            component="label"
+            container
+            spacing={1}
+            justifyContent={"center"}
+            sx={{ width: "auto" }}
+          >
+            <Grid item sx={{ alignSelf: "baseline" }}>
+              <Typography
+                data-testid="block-container-title"
+                sx={{
+                  fontSize: "14px",
+                  color: "#333",
+                  fontWeight: isEditMode ? "400" : "600"
+                }}
+              >
+                GUI
+              </Typography>
+            </Grid>
+            <Grid item sx={{ alignSelf: "baseline" }}>
+              <StyledSwitch
                 checked={isEditMode}
                 onClick={e => onToggleEditMode(!isEditMode)}
+                icon={<CodeIcon />}
+                checkedIcon={<CodeIcon />}
               />
-            }
-            label={
-              <Typography sx={{ fontSize: "13px", color: "#333" }}>
-                {isEditMode
-                  ? "Switch to Standard View"
-                  : "Switch to YAML Editor"}
+            </Grid>
+            <Grid item sx={{ alignSelf: "baseline" }}>
+              <Typography
+                data-testid="block-container-title"
+                sx={{
+                  fontSize: "14px",
+                  color: "#333",
+                  fontWeight: isEditMode ? "600" : "400"
+                }}
+              >
+                YAML
               </Typography>
-            }
-          />
+            </Grid>
+          </Grid>
         </Box>
       </Box>
       <Box

src/components/ConstraintSelect.tsx

@@ -1,7 +1,6 @@
 import Select from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import React from "react";
-import { getStylesForStyleType } from "../utils/helpers";
 
 interface IConstraintSelectProps {
   /**
@@ -18,19 +17,6 @@ export const ConstraintSelect = ({
   const constraints = ["=", ">", "<", ">=", "<="];
   const selectedConstraint = constraint === "==" ? "=" : constraint;
 
-  const inputStyles = getStylesForStyleType(
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#ECECEC",
-      borderRadius: "0px"
-    },
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#fff",
-      borderRadius: "0px"
-    }
-  );
-
   return (
     <Select
       defaultValue={selectedConstraint}
@@ -44,8 +30,16 @@ export const ConstraintSelect = ({
         borderRadius: "0px",
         width: "44px"
       }}
+      notched={false}
       inputProps={{
-        sx: inputStyles,
+        sx: {
+          padding: "7px 9px !important",
+          borderRadius: "0px",
+          "&::placeholder": {
+            fontSize: "14px",
+            fontWeight: 400
+          }
+        },
         "data-testid": "ConstraintSelectTest"
       }}
     >

src/components/Dialog.tsx

@@ -45,14 +45,7 @@ export const AlertDialog = ({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <StyledButtonPrimary
-          sx={{
-            backgroundColor: "#b1b3b5"
-          }}
-          onClick={closeAction}
-        >
-          Cancel
-        </StyledButtonPrimary>
+        <StyledButtonPrimary onClick={closeAction}>Cancel</StyledButtonPrimary>
         <StyledButtonPrimary onClick={() => confirmAction()}>
           Delete
         </StyledButtonPrimary>

src/components/VersionSelect.tsx

@@ -43,19 +43,6 @@ export const VersionSelect = ({
 
   const [triggerQuery] = useLazyGetPackageVersionSuggestionsQuery();
 
-  const inputStyles = getStylesForStyleType(
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#ECECEC",
-      borderRadius: "0px"
-    },
-    {
-      padding: "7px 9px !important",
-      backgroundColor: "#fff",
-      borderRadius: "0px"
-    }
-  );
-
   const iconStyles = getStylesForStyleType(
     {
       backgroundColor: "#ECECEC",
@@ -165,13 +152,18 @@ export const VersionSelect = ({
         </IconButton>
       )}
       MenuProps={{ PaperProps: { sx: { maxHeight: 200 } } }}
+      notched={false}
       sx={{
         borderRadius: "0px",
         width: "110px",
         border: "none"
       }}
       inputProps={{
-        sx: inputStyles,
+        sx: {
+          padding: "7px 9px !important",
+          backgroundColor: palette.common.white,
+          borderRadius: "0px"
+        },
         "data-testid": "VersionSelectTest"
       }}
     >

src/components/icons/ArrowIcon.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={7}
@@ -10,7 +12,10 @@ export const ArrowIcon = (props: React.SVGProps<SVGSVGElement>) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path d="M0 12.82l6.29-6.41L0 0v12.82z" fill="#5F6368" />
+      <path
+        d="M0 12.82l6.29-6.41L0 0v12.82z"
+        fill={theme.palette.secondary.dark}
+      />
     </svg>
   );
 };

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>
+  );
+};

src/components/icons/ChannelIcon.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
-export const ChannelIcon = ({ color }: any) => {
+export const ChannelIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={12}
@@ -9,10 +11,11 @@ export const ChannelIcon = ({ color }: any) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       style={{ marginRight: "10px", marginLeft: "5px" }}
+      {...props}
     >
       <path
         d="M3.95 0H1.17A1.17 1.17 0 000 1.17v6.26C0 8.076.524 8.6 1.17 8.6h2.78a1.17 1.17 0 001.17-1.17V1.17A1.17 1.17 0 003.95 0zM3.95 10.07H1.17A1.17 1.17 0 000 11.24v1.96c0 .646.524 1.17 1.17 1.17h2.78a1.17 1.17 0 001.17-1.17v-1.96a1.17 1.17 0 00-1.17-1.17zM7.76 14.38h2.78a1.17 1.17 0 001.17-1.17V6.95a1.17 1.17 0 00-1.17-1.17H7.76a1.17 1.17 0 00-1.17 1.17v6.26c0 .646.524 1.17 1.17 1.17zM7.76 4.31h2.78a1.17 1.17 0 001.17-1.17V1.18A1.17 1.17 0 0010.54.01H7.76a1.17 1.17 0 00-1.17 1.17v1.96c0 .646.524 1.17 1.17 1.17z"
-        fill={color}
+        fill={theme.palette.primary.main}
       />
     </svg>
   );

src/components/icons/CodeIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useTheme } from "@mui/material/styles";
+
+export const CodeIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6L8 18Zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6l-6 6Z"
+        fill={theme.palette.primary.contrastText}
+      />
+    </svg>
+  );
+};