feat: Dark mode overlays (#73)

* feat: title color compat * feat: close button in overlay dark mode * feat: removed box border from dark mode * feat: removed box border from dark mode * feat: dark send address input * feat: dark send address input focus * feat: dark send address hover etc * feat: dark token dropdown * feat: white text on dark input fields * feat: usd amount input dark * feat: dark btn disabled * feat: overlay swap dark * feat: swap page dark * feat: overlay swap dark mode done
reef-chain · Oct 19, 2024 · f9293c3 · f9293c3
1 parent 9f3739e
commit f9293c3
Show file tree

Hide file tree

Showing 14 changed files with 294 additions and 34 deletions.
diff --git a/src/components/OverlayAction/index.tsx b/src/components/OverlayAction/index.tsx
@@ -58,10 +58,10 @@ export const OverlayAction: React.FC<OverlayAction> = ({
         >
           <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}

diff --git a/src/components/OverlayAction/overlay-action.css b/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;
+}
diff --git a/src/components/Overlays/OverlaySend.tsx b/src/components/Overlays/OverlaySend.tsx
@@ -38,10 +38,10 @@ export const OverlaySend:React.FC<OverlaySend> = ({
       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 @@ export const OverlaySend:React.FC<OverlaySend> = ({
             tokenAddress={tokenAddress}
             isWalletConnect={isWalletConnect}
             handleWalletConnectModal={handleWalletConnectModal}
+            isDarkMode={isDarkMode}
           />
           )}
       </div>

diff --git a/src/components/Overlays/OverlaySendNft.tsx b/src/components/Overlays/OverlaySendNft.tsx
@@ -305,7 +305,7 @@ export const OverlaySendNFT = ({
               />
             )}
         </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"

diff --git a/src/components/Overlays/OverlaySwap.tsx b/src/components/Overlays/OverlaySwap.tsx
@@ -27,6 +27,7 @@ interface OverlaySwap {
     pools:PoolWithReserves[];
     network:libNet.DexProtocolv2 |undefined;
     notify:(message: string, type?: Notify) => void;
+    isDarkMode?:boolean;
 }
 
 const poolWithReservesToPool = (p: PoolWithReserves): Pool => ({
@@ -65,7 +66,8 @@ export const OverlaySwap = ({
   tokenPrices,
   pools,
   network,
-  notify
+  notify,
+  isDarkMode=false
 }: OverlaySwap): JSX.Element => {
   const [address1, setAddress1] = useState(tokenAddress);
   const [address2, setAddress2] = useState('0x');
@@ -172,16 +174,18 @@ export const OverlaySwap = ({
       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,

diff --git a/src/components/Overlays/overlay.css b/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;
+}
diff --git a/src/components/PoolActions/TokenDropdown.tsx b/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)}
       >

diff --git a/src/components/PoolActions/TokenField.tsx b/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
         && (