feat: add fade in hover circle

cardano-foundation · May 27, 2024 · 6d35b40 · 6d35b40
1 parent 49a07cd
commit 6d35b40
Show file tree

Hide file tree

Showing 3 changed files with 228 additions and 199 deletions.
diff --git a/ui/summit-2024/src/__fixtures__/categories.ts b/ui/summit-2024/src/__fixtures__/categories.ts
@@ -300,7 +300,7 @@ const nomineesData: NomineeArrayFixture[] = [
       },
       // Add more nominees as needed
     ],
-  }
+  },
 ];
 
 export { CategoriesNames, nomineesData };

diff --git a/ui/summit-2024/src/components/common/HoverCircle/HoverCircle.tsx b/ui/summit-2024/src/components/common/HoverCircle/HoverCircle.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Box } from "@mui/material";
+import { Box, Fade } from "@mui/material";
 import CheckIcon from "@mui/icons-material/Check";
 import theme from "../../../common/styles/theme";
 
@@ -20,67 +20,73 @@ const HoverCircle = ({ selected }) => {
     >
       {!selected ? (
         <>
-          <Box
-            sx={{
-              position: "absolute",
-              width: 48,
-              height: 48,
-              backgroundColor: theme.palette.background.darker,
-              borderRadius: "50%",
-              opacity: hover ? 1 : 0,
-              transition: "opacity 0.3s",
-            }}
-          />
-          <Box
-            onMouseEnter={() => setHover(true)}
-            onMouseLeave={() => setHover(false)}
-            sx={{
-              position: "absolute",
-              zIndex: 1,
-              width: "28px",
-              height: "28px",
-              border: `1px solid ${theme.palette.text.neutralLight}`,
-              borderRadius: "50%",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          />
+            <Box
+                sx={{
+                    position: "absolute",
+                    width: 48,
+                    height: 48,
+                    backgroundColor: theme.palette.background.darker,
+                    borderRadius: "50%",
+                    opacity: hover ? 1 : 0,
+                    transition: "opacity 0.3s",
+                }}
+            />
+            <Box
+                onMouseEnter={() => setHover(true)}
+                onMouseLeave={() => setHover(false)}
+                sx={{
+                    position: "absolute",
+                    zIndex: 1,
+                    width: "28px",
+                    height: "28px",
+                    border: `1px solid ${theme.palette.text.neutralLight}`,
+                    borderRadius: "50%",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+            />
+
         </>
       ) : (
         <>
-          <Box
-            sx={{
-              position: "absolute",
-              width: 48,
-              height: 48,
-              backgroundColor: theme.palette.background.darker,
-              borderRadius: "50%",
-              opacity: hover ? 1 : 0,
-              transition: "opacity 0.3s",
-            }}
-          />
-          <Box
-            onMouseEnter={() => setHover(true)}
-            onMouseLeave={() => setHover(false)}
-            sx={{
-              position: "absolute",
-              zIndex: 1,
-              width: "28px",
-              height: "28px",
-              backgroundColor: theme.palette.secondary.main,
-              borderRadius: "50%",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <CheckIcon
+          <Fade in={selected} timeout={400}>
+            <Box
               sx={{
-                color: theme.palette.primary.main,
-                width: 20,
-                margin: "3px 4px",
+                position: "absolute",
+                width: 48,
+                height: 48,
+                backgroundColor: theme.palette.background.darker,
+                borderRadius: "50%",
+                opacity: hover ? 1 : 0,
+                transition: "opacity 0.3s",
               }}
             />
-          </Box>
+          </Fade>
+
+          <Fade in={selected} timeout={400}>
+            <Box
+              onMouseEnter={() => setHover(true)}
+              onMouseLeave={() => setHover(false)}
+              sx={{
+                position: "absolute",
+                zIndex: 1,
+                width: "28px",
+                height: "28px",
+                backgroundColor: theme.palette.secondary.main,
+                borderRadius: "50%",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <CheckIcon
+                sx={{
+                  color: theme.palette.primary.main,
+                  width: 20,
+                  margin: "3px 4px",
+                }}
+              />
+            </Box>
+          </Fade>
         </>
       )}
     </Box>