From 12a94c7cb46f0aa8f9f93c0e4bf0c28fc9e85319 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Fri, 15 Sep 2023 09:14:25 -0500 Subject: [PATCH 01/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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 3dc126ed07074beaa54b8d4bfa1b528db3c3cc07 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Mon, 2 Oct 2023 23:05:21 -0500 Subject: [PATCH 08/10] Add new style for disabled buttons and hover state --- src/components/BlockContainerEditMode.tsx | 49 ++++++++++++++++++----- src/components/icons/CodeIcon.tsx | 20 +++++++++ src/components/icons/index.tsx | 1 + src/styles/StyledButtonPrimary.tsx | 7 ++-- 4 files changed, 63 insertions(+), 14 deletions(-) create mode 100644 src/components/icons/CodeIcon.tsx diff --git a/src/components/BlockContainerEditMode.tsx b/src/components/BlockContainerEditMode.tsx index b12f5dc6..c2034ad7 100644 --- a/src/components/BlockContainerEditMode.tsx +++ b/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"; interface IBlockContainerProps { title: string; @@ -43,21 +44,47 @@ export const BlockContainerEditMode = ({ > {title} - + + + GUI + + + onToggleEditMode(!isEditMode)} + icon={} + checkedIcon={} + sx={{ background: "green" }} /> - } - label={ - - {isEditMode - ? "Switch to Standard View" - : "Switch to YAML Editor"} + + + + YAML - } - /> + + ) => { + const theme = useTheme(); + return ( + + + + ); +}; diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 5caec3bc..275fe317 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -5,3 +5,4 @@ export * from "./SearchIconAlt"; export * from "./DeleteIconAlt"; export * from "./UploadIcon"; export * from "./ChannelIcon"; +export * from "./CodeIcon"; diff --git a/src/styles/StyledButtonPrimary.tsx b/src/styles/StyledButtonPrimary.tsx index 68bb593a..d939ad6a 100644 --- a/src/styles/StyledButtonPrimary.tsx +++ b/src/styles/StyledButtonPrimary.tsx @@ -17,7 +17,8 @@ export const StyledButtonPrimary = styled(Button, { boxShadow: "none", color: palette.primary.contrastText, backgroundColor: palette.primary.dark, - textDecoration: "underline" + textDecoration: "underline", + textUnderlineOffset: "0.3em" }, "&:focus": { outlineColor: palette.primary.main, @@ -27,8 +28,8 @@ export const StyledButtonPrimary = styled(Button, { transition: "none" }, "&:disabled": { - backgroundColor: palette.primary.light, + backgroundColor: palette.secondary[100], border: "none", - color: palette.primary.contrastText + color: palette.secondary.light } })); From e6c8d072ef8d50b5ded6d45ad080384fb06b1238 Mon Sep 17 00:00:00 2001 From: Stephannie Jimenez Date: Thu, 19 Oct 2023 12:34:10 -0500 Subject: [PATCH 09/10] Implement new toggle switch design --- src/components/BlockContainerEditMode.tsx | 5 ++- src/components/icons/CodeIcon.tsx | 2 +- src/styles/StyledSwitchButton.tsx | 44 +++++++++++++++++++++++ src/styles/index.tsx | 1 + 4 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 src/styles/StyledSwitchButton.tsx diff --git a/src/components/BlockContainerEditMode.tsx b/src/components/BlockContainerEditMode.tsx index c2034ad7..814ec744 100644 --- a/src/components/BlockContainerEditMode.tsx +++ b/src/components/BlockContainerEditMode.tsx @@ -2,8 +2,8 @@ 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 { CodeIcon } from "../components"; +import { StyledSwitch } from "../styles"; interface IBlockContainerProps { title: string; @@ -64,12 +64,11 @@ export const BlockContainerEditMode = ({ - onToggleEditMode(!isEditMode)} icon={} checkedIcon={} - sx={{ background: "green" }} /> diff --git a/src/components/icons/CodeIcon.tsx b/src/components/icons/CodeIcon.tsx index 90542ae6..6dfce25b 100644 --- a/src/components/icons/CodeIcon.tsx +++ b/src/components/icons/CodeIcon.tsx @@ -13,7 +13,7 @@ export const CodeIcon = (props: React.SVGProps) => { > ); 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 10/10] 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"