From 632891841063b35833466679960273a0e158dbd4 Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Wed, 10 Jan 2024 15:28:25 +0800
Subject: [PATCH] chore: continue with refactors

---
 src/components/contact-form/index.module.scss |  4 +
 src/components/contact-form/index.tsx         |  4 +-
 src/components/nav/index.module.scss          |  1 +
 src/components/section/index.module.scss      |  2 +-
 .../selection-tab/index.module.scss           |  4 +-
 .../signature-card/index.module.scss          | 66 ++++++++++++++
 src/components/signature-card/index.tsx       | 86 +++----------------
 src/components/talk-modal/index.module.scss   |  7 ++
 src/components/talk-modal/index.tsx           |  7 +-
 src/pages/blog/index.tsx                      |  2 +-
 src/screens/about/index.module.scss           |  2 +-
 src/screens/contact/index.module.scss         |  4 +-
 .../components/network_info/index.module.scss |  6 ++
 src/screens/products/index.module.scss        | 25 +-----
 .../components/search_bar/index.module.scss   |  3 +-
 .../networks/components/search_bar/index.tsx  |  4 +-
 src/styles/_colors.scss                       |  4 +
 17 files changed, 116 insertions(+), 115 deletions(-)
 create mode 100644 src/components/signature-card/index.module.scss

diff --git a/src/components/contact-form/index.module.scss b/src/components/contact-form/index.module.scss
index 9ef78c3c..c63e0b43 100644
--- a/src/components/contact-form/index.module.scss
+++ b/src/components/contact-form/index.module.scss
@@ -15,3 +15,7 @@
     padding: 24px;
   }
 }
