Merge pull request #768 from CodeForAfrica/bugfix/761-roboshield-styl…

…ings Bugfix/761 roboshield stylings
CodeForAfrica · Jul 12, 2024 · 828fe61 · 828fe61
2 parents 288371c + 39d0f94
commit 828fe61
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 18 deletions.
diff --git a/apps/roboshield/src/assets/icons/Type=back, Size=24, Color=CurrentColor.svg b/apps/roboshield/src/assets/icons/Type=back, Size=24, Color=CurrentColor.svg
diff --git a/apps/roboshield/src/assets/icons/Type=copy, Size=24, Color=CurrentColor.svg b/apps/roboshield/src/assets/icons/Type=copy, Size=24, Color=CurrentColor.svg
diff --git a/apps/roboshield/src/assets/icons/Type=reset, Size=24, Color=CurrentColor.svg b/apps/roboshield/src/assets/icons/Type=reset, Size=24, Color=CurrentColor.svg
diff --git a/apps/roboshield/src/assets/icons/Type=save, Size=24, Color=CurrentColor.svg b/apps/roboshield/src/assets/icons/Type=save, Size=24, Color=CurrentColor.svg
diff --git a/apps/roboshield/src/components/Code/Code.tsx b/apps/roboshield/src/components/Code/Code.tsx
@@ -1,4 +1,9 @@
-import { Box, Button, Grid, Stack } from "@mui/material";
+import { Box, Button, Grid, Stack, SvgIcon } from "@mui/material";
+import { Theme } from "@mui/material";
+import CopyIcon from "@/roboshield/assets/icons/Type=copy, Size=24, Color=CurrentColor.svg";
+import SaveIcon from "@/roboshield/assets/icons/Type=save, Size=24, Color=CurrentColor.svg";
+import BackIcon from "@/roboshield/assets/icons/Type=back, Size=24, Color=CurrentColor.svg";
+import ResetIcon from "@/roboshield/assets/icons/Type=reset, Size=24, Color=CurrentColor.svg";
 
 import CodeEditor from "./CodeEditor";
 
@@ -28,6 +33,7 @@ export default function Code(props: CodeProps) {
   const handleCodeChange = (newCode: string) => {
     onCodeChange(newCode);
   };
+
   return (
     <Box
       sx={{
@@ -47,34 +53,58 @@ export default function Code(props: CodeProps) {
             <Button
               variant="contained"
               color="primary"
-              sx={{ mt: 2 }}
+              sx={(theme: Theme) => ({
+                "&:hover": {
+                  color: "primary",
+                },
+              })}
+              startIcon={
+                <SvgIcon
+                  component={CopyIcon}
+                  sx={{
+                    fill: "transparent",
+                  }}
+                />
+              }
               onClick={onCopy}
               disabled={!showButtons}
             >
               {labels?.copyToClipboard}
             </Button>
             <Button
               variant="contained"
-              sx={{
-                mt: 2,
-                background: "#000000",
-                border: "1px solid #000000",
+              startIcon={
+                <SvgIcon
+                  component={SaveIcon}
+                  sx={{
+                    fill: "transparent",
+                  }}
+                />
+              }
+              sx={(theme: Theme) => ({
+                bgcolor: "text.primary",
+                borderColor: "text.primary",
                 "&:hover": {
-                  background: "none",
-                  color: "#000000",
+                  color: "text.primary",
                 },
-              }}
+              })}
               onClick={onDownload}
               disabled={!showButtons}
             >
               {labels?.download}
             </Button>
             <Button
               variant="outlined"
+              startIcon={
+                <SvgIcon
+                  component={BackIcon}
+                  sx={{
+                    color: "primary",
+                    fill: "transparent",
+                  }}
+                />
+              }
               color="primary"
-              sx={{
-                mt: 2,
-              }}
               onClick={onBack}
               disabled={!showButtons}
             >
@@ -94,13 +124,19 @@ export default function Code(props: CodeProps) {
           >
             <Button
               variant="contained"
+              startIcon={
+                <SvgIcon
+                  component={ResetIcon}
+                  sx={{
+                    fill: "transparent",
+                  }}
+                />
+              }
               sx={{
-                display: "inline-block",
-                background: "#FE2500",
-                border: "1px solid #FE2500",
+                bgcolor: "error.main",
+                borderColor: "error.main",
                 "&:hover": {
-                  background: "none",
-                  color: "#FE2500",
+                  color: "error.main",
                 },
               }}
               onClick={onReset}

diff --git a/apps/roboshield/src/components/Statistics/Statistics.tsx b/apps/roboshield/src/components/Statistics/Statistics.tsx
@@ -37,7 +37,7 @@ export default function Statistics({ title, statistics }: StatiscticsProps) {
         )}
         <Grid container rowSpacing={10} justifyContent="space-between">
           {statistics?.map((statistic) => (
-            <Grid item key={statistic.name}>
+            <Grid item key={statistic.name} xs={12} md={4}>
               <StatisticCard {...statistic} />
             </Grid>
           ))}