feat: dark mode (#1004)

* eslint

* tailwind

* import css

* bump deps

* replace #f0f3f8

* update header logo

* update next config

* replace #f0f3f8 border

* replace #ffffff

* replace #ffffff color

* update globals css

* replace #ffffff text color

* fix popup shadow

* fix tooltip

* update toast

* replace textPrimary

* replace textTertiary

* replace textSecondary

* replace #e2e8f0

* replace shadow

* replace #b7c0cc

* replace #e2e8f0

* use list loader

* fix header menu

* clean tooltip bak

* fix step

* replace fillBgSecondary

* replace textTertiary

* fix upload banner

* replace box shadow

* update

* fix: datepicker

* fix: chain, account selector

* update

* replace 04d2c5

* replace 04d2c5 text color

* replace 04d2c5 background color

* replace 04d2c5 svg

* replace #6848FF

* fix

* bump previewer

* replace #ee4444

* replace #FDECEC

* replace #4CAF50

* replace #EDF7ED

* replace blue

* replace #A1A8B3

* replace #F0F3F8

* replace color

* import previewer styles

* fix: flash of invisible text (FOIT)

* fix

* bump icons

* fix bell

* fix: account menu click outside

* use config provider

* fix header

* clean unused

* lockfile

* remove container

* fix #ffffff text color

* use ipfssquare

* fix: popup children

* bump icons

* fix: notification icon

* bump icons

* fix: fonts

* fix: colors

* update

* clean semantic css

* avoid flicker

* read theme mode from cookie

* use cache key

* unlink common ui

* bump ui

* fix: vote option

* eslint fix

* fix: eslint config

* lint

* bump eslint

* fix: eslint config

* fix: width

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    node: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended"],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: [],
+  rules: {},
+};

next/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  extends: ["next/core-web-vitals", "@osn", "../.eslintrc.js"],
+  parserOptions: {
+    babelOptions: {
+      presets: [require.resolve("next/babel")],
+    },
+  },
+  rules: {
+    "@next/next/no-img-element": "off",
+    "jsx-a11y/alt-text": "off",
+  },
+};

next/components/accordionPanel/fold/index.js

@@ -10,7 +10,7 @@ const Wrapper = styled.span`
       transform: rotate(${(props) => (props.fold ? 180 : 0)}deg);
     }
     path {
-      fill: #506176;
+      fill: var(--textSecondary);
     }
   }
 `;

next/components/accordionPanel/panel.js

@@ -9,7 +9,7 @@ const Header = styled.header`
   ${(p) =>
     !p.secondary &&
     css`
-      border-bottom: 1px solid #f0f3f8;
+      border-bottom: 1px solid var(--strokeBorderDefault);
       padding-bottom: 20px;
     `}
 

next/components/account.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import { useDispatch, useSelector } from "react-redux";
 import {
@@ -10,8 +10,6 @@ import {
 import Avatar from "./avatar";
 import { p_14_medium } from "../styles/textStyles";
 import { ReactComponent as UserIcon } from "../public/imgs/icons/user.svg";
-import { shadow_200 } from "../styles/globalCss";
-import { useWindowSize } from "../frontedUtils/hooks";
 import ButtonPrimary from "@osn/common-ui/es/styled/Button";
 import {
   popUpConnect,
@@ -22,6 +20,7 @@ import {
 import { ChainIcon } from "@osn/common-ui";
 import IdentityOrAddr from "@/components/identityOrAddr";
 import { useMetaMaskEventHandlers } from "services/metamask";
+import { useOnClickOutside } from "frontedUtils/hooks";
 
 const ConnectModal = dynamic(() => import("./connect"), {
   ssr: false,
@@ -78,21 +77,18 @@ const AccountWrapper = styled.div`
 `;
 
 const AccountWrapperPC = styled(AccountWrapper)`
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--strokeActionDefault);
 
   :hover {
-    border: 1px solid #b7c0cc;
+    border: 1px solid var(--strokeActionActive);
   }
 
   ${(p) =>
     p.show &&
     css`
-      border: 1px solid #b7c0cc;
+      border: 1px solid var(--strokeActionActive);
     `}
   padding: 7px 15px;
-  @media screen and (max-width: 800px) {
-    display: none;
-  }
 `;
 
 const MenuWrapper = styled.div`
@@ -101,9 +97,9 @@ const MenuWrapper = styled.div`
   position: absolute;
   right: 0;
   top: 100%;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  ${shadow_200};
+  background: var(--fillBgPrimary);
+  border: 1px solid var(--strokeBorderDefault);
+  box-shadow: var(--shadowCardHover);
   padding: 16px;
   padding-bottom: 8px;
   z-index: 1;
@@ -115,7 +111,6 @@ const MenuWrapper = styled.div`
     position: initial;
     padding-top: 0;
     padding-bottom: 0;
