feat(web): add homepage darkmode (#1043)

web/src/App.css

@@ -28,7 +28,7 @@ body {
   height: 100%;
 }
 
-/* oevrrides chakra default value */
+/* overrides chakra default value */
 body {
   background-repeat: no-repeat !important;
   background-size: cover !important;

web/src/components/CommonIcon/index.ts

@@ -23,3 +23,39 @@ export const DarkModeIcon = createIcon({
   viewBox: "0 0 32 32",
   d: "M9.353 2.939a1 1 0 01.22 1.08 8 8 0 0010.408 10.408 1 1 0 011.301 1.3A10.003 10.003 0 0112 22C6.477 22 2 17.523 2 12c0-4.207 2.598-7.805 6.273-9.282a1 1 0 011.08.22z",
 });
+
+export const LangIcon = createIcon({
+  displayName: "LangIcon",
+  viewBox: "0 0 24 24",
+  d: "M10 18.3333C5.39752 18.3333 1.66669 14.6025 1.66669 9.99996C1.66669 5.39746 5.39752 1.66663 10 1.66663C14.6025 1.66663 18.3334 5.39746 18.3334 9.99996C18.3334 14.6025 14.6025 18.3333 10 18.3333ZM8.09169 16.3891C7.26953 14.6452 6.79325 12.7585 6.68919 10.8333H3.38502C3.54718 12.1157 4.07829 13.3234 4.91383 14.3097C5.74937 15.296 6.85336 16.0184 8.09169 16.3891ZM8.35835 10.8333C8.48419 12.8658 9.06502 14.775 10 16.46C10.9603 14.7304 11.5212 12.8079 11.6417 10.8333H8.35835ZM16.615 10.8333H13.3109C13.2068 12.7585 12.7305 14.6452 11.9084 16.3891C13.1467 16.0184 14.2507 15.296 15.0862 14.3097C15.9218 13.3234 16.4529 12.1157 16.615 10.8333ZM3.38502 9.16663H6.68919C6.79325 7.24145 7.26953 5.3547 8.09169 3.61079C6.85336 3.98153 5.74937 4.70392 4.91383 5.69021C4.07829 6.67649 3.54718 7.88421 3.38502 9.16663ZM8.35919 9.16663H11.6409C11.5206 7.19212 10.96 5.26957 10 3.53996C9.03975 5.2695 8.47882 7.19206 8.35835 9.16663H8.35919ZM11.9084 3.61079C12.7305 5.3547 13.2068 7.24145 13.3109 9.16663H16.615C16.4529 7.88421 15.9218 6.67649 15.0862 5.69021C14.2507 4.70392 13.1467 3.98153 11.9084 3.61079Z",
+});
+
+export const GithubIcon = createIcon({
+  displayName: "GithubIcon",
+  viewBox: "0 0 24 24",
+  d: "M9.99996 1.66663C5.39579 1.66663 1.66663 5.39579 1.66663 9.99996C1.66568 11.7494 2.21564 13.4546 3.23847 14.8739C4.26131 16.2931 5.70508 17.3542 7.36496 17.9066C7.78163 17.9791 7.93746 17.7291 7.93746 17.51C7.93746 17.3125 7.92663 16.6566 7.92663 15.9583C5.83329 16.3441 5.29163 15.4483 5.12496 14.9791C5.03079 14.7391 4.62496 14 4.27079 13.8016C3.97913 13.6458 3.56246 13.26 4.25996 13.25C4.91663 13.2391 5.38496 13.8541 5.54163 14.1041C6.29163 15.3641 7.48996 15.01 7.96829 14.7916C8.04163 14.25 8.25996 13.8858 8.49996 13.6775C6.64579 13.4691 4.70829 12.75 4.70829 9.56246C4.70829 8.65579 5.03079 7.90663 5.56246 7.32246C5.47913 7.11413 5.18746 6.25996 5.64579 5.11413C5.64579 5.11413 6.34329 4.89579 7.93746 5.96913C8.61585 5.78084 9.31677 5.68608 10.0208 5.68746C10.7291 5.68746 11.4375 5.78079 12.1041 5.96829C13.6975 4.88496 14.3958 5.11496 14.3958 5.11496C14.8541 6.26079 14.5625 7.11496 14.4791 7.32329C15.01 7.90663 15.3333 8.64579 15.3333 9.56246C15.3333 12.7608 13.3858 13.4691 11.5316 13.6775C11.8333 13.9375 12.0941 14.4375 12.0941 15.2191C12.0941 16.3333 12.0833 17.2291 12.0833 17.5108C12.0833 17.7291 12.24 17.9891 12.6566 17.9058C14.3108 17.3473 15.7482 16.2841 16.7665 14.8659C17.7849 13.4477 18.3328 11.7459 18.3333 9.99996C18.3333 5.39579 14.6041 1.66663 9.99996 1.66663Z",
+});
+
+export const WechatIcon = createIcon({
+  displayName: "WechatIcon",
+  viewBox: "0 0 32 32",
+  d: "M18.574 13.711C18.8112 13.7079 19.0378 13.6123 19.2055 13.4445C19.3733 13.2768 19.4689 13.0502 19.472 12.813C19.472 12.315 19.073 11.915 18.574 11.915C18.075 11.915 17.676 12.315 17.676 12.813C17.676 13.313 18.076 13.711 18.574 13.711ZM14.149 13.711C14.3862 13.7079 14.6128 13.6123 14.7805 13.4445C14.9483 13.2768 15.0439 13.0502 15.047 12.813C15.047 12.315 14.647 11.915 14.149 11.915C13.649 11.915 13.251 12.315 13.251 12.813C13.251 13.313 13.65 13.711 14.149 13.711ZM20.716 18.751C20.6519 18.7866 20.6008 18.8416 20.5699 18.908C20.539 18.9745 20.5299 19.0491 20.544 19.121C20.544 19.169 20.544 19.218 20.569 19.268C20.667 19.685 20.863 20.349 20.863 20.374C20.863 20.447 20.888 20.496 20.888 20.546C20.888 20.575 20.8823 20.6037 20.8712 20.6304C20.86 20.6572 20.8437 20.6815 20.8232 20.7019C20.8027 20.7224 20.7783 20.7385 20.7515 20.7495C20.7247 20.7605 20.696 20.7661 20.667 20.766C20.617 20.766 20.593 20.742 20.544 20.718L19.095 19.882C18.9892 19.8238 18.8716 19.7903 18.751 19.784C18.678 19.784 18.604 19.784 18.555 19.808C17.867 20.005 17.155 20.103 16.394 20.103C12.734 20.103 9.787 17.646 9.787 14.598C9.787 11.551 12.734 9.093 16.394 9.093C20.053 9.093 23 11.551 23 14.598C23 16.245 22.116 17.744 20.716 18.752V18.751ZM16.673 8.099C16.5797 8.0959 16.4864 8.09423 16.393 8.094C12.219 8.094 8.787 10.954 8.787 14.599C8.787 15.153 8.867 15.689 9.015 16.199H8.926C8.05226 16.1902 7.18347 16.0664 6.342 15.831C6.268 15.806 6.194 15.806 6.12 15.806C5.97221 15.8091 5.82793 15.8516 5.702 15.929L3.954 16.934C3.904 16.959 3.855 16.984 3.806 16.984C3.73463 16.9832 3.66641 16.9545 3.61594 16.9041C3.56548 16.8536 3.53678 16.7854 3.536 16.714C3.536 16.64 3.56 16.591 3.585 16.517C3.609 16.493 3.831 15.683 3.954 15.193C3.954 15.143 3.978 15.07 3.978 15.021C3.97773 14.9353 3.95764 14.8508 3.9193 14.7741C3.88097 14.6974 3.82542 14.6307 3.757 14.579C2.058 13.376 1 11.586 1 9.598C1 5.945 4.57 3 8.95 3C12.715 3 15.88 5.169 16.673 8.098V8.099ZM11.519 8.517C12.092 8.517 12.545 8.04 12.545 7.491C12.545 6.918 12.092 6.465 11.519 6.465C10.946 6.465 10.493 6.918 10.493 7.491C10.493 8.064 10.946 8.517 11.519 8.517ZM6.259 8.517C6.832 8.517 7.286 8.04 7.286 7.491C7.286 6.918 6.832 6.465 6.259 6.465C5.687 6.465 5.233 6.918 5.233 7.491C5.233 8.064 5.687 8.517 6.259 8.517Z",
+});
+
+export const ForumIcon = createIcon({
+  displayName: "ForumIcon",
+  viewBox: "0 0 32 32",
+  d: "M13.6228 19.7399C13.0966 19.8365 12.5542 19.8869 12.0001 19.8869C7.06474 19.8869 3.06384 15.886 3.06384 10.9507C3.06384 6.0153 7.06474 2.0144 12.0001 2.0144C16.9354 2.0144 20.9363 6.0153 20.9363 10.9507C20.9363 13.948 19.4606 16.6007 17.1962 18.2218L14.312 21.9195C14.2207 22.0365 14.0341 21.9907 14.0074 21.8447L13.6228 19.7399ZM9.3375 7.88363C8.97081 7.88363 8.62735 8.06321 8.41812 8.36435L6.63897 10.9249L6.62574 10.9318L6.62997 10.9379L6.62574 10.944L6.63897 10.9508L8.41844 13.5115C8.62768 13.8126 8.9711 13.9921 9.33777 13.9921L10.7393 13.9921L9.1522 10.9379L10.7393 7.88363H9.3375ZM13.9095 14.0177C13.3236 14.0177 12.8487 13.5428 12.8487 12.957C12.8487 12.3711 13.3236 11.8962 13.9095 11.8962H16.3137C16.8995 11.8962 17.3744 12.3711 17.3744 12.957C17.3744 13.5428 16.8995 14.0177 16.3137 14.0177H13.9095Z",
+});
+
+export const DiscordIcon = createIcon({
+  displayName: "DiscordIcon",
+  viewBox: "0 0 32 32",
+  d: "M15.0831 17.7969C14.8161 17.862 14.5475 17.9197 14.2773 17.97C12.8114 18.2459 11.3063 18.2403 9.84252 17.9534C9.58615 17.9034 9.22324 17.8152 8.75545 17.6903L7.22224 19.683C3.43832 19.5615 2 17.0261 2 17.0261C2 11.3977 4.46546 6.83466 4.46546 6.83466C6.93091 4.94853 9.27651 5.00014 9.27651 5.00014L9.9474 5.87412C10.0092 5.86545 10.0715 5.8599 10.1338 5.85747C11.4127 5.68795 12.7087 5.69356 13.986 5.87412L14.7218 5.00014C14.7218 5.00014 17.0691 4.94853 19.5329 6.83633C19.5329 6.83633 22 11.3977 22 17.0261C22 17.0261 20.5434 19.5598 16.7594 19.683L15.0831 17.7969ZM8.69356 11.8369C7.69307 11.8369 6.90232 12.586 6.90232 13.5016C6.90232 14.4172 7.70971 15.1664 8.69356 15.1664C9.6924 15.1664 10.4831 14.4172 10.4831 13.5016C10.4998 12.586 9.69406 11.8369 8.69356 11.8369ZM15.0994 11.8369C14.1006 11.8369 13.3098 12.586 13.3098 13.5016C13.3098 14.4172 14.1172 15.1664 15.0994 15.1664C16.0999 15.1664 16.8907 14.4172 16.8907 13.5016C16.8907 12.586 16.0999 11.8369 15.0994 11.8369Z",
+});
+
+export const MenuIcon = createIcon({
+  displayName: "MenuIcon",
+  viewBox: "0 0 24 24",
+  d: "M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z",
+});

web/src/pages/homepage/ability.tsx

@@ -1,17 +1,27 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { useColorMode } from "@chakra-ui/react";
 
 type Props = {};
 
 const Ability = (props: Props) => {
   const { t } = useTranslation();
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
+
   return (
     <div className="h-auto">
-      <h2 className="py-[80px] pb-[48px] text-4xl text-[#152132] lg:py-[60px] lg:pb-[60px]">
+      <h2 className="py-[80px] pb-[48px] text-4xl lg:py-[60px] lg:pb-[60px]">
         {t(`HomePage.Ability.title`)}
       </h2>
       <div className="w-full px-[16px] lg:hidden">
-        <div className="bg-card h-max-[520px] my-6 w-full rounded-2xl lg:hidden">
+        <div
+          className={
+            darkMode
+              ? "h-max-[520px] my-6 w-full rounded-2xl bg-lafDark-300 lg:hidden"
+              : "bg-card h-max-[520px] my-6 w-full rounded-2xl lg:hidden"
+          }
+        >
           <div className="justify-between">
             <div className="p-6">
               <img className="mb-8" src="/homepage/functions.svg" alt="icon" />
@@ -29,7 +39,13 @@ const Ability = (props: Props) => {
             />
           </div>
         </div>
-        <div className="bg-card my-6 w-full rounded-2xl lg:hidden">
+        <div
+          className={
+            darkMode
+              ? "my-6 w-full rounded-2xl bg-lafDark-300 lg:hidden"
+              : "bg-card my-6 w-full rounded-2xl lg:hidden"
+          }
+        >
           <div className="justify-between">
             <div className="p-6">
               <img className="mb-8" src="/homepage/database.svg" alt="icon" />
@@ -44,7 +60,13 @@ const Ability = (props: Props) => {
           </div>
         </div>
 
-        <div className="bg-card my-6 w-full rounded-2xl lg:hidden">
+        <div
+          className={
+            darkMode
+              ? "my-6 w-full rounded-2xl bg-lafDark-300 lg:hidden"
+              : "bg-card my-6 w-full rounded-2xl lg:hidden"
+          }
+        >
           <div className="justify-between">
             <div className="p-6">
               <img className="mb-6" src="/homepage/storage.svg" alt="icon" />
@@ -59,7 +81,13 @@ const Ability = (props: Props) => {
           </div>
         </div>
       </div>
-      <div className="bg-card my-6 hidden w-full rounded-2xl lg:block">
+      <div
+        className={
+          darkMode
+            ? "my-6 hidden w-full rounded-2xl bg-lafDark-300 lg:block"
+            : "bg-card my-6 hidden w-full rounded-2xl lg:block"
+        }
+      >
         <div className="justify-between lg:flex lg:flex-row">
           <div className="p-6 lg:p-12">
             <img className="mb-6" src="/homepage/functions.svg" alt="icon" />
@@ -77,7 +105,13 @@ const Ability = (props: Props) => {
         </div>
       </div>
       <div className="hidden w-full gap-6 lg:flex ">
-        <div className="bg-card relative h-auto w-1/2 rounded-2xl px-12 pt-12">
+        <div
+          className={
+            darkMode
+              ? "relative h-auto w-1/2 rounded-2xl bg-lafDark-300 px-12 pt-12"
+              : "bg-card relative h-auto w-1/2 rounded-2xl px-12 pt-12"
+          }
+        >
           <img className="mb-6" src="/homepage/database.svg" alt="icon" />
           <h3 className="w-[400px]">
             <span className="bg-gradient-to-r from-[#00CCE8] to-[#00E8A2] bg-clip-text text-transparent">
@@ -89,7 +123,13 @@ const Ability = (props: Props) => {
             <img className="mx-auto" src="/homepage/database.png" alt="database" />
           </div>
         </div>
-        <div className="bg-card relative h-[600px] w-1/2 rounded-2xl px-12 pt-12">
+        <div
+          className={
+            darkMode
+              ? "relative h-[600px] w-1/2 rounded-2xl bg-lafDark-300 px-12 pt-12"
+              : "bg-card relative h-[600px] w-1/2 rounded-2xl px-12 pt-12"
+          }
+        >
           <img className="mb-6" src="/homepage/storage.svg" alt="icon" />
           <h3 className="w-[400px]">
             <span className="bg-gradient-to-r from-[#57E37A] to-[#00BEB1] bg-clip-text text-transparent">