feat: implement layout

witnet · Jun 8, 2021 · 47748a7 · 47748a7
1 parent 071abe6
commit 47748a7
Show file tree

Hide file tree

Showing 25 changed files with 542 additions and 116 deletions.
diff --git a/packages/ui/assets/styles/main.scss b/packages/ui/assets/styles/main.scss
@@ -10,10 +10,11 @@
 
   --selected-background: #37414c;
   --selected-text: rgb(233, 231, 231);
+  --selected-border: 2px solid #62B1B015;
   --selected-icon: #62B1B058;
   --selected-options-background: #37414c;
   --selected-options-text: rgb(231, 231, 231);
-  --selected-options-border: 1px solid #1F1F24;
+  --selected-options-border: 2px solid #62B1B015;;
   --selected-options-shadow: 1px 1px 10 2px #62B1B029;
   --selected-options-highlight: #62B1B015;
 
@@ -47,6 +48,15 @@
   // links
 
   --transaction-blur-background: #FFFFFF10;
+
+  //ThemeSwitch
+
+  --icon-color: #fff;
+  --icon-background: #37414c94;
+
+  //ContractAddress
+
+  --contract-address: #41BEA5;
 }
 
 .dark-mode {
@@ -62,10 +72,10 @@
   --selected-background: #37414c;
   --selected-text: white;
   --selected-icon: #62B1B058;
-  --selected-border: 1px solid #1F1F24;
+  --selected-border: 2px solid #62B1B015;
   --selected-options-background: #37414c;
   --selected-options-text: white;
-  --selected-options-border: 1px solid #1F1F24;
+  --selected-options-border: 2px solid #62B1B015;
   --selected-options-shadow: 1px 1px 10 2px #62B1B029;
   --selected-options-highlight: #62B1B015;
 
@@ -99,6 +109,15 @@
   // links
 
   --transaction-blur-background: #FFFFFF10;
+
+  //ThemeSwitch
+
+  --icon-color: #fff;
+  --icon-background: #37414c94;
+
+  //ContractAddress
+
+  --contract-address: #41BEA5;
 }
 
 .light-mode {
@@ -152,6 +171,15 @@
   // links
 
   --transaction-blur-background: #2d2c3909;
+
+  //ThemeSwitch
+
+  --icon-color: #2D2C39;
+  --icon-background: #ffffffd3;
+
+  //ContractAddress
+
+  --contract-address: #41BEA5;
 }
 
 h1 {

diff --git a/packages/ui/assets/svg/bitcoin-card.svg b/packages/ui/assets/svg/bitcoin-card.svg
diff --git a/packages/ui/assets/svg/bitcoin.svg b/packages/ui/assets/svg/bitcoin.svg
diff --git a/packages/ui/components/ChartExample.vue → packages/ui/components/Chart.vue b/packages/ui/components/ChartExample.vue → packages/ui/components/Chart.vue
@@ -11,6 +11,7 @@
 
 <script>
 export default {
+  name: 'Chart',
   props: {
     data: {
       type: Array,
@@ -29,8 +30,6 @@ export default {
     return {
       tooltip: true,
       dateTooltip: true,
-      width: 400,
-      height: 300,
       value: '',
       date: '',
       toolTipWidth: 100,
@@ -45,7 +44,7 @@ export default {
           borderVisible: false,
         },
         timeScale: {
-          visible: true,
+          borderVisible: false,
         },
         crosshair: {
           horzLine: {
@@ -70,6 +69,7 @@ export default {
       })
     },
     lineChart() {
+      this.chart.timeScale().fitContent()
       return this.chart.addAreaSeries({
         topColor: '#41BEA556',
         bottomColor: '#41BEA504',
@@ -91,6 +91,7 @@ export default {
           )
           dataToUpdate.forEach((el) => this.updateData(el))
         }
+        this.chart.timeScale().fitContent()
       },
     },
   },