feat: Dark mode overlays

src/components/OverlayAction/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import Uik from '@reef-chain/ui-kit';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import './overlay-action.css';
@@ -58,10 +58,10 @@
         >
           <div className="overlay-action__content">
             <div className="overlay-action__head">
-              <div className="overlay-action__title">{ title }</div>
+              <div className={`${!isDarkMode?`overlay-action__title`:`overlay-action__title-dark`} overlay-action__title-base`}>{ title }</div>
 
               <button
-                className="overlay-action__close-btn"
+                className={`overlay-action__close-btn${isDarkMode?'-dark':''}`}
                 aria-label="Close button"
                 type="button"
                 onClick={onClose}

src/components/OverlayAction/overlay-action.css

@@ -89,18 +89,6 @@
   position: relative;
 }
 
-.overlay-action__title {
-  font-size: 1.625rem;
-  line-height: 1.2;
-  font-weight: 500;
-  color: hsla(
-    var(--text--h),
-    var(--text--s),
-    var(--text--l),
-    0.9
-  );
-}
-
 .overlay-action__close-btn {
   position: absolute;
   right: 0;
@@ -141,4 +129,52 @@
   justify-content: center;
   align-items: flex-start;
   padding-top: 40px;
-} 
+} 
+
+/* new */
+
+.overlay-action__title-base{
+  font-size: 1.625rem;
+  line-height: 1.2;
+  font-weight: 500;
+}
+
+.overlay-action__title {
+  color: hsla(
+    var(--text--h),
+    var(--text--s),
+    var(--text--l),
+    0.9
+  );
+}
+
+.overlay-action__title-dark {
+  color: white!important;
+}
+
+
+.overlay-action__close-btn-dark {
+  position: absolute;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 54px;
+  height: 54px;
+  min-width: 54px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: none;
+  transition: all 0.125s;
+  color: white;
+  box-shadow: none;
+}
+
+.overlay-action__close-btn-dark:hover {
+  color: white;
+  cursor: pointer;
+}
+
+.overlay-action__close-btn-dark:active {
+  color: white;
+}

src/components/Overlays/OverlaySend.tsx

@@ -4,7 +4,7 @@
 import { OverlayAction } from '../OverlayAction';
 import './overlay.css';
 import { Notify, ReefSigner, Token } from '../../state';
 import { Provider } from '@reef-chain/evm-provider';
 
 interface OverlaySend {
   tokenAddress?: string;
@@ -32,16 +32,16 @@
   isDarkMode,
   isWalletConnect,
   handleWalletConnectModal,
 }: OverlaySend): JSX.Element => {
   return (
     <OverlayAction
       isOpen={isOpen}
       title="Send"
       onClose={onClose}
-      className="overlay-swap"
+      className={`overlay-swap${isDarkMode?'-dark':''}`}
       isDarkMode={isDarkMode}
     >
-      <div className="uik-pool-actions pool-actions">
+      <div className={`uik-pool-actions pool-actions ${isDarkMode?'uik-pool-actions-dark':''}`}>
         { provider && selectedSigner
           && (
           <Send
@@ -53,6 +53,7 @@
             tokenAddress={tokenAddress}
             isWalletConnect={isWalletConnect}
             handleWalletConnectModal={handleWalletConnectModal}
+            isDarkMode={isDarkMode}
           />
           )}
       </div>

src/components/Overlays/OverlaySendNft.tsx

@@ -93,7 +93,7 @@
     return list.filter((acc) => acc.address.toLowerCase().startsWith(query.toLowerCase())
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
         || (acc.name as any).replaceAll(' ', '').toLowerCase().startsWith(query.toLowerCase()));
   }, [accounts, query]);
 
   return (
     <div className="send-accounts">
@@ -201,7 +201,7 @@
   const calculateAndSetPercentage = (val: number): void => {
     const closestToVal = Math.ceil((val * parsedBalance) / 100);
     setAmount(closestToVal);
     setPercentage(closestToVal * 100 / parsedBalance);
   };
 
   const createSliderConfig = (): { position: number, text?: string }[] => {
@@ -226,7 +226,7 @@
       const position = Math.ceil(step * i);
       const positionText = Math.ceil(parsedBalance * (step / 100) * i).toString();
       const text = (i % 2 === 0 || position === parsedBalance) ? positionText : '';
       //@ts-ignore
       helpers.push({ position, text });
     }
     return helpers;
@@ -305,7 +305,7 @@
               />
             )}
         </div>
