contributions initial setup

Aut-Labs · Oct 4, 2024 · b8210f0 · b8210f0
1 parent 108baf1
commit b8210f0
Show file tree

Hide file tree

Showing 24 changed files with 10,360 additions and 15,600 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/confetti.json b/src/assets/confetti.json
diff --git a/src/components/AutConfetti.tsx b/src/components/AutConfetti.tsx
@@ -0,0 +1,28 @@
+import * as animationData from "@assets/confetti.json";
+import { memo } from "react";
+import Lottie from "react-lottie-player/dist/LottiePlayerLight";
+
+const AutConfetti = ({ width = "250px", height = "250px" }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: `translate(-50%, -50%)`
+      }}
+    >
+      <Lottie
+        loop
+        animationData={animationData}
+        play
+        style={{ width: width, height: height }}
+      />
+    </div>
+  );
+};
+
+export default memo(AutConfetti);
diff --git a/src/components/Dialog/DialogWrapper.tsx b/src/components/Dialog/DialogWrapper.tsx
@@ -1,4 +1,3 @@
-
 import {
   Dialog,
   DialogActions,
@@ -20,6 +19,10 @@ const AutStyledDialog = styled(Dialog)(({ theme }) => ({
     width: "420px",
     height: "420px",
     borderRadius: "30px",
+    ".MuiDialogContent-root": {
+      width: "100%",
+      height: "100%"
+    },
     boxShadow:
       "0px 16px 80px 0px #2E90FA, 0px 0px 16px 0px rgba(20, 200, 236, 0.64), 0px 0px 16px 0px rgba(20, 200, 236, 0.32)"
   },
@@ -39,7 +42,8 @@ export const DialogWrapper = ({
   open,
   onClose = null,
   fullScreen = false,
-  height = "280px",
+  backdropFilter = false,
+  height = "420px",
   width = "420px"
 }) => {
   const theme = useTheme();
@@ -51,6 +55,9 @@ export const DialogWrapper = ({
       {...(onClose && {
         onClose
       })}
+      sx={{
+        backdropFilter: backdropFilter ? "blur(30px)" : "none"
+      }}
     >
       <DialogContent
         sx={{

diff --git a/src/components/Dialog/LoadingPopup.tsx b/src/components/Dialog/LoadingPopup.tsx
@@ -1,41 +1,52 @@
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import AutLoading from "../AutLoading";
 import DialogWrapper from "./DialogWrapper";
 
-const LoadingDialog = ({ open, message = null, fullScreen = false }: any) => {
+const LoadingDialog = ({
+  open,
+  message = null,
+  fullScreen = false,
+  backdropFilter = false
+}: any) => {
   return (
-    <DialogWrapper open={open} fullScreen={fullScreen}>
+    <DialogWrapper
+      open={open}
+      fullScreen={fullScreen}
+      backdropFilter={backdropFilter}
+    >
       <div
         className="sw-join-dialog-content"
         style={{
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          justifyContent: "space-around",
-          flex: 1
+          justifyContent: "space-between",
+          height: "100%",
+          width: "100%"
         }}
       >
         {message && (
-          <Typography
-            sx={{
-              textAlign: "center",
-              mt: 2
-            }}
-            component="div"
-            color="offWhite.main"
-            variant="subtitle2"
-          >
-            {message}
-          </Typography>
+          <Box>
+            <Typography
+              sx={{
+                textAlign: "center",
+                mt: 2
+              }}
+              component="div"
+              color="offWhite.main"
+              variant="subtitle1"
+            >
+              {message}
+            </Typography>
+          </Box>
         )}
-        <div
+        <Box
           style={{
-            flex: 1,
-            position: "relative"
+            flex: 1
           }}
         >
           <AutLoading />
-        </div>
+        </Box>
       </div>
     </DialogWrapper>
   );

diff --git a/src/components/Dialog/SubmitDialog.tsx b/src/components/Dialog/SubmitDialog.tsx
@@ -0,0 +1,100 @@
+import { Box, Typography } from "@mui/material";
+import DialogWrapper from "./DialogWrapper";
+import AutLoading from "@components/AutLoading";
+import AutConfetti from "@components/AutConfetti";
+
+const SubmitDialog = ({
+  open,
+  handleClose,
+  subtitle,
+  message,
+  backdropFilter = false,
+  fullScreen = false,
+  mode = "success"
+}: any) => {
+  return (
+    <DialogWrapper
+      open={open}
+      onClose={mode === "success" ? handleClose : null}
+      fullScreen={fullScreen}
+      backdropFilter={backdropFilter}
+    >
+      <div
+        className="sw-join-dialog-content"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "space-between",
+          height: "100%",
+          width: "100%"
+        }}
+      >
+        {mode === "success" ? (
+          <>
+            <Box>
+              <Typography
+                sx={{
+                  color: "white",
+                  textAlign: "center",
+                  mt: 2
+                }}
+                component="div"
+                variant="subtitle1"
+              >
+                {subtitle}
+              </Typography>
+              <Typography
+                sx={{
+                  color: "white",
+                  textAlign: "center",
+                  mt: 2
+                }}
+                component="div"
+                variant="body"
+              >
+                {message}
+              </Typography>
+            </Box>
+
+            <Box
+              sx={{
+                flex: 1,
+                position: "relative"
+              }}
+            >
+              <AutConfetti />
+            </Box>
+          </>
+        ) : (
+          <>
+            <Box>
+              <Typography
+                sx={{
+                  color: "white",
+                  textAlign: "center",
+                  mt: 2
+                }}
+                component="div"
+                variant="subtitle1"
+              >
+                {subtitle}
+              </Typography>
+            </Box>
+
+            <Box
+              style={{
+                flex: 1,
+                position: "relative"
+              }}
+            >
+              <AutLoading />
+            </Box>
+          </>
+        )}
+      </div>
+    </DialogWrapper>
+  );
+};
+
+export default SubmitDialog;
diff --git a/src/components/Dialog/SuccessPopup.tsx b/src/components/Dialog/SuccessPopup.tsx
@@ -1,46 +1,64 @@
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import DialogWrapper from "./DialogWrapper";
+import AutLoading from "@components/AutLoading";
+import AutConfetti from "@components/AutConfetti";
 
 const SuccessDialog = ({
   open,
   handleClose,
   subtitle,
   message,
+  backdropFilter = false,
   fullScreen = false
 }: any) => {
   return (
-    <DialogWrapper open={open} onClose={handleClose} fullScreen={fullScreen}>
+    <DialogWrapper
+      open={open}
+      onClose={handleClose}
+      fullScreen={fullScreen}
+      backdropFilter={backdropFilter}
+    >
       <div
         className="sw-join-dialog-content"
         style={{
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          justifyContent: "center"
+          justifyContent: "space-between",
+          height: "100%",
+          width: "100%"
         }}
       >
-        <Typography
-          sx={{
-            color: "white",
-            textAlign: "center",
-            mt: 2
-          }}
-          component="div"
-          variant="h3"
-        >
-          {subtitle}
-        </Typography>
-        <Typography
-          sx={{
-            color: "white",
-            textAlign: "center",
-            mt: 2
-          }}
-          component="div"
-          variant="subtitle2"
-        >
-          {message}
-        </Typography>
+        <Box>
+          <Typography
+            sx={{
+              color: "white",
+              textAlign: "center",
+              mt: 2
+            }}
+            component="div"
+            variant="subtitle1"
+          >
+            {subtitle}
+          </Typography>
+          <Typography
+            sx={{
+              color: "white",
+              textAlign: "center",
+              mt: 2
+            }}
+            component="div"
+            variant="body"
+          >
+            {message}
+          </Typography>
+        </Box>
+
+        <Box sx={{
+          flex: 1
+        }}>
+          <AutConfetti />
+        </Box>
       </div>
     </DialogWrapper>
   );

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
@@ -1,8 +1,9 @@
 import { Avatar, SvgIcon, Typography, styled, useTheme } from "@mui/material";
 import { useState } from "react";
 import { useDropzone } from "react-dropzone";
-import { ReactComponent as UploadIcon } from "@assets/aut/upload-icon.svg";
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
+import UploadIcon from "@assets/aut/upload-icon.svg?react";
+
 
 const UploadWrapper = styled("div")(({ theme, color }) => {
   return {

diff --git a/src/pages/AutID/AutHub/AutHubEdit.tsx b/src/pages/AutID/AutHub/AutHubEdit.tsx
@@ -221,7 +221,7 @@ const AutHubEdit = () => {
     dispatch(setOpenCommitment(true));
   };
 
-  const nextPeriod = new Date("6/30/2024");
+  const nextPeriod = new Date("11/30/2024");
   const hubRep: number = 100;
   const userRep: number = 100;
 

diff --git a/src/pages/AutID/AutHub/AutHubList.tsx b/src/pages/AutID/AutHub/AutHubList.tsx
@@ -139,7 +139,7 @@ const HubListItem = memo(({ row }: { row: AutOSHub }) => {
                   textDecoration: "none"
                 }}
                 {...(isAddressTheConnectedUser && {
-                  to: `edit-hub/${row.properties.address}`,
+                  to: `hub/${row.properties.address}`,
                   component: Link
                 })}
               >