Implement design system buttons

src/components/BlockContainerEditMode.tsx

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

src/components/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/CodeIcon.tsx

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

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,7 @@ export * from "./CondaLogo";
 export * from "./GroupIconAlt";
 export * from "./ArrowIcon";
 export * from "./SearchIconAlt";
-export * from "./SquareIconAlt";
 export * from "./DeleteIconAlt";
 export * from "./UploadIcon";
 export * from "./ChannelIcon";
+export * from "./CodeIcon";

src/features/channels/components/ChannelsEdit.tsx

@@ -127,7 +127,7 @@ const BaseChannelsEdit = ({
       </DragDropContext>
       <AccordionDetails
         sx={{
-          border: `1px solid ${palette.primary.main}`,
+          border: `1px solid ${palette.secondary.light}`,
           borderTop: "0px",
           borderRadius: "0px",
           padding: "15px 21px",
@@ -138,7 +138,6 @@ const BaseChannelsEdit = ({
         <StyledButtonPrimary
           variant="contained"
           onClick={() => setIsAdding(true)}
-          isalttype="true"
         >
           + Add Channel
         </StyledButtonPrimary>

src/features/environmentCreate/components/CreateEnvironmentPackages.tsx

@@ -111,7 +111,7 @@ export const CreateEnvironmentPackages = ({
       </StyledAccordionDetails>
       <AccordionDetails
         sx={{
-          border: `1px solid ${palette.primary.main}`,
+          border: `1px solid ${palette.secondary.light}`,
           borderTop: "0px",
           borderRadius: "0px 0px 5px 5px",
           padding: "15px 21px",
@@ -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>