Merge branch 'main' into staking

forbole · Jan 9, 2024 · 2c614e7 · 2c614e7
2 parents 599286d + e042f61
commit 2c614e7
Show file tree

Hide file tree

Showing 18 changed files with 175 additions and 175 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -24,10 +24,13 @@ module.exports = {
 
     "scss/at-import-no-partial-leading-underscore": null,
     "scss/at-import-partial-extension": null,
+    "scss/at-mixin-argumentless-call-parentheses": "never",
     "scss/dollar-variable-colon-space-after": null,
     "scss/dollar-variable-empty-line-before": null,
     "scss/function-no-unknown": null,
     "scss/no-duplicate-dollar-variables": true,
+    "scss/no-duplicate-mixins": true,
+    "scss/selector-no-redundant-nesting-selector": true,
 
     "selector-class-pattern": null,
     "selector-id-pattern": null,

diff --git a/src/components/carousel/index.module.scss b/src/components/carousel/index.module.scss
@@ -7,10 +7,6 @@ $card-background: linear-gradient(
   #fff 100%
 );
 
-$card-shadow:
-  0 10px 32px -4px rgba(96, 60, 238, 0.2),
-  0 6px 14px -6px rgba(96, 60, 238, 0.28);
-
 $avater-shadow:
   0 10px 32px -4px rgba(96, 60, 238, 0.5),
   0 6px 14px -6px rgba(96, 60, 238, 0.28);
@@ -69,7 +65,7 @@ $avater-shadow:
   align-items: flex-start;
   background: $card-background;
   border-radius: 24px;
-  box-shadow: $card-shadow;
+  box-shadow: $box-shadow-variant-2;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

diff --git a/src/components/contact-form/index.module.scss b/src/components/contact-form/index.module.scss
@@ -0,0 +1,17 @@
+@import "src/styles/sass.scss";
+
+.wrapper {
+  background: $gradient-unnamed-3;
+  border-radius: 24px;
+  box-shadow: $box-shadow-variant-1;
+  color: $color-forbole-blue-1;
+  gap: 32px;
+  margin: 40px auto;
+  max-width: 776px;
+  padding: 40px;
+
+  @include down-laptop {
+    gap: 24px;
+    padding: 24px;
+  }
+}
diff --git a/src/components/contact-form/index.tsx b/src/components/contact-form/index.tsx
@@ -13,6 +13,7 @@ import { forwardRef } from "react";
 
 import CtaButton from "../cta-button";
 import FormInput from "../form_input";
+import * as styles from "./index.module.scss";
 
 type Props = {
   canSubmit: boolean;
@@ -65,26 +66,7 @@ const ContactFrom = forwardRef<HTMLDivElement, Props>(
     ];
 
     return (
-      <Stack
-        component="div"
-        ref={ref}
-        sx={{
-          background:
-            "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.64) 64.58%, #FFF 100%)",
-          borderRadius: "24px",
-          boxShadow:
-            "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
-          color: "#202A43",
-          gap: "32px",
-          margin: "40px auto",
-          maxWidth: "776px",
-          padding: "40px",
-          [theme.breakpoints.down("laptop")]: {
-            gap: "24px",
-            padding: "24px",
-          },
-        }}
-      >
+      <Stack className={styles.wrapper} component="div" ref={ref}>
         <Grid
           columnSpacing={theme.spacing(4)}
           container

diff --git a/src/components/intro_card/index.module.scss b/src/components/intro_card/index.module.scss
@@ -3,9 +3,7 @@
 .wrapper {
   background: #fff;
   border-radius: 24px;
-  box-shadow:
-    0 10px 32px -4px rgba(96, 60, 238, 0.1),
-    0 6px 14px -6px rgba(96, 60, 238, 0.28);
+  box-shadow: $box-shadow-variant-2;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

diff --git a/src/components/success-modal/index.module.scss b/src/components/success-modal/index.module.scss
@@ -2,13 +2,37 @@
 
 .image {
   border-radius: 24px;
-  box-shadow:
-    0 10px 32px -4px rgba(96, 60, 238, 0.1),
-    0 6px 14px -6px rgba(96, 60, 238, 0.28);
+  box-shadow: $box-shadow-variant-2;
   display: flex;
   overflow: hidden;
 
   @include down-laptop {
     border-radius: 16px;
   }
 }
+
+.wrapper {
+  background: $gradient-unnamed-3;
+  border-radius: 24px;
+  box-shadow: $box-shadow-variant-1;
+  color: $color-forbole-blue-1;
+  gap: 40px;
+  margin: 0 auto;
+  padding: 64px;
+  width: 823px;
+
+  &.matches {
+    gap: 24px;
+  }
+
+  &.fixed {
+    margin: 164px auto;
+  }
+
+  @include down-laptop {
+    gap: 24px;
+    margin-top: 104px;
+    padding: 24px;
+    width: 343px;
+  }
+}
diff --git a/src/components/success-modal/index.tsx b/src/components/success-modal/index.tsx
@@ -27,25 +27,12 @@ const Alert = forwardRef<HTMLDivElement, Omit<Props, "open">>(
 
     return (
       <Stack
+        className={[
+          styles.wrapper,
+          fixed ? styles.fixed : "",
+          matches ? styles.matches : "",
+        ].join(" ")}
         ref={ref}
-        sx={{
-          background:
-            "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.64) 64.58%, #FFF 100%)",
-          borderRadius: "24px",
-          boxShadow:
-            "0px 10px 32px -4px rgba(2, 38, 225, 0.10), 0px 6px 14px -6px rgba(2, 38, 225, 0.12)",
-          color: "#202A43",
-          gap: matches ? "24px" : "40px",
-          margin: fixed ? "164px auto" : "0 auto",
-          padding: "64px",
-          [theme.breakpoints.down("laptop")]: {
-            gap: "24px",
-            mt: "104px",
-            padding: "24px",
-            width: "343px",
-          },
-          width: "823px",
-        }}
       >
         <Stack
           alignItems="center"

diff --git a/src/components/talk-modal/index.module.scss b/src/components/talk-modal/index.module.scss
@@ -0,0 +1,59 @@
+@import "src/styles/sass.scss";
+
+.title {
+  font-size: 32px;
+  font-weight: 590;
+  margin-bottom: 8px;
+
+  @include down-laptop {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+}
+
+.desc {
+  font-size: 16px;
+  font-weight: 300;
+  margin-bottom: 40px;
+}
+
+.start,
+.telegram,
+.email,
+.company,
+.name {
+  font-size: 16px;
+  font-weight: 590;
+}
+
+.start {
+  margin-bottom: 18px;
+}
+
+.wrapper {
+  background: $gradient-unnamed-3;
+  border-radius: 24px;
+  box-shadow: $box-shadow-variant-1;
+  color: $color-forbole-blue-1;
+  gap: 40px;
+  margin: 164px auto;
+  padding: 64px;
+  width: 1000px;
+
+  &.staking {
+    margin-top: 24px;
+  }
+
+  @include down-laptop {
+    gap: 24px;
+    margin-top: 104px;
+    padding: 24px;
+    width: 343px;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}