Merge pull request #500 from bluewave-labs/feat/button-animations

Added some basic button svg animations, resolves #480

Client/src/Components/Button/index.css

@@ -0,0 +1,33 @@
+.MuiButtonBase-root.button-rotate90 svg {
+  transition: transform 500ms ease;
+}
+.MuiButtonBase-root.button-rotate90:hover svg {
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+.MuiButtonBase-root.button-rotate180 svg {
+  transition: transform 700ms ease;
+}
+.MuiButtonBase-root.button-rotate180:hover svg {
+  transform: rotate(180deg);
+  transform-origin: center;
+}
+
+.MuiButtonBase-root.button-slideLeft {
+  padding-left: 45px;
+}
+.MuiButtonBase-root.button-slideLeft svg {
+  position: absolute;
+  left: 15px;
+  transition: left 250ms cubic-bezier(0.65, 0, 0.076, 1);
+}
+.MuiButtonBase-root.button-slideLeft:hover svg {
+  left: 11px;
+}
+
+.MuiButtonBase-root.button-slideLeft:hover,
+.MuiButtonBase-root.button-rotate180:hover,
+.MuiButtonBase-root.button-rotate90:hover {
+  background-color: rgba(71, 84, 103, 0.08);
+}

Client/src/Components/Button/index.jsx

@@ -1,5 +1,6 @@
 import { Button as MuiButton } from "@mui/material";
 import PropTypes from "prop-types";
+import "./index.css";
 
 const levelConfig = {
   primary: {
@@ -48,11 +49,22 @@ const levelConfig = {
  * <Button type="submit" level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
+const Button = ({
+  id,
+  animate,
+  type,
+  level,
+  label,
+  disabled,
+  img,
+  onClick,
+  sx,
+}) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton
       id={id}
+      className={`button-${animate}`}
       type={type}
       variant={variant}
       color={color}
@@ -60,6 +72,7 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
       onClick={onClick}
       disableRipple
       sx={{
+        lineHeight: 1,
         boxShadow: "none",
         textTransform: "none",
         "&:focus": {
@@ -67,13 +80,12 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
         },
         "&:hover": {
           boxShadow: "none",
-          transition: "none"
         },
         ...sx,
       }}
     >
       {img && img}
-      {label}
+      <span>{label}</span>
     </MuiButton>
   );
 };

Client/src/Pages/Monitors/Configure/index.css

@@ -38,6 +38,7 @@
   padding-bottom: 60px;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
+  background-color: var(--env-var-color-8);
 }
 .configure-monitor .config-box .MuiBox-root,
 .configure-monitor .config-box .MuiStack-root {
@@ -74,4 +75,4 @@
 body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
 .configure-monitor .select-wrapper .select-component > .MuiSelect-select {
   text-transform: lowercase;
-}
+}

Client/src/Pages/Monitors/Configure/index.jsx

@@ -106,6 +106,7 @@ const Configure = () => {
       <Button
         level="tertiary"
         label="Back"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate(-1)}
         sx={{
@@ -113,7 +114,8 @@ const Configure = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
@@ -151,13 +153,14 @@ const Configure = () => {
             <Button
               level="tertiary"
               label="Pause"
+              animate="rotate180"
               img={<PauseCircleOutlineIcon />}
               sx={{
                 backgroundColor: "#f4f4f4",
                 pl: theme.gap.small,
                 pr: theme.gap.medium,
                 "& svg": {
-                  pr: theme.gap.xs,
+                  mr: theme.gap.xs,
                 },
               }}
             />

Client/src/Pages/Monitors/CreateMonitor/index.css

@@ -48,6 +48,7 @@
   border-radius: var(--env-var-radius-1);
   flex-direction: row;
   gap: var(--env-var-spacing-4);
+  background-color: var(--env-var-color-8);
 }
 .create-monitor .config-box .MuiBox-root,
 .create-monitor .config-box .MuiStack-root {

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -145,6 +145,7 @@ const CreateMonitor = () => {
       <Button
         level="tertiary"
         label="Back"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate("/monitors")}
         sx={{
@@ -152,7 +153,8 @@ const CreateMonitor = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />

Client/src/Pages/Monitors/Details/index.css

@@ -37,13 +37,18 @@
 .monitor-details .stat-box {
   flex: 1;
   min-width: 100px;
-  border: solid 1px var(--env-var-color-4);
+  border: solid 1px;
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
+  background-color: var(--env-var-color-8);
 }
 .monitor-details .stat-box:not(:first-of-type) {
   margin-left: var(--env-var-spacing-2);
 }
 .monitor-details .stat-box h6.MuiTypography-root {
   margin-bottom: var(--env-var-spacing-1);
-}
+}
+.monitor-details button.MuiButtonBase-root,
+.monitor-details .stat-box {
+  border-color: var(--env-var-color-16);
+}

Client/src/Pages/Monitors/Details/index.jsx

@@ -147,6 +147,7 @@ const DetailsPage = () => {
       <Button
         level="tertiary"
         label="Back to Monitors"
+        animate="slideLeft"
         img={<WestRoundedIcon />}
         onClick={() => navigate("/monitors")}
         sx={{
@@ -154,7 +155,8 @@ const DetailsPage = () => {
           mb: theme.gap.medium,
           px: theme.gap.ml,
           "& svg.MuiSvgIcon-root": {
-            pr: theme.gap.small,
+            mr: theme.gap.small,
+            fill: theme.palette.otherColors.slateGray,
           },
         }}
       />
@@ -184,15 +186,16 @@ const DetailsPage = () => {
           <Button
             level="tertiary"
             label="Configure"
+            animate="rotate90"
             img={<SettingsIcon />}
             onClick={() => navigate(`/monitors/configure/${monitorId}`)}
             sx={{
               ml: "auto",
               alignSelf: "flex-end",
               backgroundColor: "#f4f4f4",
-              px: theme.gap.ml,
+              px: theme.gap.medium,
               "& svg": {
-                pr: theme.gap.xs,
+                mr: "6px",
               },
             }}
           />
@@ -222,19 +225,28 @@ const DetailsPage = () => {
                 level="secondary"
                 label="Day"
                 onClick={() => setFilter("day")}
-                sx={{ backgroundColor: filter === "day" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "day" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Week"
                 onClick={() => setFilter("week")}
-                sx={{ backgroundColor: filter === "week" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "week" && theme.palette.otherColors.fillGray,
+                }}
               />
               <Button
                 level="secondary"
                 label="Month"
                 onClick={() => setFilter("month")}
-                sx={{ backgroundColor: filter === "month" && "#f4f4f4" }}
+                sx={{
+                  backgroundColor:
+                    filter === "month" && theme.palette.otherColors.fillGray,
+                }}
               />
             </ButtonGroup>
           </Stack>