feat: dark mode for overlays (#35)

reef-chain · Oct 18, 2024 · 542497a · 542497a
1 parent e8a227d
commit 542497a
Show file tree

Hide file tree

Showing 3 changed files with 248 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
     "@polkadot/phishing": "^0.23.6",
     "@polkadot/react-identicon": "^3.6.6",
     "@polkadot/ui-keyring": "^3.6.3",
-    "@polkadot/util-crypto": "^13.1.1",
     "@polkadot/ui-settings": "^3.10.1",
+    "@polkadot/util-crypto": "^13.1.1",
     "@popperjs/core": "^2.11.8",
     "@reef-chain/evm-provider": "^3.0.0",
     "@reef-chain/react-lib": "^5.0.1",

diff --git a/src/popup/Tokens/TokenCard.tsx b/src/popup/Tokens/TokenCard.tsx
@@ -297,6 +297,7 @@ export const TokenCard: React.FC<TokenCard> = ({
                 tokens={tokens}
                 nw={nw}
                 tokenPrices={tokenPrices}
+                isDarkMode={isDarkMode}
                 pools={pools}
                 network={network}
                 notify={notify}

diff --git a/src/popup/Tokens/index.css b/src/popup/Tokens/index.css
@@ -599,4 +599,250 @@ select .dark-select {
 
 .overlay-action__wrapper-dark {
     background-color: #3b3b3be6 !important;
+}
+
+
+/* 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;
+}
+
+.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: 0px;
+    top: 0px;
+    background-color: #dad5eaad;
+    border-radius: 10px;
+    pointer-events: none;
+}
+
+/* this one is override for send */
+.uik-pool-actions-dark {
+    background-color: #26272c !important;
+}
+
+.uik-pool-actions-token__symbol-dark {
+    color: white !important;
+}
+
+
+.uik-pool-actions-token-dark {
+    background-color: #373840 !important;
+}
+
+.uik-pool-actions-token--select-dark {
+    background-color: #373840 !important;
+    color: white !important;
+}
+
+.pool-actions__summary-dark {
+    background-color: #373840 !important;
+    color: white !important;
+}
+
+.dark-dropdown {
+    background-color: #373840 !important;
+}
+
+.uik-pool-actions-token__amount-dark {
+    color: white !important;
+}
+
+.summary-light-text {
+    color: white !important;
+}
+
+.send__address-dark input {
+    background-color: rgb(55 56 64) !important;
+    color: white !important;
+}
+
+.send__address-dark input:hover {
+    background-color: rgb(55 56 64) !important;
+}
+
+.send__address-dark input:focus {
+    background-color: rgb(55 56 64) !important;
+}
+
+.uik-pool-actions__cta.uik-button--disabled.dark-btn {
+    background: #373840;
+    color: hsla(224.2105263158deg, 8.7557603687%, 57.4509803922%, 0.6);
+    box-shadow: none;
 }