-        <div className="send__address">
+        <div className={`send__address ${isDarkMode?'send__address-dark':''}`}>
           <Identicon className="send__address-identicon" value={destinationAddress} size={46} theme="substrate" />
           <input
             className="send__address-input"

src/components/Overlays/OverlaySwap.tsx

@@ -3,10 +3,10 @@
 } from 'react';
 import { BigNumber } from 'ethers';
 import axios, { AxiosInstance } from 'axios';
 import { network as libNet } from '@reef-chain/util-lib';
 import './overlay.css';
 import { Notify, Pool, PoolWithReserves, ReefSigner, Token, TokenPrices } from '../../state';
 import { network as nw } from '@reef-chain/util-lib';
 import * as store from '../../store';
 import { onSwap as hooksOnswap, useSwapState } from '../../hooks';
 import { OverlayAction } from '../OverlayAction';
@@ -27,6 +27,7 @@
     pools:PoolWithReserves[];
     network:libNet.DexProtocolv2 |undefined;
     notify:(message: string, type?: Notify) => void;
+    isDarkMode?:boolean;
 }
 
 const poolWithReservesToPool = (p: PoolWithReserves): Pool => ({
@@ -65,7 +66,8 @@
   tokenPrices,
   pools,
   network,
-  notify
+  notify,
+  isDarkMode=false
 }: OverlaySwap): JSX.Element => {
   const [address1, setAddress1] = useState(tokenAddress);
   const [address2, setAddress2] = useState('0x');
@@ -172,16 +174,18 @@
       isOpen={isOpen}
       title="Swap"
       onClose={onClose}
-      className="overlay-swap"
+      className={`overlay-swap${isDarkMode?'-dark':''}`}
+      isDarkMode={isDarkMode}
     >
-      <div className="uik-pool-actions pool-actions">
+      <div className={`uik-pool-actions pool-actions ${isDarkMode?'uik-pool-actions-dark':''}`}>
         {
           finalized
             ? (
               <Trade
                 pools={pools}
                 tokens={tokens}
                 state={tradeState}
+                isDarkMode={isDarkMode}
                 maxSlippage={MAX_SLIPPAGE}
                 actions={{
                   onSwap,

src/components/Overlays/overlay.css

@@ -150,3 +150,151 @@
     pointer-events: none;
   }
 
+/* dark */
+.overlay-swap-dark .overlay-action__wrapper {
+  background: hsla(
+    var(--bg--h),
+    var(--bg--s),
+    var(--bg--l),
+    0.9
+  );
+}
+
+.overlay-swap-dark .overlay-action__close-btn {
+  background-color: #26272c;
+}
+
+.overlay-swap-dark .overlay-action__content {
+  max-width: 600px;
+}
+
+.overlay-swap-dark .overlay-action__slot {
+  align-items: center;
+  padding-top: 60px;
+}
+
+.overlay-swap-dark .uik-pool-actions {
+  box-shadow: none;
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+  margin-right: 0;
+} 
+
+.overlay-swap-dark .uik-pool-actions__tokens {
+  margin-top: 0;
+}
+
+.nft-name--modal{
+  font-size: x-large;
+  font-weight: bold;
+}
+
+.nft-iconurl{
+  max-width: 250px;
+  border-radius: 20px;
+  margin-top: 15px;
+}
+.nft-iconurl-small{
+  max-width: 50%;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
+
+.send-nft-view{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nfts__item-video-small {
+  max-width: 50%;
+}
+
+.nft-view{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.display-table{
+  padding: 6px;
+  font-size: 14px;
+  background-color: #e6e2f1;
+  margin-top: 8px;
+  border-radius: 10px;
+
+}
+
+.display-table-label{
+  font-weight: bold;
+  color: #a93185;
+}
+
+.nft-box-send-btn{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.nft__button{
+  outline: none;
+  border: none;
+}
+
+.nft-hidden {
+  display: none;
+}
+
+.send__address {
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 6px;
+}
+
+.send__address-input {
+  width: 100%;
+  border-radius: 15px;
+  border: none;
+  background-color: #e6e2f1;
+  transition: all 0.125s;
+  height: 70px;
+  padding: 0 17px 1px 71px;
+  font-family: var(--font);
+  font-size: 15px;
+  color: var(--text);
+  font-weight: 500;
+  line-height: 1.2;
+}
+.send__amount-input {
+  width: 100%;
+  border-radius: 15px;
+  border: none;
+  background-color: #e6e2f1;
+  transition: all 0.125s;
+  height: 70px;
+  padding: 0 17px 1px 17px;
+  font-family: var(--font);
+  font-size: 15px;
+  color: var(--text);
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.send__address .send__address-identicon {
+  position: absolute;
+  left: 13px;
+  background-color: #dad5eaad;
+  border-radius: 10px;
+  pointer-events: none;
+}
+
+/* this one is override for send */
+.uik-pool-actions-dark{
+  background-color: #26272c!important;
+}

src/components/PoolActions/TokenDropdown.tsx

@@ -9,6 +9,7 @@ interface TokenDropdown {
   token: TokenWithAmount;
   tokens: Token[];
   selectToken?: (token: Token) => void;
+  isDarkMode?:boolean;
 }
 
 interface TokenDropdownItem {
@@ -47,7 +48,7 @@ const TokenDropdownItem = ({ token, selectToken }: TokenDropdownItem): JSX.Eleme
   </Uik.DropdownItem>
 );
 
-const TokenDropdown = ({ token, tokens, selectToken } : TokenDropdown): JSX.Element => {
+const TokenDropdown = ({ token, tokens, selectToken,isDarkMode } : TokenDropdown): JSX.Element => {
   const [isOpen, setOpen] = useState(token.isEmpty && !!selectToken);
   const [search, setSearch] = useState('');
 
@@ -86,7 +87,7 @@ const TokenDropdown = ({ token, tokens, selectToken } : TokenDropdown): JSX.Elem
       <button
         className={!token.isEmpty
           ? 'uik-pool-actions-token__token'
-          : 'uik-pool-actions-token uik-pool-actions-token--select'}
+          : `uik-pool-actions-token uik-pool-actions-token--select ${isDarkMode?'uik-pool-actions-token--select-dark':''}`}
         type="button"
         disabled={!selectToken}
         onClick={() => setOpen(true)}
@@ -106,8 +107,8 @@ const TokenDropdown = ({ token, tokens, selectToken } : TokenDropdown): JSX.Elem
         { !token.isEmpty
           && (
           <div className="uik-pool-actions-token__info">
-            <div className="uik-pool-actions-token__symbol">{ token.symbol }</div>
-            <div className="uik-pool-actions-token__amount" title={showBalance(token)}>
+            <div className={`uik-pool-actions-token__symbol${isDarkMode?'-dark':''}`}>{ token.symbol }</div>
+            <div className={`uik-pool-actions-token__amount ${isDarkMode?'uik-pool-actions-token__amount-dark':''}`} title={showBalance(token)}>
               { formatHumanBalance(token) }
               {' '}
               { token.symbol }
@@ -117,7 +118,7 @@ const TokenDropdown = ({ token, tokens, selectToken } : TokenDropdown): JSX.Elem
       </button>
 
       <Uik.Dropdown
-        className="uik-pool-actions-token__select-dropdown"
+        className={`uik-pool-actions-token__select-dropdown ${isDarkMode?'dark-dropdown':''}`}
         isOpen={isOpen}
         onClose={() => setOpen(false)}
       >

src/components/PoolActions/TokenField.tsx

@@ -14,13 +14,15 @@ interface TokenField {
   tokens?: Token[];
   selectToken?: SelectToken;
   onAmountChange: (amount: string) => void;
+  isDarkMode?:boolean;
 }
 
 const TokenField = ({
   token,
   tokens = [],
   onAmountChange,
   selectToken,
+  isDarkMode=false,
 }: TokenField): JSX.Element => {
   const [isFocused, setFocused] = useState(false);
   const onInputFocus = (): void => setFocused(true);
@@ -44,13 +46,15 @@ const TokenField = ({
     <div
       className={`
         uik-pool-actions-token
+        ${isDarkMode?'uik-pool-actions-token-dark':''}
         ${isFocused ? 'uik-pool-actions-token--focused' : isFocused}
       `}
     >
       <TokenDropdown
         token={token}
         tokens={tokens}
         selectToken={selectToken}
+        isDarkMode={isDarkMode}
       />
       { !token.isEmpty
         && (