+
+.select {
+  color: $color-grey-2;
+}
diff --git a/src/components/contact-form/index.tsx b/src/components/contact-form/index.tsx
index 5c3b2c1e..ff382f73 100644
--- a/src/components/contact-form/index.tsx
+++ b/src/components/contact-form/index.tsx
@@ -142,9 +142,7 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
                 onChange={handleInputChange}
                 renderValue={(selected) => {
                   if (selected.length === 0) {
-                    return (
-                      <span style={{ color: "#878787" }}>{t("select")}</span>
-                    );
+                    return <span className={styles.select}>{t("select")}</span>;
                   }
 
                   return selected;
diff --git a/src/components/nav/index.module.scss b/src/components/nav/index.module.scss
index 0f5f912a..0df08f1e 100644
--- a/src/components/nav/index.module.scss
+++ b/src/components/nav/index.module.scss
@@ -44,6 +44,7 @@
   @include up-laptop {
     left: 50vw;
     margin: auto;
+    padding: 0;
     top: 30px;
     transform: translate(-50%, -50%);
     z-index: 2;
diff --git a/src/components/section/index.module.scss b/src/components/section/index.module.scss
index 4566ac45..013053bc 100644
--- a/src/components/section/index.module.scss
+++ b/src/components/section/index.module.scss
@@ -11,7 +11,7 @@
 }
 
 .tr1 {
-  color: #ee3131;
+  color: $color-red-unnamed;
   display: inline;
   font-size: 40px;
   font-weight: 590;
diff --git a/src/components/selection-tab/index.module.scss b/src/components/selection-tab/index.module.scss
index 89302845..11645a78 100644
--- a/src/components/selection-tab/index.module.scss
+++ b/src/components/selection-tab/index.module.scss
@@ -27,7 +27,7 @@
   text-transform: none;
 
   &:global(.Mui-disabled) {
-    box-shadow: 4px 8px 24px 0px rgba(42, 34, 194, 0.16);
+    box-shadow: 4px 8px 24px 0 rgba(42, 34, 194, 0.16);
     color: #fff;
     opacity: 0.5;
   }
@@ -35,7 +35,7 @@
   &:global(.Mui-hover) {
     background: linear-gradient(175.41deg, #623df5 11.57%, #362187 173.5%),
       linear-gradient(0deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
-    box-shadow: 4px 8px 24px 0px rgba(42, 34, 194, 0.16);
+    box-shadow: 4px 8px 24px 0 rgba(42, 34, 194, 0.16);
   }
 
   &:global(.Mui-selected) {
diff --git a/src/components/signature-card/index.module.scss b/src/components/signature-card/index.module.scss
new file mode 100644
index 00000000..928109c1
--- /dev/null
+++ b/src/components/signature-card/index.module.scss
@@ -0,0 +1,66 @@
+@import "src/styles/sass.scss";
+
+.gridContent {
+  align-items: center;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 4px 8px 24px 0 rgba(90, 117, 255, 0.24);
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  position: relative;
+}
+
+.title {
+  color: $color-forbole-blue-1;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 590;
+  letter-spacing: -0.8px;
+  line-height: normal;
+  margin-bottom: 8px;
+  text-shadow: 0 4px 24px rgba(2, 38, 225, 0.24);
+  white-space: nowrap;
+}
+
+.desc {
+  color: $color-forbole-blue-1;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: -0.216px;
+  line-height: 16px;
+  text-wrap: wrap;
+}
+
+.usage {
+  color: $color-red-unnamed;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 590;
+  letter-spacing: -0.408px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.activeSection {
+  align-items: center;
+  background: #fff;
+  border: 1px solid var(--gradient-fb-red-gradient-01, #ee3131);
+  border-radius: 28.241px;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  justify-content: center;
+  padding: 2px 6px;
+  position: absolute;
+  right: 0;
+  top: -14px;
+}
+
+.descContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}
diff --git a/src/components/signature-card/index.tsx b/src/components/signature-card/index.tsx
index 74f1beb4..2b8c3317 100644
--- a/src/components/signature-card/index.tsx
+++ b/src/components/signature-card/index.tsx
@@ -1,7 +1,9 @@
-import { Grid, Stack, Typography } from "@mui/material";
+import { Grid } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import { useMemo } from "react";
 
+import * as styles from "./index.module.scss";
+
 function SignatureCard() {
   const { t } = useTranslation("developer_tools");
 
@@ -34,91 +36,27 @@ function SignatureCard() {
     >
       {data.map((d, k) => (
         <Grid item key={k} laptop={4} mobile={12}>
-          <Stack
-            sx={{
-              alignItems: "center",
-              background: "#FFF",
-              borderRadius: "16px",
-              boxShadow: "4px 8px 24px 0px rgba(90, 117, 255, 0.24)",
-              p: "12px 16px",
-              position: "relative",
-            }}
-          >
+          <div className={styles.gridContent}>
             <div style={{ width: "100%" }}>
-              <Typography
-                sx={{
-                  color: "#202A43",
-                  fontSize: "18px",
-                  fontStyle: "normal",
-                  fontWeight: "590",
-                  letterSpacing: "-0.8px",
-                  lineHeight: "normal",
-                  mb: "8px",
-                  textShadow: "0px 4px 24px rgba(2, 38, 225, 0.24)",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                {d.title}
-              </Typography>
-              <Stack
-                sx={{ alignItems: "center", flexDirection: "row", gap: "5px" }}
-              >
+              <p className={styles.title}>{d.title}</p>
+              <div className={styles.descContainer}>
                 <img
                   alt=""
                   src="/images/assets/25.svg"
                   style={{ height: "40px", width: "20px" }}
                 />
                 <div>
-                  <Typography
-                    sx={{
-                      color: "#202A43",
-                      fontSize: "12px",
-                      fontStyle: "normal",
-                      fontWeight: "400",
-                      letterSpacing: "-0.216px",
-                      lineHeight: "16px",
-                      textWrap: "wrap",
-                    }}
-                  >
-                    {d.desc}
-                  </Typography>
+                  <p className={styles.desc}>{d.desc}</p>
                 </div>
-              </Stack>
+              </div>
             </div>
             {d.active && (
-              <Stack
-                sx={{
-                  alignItems: "center",
-                  background: "#FFF",
-                  border:
-                    "1px solid var(--gradient-fb-red-gradient-01, #EE3131)",
-                  borderRadius: "28.241px",
-                  flexDirection: "row",
-                  gap: "4px",
-                  justifyContent: "center",
-                  padding: "2px 6px",
-                  position: "absolute",
-                  right: "0",
-                  top: "-14px",
-                }}
-              >
+              <div className={styles.activeSection}>
                 <img alt="√" src="/images/assets/26.svg" />
-                <Typography
-                  sx={{
-                    color: "#EE3131",
-                    fontSize: "12px",
-                    fontStyle: "normal",
-                    fontWeight: "590",
-                    letterSpacing: "-0.408px",
-                    lineHeight: "16px",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  {t("unlimited_usage")}
-                </Typography>
-              </Stack>
+                <p className={styles.usage}>{t("unlimited_usage")}</p>
+              </div>
             )}
-          </Stack>
+          </div>
         </Grid>
       ))}
     </Grid>
diff --git a/src/components/talk-modal/index.module.scss b/src/components/talk-modal/index.module.scss
index ab7ebc1a..d095cc0e 100644
--- a/src/components/talk-modal/index.module.scss
+++ b/src/components/talk-modal/index.module.scss
@@ -57,3 +57,10 @@
   flex-direction: row;
   justify-content: space-between;
 }
+
+.input {
+  color: $color-grey-2;
+  font-size: 16px;
+  line-height: 30px;
+  padding: 12px;
+}
diff --git a/src/components/talk-modal/index.tsx b/src/components/talk-modal/index.tsx
index 7545cc11..e91896fd 100644
--- a/src/components/talk-modal/index.tsx
+++ b/src/components/talk-modal/index.tsx
@@ -228,6 +228,7 @@ const TalkModal = ({
                 }}
               >
                 <Input
+                  className={styles.input}
                   disableUnderline
                   disabled={!inputs.Other}
                   fullWidth
@@ -235,12 +236,6 @@ const TalkModal = ({
                   onInput={handleInputChange}
                   placeholder={t("item_5")}
                   ref={inputRef}
-                  sx={{
-                    color: "#878787",
-                    fontSize: "16px",
-                    lineHeight: "30px",
-                    p: "12px",
-                  }}
                   value={inputs.specify}
                 />
               </ListItem>
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 596bcde6..f5956a96 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -48,7 +48,7 @@ export async function getServerSideProps(context: {
     );
 
     formattedTags = removeInternalTags(tags).map((tag) => Tag.fromJson(tag));
-    meta = posts.meta;
+    ({ meta } = posts);
   } catch (err) {
     error = true;
     // eslint-disable-next-line no-console
diff --git a/src/screens/about/index.module.scss b/src/screens/about/index.module.scss
index b64d4342..f6967818 100644
--- a/src/screens/about/index.module.scss
+++ b/src/screens/about/index.module.scss
@@ -212,7 +212,7 @@ $card-desc-shadow:
 }
 
 .tr1 {
-  color: #ee3131;
+  color: $color-red-unnamed;
   display: inline;
   font-size: 40px;
   font-weight: 590;
diff --git a/src/screens/contact/index.module.scss b/src/screens/contact/index.module.scss
index fa615bf4..ace3fdb1 100644
--- a/src/screens/contact/index.module.scss
+++ b/src/screens/contact/index.module.scss
@@ -87,7 +87,7 @@ $form-shadow:
   padding-top: 0;
 
   &:global(.Mui-checked) {
-    color: #ee3131;
+    color: $color-red-unnamed;
   }
 }
 
@@ -119,7 +119,7 @@ $form-shadow:
   padding-top: 0;
 
   &:global(.Mui-checked) {
-    color: #ee3131;
+    color: $color-red-unnamed;
   }
 }
 
diff --git a/src/screens/network_guides/components/network_info/index.module.scss b/src/screens/network_guides/components/network_info/index.module.scss
index 15533116..f8560503 100644
--- a/src/screens/network_guides/components/network_info/index.module.scss
+++ b/src/screens/network_guides/components/network_info/index.module.scss
@@ -85,6 +85,10 @@ $card-shadow:
     border: 8px solid #fff !important;
     border-radius: 50%;
   }
+
+  @include down-tablet {
+    display: none;
+  }
 }
 
 .post {
@@ -147,6 +151,8 @@ $card-shadow:
   padding-left: spacing(2);
 
   @include down-laptop {
+    margin-right: spacing(2);
+    margin-top: spacing(2);
     padding-left: spacing(1);
   }
 }
diff --git a/src/screens/products/index.module.scss b/src/screens/products/index.module.scss
index aa9e4f5a..299efca5 100644
--- a/src/screens/products/index.module.scss
+++ b/src/screens/products/index.module.scss
@@ -81,7 +81,7 @@
 }
 
 .tr1 {
-  color: #ee3131;
+  color: $color-red-unnamed;
   text-shadow: 0 0 20px #fff;
 
   @include down-laptop {
@@ -144,8 +144,9 @@
   }
 }
 
-.tr3 {
-  color: #ee3131;
+.tr3,
+.tr5 {
+  color: $color-red-unnamed;
   display: inline;
   text-shadow: 0 0 20px #fff;
 
@@ -254,24 +255,6 @@
   }
 }
 
-.tr5 {
-  color: #ee3131;
-  display: inline;
-  text-shadow: 0 0 20px #fff;
-
-  @include down-laptop {
-    font-size: 24px;
-    font-weight: 700;
-    margin-bottom: 16px;
-  }
-
-  @include up-laptop {
-    font-size: 40px;
-    font-weight: 590;
-    margin-bottom: 40px;
-  }
-}
-
 .businessesStack {
   align-items: center;
   display: flex;
diff --git a/src/screens/staking/components/networks/components/search_bar/index.module.scss b/src/screens/staking/components/networks/components/search_bar/index.module.scss
index 123d7507..59dfc161 100644
--- a/src/screens/staking/components/networks/components/search_bar/index.module.scss
+++ b/src/screens/staking/components/networks/components/search_bar/index.module.scss
@@ -109,12 +109,11 @@ body .listItem {
 
 body .paper {
   backdrop-filter: blur(24px);
-  background-color: rgba(2, 38, 225, 0.9);
   border-radius: spacing(1.5);
   margin: spacing(2) 0;
 }
 
-body .poper {
+body .popper {
   z-index: 2001 !important;
 
   :global(.MuiAutocomplete-listbox) {
diff --git a/src/screens/staking/components/networks/components/search_bar/index.tsx b/src/screens/staking/components/networks/components/search_bar/index.tsx
index 77799c45..5371575c 100644
--- a/src/screens/staking/components/networks/components/search_bar/index.tsx
+++ b/src/screens/staking/components/networks/components/search_bar/index.tsx
@@ -136,12 +136,12 @@ const SearchBar = ({ sortedNetworks }: Props) => {
   );
 
   const RenderInput: StyledAutocompleteProps["renderInput"] = useCallback(
-    ({ className, InputProps, ...params }) => (
+    ({ InputProps, ...params }) => (
       <TextField
         {...params}
         // eslint-disable-next-line react-hooks/rules-of-hooks
         InputProps={useSearch(InputProps)}
-        className={[styles.textField, className || ""].join(" ")}
+        className={styles.textField}
         placeholder={t("searchNetwork")}
       />
     ),
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index 8c18eea7..c17f0731 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -24,6 +24,10 @@ $color-icon-grey: #afafaf;
 $color-light-grey-2: #c2c2c2;
 $color-white: #fff;
 
+// Others
+
+$color-red-unnamed: #ee3131;
+
 // Gradients
 
 $gradient-unnamed-1: linear-gradient(286.17deg, #d431ee 0%, $color-pink-1 100%);