Merge pull request #96 from G7DAO/test-dark-merge

Test dark merge
G7DAO · Oct 11, 2024 · 849b5b9 · 849b5b9
2 parents dd55a73 + f8f7c23
commit 849b5b9
Show file tree

Hide file tree

Showing 34 changed files with 398 additions and 197 deletions.
diff --git a/webapps/world-builder-dashboard/public/Logo.svg b/webapps/world-builder-dashboard/public/Logo.svg
diff --git a/webapps/world-builder-dashboard/src/assets/IconArrowNarrowDown.tsx b/webapps/world-builder-dashboard/src/assets/IconArrowNarrowDown.tsx
@@ -4,7 +4,6 @@ const IconArrowNarrowDown: React.FC<React.SVGProps<SVGSVGElement>> = (props) =>
   <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' {...props}>
     <path
       d='M6 2V10M6 10L9 7M6 10L3 7'
-      stroke={props.stroke ?? '#FFF'}
       strokeWidth='1.5'
       strokeLinecap='round'
       strokeLinejoin='round'

diff --git a/webapps/world-builder-dashboard/src/assets/IconArrowNarrowUp.tsx b/webapps/world-builder-dashboard/src/assets/IconArrowNarrowUp.tsx
@@ -4,7 +4,6 @@ const IconArrowNarrowUp: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' {...props}>
     <path
       d='M6 10V2M6 2L3 5M6 2L9 5'
-      stroke={props.stroke ?? '#FFF'}
       strokeWidth='1.5'
       strokeLinecap='round'
       strokeLinejoin='round'

diff --git a/webapps/world-builder-dashboard/src/assets/IconBell.tsx b/webapps/world-builder-dashboard/src/assets/IconBell.tsx
@@ -4,7 +4,6 @@ const IconBell: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' {...props}>
     <path
       d='M12.4998 15.8334C12.4998 17.2141 11.3805 18.3334 9.99977 18.3334C8.61906 18.3334 7.49977 17.2141 7.49977 15.8334M11.4969 5.19882C11.8598 4.82389 12.0831 4.31304 12.0831 3.75002C12.0831 2.59943 11.1504 1.66669 9.99977 1.66669C8.84917 1.66669 7.91643 2.59943 7.91643 3.75002C7.91643 4.31304 8.13977 4.82389 8.50268 5.19882M14.9998 9.33335C14.9998 8.18408 14.473 7.08188 13.5353 6.26922C12.5976 5.45657 11.3258 5.00002 9.99977 5.00002C8.67368 5.00002 7.40192 5.45657 6.46423 6.26922C5.52655 7.08188 4.99977 8.18408 4.99977 9.33335C4.99977 11.2349 4.52821 12.6255 3.93982 13.6206C3.26922 14.7547 2.93391 15.3218 2.94715 15.4572C2.9623 15.6122 2.9902 15.6611 3.11588 15.753C3.22574 15.8334 3.77769 15.8334 4.88159 15.8334H15.1179C16.2218 15.8334 16.7738 15.8334 16.8837 15.753C17.0093 15.6611 17.0372 15.6122 17.0524 15.4572C17.0656 15.3218 16.7303 14.7547 16.0597 13.6206C15.4713 12.6255 14.9998 11.2349 14.9998 9.33335Z'
-      stroke='#344054'
       strokeWidth='1.66667'
       strokeLinecap='round'
       strokeLinejoin='round'

