fix(theme): make compatible with multi-language

LN-Zap · Sep 19, 2018 · f7964c8 · f7964c8
1 parent f6fd4f9
commit f7964c8
Show file tree

Hide file tree

Showing 60 changed files with 639 additions and 371 deletions.
diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js
@@ -92,11 +92,13 @@ class Activity extends Component {
       updateSearchActive,
       updateSearchText,
       walletProps,
-      intl
+      intl,
+
+      settings
     } = this.props
 
     if (balance.channelBalance === null || balance.walletBalance === null) {
-      return <LoadingBolt />
+      return <LoadingBolt theme={settings.theme} />
     }
 
     const refreshClicked = () => {

diff --git a/app/components/Activity/Activity.scss b/app/components/Activity/Activity.scss
@@ -31,11 +31,11 @@
 }
 
 .activities {
-  background: $white;
+  background: var(--darkestBackground);
 
   .header {
-    background: $spaceblue;
-    color: $white;
+    background: var(--darkestBackground);
+    color: var(--primaryText);
     margin: 0 auto;
     padding: 0 40px;
     border-bottom: 1px solid $spaceborder;
@@ -47,7 +47,7 @@
     transition: all 0.25s;
 
     &.search {
-      background: linear-gradient(270deg, #868b9f 0%, #333c5e 100%);
+      background: var(--gradient);
 
       section {
         &:nth-child(1) {
@@ -62,13 +62,14 @@
         font-size: 20px;
         line-height: 24px;
         letter-spacing: 1px;
-        color: $white;
+        color: var(--primaryColor);
         width: 100%;
       }
 
       .xIcon svg {
         width: 25px;
         height: 25px;
+        stroke: var(--white);
       }
     }
 
@@ -96,13 +97,12 @@
           display: block;
           position: relative;
           margin: 0 15px;
-          padding: 20px 0;
         }
 
         svg {
           width: 14px;
           height: 14px;
-          color: $white;
+          color: var(--primaryColor);
           opacity: 0.5;
           cursor: pointer;
           transition: all 0.25s;
@@ -118,7 +118,7 @@
         right: 15px;
         width: auto;
         height: 1px;
-        background: white;
+        background: var(--primaryText);
         position: absolute;
         bottom: -1px;
       }
@@ -127,7 +127,7 @@
 }
 
 .activityContainer {
-  background: $spaceblue;
+  background: var(--primaryBackground);
   transition: opacity 0.25s;
   height: calc(100vh - 304px);
   overflow-y: auto;
@@ -142,20 +142,20 @@
 
 .toggleExpired {
   margin: 0 auto;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
-  color: $white;
-  background: #31343f;
-  padding: 10px;
+  color: var(--primaryText);
+  background: var(--lightBackground);
+  padding: 10px 7.5px;
   width: 200px;
   text-align: center;
   border-radius: 5px;
   cursor: pointer;
-  opacity: 0.5;
+  opacity: 1;
   transition: all 0.25s;
 
   &:hover {
-    opacity: 1;
+    opacity: 0.5;
   }
 }
 
@@ -165,7 +165,7 @@
   margin-bottom: 30px;
 
   h2 {
-    color: $white;
+    color: var(--primaryText);
     font-size: 10px;
     font-weight: bold;
     border-bottom: 0.2px solid #a0a0a0;
@@ -207,7 +207,7 @@
   font-size: 14px;
   transition: background-color 0.1s linear;
   transition-delay: 0.1s;
-  color: $white;
+  color: var(--primaryText);
   position: relative;
 
   &.unpaid {
@@ -300,7 +300,7 @@
     margin-right: 5px;
 
     svg {
-      color: $white;
+      color: var(--primaryText);
       font-size: 10px;
       vertical-align: middle;
       display: flex;
@@ -330,7 +330,7 @@
   flex-direction: column;
   text-align: right;
   font-size: 12px;
-  color: $white;
+  color: var(--primaryText);
 
   span {
     &:nth-child(1) {
@@ -348,11 +348,11 @@
     }
 
     .plus {
-      color: $green;
+      color: var(--superGreen);
     }
 
     .minus {
-      color: $red;
+      color: var(--superRed);
     }
   }
 }
diff --git a/app/components/Activity/ActivityModal/ActivityModal.scss b/app/components/Activity/ActivityModal/ActivityModal.scss
@@ -3,7 +3,7 @@
 .container {
   position: relative;
   height: 100vh;
-  background: $bluegrey;
+  background: var(--lightBackground);
 }
 
 .closeContainer {

diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.scss b/app/components/Activity/InvoiceModal/InvoiceModal.scss
@@ -1,14 +1,14 @@
 @import 'styles/variables.scss';
 
 .container {
-  color: $white;
+  color: var(--primaryText);
 }
 
 .content {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background: $spaceblue;
+  background: var(--darkestBackground);
   width: 85%;
   margin: 50px auto;
   padding: 30px 0;
@@ -82,13 +82,13 @@
 
           li {
             padding: 8px 15px;
-            background: #191919;
+            background: var(--lightBackground);
             cursor: pointer;
             transition: 0.25s hover;
-            border-bottom: 1px solid #0f0f0f;
+            border-bottom: 1px solid var(--lightestBackground);
 
             &:hover {
-              background: #0f0f0f;
+              background: var(--lightestBackground);
             }
           }
         }
@@ -99,12 +99,12 @@
         text-align: right;
 
         .notPaid {
-          color: $orange;
+          color: var(--lightningOrange);
           margin-top: 5px;
         }
 
         .paid {
-          color: $green;
+          color: var(--superGreen);
           margin-top: 5px;
         }
       }
@@ -149,12 +149,13 @@
     margin: 35px 10px;
     width: 235px;
     padding: 20px 10px;
-    background: #31343f;
+    background: var(--lightestBackground);
     cursor: pointer;
     transition: 0.25s all;
+    opacity: 0.75;
 
     &:hover {
-      background: darken(#31343f, 5%);
+      opacity: 1;
     }
   }
 }
diff --git a/app/components/Activity/PaymentModal/PaymentModal.scss b/app/components/Activity/PaymentModal/PaymentModal.scss
@@ -1,11 +1,11 @@
 @import 'styles/variables.scss';
 
 .container {
-  color: $white;
+  color: var(--primaryText);
   font-size: 12px;
   width: 75%;
   margin: 0 auto;
-  background: $spaceblue;
+  background: var(--darkestBackground);
 }
 
 .header {
@@ -17,13 +17,13 @@
   section {
     &:nth-child(1) {
       font-size: 16px;
-      color: $green;
+      color: var(--primaryText);
 
       svg {
         width: 16px;
         height: 16px;
         vertical-align: top;
-        fill: $green;
+        fill: var(--primaryText);
       }
 
       span:nth-child(2) {
@@ -94,13 +94,13 @@
 
       li {
         padding: 8px 15px;
-        background: #191919;
+        background: var(--lightBackground);
         cursor: pointer;
         transition: 0.25s hover;
-        border-bottom: 1px solid #0f0f0f;
+        border-bottom: 1px solid var(--lightestBackground);
 
         &:hover {
-          background: #0f0f0f;
+          background: var(--lightestBackground);
         }
       }
     }
@@ -113,7 +113,7 @@
 }
 
 .footer {
-  background: #31343f;
+  background: var(--lightestBackground);
   margin: 20px 0 50px 0;
   padding: 20px;
   text-align: center;

diff --git a/app/components/Activity/TransactionModal/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js
@@ -55,18 +55,20 @@ const TransactionModal = ({
             <FormattedMessage {...messages.on_chain} />
           </span>
         </div>
-        <div>
-          <Value
-            value={transaction.total_fees}
-            currency={ticker.currency}
-            currentTicker={currentTicker}
-            fiatTicker={ticker.fiatTicker}
-          />
-          <span>
-            {' '}
-            {currencyName} <FormattedMessage {...messages.fee} />
-          </span>
-        </div>
+        {!transaction.received && (
+          <div>
+            <Value
+              value={transaction.total_fees}
+              currency={ticker.currency}
+              currentTicker={currentTicker}
+              fiatTicker={ticker.fiatTicker}
+            />
+            <span>
+              {' '}
+              {currencyName} <FormattedMessage {...messages.fee} />
+            </span>
+          </div>
+        )}
       </section>
     </header>
 

diff --git a/app/components/Activity/TransactionModal/TransactionModal.scss b/app/components/Activity/TransactionModal/TransactionModal.scss
@@ -1,11 +1,11 @@
 @import 'styles/variables.scss';
 
 .container {
-  color: $white;
+  color: var(--primaryText);
   font-size: 12px;
   width: 75%;
   margin: 0 auto;
-  background: $spaceblue;
+  background: var(--darkestBackground);
 }
 
 .header {
@@ -17,13 +17,16 @@
   section {
     &:nth-child(1) {
       font-size: 16px;
-      color: $green;
+      color: var(--primaryText);
 
       svg {
         width: 16px;
         height: 16px;
         vertical-align: top;
-        fill: $green;
+
+        g {
+          stroke: var(--primaryText);
+        }
       }
 
       span:nth-child(2) {
@@ -99,13 +102,13 @@
 
       li {
         padding: 8px 15px;
-        background: #191919;
+        background: var(--lightBackground);
         cursor: pointer;
         transition: 0.25s hover;
-        border-bottom: 1px solid #0f0f0f;
+        border-bottom: 1px solid var(--lightestBackground);
 
         &:hover {
-          background: #0f0f0f;
+          background: var(--lightestBackground);
         }
       }
     }
@@ -119,7 +122,7 @@
 }
 
 .footer {
-  background: #31343f;
+  background: var(--lightestBackground);
   padding: 20px;
   text-align: center;