Implement design system buttons

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/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.primary.main}
+      />
     </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/DeleteIconAlt.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const DeleteIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={14}
@@ -12,13 +14,13 @@ export const DeleteIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M5.088 1h4.094M5.088 1h4.094M1 1.819h12.232M5.48 5.09v6.55M8.755 5.09v6.55"
-        stroke="#333"
+        stroke={theme.palette.primary.main}
         strokeLinecap="square"
       />
       <path
         clipRule="evenodd"
         d="M2.243 2.004v11.688c.072.595.338.892.798.892h8.188c.57.056.855-.242.855-.892V2.004H2.243z"
-        stroke="#333"
+        stroke={theme.palette.primary.main}
       />
     </svg>
   );

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<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={27}
@@ -12,23 +14,23 @@ export const GroupIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M13.092 7.547a3.773 3.773 0 100-7.547 3.773 3.773 0 000 7.547z"
-        fill=" #333"
+        fill={theme.palette.primary.main}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M21.757 21.614c0-.515-2.155-10.294-8.08-10.294-5.926 0-8.081 9.78-8.081 10.294 0 .515 16.16.515 16.16 0z"
-        fill=" #333"
+        fill={theme.palette.primary.main}
       />
-      <g opacity={0.72} fill=" #333">
+      <g opacity={0.72} fill={theme.palette.primary.main}>
         <path d="M21.27 11.53a2.886 2.886 0 100-5.771 2.886 2.886 0 000 5.77z" />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M26.532 21.63c0-.361-1.374-7.215-5.155-7.215S16.22 21.27 16.22 21.63c0 .361 10.311.361 10.311 0z"
         />
       </g>
-      <g opacity={0.72} fill=" #333">
+      <g opacity={0.72} fill={theme.palette.primary.main}>
         <path d="M5.05 11.53a2.886 2.886 0 100-5.771 2.886 2.886 0 000 5.77z" />
         <path
           fillRule="evenodd"

src/components/icons/SearchIconAlt.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
+import { useTheme } from "@mui/material/styles";
 
 export const SearchIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={18}
@@ -12,7 +14,7 @@ export const SearchIconAlt = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M13.09 12.64L17.53 17M7.77 15A7.06 7.06 0 10.66 7.94 7.08 7.08 0 007.77 15v0z"
-        stroke="#BCBFC4"
+        stroke={theme.palette.primary.main}
         strokeMiterlimit={10}
       />
     </svg>

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<SVGSVGElement>) => {
+  const theme = useTheme();
   return (
     <svg
       width={12}
@@ -12,7 +14,7 @@ export const UploadIcon = (props: React.SVGProps<SVGSVGElement>) => {
     >
       <path
         d="M5.998 10.817V1m0 .09L2.343 4.745M5.998 1.09l3.656 3.655M10.907 14.688H1"
-        stroke="#333"
+        stroke={theme.palette.primary.main}
         strokeLinecap="round"
         strokeLinejoin="round"
       />

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";

src/features/channels/components/ChannelsEdit.tsx

@@ -138,7 +138,6 @@ const BaseChannelsEdit = ({
         <StyledButtonPrimary
           variant="contained"
           onClick={() => setIsAdding(true)}
-          isalttype="true"
         >
           + Add Channel
         </StyledButtonPrimary>

src/features/environmentCreate/components/CreateEnvironmentPackages.tsx

@@ -122,7 +122,6 @@ export const CreateEnvironmentPackages = ({
         <StyledButtonPrimary
           variant="contained"
           onClick={() => setIsAdding(true)}
-          isalttype="true"
         >
           + Add Package
         </StyledButtonPrimary>

src/features/environmentCreate/components/Specification/SpecificationCreate.tsx

@@ -125,11 +125,7 @@ export const SpecificationCreate = ({ onCreateEnvironment }: any) => {
             marginBottom: "10px"
           }}
         >
-          <StyledButtonPrimary
-            sx={buttonStyles}
-            onClick={handleSubmit}
-            isalttype="true"
-          >
+          <StyledButtonPrimary sx={buttonStyles} onClick={handleSubmit}>
             Create
           </StyledButtonPrimary>
         </Box>

src/features/environmentDetails/components/Specification/SpecificationEdit.tsx

@@ -215,15 +215,13 @@ export const SpecificationEdit = ({
           <StyledButtonPrimary
             sx={{ padding: "5px 48px" }}
             onClick={onCancelEdition}
-            isalttype="true"
           >
             Cancel
           </StyledButtonPrimary>
           <StyledButtonPrimary
             sx={{ padding: "5px 48px" }}
             onClick={onEditEnvironment}
             disabled={!envIsUpdated}
-            isalttype="true"
           >
             Save
           </StyledButtonPrimary>

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 (
     <>
       <ListItemIcon
         sx={{ width: "5px", minWidth: "auto", marginRight: "12px" }}
       >
-        <CircleIcon sx={circleIconStyles} />
+        <CircleIcon
+          sx={{
+            width: "9px",
+            height: "9px",
+            color: isSelected
+              ? theme.palette.primary.light
+              : theme.palette.primary.main
+          }}
+        />
       </ListItemIcon>
-      <StyledIconButton sx={buttonStyles} onClick={onClick}>
+      <StyledIconButton
+        onClick={onClick}
+        sx={{
+          textTransform: "none",
+          fontSize: "13px",
+          fontWeight: isSelected ? 600 : 400
+        }}
+      >
         {environment.name}
       </StyledIconButton>
     </>

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={<ArrowIcon />}
       >
@@ -108,14 +97,12 @@ export const EnvironmentDropdown = ({
                 : `You do not have permission to create an environment in the ${namespace} namespace`
             }
           >
-            <IconButton onClick={e => onCreateNewEnvironmentTab(e, namespace)}>
-              <AddIcon
-                sx={{
-                  ...addIconStyles,
-                  ...(!canCreate && { color: "#e5e5e5" })
-                }}
-              />
-            </IconButton>
+            <StyledIconButton
+              onClick={e => onCreateNewEnvironmentTab(e, namespace)}
+              disabled={!canCreate}
+            >
+              <AddIcon />
+            </StyledIconButton>
           </Tooltip>
         </Box>
       </StyledAccordionSummary>

src/features/environments/styles/index.ts

@@ -1,2 +1 @@
 export * from "./environmentSearchTitleStyles";
-export * from "./environmentAddIconStyles";

src/features/metadata/components/EnvMetadata.tsx

@@ -87,7 +87,6 @@ export const EnvMetadata = ({
             <StyledButtonPrimary
               variant="contained"
               onClick={() => defaultEnvironmentChanged(newCurrentBuild)}
-              isalttype="true"
               disabled={specificationDidChange()}
             >
               Change environment version

src/features/requestedPackages/components/RequestedPackagesEdit.tsx

@@ -142,7 +142,6 @@ export const RequestedPackagesEdit = ({
       >
         <StyledButtonPrimary
           variant="contained"
-          isalttype="true"
           onClick={() => setIsAdding(true)}
         >
           + Add Package