-    border-bottom: 20px solid white;
   }
 
   .connect {
@@ -130,7 +125,7 @@ const MenuItem = styled.div`
 
 const MenuDivider = styled.div`
   height: 1px;
-  background: #f0f3f8;
+  background-color: var(--fillBgTertiary);
   margin: 12px 0;
 `;
 
@@ -139,31 +134,26 @@ const LogoutWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   ${p_14_medium};
-  color: #506176;
+  color: var(--textSecondary);
 
   :hover {
-    color: #1e2134;
-  }
-`;
-
-const DarkButton = styled(ButtonPrimary)`
-  @media screen and (max-width: 800px) {
-    padding: 8px 16px;
-    margin: auto;
-    width: 100%;
-    text-align: center;
+    color: var(--textPrimary);
   }
 `;
 
 function Account({ networks }) {
   const dispatch = useDispatch();
-  const windowSize = useWindowSize();
   const account = useSelector(loginAccountSelector);
   const showConnect = useSelector(showConnectSelector);
   const [pageMounted, setPageMounted] = useState(false);
   const address = useSelector(loginAddressSelector);
   const spaceSupportMultiChain = networks?.length > 1;
 
+  const menuRef = useRef();
+  useOnClickOutside(menuRef, () => {
+    dispatch(setShowHeaderMenu(false));
+  });
+
   useMetaMaskEventHandlers();
 
   const showMenu = useSelector(showHeaderMenuSelector);
@@ -184,24 +174,22 @@ function Account({ networks }) {
     dispatch(setShowHeaderMenu(false));
   };
 
-  const ConnectWalletButton = (
-    <div className="connect">
-      {!account && (
-        <DarkButton
-          primary
-          onClick={() => dispatch(popUpConnect())}
-          className="button"
-        >
-          Connect Wallet
-        </DarkButton>
-      )}
-    </div>
+  const ConnectWalletButton = !account && (
+    <ButtonPrimary
+      primary
+      onClick={() => {
+        dispatch(popUpConnect());
+      }}
+      className="w-full"
+    >
+      Connect Wallet
+    </ButtonPrimary>
   );
 
   const Menu = (
-    <MenuWrapper onClick={(e) => e.stopPropagation()}>
+    <MenuWrapper ref={menuRef} onClick={(e) => e.stopPropagation()}>
       {/*The dark connect button For Mobile only*/}
-      {!account && windowSize.width <= 800 && ConnectWalletButton}
+      {!account && ConnectWalletButton}
       {/*The dark connect button For Mobile only*/}
       {address && (
         <>
@@ -237,11 +225,6 @@ function Account({ networks }) {
     </MenuWrapper>
   );
 
-  // show ConnectModal on first priority if  showConnect = true
-  if (showConnect) {
-    return <ConnectModal networks={networks} />;
-  }
-
   // if already connected, show address on right top corner
   if (address && pageMounted) {
     return (
@@ -270,13 +253,13 @@ function Account({ networks }) {
   }
 
   // if no address connected, show ConnectButton on right top corner(PC only)
-  if (windowSize.width > 800 && !account) {
-    return ConnectWalletButton;
-  }
-
-  // show dropdown menu (Mobile only)
-  if (showMenu) {
-    return <Wrapper>{Menu}</Wrapper>;
+  if (!account) {
+    return (
+      <div className="flex w-full">
+        {ConnectWalletButton}
+        {showConnect && <ConnectModal networks={networks} />}
+      </div>
+    );
   }
 
   return null;

next/components/accountItem.js

@@ -8,18 +8,17 @@ import encodeAddressByChain from "../frontedUtils/chain/addr";
 
 const Text = styled.p`
   ${p_16_semibold};
-  color: #1e2134;
+  color: var(--textPrimary);
   margin: 0;
 `;
 
 const TextMinor = styled(Text)`
   ${p_14_normal};
-  color: #9da9bb;
+  color: var(--textTertiary);
 `;
 
 const ItemWrapper = styled.div`
   height: 64px;
-  padding: 8px 16px;
   display: flex;
   align-items: center;
   & > div:first-child {

next/components/accountSelector.js

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import StyledDropdown from "@/components/styled/dropdown";
 import AccountItem from "./accountItem";
+import { DropdownSelector } from "@osn/common-ui";
 
 const Wrapper = styled.div``;
 
 const DropdownWrapper = styled.div`
   position: relative;
-  z-index: 9;
   height: 64px;
 `;
 
@@ -32,18 +31,11 @@ const AccountSelector = ({ accounts, chain, onSelect = () => {} }) => {
   return (
     <Wrapper>
       <DropdownWrapper>
-        <StyledDropdown
-          selection
+        <DropdownSelector
+          className="!h-16"
           options={options}
-          onChange={(_, { value }) => {
-            setSelectedIndex(value);
-          }}
-        />
-        <AccountItem
-          accountName={accounts?.[selectedIndex]?.meta?.name}
-          accountAddress={accounts?.[selectedIndex]?.address}
-          chain={chain.network}
-          header
+          value={selectedIndex}
+          onSelect={setSelectedIndex}
         />
       </DropdownWrapper>
     </Wrapper>

next/components/assetList.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { p_14_medium, p_12_normal } from "../styles/textStyles";
 import { ChainIcon, FlexBetween } from "@osn/common-ui";
-import Tooltip from "./tooltip";
+import { Tooltip } from "@osn/common-ui";
 
 const Wrapper = styled.div`
   display: flex;
@@ -34,7 +34,7 @@ const AssetIconContainer = styled.div`
 
 const DelegationText = styled.span`
   ${p_12_normal}
-  color: #A1A8B3;
+  color: var(--textTertiary);
   text-transform: capitalize;
 `;
 

next/components/author.js

@@ -7,7 +7,7 @@ import IdentityOrAddr from "@/components/identityOrAddr";
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
-  color: #2e343d;
+  color: var(--textPrimary);
   > :not(:first-child) {
     margin-left: 4px;
   }

next/components/avatar.js

@@ -10,7 +10,7 @@ const Wrapper = styled.span`
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: ${(props) => props.size / 2}px;
-  background: #f0f3f8; ;
+  background-color: var(--fillBgTertiary); ;
 `;
 
 const ImgWrapper = styled.img`

next/components/chainSelector.js

@@ -11,7 +11,7 @@ const Wrapper = styled.div`
 const Text = styled.p`
   ${p_14_medium};
   text-transform: capitalize;
-  color: #1e2134;
+  color: var(--textPrimary);
   margin: 0;
 `;