From 12a94c7cb46f0aa8f9f93c0e4bf0c28fc9e85319 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Fri, 15 Sep 2023 09:14:25 -0500 Subject: [PATCH 01/16] Add new colors and define green theme --- src/App.tsx | 10 ++++++++-- src/colors.tsx | 38 ++++++++++++++++++++++++++++++++++++++ src/index.tsx | 3 ++- src/theme.tsx | 30 ++++++++++++++++++++++++++++-- 4 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 src/colors.tsx diff --git a/src/App.tsx b/src/App.tsx index 987933d3..d1246e51 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ import { prefGlobal } from "./preferences"; import { store } from "./store"; -import { theme } from "./theme"; +import { greenTheme, grayscaleTheme } from "./theme"; import "../style/index.css"; @@ -78,7 +78,13 @@ export class App< render(): React.ReactNode { return ( - + diff --git a/src/colors.tsx b/src/colors.tsx new file mode 100644 index 00000000..d0a9957f --- /dev/null +++ b/src/colors.tsx @@ -0,0 +1,38 @@ +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" +}; diff --git a/src/index.tsx b/src/index.tsx index 6d5d9c40..809391f1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ export * from "./App"; export { IPreferences } from "./preferences"; export { store } from "./store"; -export { theme, themeDecorator } from "./theme"; +export { grayscaleTheme, greenTheme, themeDecorator } from "./theme"; +export * from "./colors"; diff --git a/src/theme.tsx b/src/theme.tsx index fb2dca9b..2711e80b 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,7 +1,9 @@ import { createTheme, ThemeProvider } from "@mui/material"; import React from "react"; -export const theme = createTheme({ +import { green, purple, gray } from "./colors"; + +export const grayscaleTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' }, @@ -15,6 +17,30 @@ export const theme = createTheme({ } }); +export const greenTheme = createTheme({ + typography: { + fontFamily: '"Inter", sans-serif' + }, + palette: { + primary: { + light: green[100], + main: green[400], + dark: green[600] + }, + secondary: { + light: gray[100], + main: gray[400], + dark: gray[600] + }, + warning: { + light: purple[100], + main: purple[400], + dark: purple[600] + }, + mode: "light" + } +}); + export const themeDecorator = (func: any) => ( - {func()} + {func()} ); From 77c870c69e64b50a1f01a606b10118346a3e79d0 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Tue, 19 Sep 2023 16:14:12 -0500 Subject: [PATCH 02/16] Fix primary button style --- .../channels/components/ChannelsEdit.tsx | 1 - .../components/CreateEnvironmentPackages.tsx | 1 - .../Specification/SpecificationCreate.tsx | 6 +-- .../Specification/SpecificationEdit.tsx | 2 - .../metadata/components/EnvMetadata.tsx | 1 - .../components/RequestedPackagesEdit.tsx | 1 - src/styles/StyledButtonPrimary.tsx | 53 ++++++++++--------- src/theme.tsx | 20 ++++++- 8 files changed, 47 insertions(+), 38 deletions(-) diff --git a/src/features/channels/components/ChannelsEdit.tsx b/src/features/channels/components/ChannelsEdit.tsx index 9369cbcc..8472c6a0 100644 --- a/src/features/channels/components/ChannelsEdit.tsx +++ b/src/features/channels/components/ChannelsEdit.tsx @@ -138,7 +138,6 @@ const BaseChannelsEdit = ({ setIsAdding(true)} - isalttype="true" > + Add Channel diff --git a/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx b/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx index fb97ad42..c284cec6 100644 --- a/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx +++ b/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx @@ -122,7 +122,6 @@ export const CreateEnvironmentPackages = ({ setIsAdding(true)} - isalttype="true" > + Add Package diff --git a/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx b/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx index 4ac578a3..0c895edd 100644 --- a/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx +++ b/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx @@ -125,11 +125,7 @@ export const SpecificationCreate = ({ onCreateEnvironment }: any) => { marginBottom: "10px" }} > - + Create diff --git a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx index bc69eaab..49c4db35 100644 --- a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx +++ b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx @@ -215,7 +215,6 @@ export const SpecificationEdit = ({ Cancel @@ -223,7 +222,6 @@ export const SpecificationEdit = ({ sx={{ padding: "5px 48px" }} onClick={onEditEnvironment} disabled={!envIsUpdated} - isalttype="true" > Save diff --git a/src/features/metadata/components/EnvMetadata.tsx b/src/features/metadata/components/EnvMetadata.tsx index 0b417cb3..d978a1bb 100644 --- a/src/features/metadata/components/EnvMetadata.tsx +++ b/src/features/metadata/components/EnvMetadata.tsx @@ -87,7 +87,6 @@ export const EnvMetadata = ({ defaultEnvironmentChanged(newCurrentBuild)} - isalttype="true" disabled={specificationDidChange()} > Change environment version diff --git a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx index f6627891..d58835f1 100644 --- a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx +++ b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx @@ -142,7 +142,6 @@ export const RequestedPackagesEdit = ({ > setIsAdding(true)} > + Add Package diff --git a/src/styles/StyledButtonPrimary.tsx b/src/styles/StyledButtonPrimary.tsx index 5e0b1888..474dd28e 100644 --- a/src/styles/StyledButtonPrimary.tsx +++ b/src/styles/StyledButtonPrimary.tsx @@ -1,32 +1,35 @@ import Button from "@mui/material/Button"; import { styled } from "@mui/system"; -import React from "react"; -import { PrefContext } from "../preferences"; export const StyledButtonPrimary = styled(Button, { shouldForwardProp: prop => prop !== "styleType" -})<{ styleType?: string; isalttype?: string }>( - ({ - theme: { palette }, - styleType = React.useContext(PrefContext).styleType, - isalttype = "false" - }) => ({ - padding: isalttype === "true" ? "3px 18px" : "3px 35px", - border: styleType === "grayscale" ? "none" : "1px solid #33A852", - fontSize: "13px", - color: "#fff", - textTransform: "none", - backgroundColor: styleType === "grayscale" ? "#5F6368" : "#33A852", +})<{ styleType?: string; isalttype?: string }>(({ theme: { palette } }) => ({ + padding: "4px 12px 4px 12px", + border: palette.primary.main, + fontSize: "14px", + color: palette.primary.contrastText, + textTransform: "none", + backgroundColor: palette.primary.main, + boxShadow: "none", + borderRadius: "4px", + gap: "6px", + ":hover": { boxShadow: "none", - borderRadius: isalttype === "true" ? "2px" : "5px", - ":hover": { - boxShadow: "none", - color: styleType === "grayscale" ? "#fff" : "#33A852", - backgroundColor: styleType === "grayscale" ? "#3C4043" : "#fff" - }, - "&:disabled": { - backgroundColor: "#dddcdc", - border: "none" - } - }) + color: palette.primary.contrastText, + backgroundColor: palette.primary.dark, + textDecoration: "underline" + }, + "&:focus": { + outlineColor: palette.primary.main, + outlineStyle: "auto", + outlineOffset: "4px", + outlineWidth: "medium", + transition: "none" + }, + "&:disabled": { + backgroundColor: palette.primary.light, + border: "none", + color: palette.primary.contrastText + } +}) ); diff --git a/src/theme.tsx b/src/theme.tsx index 2711e80b..6b52d45c 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -9,11 +9,19 @@ export const grayscaleTheme = createTheme({ }, palette: { primary: { - main: "#C4C4C4" + main: "#C4C4C4", + contrastText: "#FFFFFF" }, secondary: { main: "#7E7E7E" } + }, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true + } + } } }); @@ -25,7 +33,8 @@ export const greenTheme = createTheme({ primary: { light: green[100], main: green[400], - dark: green[600] + dark: green[600], + contrastText: "#FFFFFF" }, secondary: { light: gray[100], @@ -38,6 +47,13 @@ export const greenTheme = createTheme({ dark: purple[600] }, mode: "light" + }, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true + } + } } }); From 59322c696472bdf22c1eb03e63125800cdba25ab Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Tue, 19 Sep 2023 16:43:52 -0500 Subject: [PATCH 03/16] Add new colors for roles and fix the shade used previously --- src/colors.tsx | 10 ++++++++ src/theme.tsx | 65 +++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 64 insertions(+), 11 deletions(-) diff --git a/src/colors.tsx b/src/colors.tsx index d0a9957f..f6e97ea7 100644 --- a/src/colors.tsx +++ b/src/colors.tsx @@ -36,3 +36,13 @@ export const purple = { 800: "#2F1957", 900: "#231240" }; + +export const red = "#D72D47"; + +export const orange = "#F66A0A"; + +export const blue = "#276BE9"; + +export const white = "#FFFFFF"; + +export const black = "#000000"; diff --git a/src/theme.tsx b/src/theme.tsx index 2711e80b..232845ca 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,7 +1,7 @@ import { createTheme, ThemeProvider } from "@mui/material"; import React from "react"; -import { green, purple, gray } from "./colors"; +import { green, purple, gray, white, red, orange, blue, black } from "./colors"; export const grayscaleTheme = createTheme({ typography: { @@ -9,38 +9,81 @@ export const grayscaleTheme = createTheme({ }, palette: { primary: { - main: "#C4C4C4" + main: "#C4C4C4", + contrastText: white }, secondary: { - main: "#7E7E7E" + main: "#7E7E7E", + contrastText: white } } }); -export const greenTheme = createTheme({ +const baseTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' }, palette: { primary: { - light: green[100], + light: green[300], main: green[400], - dark: green[600] + dark: green[700], + contrastText: white }, secondary: { - light: gray[100], + light: gray[300], main: gray[400], - dark: gray[600] + dark: gray[700], + contrastText: white }, warning: { - light: purple[100], - main: purple[400], - dark: purple[600] + main: orange, + contrastText: white + }, + error: { + main: red, + contrastText: white + }, + info: { + main: blue, + contrastText: white + }, + success: { + main: green[500], + contrastText: white }, mode: "light" } }); +export const greenTheme = createTheme(baseTheme, { + palette: { + accent: baseTheme.palette.augmentColor({ + color: { + light: purple[300], + main: purple[400], + dark: purple[700], + contrastText: white + }, + name: "accent" + }), + white: baseTheme.palette.augmentColor({ + color: { + main: white, + contrastText: black + }, + name: "white" + }), + black: baseTheme.palette.augmentColor({ + color: { + main: black, + contrastText: white + }, + name: "black" + }) + } +}); + export const themeDecorator = (func: any) => ( {func()} ); From 0cb733a6efb1ef7b4fbd61d3264ee211de7c12bf Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Wed, 20 Sep 2023 09:34:28 -0500 Subject: [PATCH 04/16] update main shade of color --- src/theme.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme.tsx b/src/theme.tsx index 232845ca..322c51e8 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -26,13 +26,13 @@ const baseTheme = createTheme({ palette: { primary: { light: green[300], - main: green[400], + main: green[500], dark: green[700], contrastText: white }, secondary: { light: gray[300], - main: gray[400], + main: gray[500], dark: gray[700], contrastText: white }, @@ -61,7 +61,7 @@ export const greenTheme = createTheme(baseTheme, { accent: baseTheme.palette.augmentColor({ color: { light: purple[300], - main: purple[400], + main: purple[500], dark: purple[700], contrastText: white }, From fdc3e2cfa4a4d429de8020a091a75f6d5b12f932 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Wed, 20 Sep 2023 22:02:37 -0500 Subject: [PATCH 05/16] Fix icon buttons behavior and use across the UI --- src/components/Dialog.tsx | 9 +--- src/components/icons/ArrowIcon.tsx | 7 +++- src/components/icons/ChannelIcon.tsx | 7 +++- src/components/icons/DeleteIconAlt.tsx | 6 ++- src/components/icons/GroupIconAlt.tsx | 10 +++-- src/components/icons/SearchIconAlt.tsx | 4 +- src/components/icons/SquareIconAlt.tsx | 22 ---------- src/components/icons/UploadIcon.tsx | 4 +- src/components/icons/index.tsx | 1 - .../environments/components/Environment.tsx | 42 +++++++++---------- .../components/EnvironmentDropdown.tsx | 29 ++++--------- .../styles/environmentAddIconStyles.ts | 11 ----- src/features/environments/styles/index.ts | 1 - src/styles/StyledButtonPrimary.tsx | 5 +-- src/styles/StyledIconButton.tsx | 22 +++++++++- src/theme.tsx | 30 +++++++++++++ 16 files changed, 107 insertions(+), 103 deletions(-) delete mode 100644 src/components/icons/SquareIconAlt.tsx delete mode 100644 src/features/environments/styles/environmentAddIconStyles.ts diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 57fe3738..819cdb3e 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -45,14 +45,7 @@ export const AlertDialog = ({ - - Cancel - + Cancel confirmAction()}> Delete diff --git a/src/components/icons/ArrowIcon.tsx b/src/components/icons/ArrowIcon.tsx index 1bbec799..35705e71 100644 --- a/src/components/icons/ArrowIcon.tsx +++ b/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) => { + const theme = useTheme(); return ( ) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); }; diff --git a/src/components/icons/ChannelIcon.tsx b/src/components/icons/ChannelIcon.tsx index e11f916b..426bc6bd 100644 --- a/src/components/icons/ChannelIcon.tsx +++ b/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) => { + const theme = useTheme(); return ( { fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginRight: "10px", marginLeft: "5px" }} + {...props} > ); diff --git a/src/components/icons/DeleteIconAlt.tsx b/src/components/icons/DeleteIconAlt.tsx index d2306d69..133e80ab 100644 --- a/src/components/icons/DeleteIconAlt.tsx +++ b/src/components/icons/DeleteIconAlt.tsx @@ -1,6 +1,8 @@ import * as React from "react"; +import { useTheme } from "@mui/material/styles"; export const DeleteIconAlt = (props: React.SVGProps) => { + const theme = useTheme(); return ( ) => { > ); diff --git a/src/components/icons/GroupIconAlt.tsx b/src/components/icons/GroupIconAlt.tsx index 4f2a3ff2..ad3ed17b 100644 --- a/src/components/icons/GroupIconAlt.tsx +++ b/src/components/icons/GroupIconAlt.tsx @@ -1,6 +1,8 @@ import * as React from "react"; +import { useTheme } from "@mui/material/styles"; export const GroupIconAlt = (props: React.SVGProps) => { + const theme = useTheme(); return ( ) => { > - + ) => { 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" /> - + ) => { + const theme = useTheme(); return ( ) => { > diff --git a/src/components/icons/SquareIconAlt.tsx b/src/components/icons/SquareIconAlt.tsx deleted file mode 100644 index 812b5ec1..00000000 --- a/src/components/icons/SquareIconAlt.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react"; - -export const SquareIconAlt = (props: React.SVGProps) => { - return ( - - - - ); -}; diff --git a/src/components/icons/UploadIcon.tsx b/src/components/icons/UploadIcon.tsx index dfbd77b2..340a8eac 100644 --- a/src/components/icons/UploadIcon.tsx +++ b/src/components/icons/UploadIcon.tsx @@ -1,6 +1,8 @@ import * as React from "react"; +import { useTheme } from "@mui/material/styles"; export const UploadIcon = (props: React.SVGProps) => { + const theme = useTheme(); return ( ) => { > diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 9b514b3b..5caec3bc 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -2,7 +2,6 @@ export * from "./CondaLogo"; export * from "./GroupIconAlt"; export * from "./ArrowIcon"; export * from "./SearchIconAlt"; -export * from "./SquareIconAlt"; export * from "./DeleteIconAlt"; export * from "./UploadIcon"; export * from "./ChannelIcon"; diff --git a/src/features/environments/components/Environment.tsx b/src/features/environments/components/Environment.tsx index 3ecf18ac..60b1b6e0 100644 --- a/src/features/environments/components/Environment.tsx +++ b/src/features/environments/components/Environment.tsx @@ -3,7 +3,7 @@ import CircleIcon from "@mui/icons-material/Circle"; import ListItemIcon from "@mui/material/ListItemIcon"; import { Environment as EnvironmentModel } from "../../../common/models"; import { StyledIconButton } from "../../../styles"; -import { getStylesForStyleType } from "../../../utils/helpers"; +import { useTheme } from "@mui/material/styles"; interface IEnvironmentProps { /** @@ -22,35 +22,31 @@ export const Environment = ({ selectedEnvironmentId }: IEnvironmentProps) => { const isSelected = selectedEnvironmentId === environment.id; - - const circleIconStyles = getStylesForStyleType( - { width: "9px", height: "9px", color: isSelected ? "#333" : "#5f6367" }, - { width: "9px", height: "9px", color: isSelected ? "#33A852" : "#B9D9BD" } - ); - - const buttonStyles = getStylesForStyleType( - { - textTransform: "none", - fontSize: "13px", - fontWeight: isSelected ? 600 : 400, - color: "#333" - }, - { - textTransform: "none", - fontSize: "13px", - fontWeight: isSelected ? 600 : 400, - color: isSelected ? "#33A852" : "#333" - } - ); + const theme = useTheme(); return ( <> - + - + {environment.name} diff --git a/src/features/environments/components/EnvironmentDropdown.tsx b/src/features/environments/components/EnvironmentDropdown.tsx index 0f21716b..981e8e88 100644 --- a/src/features/environments/components/EnvironmentDropdown.tsx +++ b/src/features/environments/components/EnvironmentDropdown.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import Accordion from "@mui/material/Accordion"; import AddIcon from "@mui/icons-material/Add"; import Tooltip from "@mui/material/Tooltip"; -import IconButton from "@mui/material/IconButton"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import AccordionDetails from "@mui/material/AccordionDetails"; @@ -20,12 +19,7 @@ import { toggleNewEnvironmentView } from "../../../features/tabs"; import { useAppDispatch, useAppSelector } from "../../../hooks"; -import { StyledAccordionSummary } from "../../../styles"; -import { getStylesForStyleType } from "../../../utils/helpers"; -import { - environmentAddIconGrayscaleStyles, - environmentAddIconGreenAccentStyles -} from "../styles"; +import { StyledAccordionSummary, StyledIconButton } from "../../../styles"; import { ArrowIcon } from "../../../components"; interface IEnvironmentDropdownProps { @@ -42,11 +36,6 @@ export const EnvironmentDropdown = ({ const [isExpanded, setIsExpanded] = useState(false); const dispatch = useAppDispatch(); - const addIconStyles = getStylesForStyleType( - environmentAddIconGrayscaleStyles, - environmentAddIconGreenAccentStyles - ); - const onCreateNewEnvironmentTab = ( event: React.SyntheticEvent, namespace: string @@ -79,7 +68,7 @@ export const EnvironmentDropdown = ({ sx={{ flexDirection: "row-reverse", border: "none", - paddingRight: 0 + paddingRight: "1px" }} expandIcon={} > @@ -108,14 +97,12 @@ export const EnvironmentDropdown = ({ : `You do not have permission to create an environment in the ${namespace} namespace` } > - onCreateNewEnvironmentTab(e, namespace)}> - - + onCreateNewEnvironmentTab(e, namespace)} + disabled={!canCreate} + > + + diff --git a/src/features/environments/styles/environmentAddIconStyles.ts b/src/features/environments/styles/environmentAddIconStyles.ts deleted file mode 100644 index ff4bfa7a..00000000 --- a/src/features/environments/styles/environmentAddIconStyles.ts +++ /dev/null @@ -1,11 +0,0 @@ -export const environmentAddIconGrayscaleStyles = { - width: "15px", - height: "15px", - color: "#2B2B2B" -}; - -export const environmentAddIconGreenAccentStyles = { - width: "18px", - height: "18px", - color: "#33A852" -}; diff --git a/src/features/environments/styles/index.ts b/src/features/environments/styles/index.ts index f8a88138..cc9b79a2 100644 --- a/src/features/environments/styles/index.ts +++ b/src/features/environments/styles/index.ts @@ -1,2 +1 @@ export * from "./environmentSearchTitleStyles"; -export * from "./environmentAddIconStyles"; diff --git a/src/styles/StyledButtonPrimary.tsx b/src/styles/StyledButtonPrimary.tsx index 474dd28e..68bb593a 100644 --- a/src/styles/StyledButtonPrimary.tsx +++ b/src/styles/StyledButtonPrimary.tsx @@ -3,7 +3,7 @@ import { styled } from "@mui/system"; export const StyledButtonPrimary = styled(Button, { shouldForwardProp: prop => prop !== "styleType" -})<{ styleType?: string; isalttype?: string }>(({ theme: { palette } }) => ({ +})<{ styleType?: string }>(({ theme: { palette } }) => ({ padding: "4px 12px 4px 12px", border: palette.primary.main, fontSize: "14px", @@ -31,5 +31,4 @@ export const StyledButtonPrimary = styled(Button, { border: "none", color: palette.primary.contrastText } -}) -); +})); diff --git a/src/styles/StyledIconButton.tsx b/src/styles/StyledIconButton.tsx index 3ea2af8a..11016a07 100644 --- a/src/styles/StyledIconButton.tsx +++ b/src/styles/StyledIconButton.tsx @@ -2,7 +2,25 @@ import Button from "@mui/material/Button"; import { styled } from "@mui/system"; export const StyledIconButton = styled(Button)(({ theme }) => ({ - color: "#000", + color: theme.palette.primary.main, + borderRadius: "0px", padding: "0px", - minWidth: "auto" + minWidth: "auto", + ":hover": { + boxShadow: "none", + color: theme.palette.primary.main, + backgroundColor: theme.palette.primary[50] + }, + "&:focus": { + outlineColor: theme.palette.primary.main, + backgroundColor: theme.palette.primary[50], + outlineStyle: "auto", + outlineWidth: "medium", + transition: "none" + }, + "&:disabled": { + backgroundColor: theme.palette.secondary[100], + border: "none", + color: theme.palette.secondary[300] + } })); diff --git a/src/theme.tsx b/src/theme.tsx index de6c4599..c97e9cba 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -81,6 +81,36 @@ export const greenTheme = createTheme(baseTheme, { }, name: "accent" }), + primary: baseTheme.palette.augmentColor({ + color: { + 50: green[50], + 100: green[100], + 200: green[200], + 300: green[300], + 400: green[400], + 500: green[500], + 600: green[600], + 700: green[700], + 800: green[800], + 900: green[900] + }, + name: "primary" + }), + secondary: baseTheme.palette.augmentColor({ + color: { + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900] + }, + name: "secondary" + }), white: baseTheme.palette.augmentColor({ color: { main: white, From a7fe55c8010fcf207f73c2c6d7462af76fa78681 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Thu, 21 Sep 2023 12:12:26 -0500 Subject: [PATCH 06/16] Change name to condaStoreTheme, define more colors and refactor baseTheme --- src/App.tsx | 4 +-- src/index.tsx | 2 +- src/theme.tsx | 98 +++++++++++++++++++++++++++++++++------------------ 3 files changed, 67 insertions(+), 37 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d1246e51..dae49ed7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ import { prefGlobal } from "./preferences"; import { store } from "./store"; -import { greenTheme, grayscaleTheme } from "./theme"; +import { condaStoreTheme, grayscaleTheme } from "./theme"; import "../style/index.css"; @@ -82,7 +82,7 @@ export class App< theme={ this.state.pref.styleType === "grayscale" ? grayscaleTheme - : greenTheme + : condaStoreTheme } > diff --git a/src/index.tsx b/src/index.tsx index 809391f1..da383373 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ export * from "./App"; export { IPreferences } from "./preferences"; export { store } from "./store"; -export { grayscaleTheme, greenTheme, themeDecorator } from "./theme"; +export { grayscaleTheme, condaStoreTheme, themeDecorator } from "./theme"; export * from "./colors"; diff --git a/src/theme.tsx b/src/theme.tsx index 322c51e8..6b058cc8 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -3,10 +3,13 @@ import React from "react"; import { green, purple, gray, white, red, orange, blue, black } from "./colors"; -export const grayscaleTheme = createTheme({ +const baseTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' - }, + } +}); + +export const grayscaleTheme = createTheme(baseTheme, { palette: { primary: { main: "#C4C4C4", @@ -19,23 +22,65 @@ export const grayscaleTheme = createTheme({ } }); -const baseTheme = createTheme({ - typography: { - fontFamily: '"Inter", sans-serif' - }, +export const condaStoreTheme = createTheme(baseTheme, { palette: { - primary: { - light: green[300], - main: green[500], - dark: green[700], - contrastText: white - }, - secondary: { - light: gray[300], - main: gray[500], - dark: gray[700], - contrastText: white - }, + accent: baseTheme.palette.augmentColor({ + color: { + light: purple[300], + main: purple[500], + dark: purple[700], + contrastText: white, + 50: purple[50], + 100: purple[100], + 200: purple[200], + 300: purple[300], + 400: purple[400], + 500: purple[500], + 600: purple[600], + 700: purple[700], + 800: purple[800], + 900: purple[900] + }, + name: "accent" + }), + primary: baseTheme.palette.augmentColor({ + color: { + light: green[300], + main: green[500], + dark: green[700], + contrastText: white, + 50: green[50], + 100: green[100], + 200: green[200], + 300: green[300], + 400: green[400], + 500: green[500], + 600: green[600], + 700: green[700], + 800: green[800], + 900: green[900] + }, + name: "primary" + }), + secondary: baseTheme.palette.augmentColor({ + color: { + light: gray[300], + main: gray[500], + dark: gray[700], + contrastText: white, + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900] + }, + name: "secondary" + }), warning: { main: orange, contrastText: white @@ -52,21 +97,6 @@ const baseTheme = createTheme({ main: green[500], contrastText: white }, - mode: "light" - } -}); - -export const greenTheme = createTheme(baseTheme, { - palette: { - accent: baseTheme.palette.augmentColor({ - color: { - light: purple[300], - main: purple[500], - dark: purple[700], - contrastText: white - }, - name: "accent" - }), white: baseTheme.palette.augmentColor({ color: { main: white, @@ -85,5 +115,5 @@ export const greenTheme = createTheme(baseTheme, { }); export const themeDecorator = (func: any) => ( - {func()} + {func()} ); From 2fa7e4d83494ca7881d1709d5309df0a269a6bb2 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Thu, 21 Sep 2023 12:18:02 -0500 Subject: [PATCH 07/16] Add rule for component in the baseTheme --- src/theme.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/theme.tsx b/src/theme.tsx index 9320bae1..12ad3645 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -6,6 +6,13 @@ import { green, purple, gray, white, red, orange, blue, black } from "./colors"; const baseTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' + }, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true + } + } } }); @@ -19,13 +26,6 @@ export const grayscaleTheme = createTheme(baseTheme, { main: "#7E7E7E", contrastText: white } - }, - components: { - MuiButtonBase: { - defaultProps: { - disableRipple: true - } - } } }); From 9ca3ef4a6cdc531e7e1768b79c802b45294e6ab0 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Gacha Date: Mon, 25 Sep 2023 15:00:53 -0500 Subject: [PATCH 08/16] ENH - Redefine new themes and colours (#292) * Add new colors and define green theme * Add new colors for roles and fix the shade used previously * update main shade of color * Change name to condaStoreTheme, define more colors and refactor baseTheme --- src/App.tsx | 10 ++++- src/colors.tsx | 48 ++++++++++++++++++++++ src/index.tsx | 3 +- src/theme.tsx | 109 ++++++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 162 insertions(+), 8 deletions(-) create mode 100644 src/colors.tsx diff --git a/src/App.tsx b/src/App.tsx index 987933d3..dae49ed7 100644 --- a/src/App.tsx +++ b/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 ( - + diff --git a/src/colors.tsx b/src/colors.tsx new file mode 100644 index 00000000..f6e97ea7 --- /dev/null +++ b/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"; diff --git a/src/index.tsx b/src/index.tsx index 6d5d9c40..da383373 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ export * from "./App"; export { IPreferences } from "./preferences"; export { store } from "./store"; -export { theme, themeDecorator } from "./theme"; +export { grayscaleTheme, condaStoreTheme, themeDecorator } from "./theme"; +export * from "./colors"; diff --git a/src/theme.tsx b/src/theme.tsx index fb2dca9b..6b058cc8 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,20 +1,119 @@ import { createTheme, ThemeProvider } from "@mui/material"; import React from "react"; -export const theme = createTheme({ +import { green, purple, gray, white, red, orange, blue, black } from "./colors"; + +const baseTheme = createTheme({ typography: { fontFamily: '"Inter", sans-serif' - }, + } +}); + +export const grayscaleTheme = createTheme(baseTheme, { palette: { primary: { - main: "#C4C4C4" + main: "#C4C4C4", + contrastText: white }, secondary: { - main: "#7E7E7E" + main: "#7E7E7E", + contrastText: white } } }); +export const condaStoreTheme = createTheme(baseTheme, { + palette: { + accent: baseTheme.palette.augmentColor({ + color: { + light: purple[300], + main: purple[500], + dark: purple[700], + contrastText: white, + 50: purple[50], + 100: purple[100], + 200: purple[200], + 300: purple[300], + 400: purple[400], + 500: purple[500], + 600: purple[600], + 700: purple[700], + 800: purple[800], + 900: purple[900] + }, + name: "accent" + }), + primary: baseTheme.palette.augmentColor({ + color: { + light: green[300], + main: green[500], + dark: green[700], + contrastText: white, + 50: green[50], + 100: green[100], + 200: green[200], + 300: green[300], + 400: green[400], + 500: green[500], + 600: green[600], + 700: green[700], + 800: green[800], + 900: green[900] + }, + name: "primary" + }), + secondary: baseTheme.palette.augmentColor({ + color: { + light: gray[300], + main: gray[500], + dark: gray[700], + contrastText: white, + 50: gray[50], + 100: gray[100], + 200: gray[200], + 300: gray[300], + 400: gray[400], + 500: gray[500], + 600: gray[600], + 700: gray[700], + 800: gray[800], + 900: gray[900] + }, + name: "secondary" + }), + warning: { + main: orange, + contrastText: white + }, + error: { + main: red, + contrastText: white + }, + info: { + main: blue, + contrastText: white + }, + success: { + main: green[500], + contrastText: white + }, + white: baseTheme.palette.augmentColor({ + color: { + main: white, + contrastText: black + }, + name: "white" + }), + black: baseTheme.palette.augmentColor({ + color: { + main: black, + contrastText: white + }, + name: "black" + }) + } +}); + export const themeDecorator = (func: any) => ( - {func()} + {func()} ); From 79f70d074a7686e66121d38f487646beeee83241 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Fri, 29 Sep 2023 11:27:20 -0500 Subject: [PATCH 09/16] Set input focus in purple --- src/components/ConstraintSelect.tsx | 38 ++++++++++------- src/components/VersionSelect.tsx | 42 ++++++++++++------- .../channels/components/ChannelsEditItem.tsx | 4 +- .../components/EnvironmentsSearch.tsx | 16 ++++++- .../components/AddRequestedPackage.tsx | 5 ++- src/theme.tsx | 30 ++++++------- 6 files changed, 87 insertions(+), 48 deletions(-) diff --git a/src/components/ConstraintSelect.tsx b/src/components/ConstraintSelect.tsx index 8bdaf6df..ae6d30dd 100644 --- a/src/components/ConstraintSelect.tsx +++ b/src/components/ConstraintSelect.tsx @@ -1,7 +1,8 @@ import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; import React from "react"; -import { getStylesForStyleType } from "../utils/helpers"; + +import useTheme from "@mui/material/styles/useTheme"; interface IConstraintSelectProps { /** @@ -17,19 +18,7 @@ export const ConstraintSelect = ({ }: IConstraintSelectProps) => { 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" - } - ); + const { palette } = useTheme(); return ( ); diff --git a/src/styles/StyledSwitchButton.tsx b/src/styles/StyledSwitchButton.tsx new file mode 100644 index 00000000..9335ca82 --- /dev/null +++ b/src/styles/StyledSwitchButton.tsx @@ -0,0 +1,44 @@ +import Switch from "@mui/material/Switch"; +// import { switchClasses } from "@material-ui/core/Switch"; +import { styled } from "@mui/system"; + +export const StyledSwitch = styled(Switch, { + shouldForwardProp: prop => prop !== "styleType" +})<{ styleType?: string }>(({ theme: { palette } }) => ({ + width: 62, + "& .MuiSwitch-switchBase": { + padding: "1px", + margin: "6px", + backgroundColor: palette.primary.main, + "&.Mui-checked": { + backgroundColor: palette.primary.main, + "& + .MuiSwitch-track": { + opacity: 1, + backgroundColor: palette.secondary.light + }, + ":hover": { + boxShadow: `0px 0px 10px ${palette.primary.light}`, + backgroundColor: palette.primary.main + }, + ":focus": { + boxShadow: `0px 0px 10px ${palette.primary.light}`, + backgroundColor: palette.primary.main + } + }, + ":hover": { + boxShadow: `0px 0px 10px ${palette.primary.light}`, + backgroundColor: palette.primary.main + }, + ":focus": { + boxShadow: `0px 0px 10px ${palette.primary.light}`, + backgroundColor: palette.primary.main + } + }, + "& .MuiSwitch-thumb": { + backgroundColor: palette.primary.main + }, + "& .MuiSwitch-track": { + opacity: 1, + backgroundColor: palette.secondary.light + } +})); diff --git a/src/styles/index.tsx b/src/styles/index.tsx index 53beee46..9f3f2bfa 100644 --- a/src/styles/index.tsx +++ b/src/styles/index.tsx @@ -11,3 +11,4 @@ export * from "./StyledTab"; export * from "./StyledTabs"; export * from "./StyledBox"; export * from "./StyledMetadataItem"; +export * from "./StyledSwitchButton"; From 38d274643304676e46eecf8714cbab697f7d5c22 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Thu, 19 Oct 2023 13:10:17 -0500 Subject: [PATCH 13/16] Fix border colors across the UI --- src/features/channels/components/ChannelsEdit.tsx | 2 +- .../environmentCreate/components/CreateEnvironmentPackages.tsx | 2 +- .../requestedPackages/components/RequestedPackagesEdit.tsx | 2 +- src/styles/StyledAccordionDetails.tsx | 2 +- src/styles/StyledAccordionSummary.tsx | 2 +- src/styles/StyledList.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/features/channels/components/ChannelsEdit.tsx b/src/features/channels/components/ChannelsEdit.tsx index 8472c6a0..7f61169f 100644 --- a/src/features/channels/components/ChannelsEdit.tsx +++ b/src/features/channels/components/ChannelsEdit.tsx @@ -127,7 +127,7 @@ const BaseChannelsEdit = ({ ({ border: styleType === "grayscale" - ? `1px solid ${palette.primary.main}` + ? `1px solid ${palette.secondary.light}` : "1px solid #BCBFC4", borderTop: "none", borderRadius: styleType === "grayscale" ? "0px 0px 5px 5px" : "Opx", diff --git a/src/styles/StyledAccordionSummary.tsx b/src/styles/StyledAccordionSummary.tsx index a6d94ff7..e67731da 100644 --- a/src/styles/StyledAccordionSummary.tsx +++ b/src/styles/StyledAccordionSummary.tsx @@ -15,7 +15,7 @@ export const StyledAccordionSummary = styled(AccordionSummary, { height: 40, border: styleType === "grayscale" - ? `1px solid ${palette.primary.main}` + ? `1px solid ${palette.secondary.light}` : "1px solid #BCBFC4", borderRadius: styleType === "grayscale" ? "5px" : "0px", "&.Mui-expanded": { diff --git a/src/styles/StyledList.tsx b/src/styles/StyledList.tsx index 77cea43c..73bcdf18 100644 --- a/src/styles/StyledList.tsx +++ b/src/styles/StyledList.tsx @@ -2,7 +2,7 @@ import Box from "@mui/material/Box"; import { styled } from "@mui/system"; export const StyledBox = styled(Box)(({ theme: { palette } }) => ({ - border: `1px solid ${palette.primary.main}`, + border: `1px solid ${palette.secondary.light}`, borderTop: "none", borderRadius: "0px 0px 5px 5px", overflowY: "scroll" From 02eae03d499f517c1d604d5e167d19c1369dcade Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Wed, 25 Oct 2023 18:03:33 -0500 Subject: [PATCH 14/16] add missing semicolon to fix linting issues --- src/theme.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.tsx b/src/theme.tsx index e364b03a..cb22861e 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { createTheme, ThemeProvider } from "@mui/material"; -import { PaletteColorOptions } from "@mui/material/styles" +import { PaletteColorOptions } from "@mui/material/styles"; import React from "react"; import { green, purple, gray, white, red, orange, blue, black } from "./colors"; From 7545a5b5b660ad927862bd9358cb7de17ce04e6f Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Gacha Date: Fri, 27 Oct 2023 11:00:46 -0500 Subject: [PATCH 15/16] Add new design to links (#320) --- .../artifacts/components/ArtifactsItem.tsx | 29 +++++++++++++- src/theme.tsx | 38 +++++++++++++++++++ 2 files changed, 65 insertions(+), 2 deletions(-) diff --git a/src/features/artifacts/components/ArtifactsItem.tsx b/src/features/artifacts/components/ArtifactsItem.tsx index e08ad121..c29b0ce6 100644 --- 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 ( - + + {artifact.name} diff --git a/src/theme.tsx b/src/theme.tsx index 6b058cc8..d9e60b2e 100644 --- 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' From 26e9a124cdd18b8325e7db4ffde6bdf8a09fedd8 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Gacha Date: Fri, 10 Nov 2023 10:01:44 -0500 Subject: [PATCH 16/16] 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 --- package.json | 10 +-- src/components/icons/ArrowIcon.tsx | 2 +- src/components/icons/BookIcon.tsx | 52 ++++++++++++ src/components/icons/CondaLogo.tsx | 7 +- src/components/icons/GroupIconAlt.tsx | 54 +++++++------ src/components/icons/index.tsx | 1 + .../environments/components/Environment.tsx | 36 ++++++--- .../components/EnvironmentDropdown.tsx | 4 +- .../environments/components/Environments.tsx | 81 ++++++++++++++++--- .../components/EnvironmentsList.tsx | 29 ++++--- .../components/EnvironmentsSearch.tsx | 16 +++- src/styles/StyledListItem.tsx | 14 ++++ src/styles/StyledScrollContainer.tsx | 2 +- src/styles/index.tsx | 1 + webpack.config.js | 4 +- 15 files changed, 236 insertions(+), 77 deletions(-) create mode 100644 src/components/icons/BookIcon.tsx create mode 100644 src/styles/StyledListItem.tsx diff --git a/package.json b/package.json index cfaaf61c..1d7e7bb5 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "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", @@ -11,7 +11,7 @@ "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", @@ -19,9 +19,9 @@ "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 index 35705e71..dc5f8e11 100644 --- a/src/components/icons/ArrowIcon.tsx +++ b/src/components/icons/ArrowIcon.tsx @@ -14,7 +14,7 @@ export const ArrowIcon = (props: React.SVGProps) => { > ); diff --git a/src/components/icons/BookIcon.tsx b/src/components/icons/BookIcon.tsx new file mode 100644 index 00000000..9779d67d --- /dev/null +++ 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) => { + const theme = useTheme(); + return ( + + + + + + + + + + ); +}; diff --git a/src/components/icons/CondaLogo.tsx b/src/components/icons/CondaLogo.tsx index 02e76df7..9606fc38 100644 --- a/src/components/icons/CondaLogo.tsx +++ b/src/components/icons/CondaLogo.tsx @@ -11,8 +11,8 @@ export const CondaLogo = (props: React.SVGProps) => { return ( ) => { ); diff --git a/src/components/icons/GroupIconAlt.tsx b/src/components/icons/GroupIconAlt.tsx index ad3ed17b..2aa343c4 100644 --- a/src/components/icons/GroupIconAlt.tsx +++ b/src/components/icons/GroupIconAlt.tsx @@ -5,39 +5,41 @@ export const GroupIconAlt = (props: React.SVGProps) => { const theme = useTheme(); return ( + + + + - - - - - - - - ); }; diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 275fe317..d0eca1f3 100644 --- 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 index 60b1b6e0..1f35642b 100644 --- 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 ( <> - {environment.name} - + ); }; diff --git a/src/features/environments/components/EnvironmentDropdown.tsx b/src/features/environments/components/EnvironmentDropdown.tsx index 981e8e88..5fa5d8a8 100644 --- 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} diff --git a/src/features/environments/components/Environments.tsx b/src/features/environments/components/Environments.tsx index c6de60f5..a5c1f11f 100644 --- a/src/features/environments/components/Environments.tsx +++ b/src/features/environments/components/Environments.tsx @@ -1,5 +1,8 @@ import React, { memo, useEffect, useReducer } from "react"; import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import Link from "@mui/material/Link"; +import useTheme from "@mui/material/styles/useTheme"; import { EnvironmentsList } from "./EnvironmentsList"; import { debounce } from "lodash"; import { EnvironmentsSearch } from "./EnvironmentsSearch"; @@ -14,13 +17,13 @@ import { initialState as NInitialState, namespacesReducer } from "../../../features/namespaces/reducer"; -import { CondaLogo } from "../../../components"; import { isNamespaceListed, checkMyPrimaryNamespace, namespacesPermissionsMapper } from "../../../utils/helpers/namespaces"; import { Namespace } from "../../../common/models"; +import { BookIcon } from "../../../components"; export interface IBaseEnvironments { refreshEnvironments: boolean; @@ -32,6 +35,8 @@ const BaseEnvironments = ({ onUpdateRefreshEnvironments }: IBaseEnvironments) => { const size = 100; + const { palette } = useTheme(); + const version: string = process.env.REACT_APP_VERSION as string; const [state, dispatch] = useReducer(environmentsReducer, initialState); const [stateN, dispatchN] = useReducer(namespacesReducer, NInitialState); @@ -153,18 +158,21 @@ const BaseEnvironments = ({ - + handleChange(e.target.value)} /> {state.data && ( @@ -178,15 +186,64 @@ const BaseEnvironments = ({ )} - + + + + + Read the docs! + + + + + Version: {version} + ); diff --git a/src/features/environments/components/EnvironmentsList.tsx b/src/features/environments/components/EnvironmentsList.tsx index aebb291b..022901d0 100644 --- a/src/features/environments/components/EnvironmentsList.tsx +++ b/src/features/environments/components/EnvironmentsList.tsx @@ -2,16 +2,17 @@ import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; import Typography from "@mui/material/Typography"; import React, { useEffect, useMemo, useRef } from "react"; +import useTheme from "@mui/material/styles/useTheme"; import InfiniteScroll from "react-infinite-scroll-component"; import { INamespaceEnvironments } from "../../../common/interfaces"; import { Environment, Namespace } from "../../../common/models"; -import { GroupIconAlt } from "../../../components"; import { StyledScrollContainer } from "../../../styles"; import { getMyPrimaryNamespace, getSharedNamespaces, namespaceMapper } from "../../../utils/helpers/namespaces"; +import { GroupIconAlt } from "../../../components"; import { EnvironmentDropdown } from "./EnvironmentDropdown"; interface IEnvironmentsListProps { @@ -37,6 +38,7 @@ export const EnvironmentsList = ({ search }: IEnvironmentsListProps) => { const scrollRef = useRef(null); + const { palette } = useTheme(); const { primaryNamespace, sharedNamespaces } = useMemo(() => { // Group existing environments by namespace... @@ -56,11 +58,7 @@ export const EnvironmentsList = ({ }, [search]); return ( - + {primaryNamespace && ( - + )} @@ -88,21 +91,21 @@ export const EnvironmentsList = ({ sx={{ display: "flex", alignItems: "center", - margin: "0 0 5px 12px" + margin: "0 0 5px 12px", + paddingTop: "20px" }} > + - Shared environments + Shared Environments - {sharedNamespaces && sharedNamespaces.map((namespace: INamespaceEnvironments) => ( diff --git a/src/features/environments/components/EnvironmentsSearch.tsx b/src/features/environments/components/EnvironmentsSearch.tsx index 60662234..447d650e 100644 --- a/src/features/environments/components/EnvironmentsSearch.tsx +++ b/src/features/environments/components/EnvironmentsSearch.tsx @@ -6,7 +6,7 @@ import useTheme from "@mui/material/styles/useTheme"; import React from "react"; import { PrefContext } from "../../../preferences"; -import { SearchIconAlt } from "../../../components"; +import { SearchIconAlt, CondaLogo } from "../../../components"; import { AuthButton } from "../../auth"; interface IEnvironmentsSearchProps { @@ -34,6 +34,17 @@ export const EnvironmentsSearch = ({ onChange }: IEnvironmentsSearchProps) => { position: "relative" }} > + + + + {authButton} { color: palette.common.black, fontWeight: 600, fontSize: "14px", - marginTop: "40px" + marginTop: "55px" }} > Package Manager - {authButton} ({ + color: theme.palette.common.black, + borderRadius: "0px", + padding: "0px", + minWidth: "auto", + ":hover": { + boxShadow: "none", + textDecoration: "underline", + textUnderlineOffset: "0.3em" + } +})); diff --git a/src/styles/StyledScrollContainer.tsx b/src/styles/StyledScrollContainer.tsx index f834ccc3..0573b722 100644 --- a/src/styles/StyledScrollContainer.tsx +++ b/src/styles/StyledScrollContainer.tsx @@ -14,7 +14,7 @@ export const StyledScrollContainer = styled(Box, { backgroundColor: "transparent" }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "#DADCE0", + backgroundColor: palette.secondary.light, borderRadius: "5px", border: "none" } diff --git a/src/styles/index.tsx b/src/styles/index.tsx index 9f3f2bfa..e16a568f 100644 --- a/src/styles/index.tsx +++ b/src/styles/index.tsx @@ -12,3 +12,4 @@ export * from "./StyledTabs"; export * from "./StyledBox"; export * from "./StyledMetadataItem"; export * from "./StyledSwitchButton"; +export * from "./StyledListItem"; diff --git a/webpack.config.js b/webpack.config.js index 76d3c3e7..26d04039 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,6 +8,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const Dotenv = require("dotenv-webpack"); +const webpack = require("webpack"); // const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); // To improve build times for large projects enable fork-ts-checker-webpack-plugin @@ -56,7 +57,8 @@ const basicConfig = { title: "conda-store" }), new MiniCssExtractPlugin(), - new Dotenv() + new Dotenv(), + new webpack.EnvironmentPlugin(['REACT_APP_VERSION']) ], mode: isProd ? "production" : "development",