chanaged containers to be responsive

AvailX · Aug 29, 2024 · 8ce6656 · 8ce6656
1 parent 4c21cb9
commit 8ce6656
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 142 deletions.
diff --git a/src/components/buttons/cta.tsx b/src/components/buttons/cta.tsx
@@ -15,6 +15,7 @@ const CtaButton = styled(Button)({
   color: "#FFFFFF",
   fontWeight: "bold",
   padding: "10px 20px",
+  marginRight: "10px",
   borderRadius: "5px",
   transition: "transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out",
   textTransform: "none",

diff --git a/src/components/buttons/sign-up-button.tsx b/src/components/buttons/sign-up-button.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import {alpha, styled, keyframes} from '@mui/material/styles';
-import {useMediaQuery} from '@mui/material';
+import * as React from "react";
+import Button from "@mui/material/Button";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { alpha, styled, keyframes } from "@mui/material/styles";
+import { useMediaQuery } from "@mui/material";
 
 const enlargeAndShrink = keyframes`
 0% {
@@ -21,41 +21,42 @@ const enlargeAndShrink = keyframes`
 
 // Styled button with a custom end icon
 const SignUpButton = styled(Button)(() => {
-	const md = useMediaQuery('(min-width:1000px)');
-	const lg = useMediaQuery('(min-width:1200px)');
-	return {
-		position: 'relative',
-		backgroundColor: 'rgba(255, 255, 255, 0.08)',
-		color: 'white',
-		border: '1px solid white',
-		boxShadow: '0 0 8px rgba(255, 255, 255, 0.5)', // Heavier white hue
-		textTransform: 'none',
-		fontSize: 16,
-		height: md ? 48 : 40, // Match the TextField height
-		width: md ? '75%' : '85%', // Match the TextField width
-		transition: '0.3s ease-in-out',
-		'&:hover': {
-			backgroundColor: alpha('#00FFAA', 0.8), // Slight background on hover
-			color: '#111111',
-			transform: 'scale(1.05)',
-		},
-		'& .MuiButton-endIcon': {
-			position: 'absolute',
-			right: 8,
-			// Circle background for the icon
-			backgroundColor: 'black',
-			borderRadius: '50%',
-			width: md ? 36 : 30,
-			height: md ? 36 : 30,
-			color: 'FFF',
-			'.MuiSvgIcon-root': { // Position the icon in the center of the circle
-				position: 'absolute',
-				top: '50%',
-				left: '50%',
-				transform: 'translate(-50%, -50%)',
-			},
-		},
-	};
+  const md = useMediaQuery("(min-width:1000px)");
+  const lg = useMediaQuery("(min-width:1200px)");
+  return {
+    position: "relative",
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    color: "white",
+    // border: '1px solid white',
+    boxShadow: "0 0 8px rgba(255, 255, 255, 0.5)", // Heavier white hue
+    textTransform: "none",
+    fontSize: 16,
+    height: md ? 48 : 40, // Match the TextField height
+    width: md ? "75%" : "85%", // Match the TextField width
+    transition: "0.3s ease-in-out",
+    "&:hover": {
+      backgroundColor: alpha("#7000FF", 0.8), // Slight background on hover
+      color: "#f9f7f7",
+      transform: "scale(1.05)",
+    },
+    "& .MuiButton-endIcon": {
+      position: "absolute",
+      right: 8,
+      // Circle background for the icon
+      backgroundColor: "black",
+      borderRadius: "50%",
+      width: md ? 36 : 30,
+      height: md ? 36 : 30,
+      color: "FFF",
+      ".MuiSvgIcon-root": {
+        // Position the icon in the center of the circle
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+      },
+    },
+  };
 });
 
 export default SignUpButton;
diff --git a/src/views-desktop/register.tsx b/src/views-desktop/register.tsx
@@ -387,8 +387,8 @@ function Register() {
                 color: "#a3a3a3",
                 fontSize: 12,
                 marginTop: "1%",
-                fontWeight: "700",
-                alignContent: "end",
+                fontWeight: 700,
+                // textAlign: "center", // Center the text
                 width: "100%",
               }}
             >
@@ -403,28 +403,35 @@ function Register() {
                 // Register(username, password, biometric, navigate);
                 // navigate('/home-desktop')
               }}
