refactor components

XLabs · Nov 23, 2023 · 3626e2b · 3626e2b
1 parent abad4a8
commit 3626e2b
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 114 deletions.
diff --git a/apps/connect/src/components/atoms/Background.tsx b/apps/connect/src/components/atoms/Background.tsx
@@ -1,5 +1,8 @@
-import { Typography } from "@mui/material";
 import styled from "@mui/material/styles/styled";
+import Glow from "./Glow";
+import Elipsis from "./Elipsis";
+import PoweredBy from "./PoweredBy";
+import Version from "./Version";
 
 const Container = styled("div")(() => ({
   display: "flex",
@@ -9,91 +12,10 @@ const Container = styled("div")(() => ({
   overflow: "hidden"
 }));
 
-type GlowProps = {
-  position: {
-    top?: string;
-    left?: string;
-    bottom?: string;
-    right?: string;
-  };
-  size: {
-    width?: string;
-    height?: string;
-  };
-  background: string;
-};
-
-const Glow = styled("div")<GlowProps>(
-  ({
-    position: { top, left, bottom, right } = {},
-    size: { width, height } = {},
-    background,
-  }) => ({
-    position: "absolute",
-    borderRadius: width,
-    background,
-    backdropFilter: "blur(12px)",
-    width,
-    height,
-    flexShrink: 0,
-    zIndex: -1,
-    top,
-    bottom,
-    left,
-    right,
-  })
-);
-
-type ElipsisProps = {
-  width: number;
-  height: number;
-  marginTop: number;
-  marginLeft: number;
-};
-
-const Elipsis = styled("div")<ElipsisProps>(
-  ({ width, height, marginTop, marginLeft }) => ({
-    width,
-    height,
-    borderColor: "rgb(255, 255, 255, 0.5)",
-    borderWidth: "0.5px",
-    borderStyle: "solid",
-    borderRadius: "50%",
-    marginTop: marginTop,
-    marginLeft: marginLeft,
-  })
-);
-
-type FooterProps = {
-    left?: string;
-    right?: string;
-};
-
-const Footer = styled(Typography)<FooterProps>(({ left, right }) => ({
-  position: "absolute",
-  color: "#C9CAE8",
-  fontFamily: "Poppins",
-  fontSize: "14px",
-  fontStyle: "normal",
-  fontWeight: "600",
-  lineHeight: "18.59px",
-  left,
-  right,
-  bottom: "28px",
-}));
-
-function Version() {
-  return <Footer left="120px">v{import.meta.env.VITE_APP_VERSION || '0.0.0'}</Footer>
-}
-
-function PoweredBy() {
-  return (<Footer right="120px">Powered by xLabs</Footer>)
-}
-
 export default function Background({
   children,
 }: {
-  children: React.ReactNode;
+  children: JSX.Element;
 }) {
   return (
     <Container>

diff --git a/apps/connect/src/components/atoms/Elipsis.tsx b/apps/connect/src/components/atoms/Elipsis.tsx
@@ -0,0 +1,23 @@
+import styled from "@mui/material/styles/styled";
+
+export type ElipsisProps = {
+  width: number;
+  height: number;
+  marginTop: number;
+  marginLeft: number;
+};
+
+const Elipsis = styled("div")<ElipsisProps>(
+  ({ width, height, marginTop, marginLeft }) => ({
+    width,
+    height,
+    borderColor: "rgb(255, 255, 255, 0.5)",
+    borderWidth: "0.5px",
+    borderStyle: "solid",
+    borderRadius: "50%",
+    marginTop: marginTop,
+    marginLeft: marginLeft,
+  })
+);
+
+export default Elipsis;
diff --git a/apps/connect/src/components/atoms/Footer.tsx b/apps/connect/src/components/atoms/Footer.tsx
@@ -1,39 +1,30 @@
 import Typography from "@mui/material/Typography";
 import styled from "@mui/material/styles/styled";
 
-const FooterContainer = styled("footer")(({ theme }) => ({
-  position: "relative",
-  color: "#ffffff",
-  maxWidth: 1100,
-  margin: "0px auto",
-  [theme.breakpoints.up("md")]: {
-    paddingBottom: theme.spacing(12),
-  },
-}));
+type FooterProps = {
+  left?: string;
+  right?: string;
+};
 
-const FooterFlex = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  marginLeft: theme.spacing(3.5),
-  marginRight: theme.spacing(3.5),
-  borderTop: "1px solid #585587",
-  paddingTop: theme.spacing(2),
+const Footer = styled(Typography)<FooterProps>(({ theme, left, right }) => ({
+  [theme.breakpoints.down("md")]: {
+    display: "flex",
+    flexGrow: 1,
+    justifyContent: "center",
+    paddingBottom: theme.spacing(2),
+  },
   [theme.breakpoints.up("md")]: {
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "unset",
+    position: "absolute",
+    left,
+    right,
+    bottom: "28px",  
   },
+  color: "#C9CAE8",
+  fontFamily: "Poppins",
+  fontSize: "14px",
+  fontStyle: "normal",
+  fontWeight: "600",
+  lineHeight: "18.59px",
 }));
 
-export default function Footer() {
-  return (
-    <FooterContainer>
-      <FooterFlex>
-        <Typography>
-          v{import.meta.env.VITE_APP_VERSION} - {import.meta.env.VITE_APP_CLUSTER}
-        </Typography>
-      </FooterFlex>
-    </FooterContainer>
-  );
-}
+export default Footer;
diff --git a/apps/connect/src/components/atoms/Glow.tsx b/apps/connect/src/components/atoms/Glow.tsx
@@ -0,0 +1,38 @@
+import styled from "@mui/material/styles/styled";
+
+export type GlowProps = {
+  position: {
+    top?: string;
+    left?: string;
+    bottom?: string;
+    right?: string;
+  };
+  size: {
+    width?: string;
+    height?: string;
+  };
+  background: string;
+};
+
+const Glow = styled("div")<GlowProps>(
+  ({
+    position: { top, left, bottom, right } = {},
+    size: { width, height } = {},
+    background,
+  }) => ({
+    position: "absolute",
+    borderRadius: width,
+    background,
+    backdropFilter: "blur(12px)",
+    width,
+    height,
+    flexShrink: 0,
+    zIndex: -1,
+    top,
+    bottom,
+    left,
+    right,
+  })
+);
+
+export default Glow;
diff --git a/apps/connect/src/components/atoms/PoweredBy.tsx b/apps/connect/src/components/atoms/PoweredBy.tsx
@@ -0,0 +1,6 @@
+import Footer from "./Footer"
+
+export default function PoweredBy() {
+    return <Footer right="120px">Powered by xLabs</Footer>
+}
+
diff --git a/apps/connect/src/components/atoms/Version.tsx b/apps/connect/src/components/atoms/Version.tsx
@@ -0,0 +1,7 @@
+import Footer from "./Footer";
+
+export default function Version() {
+  return (
+    <Footer left="120px">v{import.meta.env.VITE_APP_VERSION || "0.0.0"}</Footer>
+  );
+}