refactor : refactor entire code according to rule #82

AgainIoT · Oct 5, 2023 · be76558 · be76558
1 parent 8d305de
commit be76558
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 89 deletions.
diff --git a/src/components/main/Footer.js b/src/components/main/Footer.js
@@ -1,7 +1,8 @@
-import { COLOR } from "../../styles/color.js";
 import { styled } from "styled-components";
+import { COLOR } from "../../styles/color.js";
 import LOGO from "../../assets/images/title.svg";
 import GitHubIcon from "@mui/icons-material/GitHub";
+
 export default function Footer() {
   return (
     <StFooter>
@@ -32,22 +33,21 @@ export default function Footer() {
 }
 
 const StFooter = styled.div`
-  height: 15rem;
-  background-color: ${COLOR.MAIN_WHITE};
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  flex-direction: row;
+  height: 15rem;
+  background-color: ${COLOR.MAIN_WHITE};
 `;
 
 const LogoDiv = styled.div`
-  height: 100%;
-  width: 33%;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 33%;
+  height: 100%;
   padding: 1rem 0rem 1rem 0rem;
-  /* border: 1px solid green; */
 `;
 
 const LogoImg = styled.img`
@@ -56,42 +56,39 @@ const LogoImg = styled.img`
 `;
 
 const InfoDiv = styled.div`
-  height: 100%;
-  width: 33%;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  /* border: 1px solid red; */
+  flex-direction: column;
+  width: 33%;
+  height: 100%;
   padding-left: 5rem;
   padding-top: 1rem;
 `;
 
 const InfoP = styled.p`
-  /* border: 1px solid aqua; */
   justify-content: center;
   align-content: center;
   font-size: 1.2rem;
 `;
 
 const VlineDiv = styled.div`
-  border-left: thin solid #c9c9c9;
   height: 10rem;
+  border-left: thin solid #c9c9c9;
 `;
 const GithubDiv = styled.div`
-  height: 100%;
-  width: 33%;
-  /* border: 1px solid blue; */
   display: flex;
-  align-items: center;
   justify-content: space-evenly;
+  align-items: center;
+  width: 33%;
+  height: 100%;
 `;
 
 const DocsP = styled.p`
   font-family: "Inter", sans-serif;
 `;
 
 const GithubIcon = styled(GitHubIcon)`
+  margin-left: 2rem;
   color: ${COLOR.MAIN_BLACK};
   font-size: "3.3rem";
-  margin-left: 2rem;
 `;
diff --git a/src/components/main/Step1.js b/src/components/main/Step1.js
@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
-import { Typography } from "@mui/material";
 import { COLOR } from "../../styles/color.js";
+import { Typography } from "@mui/material";
 import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
@@ -82,67 +82,67 @@ const Step1 = () => {
 };
 
 const StStep1 = styled.div`
-  background-color: ${COLOR.MAIN_WHITE};
-  margin: 2rem 0rem 2rem 0rem;
-  padding: 2rem 0rem 6rem 0rem;
-  width: 100%;
-  height: 100%;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 2rem 0rem 6rem 0rem;
+  margin: 2rem 0rem 2rem 0rem;
+  background-color: ${COLOR.MAIN_WHITE};
   gap: 4rem;
 `;
 
 const IntroDiv = styled.div`
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 `;
 
 const TitleTypo = styled(Typography)`
-  text-align: center;
   font-family: "Inter", sans-serif;
   font-size: 3rem;
   font-style: normal;
   font-weight: 900;
+  text-align: center;
   line-height: normal;
 `;
 
 const InfoDiv = styled.div`
   display: flex;
+  justify-content: center;
+  align-items: center;
   flex-direction: row;
   width: 100%;
   height: 100%;
-  justify-content: center;
-  align-items: center;
 `;
 
 const DescTypo = styled(Typography)`
-  text-align: center;
   font-family: "Inter", sans-serif;
   font-size: 2.2rem;
   font-style: normal;
   font-weight: 300;
+  text-align: center;
   line-height: normal;
 `;
 
 const HighlightTypo = styled(Typography)`
-  font-family: "Inter", sans-serif;
   color: ${COLOR.MAIN_BLUE};
+  font-family: "Inter", sans-serif;
   font-size: 2.2rem;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
 `;
 const StepDiv = styled.div`
-  height: 100%;
-  width: 100%;
   display: flex;
-  flex-direction: row;
   justify-content: center;
   align-items: center;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
   gap: 3rem;
 `;
 
@@ -155,34 +155,35 @@ const SetDiv = styled.div`
 
 const EachStepDiv = styled.div`
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
   gap: 1rem;
 `;
 const Circle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 7.5rem;
   height: 7.5rem;
   border-radius: 50%;
   background-color: ${COLOR.MAIN_BACKGROUND};
-  display: flex;
-  align-items: center;
-  justify-content: center;
 `;
 
 const StepNameP = styled.p`
   font-size: 1.2rem;
 `;
+
 const NextImg = styled.img`
   width: 2rem;
   height: 2rem;
   margin-bottom: 3rem;
 `;
 
 const PRIcon = styled.img`
-  color: ${COLOR.MAIN_NAVY};
   width: 3rem;
   height: 3rem;
+  color: ${COLOR.MAIN_NAVY};
 `;
 
 export default Step1;
diff --git a/src/components/main/Step2.js b/src/components/main/Step2.js
@@ -1,5 +1,5 @@
-import { Typography } from "@mui/material";
 import styled from "styled-components";
+import { Typography } from "@mui/material";
 import DeskTop from "../../assets/images/desktop.svg";
 
 //Step2: Component for description on the main page (a brief description of the project)
@@ -23,20 +23,20 @@ const Step2 = () => {
 
 const StStep2 = styled.div`
   display: flex;
-  margin: 5rem 0rem 5rem 0rem ;
   justify-content: center;
   align-items: center;
+  flex-direction: row;
   width: 100%;
   height: 100%;
-  flex-direction: row;
+  margin: 5rem 0rem 5rem 0rem ;
 `;
 
 const ImgDiv = styled.div`
-  width: 50%;
-  height: 100%;
   display: flex;
   justify-content: right;
   align-items: center;
+  width: 50%;
+  height: 100%;
 `;
 
 const DesktopImg = styled.img`
@@ -46,30 +46,30 @@ const DesktopImg = styled.img`
 
 const TextDiv = styled.div`
   display: flex;
-  margin-left: 1rem;
-  flex-direction: column;
   justify-content: center;
+  flex-direction: column;
   width: 50%;
   height: 100%;
+  margin-left: 1rem;
   gap: 1rem;
 `;
 
 const TitleTypo = styled(Typography)`
+  width: 100%;
+  height: fit-content;
   font-size: 3.2rem;
   font-family: "Inter", sans-serif;
   font-weight: 700;
-  width: 100%;
-  height: fit-content;
 `;
 
 const DescTypo = styled(Typography)`
-  text-align: justify;
-  height: fit-content;
   width: 100%;
+  height: fit-content;
   font-size: 2rem;
-  line-height: 2.2rem;
   font-weight: 200;
   font-family: "Inter", sans-serif;
+  text-align: justify;
+  line-height: 2.2rem;
 `;
 
 export default Step2;
diff --git a/src/components/main/Step3.js b/src/components/main/Step3.js
@@ -1,5 +1,5 @@
-import { Typography } from "@mui/material";
 import styled from "styled-components";
+import { Typography } from "@mui/material";
 import LICENSE from "../../assets/images/licenseEx.svg";
 
 //Step3: Component for the bottom description of the main page (license description)
@@ -26,44 +26,44 @@ const SharedAttr = `
 `;
 
 const StStep3 = styled.div`
-  padding: 10rem 0rem 10rem 0rem;
   ${SharedAttr};
+  flex-direction: row;
   width: 100%;
   height: 100%;
-  flex-direction: row;
+  padding: 10rem 0rem 10rem 0rem;
 `;
 
 const TextDiv = styled.div`
   ${SharedAttr};
-  margin-left: 1rem;
   flex-direction: column;
   width: 40%;
   height: 100%;
+  margin-left: 1rem;
   gap: 1rem;
 `;
 
 const TitleTypo = styled(Typography)`
+  width: fit-content;
+  height: fit-content;
   font-size: 3.2rem;
   font-family: "Inter", sans-serif;
   font-weight: 700;
-  width: fit-content;
-  height: fit-content;
 `;
 
 const DescTypo = styled(Typography)`
-  text-align: justify;
-  height: fit-content;
   width: fit-content;
+  height: fit-content;
   font-size: 2rem;
-  line-height: 2.2rem;
   font-weight: 200;
   font-family: "Inter", sans-serif;
+  text-align: justify;
+  line-height: 2.2rem;
 `;
 
 const ImgDiv = styled.div`
+  ${SharedAttr};
   width: 60%;
   height: 100%;
-  ${SharedAttr};
 `;
 
 const LicenseImg = styled.img`