-              sx={{ marginTop: "5%", width: "100%" }}
-              endIcon={<ArrowForward style={{ color: "#FFF" }} />}
+              sx={{ marginTop: "5%", width: "100%", bgcolor: "#7000FF" }}
+              // endIcon={<ArrowForward style={{ color: "#FFF" }} />}
               onKeyDown={(e) => {
                 if (e.key === "Enter") {
                   handleCreateWallet();
                 }
               }}
             >
               <mui.Typography sx={{ fontSize: "1.2rem", fontWeight: 700 }}>
-                {t("signup.CTAButton")}
+                {/* {t("signup.CTAButton")} */}
+                Create Account
               </mui.Typography>
             </SignUpButton>
 
             <mui.Box
-              sx={{ display: "flex", flexDirection: "row", marginTop: "2%" }}
+              sx={{
+                display: "flex",
+                flexDirection: "row",
+                marginTop: "2%",
+                marginBottom: "20px",
+              }}
             >
               <mui.Typography
                 sx={{ color: "#a3a3a3", fontSize: 12, fontWeight: "700" }}
               >
                 {" "}
                 {t("signup.terms.part1")}
               </mui.Typography>
+
               <mui.Typography
                 sx={{
                   color: "#a3a3a3",
@@ -472,19 +479,23 @@ function Register() {
             sx={{
               display: "flex",
               flexDirection: "row",
-              marginTop: "5%",
-              width: md ? "75%" : "85%",
+              marginTop: "20px",
+              width: "80%",
               alignItems: "center",
-              justifyContent: "space-between",
+              justifyContent: "center",
+              gap: "50px",
+              margin: "0 auto",
+              marginBottom: "20px",
             }}
           >
             <mui.Typography
               sx={{
                 color: "#a3a3a3",
                 fontSize: 18,
-                fontWeight: "700",
+                fontWeight: "500",
                 wordWrap: "break-word",
-                alignContent: "end",
+                display: "flex",
+                alignItems: "center",
               }}
             >
               {t("signup.access")}
@@ -504,15 +515,16 @@ function Register() {
                 navigate("/recovery");
               }}
             >
-              <BodyText
+              <mui.Typography
                 sx={{
-                  fontWeight: "700",
+                  fontWeight: 300,
+                  fontSize: "18px",
                   wordWrap: "break-word",
                   textTransform: "none",
                 }}
               >
                 {t("signup.recover")}
-              </BodyText>
+              </mui.Typography>
             </mui.Button>
           </mui.Box>
 
@@ -521,18 +533,21 @@ function Register() {
               display: "flex",
               flexDirection: "row",
               marginTop: "5%",
-              width: md ? "75%" : "85%",
+              width: "80%",
               alignItems: "center",
-              justifyContent: "space-between",
+              justifyContent: "center",
+              margin: "0 auto",
+              gap: "50px",
+              // paddingX: "30px",
             }}
           >
             <mui.Typography
               sx={{
                 color: "#a3a3a3",
                 fontSize: 18,
-                fontWeight: "700",
-                wordWrap: "break-word",
-                alignContent: "end",
+                fontWeight: "500",
+                // wordWrap: "break-word",
+                alignContent: "center",
               }}
             >
               Want to import an account ?
@@ -551,15 +566,16 @@ function Register() {
                 navigate("/import");
               }}
             >
-              <BodyText
+              <mui.Typography
                 sx={{
-                  fontWeight: "700",
+                  fontWeight: 300,
+                  fontSize: "18px",
                   wordWrap: "break-word",
                   textTransform: "none",
                 }}
               >
                 Import
-              </BodyText>
+              </mui.Typography>
             </mui.Button>
           </mui.Box>
         </mui.Box>

diff --git a/src/views-desktop/seedphrase.tsx b/src/views-desktop/seedphrase.tsx
@@ -104,8 +104,8 @@ const SeedPhrase = () => {
           alignSelf: "center",
           bgcolor: "#1E1D1D",
           borderRadius: "10px",
-          width: "85%",
-          padding: "5%",
+          width: "80%",
+          padding: "50px",
           justifyContent: "center",
           mb: "1%",
           alignItems: "center",
@@ -176,6 +176,7 @@ const SeedPhrase = () => {
             padding: "8px", // #7000FF
             color: "#090909",
             "&:hover": { bgcolor: mui.alpha("#00FFAA", 0.8) },
+            marginRight: "10px",
           }}
         >
           <ContentCopyIcon fontSize="inherit" />