From a85cdfd5b71f37cc6ca84e8e86c2808cf8920c98 Mon Sep 17 00:00:00 2001
From: Tomas Chmelevskij <t.chmelevskij@gmail.com>
Date: Wed, 27 Apr 2022 16:01:53 +0200
Subject: [PATCH] refactor: move styles closer to the components

---
 src/components/quad-status/BatteryLegend.vue  | 16 ++++++
 src/components/status-bar/StatusBar.vue       | 36 +++++++++++--
 .../status-bar/StatusBarVersion.vue           | 17 ++++--
 src/css/dark-theme.css                        |  1 +
 src/css/main.css                              | 52 -------------------
 5 files changed, 62 insertions(+), 60 deletions(-)

diff --git a/src/components/quad-status/BatteryLegend.vue b/src/components/quad-status/BatteryLegend.vue
index 1e15fa02..e13a872e 100644
--- a/src/components/quad-status/BatteryLegend.vue
+++ b/src/components/quad-status/BatteryLegend.vue
@@ -32,3 +32,19 @@ export default {
   },
 };
 </script>
+
+<style>
+.battery-legend {
+  display: inline;
+  position: relative;
+  top: -2px;
+  margin-top: 0;
+  left: 0;
+  right: 0;
+  width: 40px;
+  text-align: left;
+  color: silver;
+  margin-left: -8px;
+  padding-right: 4px;
+}
+</style>
diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue
index 70c916c6..d71a57ec 100644
--- a/src/components/status-bar/StatusBar.vue
+++ b/src/components/status-bar/StatusBar.vue
@@ -69,20 +69,48 @@ export default {
 
     configuratorVersion: {
       type: String,
-      default: '',
+      default: "",
     },
     firmwareVersion: {
       type: String,
-      default: '',
+      default: "",
     },
     firmwareId: {
       type: String,
-      default: '',
+      default: "",
     },
     hardwareId: {
       type: String,
-      default: '',
+      default: "",
     },
   },
 };
 </script>
+
+<style>
+/** Status bar **/
+#status-bar {
+  position: fixed;
+  display: flex;
+  bottom: 0;
+  width: calc(100% - 20px);
+  height: 20px;
+  line-height: 20px;
+  padding: 0 10px 0 10px;
+  border-top: 1px solid #7d7d79;
+  background-color: #bfbeb5;
+}
+
+#status-bar > * ~ * {
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 1px solid #7d7d79;
+}
+
+/** Status bar (phones) **/
+@media all and (max-width: 575px) {
+  #status-bar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/status-bar/StatusBarVersion.vue b/src/components/status-bar/StatusBarVersion.vue
index adb735b3..9bdb0a1c 100644
--- a/src/components/status-bar/StatusBarVersion.vue
+++ b/src/components/status-bar/StatusBarVersion.vue
@@ -16,20 +16,29 @@ export default {
   props: {
     configuratorVersion: {
       type: String,
-      default: '',
+      default: "",
     },
     firmwareVersion: {
       type: String,
-      default: '',
+      default: "",
     },
     firmwareId: {
       type: String,
-      default: '',
+      default: "",
     },
     hardwareId: {
       type: String,
-      default: '',
+      default: "",
     },
   },
 };
 </script>
+
+<style>
+.version {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  margin-left: auto;
+}
+</style>
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index 18d51e55..f488e8ab 100644
--- a/src/css/dark-theme.css
+++ b/src/css/dark-theme.css
@@ -46,6 +46,7 @@ body {
     background-color: #393b3a;
 }
 
+/* NOTE: need to think on how to load the dark theme with vue */
 #status-bar {
     background-color: #414443;
 }
diff --git a/src/css/main.css b/src/css/main.css
index bf799c9d..23767233 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -656,21 +656,6 @@ input[type="number"]::-webkit-inner-spin-button {
     width: 31px;
 }
 
-
-.battery-legend {
-    display: inline;
-    position: relative;
-    top: -2px;
-    margin-top: 0;
-    left: 0;
-    right: 0;
-    width: 40px;
-    text-align: left;
-    color: silver;
-    margin-left: -8px;
-    padding-right: 4px
-}
-
 .quad-status-contents progress::-webkit-progress-bar {
     height: 12px;
     background-color: #eee;
@@ -1457,43 +1442,6 @@ li.active .ic_mission {
     }
 }
 
-
-
-/** Status bar **/
-#status-bar {
-    position: fixed;
-    display: flex;
-    bottom: 0;
-    width: calc(100% - 20px);
-    height: 20px;
-    line-height: 20px;
-    padding: 0 10px 0 10px;
-    border-top: 1px solid #7d7d79;
-    background-color: #bfbeb5;
-}
-
-#status-bar > * ~ * {
-    padding-left: 10px;
-    margin-left: 10px;
-    border-left: 1px solid #7d7d79;
-}
-
-#status-bar .version {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    margin-left: auto;
-}
-
-/** Status bar (phones) **/
-@media all and (max-width: 575px) {
-    #status-bar {
-        display: none;
-    }
-}
-
-
-
 #cache {
     display: none;
 }