From 84a10bc72fb35671887642817afba6a16c84cf16 Mon Sep 17 00:00:00 2001 From: Ignacio Date: Wed, 10 Jan 2024 00:07:17 +0800 Subject: [PATCH] chore: refactor colors --- .stylelintrc.js | 3 + src/components/carousel/index.module.scss | 6 +- src/components/contact-form/index.module.scss | 17 +++ src/components/contact-form/index.tsx | 22 +--- src/components/intro_card/index.module.scss | 4 +- .../success-modal/index.module.scss | 30 ++++- src/components/success-modal/index.tsx | 23 +--- src/components/talk-modal/index.module.scss | 59 ++++++++++ src/components/talk-modal/index.tsx | 110 +++--------------- .../components/post/index.module.scss | 2 +- src/screens/contact/index.module.scss | 15 +-- src/screens/developer_tools/index.tsx | 30 +++-- src/screens/home/index.module.scss | 2 +- .../components/network_info/index.module.scss | 2 +- src/screens/staking/common.module.scss | 6 +- .../calculate_rewards/index.module.scss | 6 +- .../faq/components/card/index.module.scss | 4 +- src/styles/_colors.scss | 9 ++ 18 files changed, 175 insertions(+), 175 deletions(-) create mode 100644 src/components/contact-form/index.module.scss create mode 100644 src/components/talk-modal/index.module.scss diff --git a/.stylelintrc.js b/.stylelintrc.js index a6217067..8e0d1e86 100644 --- 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 index 0a796063..fb34b039 100644 --- 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 new file mode 100644 index 00000000..9ef78c3c --- /dev/null +++ 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 index 6f66d3c4..5c3b2c1e 100644 --- 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( ]; return ( - + >( return ( { - const theme = useTheme(); const { t } = useTranslation("developer_tools"); const inputRef = useRef(null); @@ -103,51 +100,15 @@ const TalkModal = ({ overflow: "auto", }} > - - - - - {t("form_title")} - +
+
+
{t("form_title")}
- - {t("form_desc")} - - +
{t("form_desc")}
+
{close && ( close?.(false)} @@ -158,21 +119,13 @@ const TalkModal = ({ }} /> )} - - +
+ - +
{t("label_name")} * - +
- - {t("label_company")} - +
{t("label_company")}
 - +
{t("label_email")} * - +
- - {t("label_telegram")} - +
{t("label_telegram")}
 - +
{t("get_start")} * - +
- + ); }; diff --git a/src/screens/blog/components/blog_posts/components/post/index.module.scss b/src/screens/blog/components/blog_posts/components/post/index.module.scss index d4368eed..c20242ab 100644 --- a/src/screens/blog/components/blog_posts/components/post/index.module.scss +++ b/src/screens/blog/components/blog_posts/components/post/index.module.scss @@ -79,7 +79,7 @@ } } - & > span { + > span { width: 100% !important; } } diff --git a/src/screens/contact/index.module.scss b/src/screens/contact/index.module.scss index 2520b911..fa615bf4 100644 --- a/src/screens/contact/index.module.scss +++ b/src/screens/contact/index.module.scss @@ -1,20 +1,13 @@ @import "src/styles/sass.scss"; -$form-background: linear-gradient( - 180deg, - #fff 0%, - rgba(255, 255, 255, 0.64) 64.58%, - #fff 100% -); - $form-shadow: 0 10px 32px -4px rgba(2, 38, 225, 0.1), 0 6px 14px -6px rgba(2, 38, 225, 0.12); .form { - background: $form-background; + background: $gradient-unnamed-3; border-radius: 24px; - box-shadow: $form-shadow; + box-shadow: $box-shadow-variant-1; gap: 40px; margin: 164px auto; padding: 64px; @@ -145,9 +138,7 @@ $form-shadow: .list { border-radius: 8px; - 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; overflow: hidden; padding-bottom: 0; padding-top: 0; diff --git a/src/screens/developer_tools/index.tsx b/src/screens/developer_tools/index.tsx index 7537bf28..8f2aa3d1 100644 --- a/src/screens/developer_tools/index.tsx +++ b/src/screens/developer_tools/index.tsx @@ -1,5 +1,6 @@ import { Container, Grid, Stack, useTheme } from "@mui/material"; import useTranslation from "next-translate/useTranslation"; +import dynamic from "next/dynamic"; import { useRef, useState } from "react"; import CtaButton, { CtaLink } from "@src/components/cta-button"; @@ -11,12 +12,15 @@ import ScrollToTop from "@src/components/scroll_to_top"; import Section from "@src/components/section"; import SignatureCard from "@src/components/signature-card"; import SuccessModal from "@src/components/success-modal"; -import TalkModal from "@src/components/talk-modal"; import { useDelayedIsMobile } from "@src/hooks/delayed_is_mobile"; import useTalkModalForm from "./hooks"; import * as styles from "./index.module.scss"; +const TalkModal = dynamic(() => import("@src/components/talk-modal"), { + ssr: false, +}); + type Props = { setShow: (b: boolean) => void; setSuccess: (b: boolean) => void; @@ -159,17 +163,19 @@ const DeveloperTools = () => { - + {show && ( + + )} div > div { + > div > div { margin: 0 auto; } } 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 9a5ab479..15533116 100644 --- a/src/screens/network_guides/components/network_info/index.module.scss +++ b/src/screens/network_guides/components/network_info/index.module.scss @@ -81,7 +81,7 @@ $card-shadow: } .logoBox { - & > span { + > span { border: 8px solid #fff !important; border-radius: 50%; } diff --git a/src/screens/staking/common.module.scss b/src/screens/staking/common.module.scss index 7a988298..46049864 100644 --- a/src/screens/staking/common.module.scss +++ b/src/screens/staking/common.module.scss @@ -3,7 +3,7 @@ .stakingContent { padding: spacing(5) spacing(3); - & > :global(.h3) { + > :global(.h3) { font-size: spacing(3); font-weight: 700; text-align: center; @@ -12,7 +12,7 @@ font-size: spacing(5); } - & > :global(.h3) { + > :global(.h3) { display: inline; font-size: spacing(3); font-weight: 700; @@ -27,7 +27,7 @@ @include up-laptop { max-width: 1200px; - & > :global(.h3) { + > :global(.h3) { margin: auto; padding-bottom: 5px; width: 65%; diff --git a/src/screens/staking/components/calculate_rewards/index.module.scss b/src/screens/staking/components/calculate_rewards/index.module.scss index 4f960de3..20eccf31 100644 --- a/src/screens/staking/components/calculate_rewards/index.module.scss +++ b/src/screens/staking/components/calculate_rewards/index.module.scss @@ -3,7 +3,7 @@ .wrapper { padding: spacing(5) spacing(3); - & > :global(.h3) { + > :global(.h3) { font-size: spacing(3); font-weight: 700; text-align: center; @@ -12,7 +12,7 @@ font-size: spacing(5); } - & > :global(.h3) { + > :global(.h3) { display: inline; font-size: spacing(3); font-weight: 700; @@ -27,7 +27,7 @@ @include up-laptop { max-width: 1200px; - & > :global(.h3) { + > :global(.h3) { margin: auto; } } diff --git a/src/screens/staking/components/faq/components/card/index.module.scss b/src/screens/staking/components/faq/components/card/index.module.scss index 7a040cf6..2f713082 100644 --- a/src/screens/staking/components/faq/components/card/index.module.scss +++ b/src/screens/staking/components/faq/components/card/index.module.scss @@ -47,13 +47,13 @@ $question-shadow: padding: spacing(3) spacing(5) spacing(2) spacing(3); } - & > :global(.MuiAccordionSummary-expandIconWrapper) { + > :global(.MuiAccordionSummary-expandIconWrapper) { svg { fill: $color-grey-2; } } - & > :global(.Mui-expanded) { + > :global(.Mui-expanded) { h3 { @include gradient-text($gradient-unnamed-1); } diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 3a59449f..5e1f22b5 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -27,9 +27,18 @@ $color-white: #fff; $gradient-unnamed-1: linear-gradient(286.17deg, #d431ee 0%, $color-pink-1 100%); $gradient-unnamed-2: linear-gradient(315deg, #ee3131 0%, $color-pink-1 100%); +$gradient-unnamed-3: linear-gradient( + 180deg, + #fff 0%, + rgba(255, 255, 255, 0.64) 64.58%, + #fff 100% +); // Shadows $box-shadow-variant-1: 0 6px 14px -6px rgba(2, 38, 225, 0.12), 0 10px 32px -4px rgba(2, 38, 225, 0.1); +$box-shadow-variant-2: + 0 10px 32px -4px rgba(96, 60, 238, 0.1), + 0 6px 14px -6px rgba(96, 60, 238, 0.28);