[style] UI dark color scheme implementation (#2163)

decred · Aug 8, 2019 · bd63dd9 · bd63dd9
1 parent 9a50481
commit bd63dd9
Show file tree

Hide file tree

Showing 136 changed files with 1,252 additions and 348 deletions.
diff --git a/app/components/charts/BalanceChart.js b/app/components/charts/BalanceChart.js
@@ -18,8 +18,8 @@ const BalanceChart = ({ data, intl }) => {
 
   return (
     <BarChart stackOffset="sign" width={homeChartSize.width} height={homeChartSize.height} data={displayData}>
-      <XAxis tickLine={false} dataKey="name" style={yAxisStyle} />
-      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding} />
+      <XAxis tickLine={false} dataKey="name" style={yAxisStyle} className="xAxis"/>
+      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding} className="yAxis"/>
       <Tooltip cursor={hoverFill} content={<ChartTooltip />} />
       <Bar barSize={8} dataKey={lockedKey} stackId="a" fill="#0c1e3e" radius={radiusBottom} />
       <Bar barSize={8} dataKey={availableKey} stackId="a" fill="#2971ff" radius={radiusTop} />

diff --git a/app/components/charts/StakeRewardsChart.js b/app/components/charts/StakeRewardsChart.js
@@ -49,8 +49,8 @@ const VoteTimeChart = ({ data, intl }) => {
 
   return (
     <LineChart stackOffset="sign" width={myTicketsChartSize.width} height={myTicketsChartSize.height} data={displayData}>
-      <XAxis tickLine={false} dataKey="name" style={yAxisStyle} />
-      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding} />
+      <XAxis tickLine={false} dataKey="name" style={yAxisStyle} className="xAxis"/>
+      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding} className="yAxis"/>
       <Tooltip cursor={hoverFill} content={<ChartTooltip />} />
       <Line barSize={8} dataKey={stakeRewardsKey} stackId="a" fill="#0c1e3e" radius={radiusBottom} />
       <Line barSize={8} dataKey={stakeFeesKey} stackId="a" fill="#69d5f7" radius={radiusTop} />

diff --git a/app/components/charts/Styles.js b/app/components/charts/Styles.js
@@ -1,13 +1,11 @@
 export const yAxisStyle = {
   fontFamily: "Source Sans Pro",
-  fontSize: 10,
-  fill: "#a4afba",
+  fontSize: 10
 };
 
 export const xAxisStyle = {
   fontFamily: "Source Sans Pro",
-  fontSize: 10,
-  fill: "#a4afba",
+  fontSize: 10
 };
 
 export const homeChartSize = {

diff --git a/app/components/charts/TicketChart.js b/app/components/charts/TicketChart.js
@@ -23,8 +23,8 @@ const BalanceChart = ({ data, intl }) => {
 
   return (
     <BarChart stackOffset="sign" width={homeChartSize.width} height={homeChartSize.height} data={displayData}>
-      <XAxis tickLine={false} dataKey="name" style={yAxisStyle}/>
-      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding}/>
+      <XAxis tickLine={false} dataKey="name" style={yAxisStyle} className="xAxis"/>
+      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding} className="yAxis"/>
       <Tooltip cursor={hoverFill} content={<ChartTooltip />} />
       <Bar barSize={8} dataKey={lockedKey} stackId="a" fill="#2971ff" radius={radiusBottom} />
       <Bar barSize={8} dataKey={revokedKey} stackId="a" fill="#8e1702" radius={radiusMiddle} />

diff --git a/app/components/charts/TransactionChart.js b/app/components/charts/TransactionChart.js
@@ -18,8 +18,8 @@ const BalanceChart = ({ data, intl }) => {
 
   return (
     <BarChart stackOffset="sign" width={homeChartSize.width} height={homeChartSize.height} data={displayData}>
-      <XAxis tickLine={false} dataKey="name" style={xAxisStyle}/>
-      <YAxis tickLine={false} orientation="right" style={yAxisStyle} padding={padding}/>
+      <XAxis tickLine={false} dataKey="name" style={xAxisStyle} className="xAxis"/>
+      <YAxis tickLine={false} orientation="right" style={yAxisStyle} padding={padding} className="yAxis"/>
       <Tooltip cursor={hoverFill} content={<ChartTooltip />} />
       <ReferenceLine y={0} stroke="#f3f6f6" />
       <Bar dataKey={sentKey} stackId="a" fill="#fd704a" barSize={8} radius={radiusFull} />

diff --git a/app/components/charts/VoteTimeChart.js b/app/components/charts/VoteTimeChart.js
@@ -38,8 +38,8 @@ const VoteTimeChart = ({ data, intl }) => {
 
   return (
     <BarChart stackOffset="sign" width={myTicketsChartSize.width} height={myTicketsChartSize.height} data={displayData}>
-      <XAxis tickLine={false} dataKey="name" style={yAxisStyle} />
-      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding} />
+      <XAxis tickLine={false} dataKey="name" style={yAxisStyle} className="xAxis"/>
+      <YAxis tickLine={false} orientation="right" style={xAxisStyle} padding={padding} className="yAxis"/>
       <Tooltip cursor={hoverFill} content={<ChartTooltip />} />
       <Bar barSize={8} dataKey={countKey} stackId="a" fill="#2971ff" radius={radiusFull} />
     </BarChart>

diff --git a/app/style/AccountRow.less b/app/style/AccountRow.less
@@ -2,25 +2,25 @@
 @import (reference) "./Icons.less";
 
 .account-row-top-spendable {
-  color: var(--stroke-color-hovered);
+  color: var(--account-text);
   font-size: 13px;
   line-height: 17px;
 }
 
 .account-row-top-spendable-value {
-  color: var(--input-color-default);
+  color: var(--tutorial-header);
   display: inline-block;
   width: 140px;
 }
 
 .account-row-top-account-name {
-  color: var(--input-color-default);
+  color: var(--tutorial-header);
   font-size: 19px;
   line-height: 24px;
 }
 
 .account-row-top-account-funds {
-  color: var(--input-color-default);
+  color: var(--tutorial-header);
   font-size: 19px;
   text-align: right;
 }
@@ -32,29 +32,35 @@
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
-  background-image: @accounts-default;
+  background-image: var(--accounts-default);
   background-size: 20px auto;
   background-repeat: no-repeat;
   background-position: 15px center;
   background-color: var(--background-back-color);
   border-top: 1px solid var(--background-container-hover);
 
   &.imported {
-    background-image: @accounts-imported;
+    background-image: var(--accounts-imported);
   }
 }
 
 .account-row-details-top:hover {
-  background-color: var(--background-container-hover);
+  background-color: var(--account-row-hover);
 }
 
 .account-row-details-bottom {
   background-color: var(--background-container);
+
+  &.active {
+    .account-row-details-top {
+      background-color: var(--disabled-background-color);
+    }
+  }
 }
 
 .account-row-details-bottom-columns {
   width: 100%;
-  color: var(--stroke-color-hovered);
+  color: var(--account-text);
   margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
@@ -93,7 +99,7 @@
 
 .account-row-details-bottom-spec-last {
   border-bottom: 1px solid var(--disabled-background-color);
-  color: var(--input-color-default);
+  color: var(--tutorial-header);
   font-size: 12px;
 }
 
@@ -104,11 +110,11 @@
 .account-row-details-bottom-spec-value {
   margin-left: 1em;
   text-align: left;
-  color: var(--input-color-default);
+  color: var(--tutorial-header);
 }
 
 .account-row-rename-bottom {
-  color: var(--input-color-default);
+  color: var(--tutorial-header);
   font-size: 12px;
   padding: 14px;
 }
@@ -172,7 +178,7 @@
 .account-actions {
   width: 93%;
   margin-left: 20px;
-  border-top: 1px solid var(--disabled-background-color);
+  border-top: 1px solid var(--text-toggle-button-border);
   display: flex;
   flex-direction: row;
 }
@@ -210,13 +216,13 @@
   }
 
   .account-actions-pubkey-area {
-    color: var(--background-back-color);
+    color: var(--account-pubkey-text);
     font-size: 13px;
     line-height: 17px;
     font-weight: 400;
     padding: 2px 20px 3px 20px;
     border-radius: 3px;
-    background-color: var(--disabled-color);
+    background-color: var(--linear-progress-text);
     height: 32px;
     width: 390px;
     word-break: break-all;

diff --git a/app/style/AgendaCard.less b/app/style/AgendaCard.less
@@ -11,7 +11,7 @@
   padding: 20px;
   float: left;
   background-color: var(--background-back-color);
-  background-image: @agenda-card-kebab;
+  background-image: var(--agenda-card-kebab);
   background-position: 93% 27px;
   background-size: 10px;
   background-repeat: no-repeat;
@@ -100,7 +100,7 @@
   height: 80px;
   margin-bottom: 55px;
   float: left;
-  color: var(--stroke-color-hovered);
+  color: var(--agenda-card-bottom-cfg);
 }
 
 .agenda-card-bottom-cfg-last {
@@ -153,6 +153,10 @@
   margin-top: 6px;
   float: left;
   width: 186px;
+  color:var(--header-desc-lighter-color);
+  span {
+    color:var(--input-color-default);
+  }
 }
 
 .agenda-card-text-highlight-small {
@@ -172,7 +176,7 @@
   width: 11px;
   height: 11px;
   float: right;
-  background-image: @agenda-close-icon;
+  background-image: var(--agenda-close-icon);
   background-position: 50% 50%;
   background-size: 11px;
   background-repeat: no-repeat;

diff --git a/app/style/Balance.less b/app/style/Balance.less
@@ -18,5 +18,5 @@
 }
 
 .balance-base {
-  color: var(--stroke-color-hovered);
+  color: var(--account-text);
 }
diff --git a/app/style/Chart.less b/app/style/Chart.less
@@ -108,3 +108,19 @@
     }
   }
 }
+
+.xAxis,
+.yAxis
+{
+  text{
+    fill: var(--chart-axis-text);
+  }
+
+  line {
+    stroke: var(--chart-axis-stroke);
+  } 
+}
+
+.recharts-tooltip-cursor {
+  fill: var(--chart-cursor-color);
+}
diff --git a/app/style/CreateWalletForm.less b/app/style/CreateWalletForm.less
@@ -29,6 +29,7 @@
   line-height: 17px;
   width: 150px;
   margin-left: -160px;
+  color: var(--wallet-tutorial-text);
 }
 
 .create-wallet-button-container {
@@ -39,34 +40,34 @@
   height: 29px;
 
   .text-toggle-button-left {
-    color: var(--disabled-color);
-    background-color: var(--background-container);
-    border: 1px solid var(--disabled-background-color);
+    color: var(--text-toggle-button-inactive-text);
+    background-color: var(--text-toggle-button-bg);
+    border: 1px solid var(--text-toggle-button-border);
     border-radius: 3px 0px 0px 3px;
     min-width: 0px;
     padding: 6px 20px 6px 20px;
   }
 
   .text-toggle-button-right {
-    color: var(--disabled-color);
-    background-color: var(--background-container);
-    border: 1px solid var(--disabled-background-color);
+    color: var(--text-toggle-button-inactive-text);
+    background-color: var(--text-toggle-button-bg);
+    border: 1px solid var(--text-toggle-button-border);
     border-radius: 0px 3px 3px 0px;
     min-width: 0px;
     padding: 6px 20px 6px 20px;
   }
 
   .text-toggle-button-left.text-toggle-button-active {
     color: var(--input-color-default);
-    background-color: var(--background-back-color);
-    border: 1px solid var(--disabled-background-color);
+    background-color: var(--text-toggle-button-active-bg);
+    border: 1px solid var(--text-toggle-button-border);
     font-weight: 400;
   }
 
   .text-toggle-button-right.text-toggle-button-active {
     color: var(--input-color-default);
-    background-color: var(--background-back-color);
-    border: 1px solid var(--disabled-background-color);
+    background-color: var(--text-toggle-button-active-bg);
+    border: 1px solid var(--text-toggle-button-border);
     font-weight: 400;
   }
 }
