Dark UI Theme Overhaul (#3)

* Update UI for dark theme :D * Remove old code & Clean up Payments/Network * Update Screenshots in README * Round CPU Percent Usage * Update Load & LoadFailed Views to match new theme * Fix spacing on retry button Co-authored-by: Vincente Ciancio <[email protected]>
vciancio · Mar 27, 2021 · 757f220 · 757f220
1 parent c8b83ce
commit 757f220
Show file tree

Hide file tree

Showing 8 changed files with 269 additions and 110 deletions.
diff --git a/app/src/App.css b/app/src/App.css
@@ -1,5 +1,22 @@
+:root {
+  --color-primary: #12188c;
+  --color-primary-light: #5441bd;
+  --color-primary-dark:  #00005e;
+
+  /* https://maketintsandshades.com/#24242D */
+  --color-background: #1d1d24;
+  --color-card: #3a3a42;
+  --color-card-border: #505057;
+
+  --color-text: #FFFFFF;
+}
+
 .App {
   text-align: center;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  height: "100%";
+  min-height: 100vh;
 }
 
 .App-logo {

diff --git a/app/src/App.test.js b/app/src/App.test.js
diff --git a/app/src/components/common/CommonComponents.css b/app/src/components/common/CommonComponents.css
@@ -0,0 +1,45 @@
+.v-divider {
+  margin-left:5px;
+  margin-right:5px;
+  width:1px;
+  height:100%;
+  border-left:1px solid white;
+ } 
+
+.vertical-center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+
+.list-group-item {
+  background: var(--color-card);
+  border-color: var(--color-card-border);
+}
+
+.card {
+  padding: 10px;
+  border-radius: 25px;
+  background: var(--color-card);
+  border-color: var(--color-card-border);
+}
+
+.headerList {
+  align-items: flex-start;
+}
+
+.headerList h5 {
+  font-weight: 200;
+}
+
+.highlight-number h3 {
+  font-weight:400;
+}
+
+.highlight-number {
+  font-weight: bold;
+  font-size: x-large;
+}
diff --git a/app/src/utils/CommonRender.js → ...src/components/common/CommonComponents.js b/app/src/utils/CommonRender.js → ...src/components/common/CommonComponents.js
@@ -1,3 +1,4 @@
+import './CommonComponents.css'
 import React from 'react';
 
 function card(title, body = null, size = "") {
@@ -39,8 +40,32 @@ function list(items) {
   )
 }
 
-const CommonRender = {
+function headerList(items) {
+  const columns = []
+
+  for(let i=0; i<items.length; i++){
+    if(i !== 0){
+      columns.push(<div className="v-divider"></div>)
+    }
+    columns.push((
+      <div className="col mt-3">
+        <h5>{items[i][0]}</h5>
+        {items[i][1]}
+      </div>
+    ))
+  }
+  return (
+    <div className="container headerList">
+      <div className="row">
+        {columns}
+      </div>
+    </div>
+  )
+}
+
+const CommonComponents = {
   card,
-  list
+  list,
+  headerList
 }
-export default CommonRender
+export default CommonComponents
diff --git a/app/src/components/nodeinfo/NodeInfo.css b/app/src/components/nodeinfo/NodeInfo.css
@@ -1,12 +1,28 @@
 .card {
-    border-radius: 25px;
-    background: #12188c;
-    padding: 20px; 
-    width: 200px;
-    height: 150px;  
-  }
+    margin: auto; 
+    min-width: 50%;
+}
+
+.percent-high {
+    color: lightcoral;
+}
+
+.percent-mid {
+    color: lightsalmon;
+}
 
-.card h2 {
-  color: white;
+.percent-low {
+    color: lightgreen;
 }
-
+
+.running {
+    color: lightgreen;
+}
+
+.standby {
+    color: lightskyblue;
+}
+
+.offline {
+    color: lightcoral
+}