diff --git a/webapps/world-builder-dashboard/src/assets/IconDark.tsx b/webapps/world-builder-dashboard/src/assets/IconDark.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+const IconDark: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' {...props}>
+    <g clipPath='url(#clip0_15158_3715)'>
+      <path
+        d='M15.0001 1.66666L15.5149 2.69631C15.7362 3.13879 15.8468 3.36003 15.9946 3.55175C16.1257 3.72187 16.2782 3.87439 16.4483 4.00552C16.64 4.1533 16.8613 4.26392 17.3038 4.48516L18.3334 4.99999L17.3038 5.51482C16.8613 5.73606 16.64 5.84668 16.4483 5.99446C16.2782 6.12559 16.1257 6.27811 15.9946 6.44823C15.8468 6.63995 15.7361 6.86119 15.5149 7.30367L15.0001 8.33332L14.4853 7.30367C14.264 6.86119 14.1534 6.63995 14.0056 6.44823C13.8745 6.27811 13.722 6.12559 13.5518 5.99446C13.3601 5.84668 13.1389 5.73606 12.6964 5.51482L11.6667 4.99999L12.6964 4.48516C13.1389 4.26392 13.3601 4.1533 13.5518 4.00552C13.722 3.87439 13.8745 3.72187 14.0056 3.55175C14.1534 3.36003 14.264 3.13879 14.4853 2.69631L15.0001 1.66666Z'
+        strokeWidth='1.67'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M17.5001 11.1577C16.4076 13.0742 14.3455 14.3662 11.9817 14.3662C8.47599 14.3662 5.63404 11.5243 5.63404 8.0186C5.63404 5.65461 6.92632 3.59244 8.843 2.49999C4.81658 2.88176 1.66675 6.27243 1.66675 10.3988C1.66675 14.7809 5.21918 18.3333 9.60133 18.3333C13.7275 18.3333 17.118 15.1838 17.5001 11.1577Z'
+        strokeWidth='1.67'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_15158_3715'>
+        <rect width='20' height='20' fill='white' />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default IconDark
diff --git a/webapps/world-builder-dashboard/src/assets/IconDroplets02.tsx b/webapps/world-builder-dashboard/src/assets/IconDroplets02.tsx
@@ -4,7 +4,6 @@ const IconDroplets02: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' {...props}>
     <path
       d='M12 21.5C13.8565 21.5 15.637 20.7625 16.9497 19.4497C18.2625 18.137 19 16.3565 19 14.5C19 12.5 18 10.6 16 9C14 7.4 12.5 5 12 2.5C11.5 5 10 7.4 8 9C6 10.6 5 12.5 5 14.5C5 16.3565 5.7375 18.137 7.05025 19.4497C8.36301 20.7625 10.1435 21.5 12 21.5Z'
-      stroke='#667085'
       strokeWidth='2'
       strokeLinecap='round'
       strokeLinejoin='round'

diff --git a/webapps/world-builder-dashboard/src/assets/IconLight.tsx b/webapps/world-builder-dashboard/src/assets/IconLight.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const IconLight: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none' {...props}>
+    <path
+      d='M10.5001 1.66666V3.33332M10.5001 16.6667V18.3333M3.83341 9.99999H2.16675M5.76184 5.26175L4.58333 4.08324M15.2383 5.26175L16.4168 4.08324M5.76184 14.7417L4.58333 15.9202M15.2383 14.7417L16.4168 15.9202M18.8334 9.99999H17.1667M14.6667 9.99999C14.6667 12.3012 12.8013 14.1667 10.5001 14.1667C8.1989 14.1667 6.33341 12.3012 6.33341 9.99999C6.33341 7.6988 8.1989 5.83332 10.5001 5.83332C12.8013 5.83332 14.6667 7.6988 14.6667 9.99999Z'
+      strokeWidth='1.67'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export default IconLight
diff --git a/webapps/world-builder-dashboard/src/assets/IconWallet04.tsx b/webapps/world-builder-dashboard/src/assets/IconWallet04.tsx
@@ -4,7 +4,6 @@ const IconWallet04: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' {...props}>
     <path
       d='M20 9.5V7.2C20 6.0799 20 5.51984 19.782 5.09202C19.5903 4.7157 19.2843 4.40974 18.908 4.21799C18.4802 4 17.9201 4 16.8 4H5.2C4.0799 4 3.51984 4 3.09202 4.21799C2.7157 4.40973 2.40973 4.71569 2.21799 5.09202C2 5.51984 2 6.0799 2 7.2V16.8C2 17.9201 2 18.4802 2.21799 18.908C2.40973 19.2843 2.71569 19.5903 3.09202 19.782C3.51984 20 4.07989 20 5.2 20L16.8 20C17.9201 20 18.4802 20 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V14.5M15 12C15 11.5353 15 11.303 15.0384 11.1098C15.1962 10.3164 15.8164 9.69624 16.6098 9.53843C16.803 9.5 17.0353 9.5 17.5 9.5H19.5C19.9647 9.5 20.197 9.5 20.3902 9.53843C21.1836 9.69624 21.8038 10.3164 21.9616 11.1098C22 11.303 22 11.5353 22 12C22 12.4647 22 12.697 21.9616 12.8902C21.8038 13.6836 21.1836 14.3038 20.3902 14.4616C20.197 14.5 19.9647 14.5 19.5 14.5H17.5C17.0353 14.5 16.803 14.5 16.6098 14.4616C15.8164 14.3038 15.1962 13.6836 15.0384 12.8902C15 12.697 15 12.4647 15 12Z'
