Merge pull request #176 from forbole/refactor-product-panel

chore: refactors and optimized build

Dockerfile

@@ -37,6 +37,7 @@ RUN chown nextjs .
 
 COPY --from=prod_node_modules --chown=nextjs:nodejs /app/node_modules ./node_modules
 COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder --chown=nextjs:nodejs /app/scripts ./scripts
 COPY --from=builder --chown=nextjs:nodejs /app/.yarn ./.yarn
 COPY --from=builder --chown=nextjs:nodejs /app/.env ./.env
 COPY --from=builder --chown=nextjs:nodejs /app/i18n.js ./i18n.js

next.config.js

@@ -2,6 +2,8 @@ const million = require("million/compiler");
 const bundleAnalyzer = require("@next/bundle-analyzer");
 const nextTranslate = require("next-translate-plugin");
 
+const { changeCssClasses } = require("./scripts/change_css_classes");
+
 const localePrefixes = ["", "/zh-HK", "/zh-CN"];
 
 const withBundleAnalyzer = bundleAnalyzer({
@@ -45,12 +47,16 @@ const baseConfig = nextTranslate({
   typescript: {
     ignoreBuildErrors: process.env.QUICK_BUILD === "true",
   },
-  webpack: (config) => {
+  webpack: (config, { dev }) => {
     config.module.rules.push({
       test: /\.svg$/,
       use: ["@svgr/webpack"],
     });
 
+    if (!dev) {
+      changeCssClasses(config);
+    }
+
     return config;
   },
 });

scripts/change_css_classes.js

@@ -0,0 +1,38 @@
+const path = require("path");
+const loaderUtils = require("loader-utils");
+
+const hashOnlyIdent = (context, _, exportName) =>
+  loaderUtils
+    .getHashDigest(
+      Buffer.from(
+        `filePath:${path
+          .relative(context.rootContext, context.resourcePath)
+          .replace(/\\+/g, "/")}#className:${exportName}`,
+      ),
+      "md4",
+      "base64",
+      6,
+    )
+    .replace(/[^a-zA-Z0-9-_]/g, "_")
+    .replace(/^(-?\d|--)/, "_$1");
+
+// https://stackoverflow.com/a/69166434
+const changeCssClasses = (config) => {
+  config.module.rules.forEach((rule) => {
+    if (!rule.oneOf) return;
+
+    rule.oneOf.forEach((subRule) => {
+      if (!Array.isArray(subRule.use)) return;
+
+      subRule.use.forEach((use) => {
+        if (!use.loader?.includes("/css-loader")) return;
+
+        use.options.modules.getLocalIdent = hashOnlyIdent;
+      });
+    });
+  });
+};
+
+module.exports = {
+  changeCssClasses,
+};

src/components/arrow/index.module.scss

@@ -15,7 +15,7 @@
 
   svg {
     path {
-      stroke: $color-forbole-blue;
+      stroke: $color-forbole-blue-1;
     }
 
     fill: #fff;

src/components/carousel/index.module.scss

@@ -37,7 +37,7 @@ $avater-shadow:
 }
 
 .description {
-  color: #2a1a6a;
+  color: $color-indigo-1;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -53,7 +53,7 @@ $avater-shadow:
 }
 
 .name {
-  color: #202a43;
+  color: $color-forbole-blue-1;
   font-size: 24px;
   font-style: normal;
   font-weight: 700;
@@ -80,7 +80,7 @@ $avater-shadow:
 }
 
 .position {
-  color: #202a43;
+  color: $color-forbole-blue-1;
   font-size: 18px;
   font-style: normal;
   font-weight: 400;

src/components/contact-form/index.tsx

@@ -12,7 +12,7 @@ import useTranslation from "next-translate/useTranslation";
 import { forwardRef } from "react";
 
 import CtaButton from "../cta-button";
-import FormInput from "../formInput";
+import FormInput from "../form_input";
 
 type Props = {
   canSubmit: boolean;

src/components/cta-button/index.module.scss

@@ -27,10 +27,8 @@
   &:disabled {
     &,
     &:hover {
-      background: #ebeef5;
-      box-shadow:
-        0 10px 32px -4px rgba(125, 92, 255, 0.1),
-        0 6px 14px -6px rgba(126, 94, 255, 0.28);
+      background: $color-forbole-blue-5;
+      box-shadow: none;
       color: rgba(195, 204, 226, 1);
       cursor: not-allowed;
     }

src/components/footer/components/footer_items/index.module.scss

@@ -14,7 +14,7 @@
   margin-top: 4px;
 
   &.staking {
-    border-color: $color-indigo;
+    border-color: $color-indigo-2;
   }
 
   @include down-laptop {
@@ -28,7 +28,7 @@
   flex-direction: column;
 
   @include down-laptop {
-    border-top: 1px solid $color-grey2;
+    border-top: 1px solid $color-light-grey-2;
     gap: 8px;
     padding-top: 12px;
   }

src/components/footer/components/social_media/index.module.scss

@@ -2,7 +2,7 @@
 
 .inpboxItem {
   align-items: center;
-  background-color: #34383e;
+  background-color: $color-dark-grey;
   border-radius: 45px;
   color: #fff;
   display: flex;

src/components/footer/components/social_media/index.tsx

@@ -11,13 +11,13 @@ import { socialMedia } from "@src/utils/social_media_info";
 import * as styles from "./index.module.scss";
 
 const SocialMedia = () => {
-  const socialKeys = ["github", "twitter", "telegram", "linkedIn", "Instagram"];
+  const socialKeys = ["github", "twitter", "telegram", "linkedin", "instagram"];
   const { locale } = useRouter();
 
   const socialMediaInfo = socialKeys.map((keyParam: string) => {
     let key = keyParam;
 
-    if (key === "Instagram") {
+    if (key === "instagram") {
       if (locale !== "en") {
         key += "_zh";
       }

src/components/footer/index.module.scss

@@ -3,7 +3,7 @@
 .wrapper {
   background-repeat: no-repeat;
   background-size: cover;
-  color: $color-indigo;
+  color: $color-indigo-2;
   position: relative;
   user-select: none;
   z-index: 1;

src/components/form_input/index.module.scss

@@ -0,0 +1,28 @@
+@import "src/styles/sass.scss";
+
+.input {
+  background-color: $color-white;
+  border: 2px solid;
+  border-color: #fff;
+  border-radius: 8px;
+  box-shadow: 4px 8px 24px 0 rgba(116, 81, 255, 0.28);
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
+  font-size: 16px;
+  margin-top: spacing(2);
+  outline: none;
+  padding: 12px 16px;
+  position: relative;
+  transition: all 0.3s ease-in-out;
+  width: calc(100% - 36px);
+
+  &:focus {
+    border-color: $color-indigo-2;
+  }
+
+  &::placeholder {
+    color: $color-grey-2;
+  }
+}

src/components/form_input/index.tsx

@@ -0,0 +1,9 @@
+import * as styles from "./index.module.scss";
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>;
+
+const FormInput = ({ className, ...props }: Props) => (
+  <input {...props} className={[styles.input, className].join(" ")} />
+);
+
+export default FormInput;

src/components/four-table/index.module.scss

@@ -26,13 +26,9 @@
   height: 536px;
 }
 
-.money {
-  font-size: 64px;
-}
-
 .popular {
   align-items: center;
-  background: linear-gradient(315deg, #ee3131 0%, #ff426b 100%);
+  background: $gradient-unnamed-2;
   border-radius: 32px;
   box-sizing: border-box;
   color: #fff;
@@ -53,10 +49,6 @@
   line-height: normal;
 }
 
-.none {
-  display: none;
-}
-
 @media (max-width: 1024.95px) {
   .active {
     flex-basis: max-content;
@@ -91,7 +83,7 @@
 
 .text {
   align-items: baseline;
-  color: #202a43;
+  color: $color-forbole-blue-1;
   display: flex;
   font-size: 12px;
   font-weight: 590;
@@ -101,6 +93,8 @@
 
 .feature {
   display: flex;
+  font-weight: 600;
+  gap: 5px;
   margin-top: 20px;
 }
 
@@ -112,3 +106,72 @@
     margin-top: 16px;
   }
 }
+
+.wrapper {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  min-height: 536px;
+
+  @include down-laptop {
+    align-items: center;
+    flex-direction: column;
+    gap: 24px;
+    justify-content: center;
+  }
+}
+
+.group {
+  display: flex;
+  flex-direction: row;
+
+  &.none {
+    display: none;
+  }
+}
+
+.title {
+  color: $color-forbole-blue-1;
+  font-size: 20px;
+  font-weight: 590;
+}
+
+.description {
+  color: $color-forbole-blue-1;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.features,
+.item {
+  font-size: 16px;
+  font-weight: 590;
+  padding-left: 5px;
+}
+
+.dollar {
+  font-size: 16px;
+  font-weight: 590;
+  padding-right: 3px;
+}
+
+.price {
+  color: $color-forbole-blue-1;
+  font-size: 32px;
+  font-weight: 590;
+  letter-spacing: -0.508px;
+  margin-top: -23px;
+  padding-right: 7px;
+
+  &.money {
+    font-size: 64px;
+  }
+}
+
+.divider {
+  background-color: rgba(0, 0, 0, 0.12);
+  border-bottom-width: thin;
+  height: 1px;
+  margin-top: 24px;
+}