@@ -78,6 +79,10 @@
 
 .go-back-button {
   margin-top: 8px;
+  color: var(--home-content-link);
+}
+.go-back-button:hover {
+  color: var(--title-text-and-button-background-hovered);
 }
 
 .seedArea {
@@ -119,7 +124,7 @@
     padding-left: 2px;
     border-radius: 3px;
     border: 1px solid var(--white-border);
-    background-color: var(--background-back-color);
+    background-color: var(--linear-progress-text);
     color: var(--title-text-and-button-background);
   }
 
@@ -171,7 +176,7 @@
     float: right;
     background-repeat: no-repeat;
     background-size: 10px;
-    background-image: @x-grey;
+    background-image: var(--x-grey);
     opacity: 1;
   }
 
@@ -194,7 +199,7 @@
 }
 
 .createwallet-button.new {
-  background-image: @createnewwallet;
+  background-image: var(--createnewwallet);
 }
 
 .createwallet-button.restore {

diff --git a/app/style/ExportPage.less b/app/style/ExportPage.less
@@ -41,7 +41,7 @@
 }
 
 .export-area-right {
-  background-color: var(--disabled-background-color);
+  background-color: var(--disabled-background-color-dark);
   padding: 30px 20px 0px 20px;
   width: 40%;
   font-size: 13px;
@@ -50,7 +50,8 @@
   cursor: pointer;
   padding-bottom: 10px;
   height: 100% !important;
-
+  color: var(--wallet-label);
+
   .vertical-expand {
     float: right;
   }