-      stroke='#667085'
       strokeWidth='2'
       strokeLinecap='round'
       strokeLinejoin='round'

diff --git a/webapps/world-builder-dashboard/src/components/bridge/allowance/ApproveAllowance.module.css b/webapps/world-builder-dashboard/src/components/bridge/allowance/ApproveAllowance.module.css
@@ -146,7 +146,7 @@
 }
 
 .approveButtonLabel, .approveButtonLabelLoading {
-    color: var(--Base-White, #ffffff);
+    color: #fff;
 
     /* Text sm/Semibold */
 

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.module.css
@@ -19,7 +19,7 @@
 }
 
 .buttonLabel, .buttonLabelLoading {
-  color: var(--Base-White, #ffffff);
+  color: var(--Primary-200, #ffffff);
 
   /* Text sm/Semibold */
 
@@ -75,7 +75,7 @@
 
 .container:disabled {
   border-radius: 8px;
-  background: var(--Gray-600, #475467);
+  background: var(--Disabled-Button, #393939);
   cursor: not-allowed;
   border: none;
 }

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/BridgeView.module.css
@@ -42,7 +42,7 @@
   gap: 8px;
   border-radius: 8px;
   display: flex;
-  background: var(--Base-White, #ffffff);
+  background: var(--Base-Container, #ffffff);
   border: 1px solid var(--Gray-100, #f2f4f7);
   width: 100%;
 }
@@ -62,12 +62,12 @@
 
 .selectedDirectionButton {
   background: var(--Primary-600, #EF233B);
-  color: var(--Base-White, #ffffff);
+  color: var(--Primary-200, #ffffff);
 }
 
 .directionButton {
   background: transparent;
-  color: var(--Gray-600, #475467);
+  color: var(--Gray-600, #fff);
 }
 
 .networksContainer {
@@ -80,7 +80,7 @@
 
   border-radius: 8px;
   border: 1px solid var(--Gray-100, #f2f4f7);
-  background: var(--Base-White, #ffffff);
+  background: var(--Base-Container, #ffffff);
 }
 
 .networkSelect {

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/NetworkSelector.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/NetworkSelector.module.css
@@ -5,8 +5,8 @@
     align-self: stretch;
 
     border-radius: 8px;
-    border: 1px solid #d0d5dd;
-    background: var(--Base-White, #ffffff);
+    border: 1px solid var(--Gray-200, #d0d5dd);
+    background: var(--Base-Container, #ffffff);
 
     box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
     color: var(--Gray-700, #344054);
@@ -56,7 +56,7 @@
 }
 
 .option:hover {
-    background-color: transparent !important;
+    background-color: var(--Gray-60, #393939) !important;
 }
 
 

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/TransactionSummary.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/TransactionSummary.module.css
@@ -4,7 +4,7 @@
   gap: 12px;
   font-family: Inter, sans-serif;
   border-radius: 8px;
-  background: var(--Base-White, #ffffff);
+  background: var(--Base-Container, #ffffff);
   width: 100%;
   padding-bottom: 12px;
   padding-top: 12px;
@@ -21,7 +21,7 @@
 .divider {
   height: 1px;
   place-self: stretch;
-  background: var(--Gray-100, #f2f4f7);
+  background: var(--Gray-200, #f2f4f7);
 }
 
 .dataRow {

diff --git a/webapps/world-builder-dashboard/src/components/bridge/bridge/ValueToBridge.module.css b/webapps/world-builder-dashboard/src/components/bridge/bridge/ValueToBridge.module.css
@@ -76,7 +76,7 @@
 
   border-radius: 8px;
   border: 1px solid var(--Gray-100, #f2f4f7);
-  background: var(--Base-White, #fff);
+  background: var(--Base-Container, #fff);
 }
 
 .input {
@@ -92,7 +92,7 @@
   border: none;
   outline: none;
   padding: 0;
-  background: var(--Base-White, #fff);
+  background: var(--Base-Container, #fff);
 }
 
 .input:disabled {
@@ -112,7 +112,7 @@
   gap: 8px;
 
   border-radius: 8px;
-  background: var(--Base-Brand, #ef233c);
+  background: var(--Primary-600, #ef233c);
   border: none;
   color: var(--Primary-25, #fffafb);
 
@@ -125,7 +125,7 @@
 }
 
 .maxButton:disabled {
-  background: var(--Gray-600, #475467);
+  background: var(--Disabled-Button, #475467);
   cursor: not-allowed;
 }
 

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx
@@ -33,7 +33,7 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
           <div className={styles.gridItem}>
             <div className={styles.typeDeposit}>
               Deposit
-              <IconArrowNarrowDown stroke={'#3538CD'} />
+              <IconArrowNarrowDown className={styles.arrowUp} />
             </div>
           </div>
           <div className={styles.gridItem}>{timeAgo(deposit.lowNetworkTimestamp)}</div>
@@ -50,13 +50,13 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
                 {status.data && status.data.l2Result?.complete ? (
                   <div className={styles.settled}>
                     Completed
-                    <IconLinkExternal02 stroke={'#027A48'} />
+                    <IconLinkExternal02 stroke="#fff" />
                   </div>
                 ) : (
                   <div className={styles.pending}>
                     Pending
-                    <IconLinkExternal02 stroke={'#175CD3'} />
-                  </div>
+                    <IconLinkExternal02 stroke="#fff" />
+                  </div>    
                 )}
               </div>
             </a>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/DepositMobile.tsx
@@ -37,12 +37,12 @@ const DepositMobile: React.FC<DepositMobileProps> = ({ deposit }) => {
               {status.data && status.data.l2Result?.complete ? (
                 <div className={parentStyles.settled}>
                   Completed
-                  <IconLinkExternal02 stroke={'#027A48'} />
+                  <IconLinkExternal02 stroke={'#fff'} />
                 </div>
               ) : (
                 <div className={parentStyles.pending}>
                   Pending
-                  <IconLinkExternal02 stroke={'#175CD3'} />
+                  <IconLinkExternal02 stroke={'#fff'} />
                 </div>
               )}
             </a>

diff --git a/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx b/webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx
@@ -1,7 +1,9 @@
 // External Libraries
 import React, { Fragment } from 'react'
+
 // Styles
 import styles from './WithdrawTransactions.module.css'
+
 // Absolute Imports
 import Deposit from '@/components/bridge/history/Deposit'
 import Withdrawal from '@/components/bridge/history/Withdrawal'
@@ -13,7 +15,6 @@ interface WithdrawTransactionsProps {}
 const HistoryDesktop: React.FC<WithdrawTransactionsProps> = () => {
   const { connectedAccount } = useBlockchainContext()
   const messages = useMessages(connectedAccount)
-
   const headers = ['Type', 'Submitted', 'Token', 'From', 'To', 'Transaction', 'Status']
 
   return (