Merge pull request #136 from HyperloopUPV-H8/control-station/gauge

[control-station] Gauge component

Author: andresdlt03

control-station/index.html

@@ -7,6 +7,9 @@
             type="image/svg+xml"
             href="/vite.svg"
         />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
         <meta
             name="viewport"
             content="width=device-width, initial-scale=1.0"

control-station/package-lock.json

@@ -1,5 +1,5 @@
 .backgroundArc {
-    stroke: rgba(0, 0, 0, 0.049);
+    stroke: #c4d7e5a1;
 }
 
 .radialShadowArc {
@@ -9,16 +9,16 @@
 .rainbowArc {
     background: conic-gradient(
         from 220deg,
-        #7295ef,
-        60deg,
-        #7aefcc,
-        130deg,
-        #efe84a,
-        190deg,
-        #ffab2c,
-        240deg,
-        #ff1e1e,
-        330deg,
-        #7295ef
+        #91e473,
+        40deg,
+        #9BF37C,
+        80deg,
+        #F4E55E,
+        120deg,
+        #F4E55E,
+        220deg,
+        #F3785C,
+        310deg,
+        #F3785C
     );
 }

control-station/src/components/GaugeTag/Gauge/Gauge.module.scss

@@ -1,9 +1,14 @@
+@use "../../styles/colors";
+
 .gaugeTagWrapper {
     display: grid;
     grid-template-columns: min-content;
     justify-items: center;
     align-items: center;
     margin-bottom: -1.87em;
+    background-color: map-get($map: colors.$key-colors, $key: lightskyblue);
+    padding: 1rem;
+    border-radius: 100%;
 }
 
 .gauge {

control-station/src/components/GaugeTag/GaugeTag.module.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/fonts.scss";
+
 .textData {
     display: flex;
     flex-direction: column;
@@ -10,19 +12,22 @@
 
     .name {
         font-weight: inherit;
-        font-size: 0.7em;
-        font-weight: 400;
+        font-family: map-get($map: fonts.$font-families, $key: roboto);
+        font-size: map-get($map: fonts.$font-sizes, $key: x-small);
+        font-weight: map-get($map: fonts.$font-weights, $key: light);
+        font-style: italic;
     }
 
     .value {
-        font-family: var(--font-mono);
+        font-family: map-get($map: fonts.$font-families, $key: roboto);
         font-size: 1.8em;
-        font-weight: 600;
+        font-weight: map-get($map: fonts.$font-weights, $key: bold);
     }
 
     .units {
         font-weight: inherit;
-        font-size: 1em;
-        font-weight: 400;
+        font-family: map-get($map: fonts.$font-families, $key: roboto);
+        font-size: map-get($map: fonts.$font-sizes, $key: small);
+        font-weight: map-get($map: fonts.$font-weights, $key: normal);
     }
 }

control-station/src/components/GaugeTag/TextData/TextData.module.scss

@@ -6,7 +6,8 @@ $key-colors: (
     stable: hsl(73, 68%, 40%),
     fault: hsl(0, 68%, 40%),
     warning: hsl(49, 90%, 40%),
-    neutral: hsl(0, 0%, 40%)
+    neutral: hsl(0, 0%, 40%),
+    lightskyblue: hsl(206, 100%, 96%),
 );
 
 $lightnesses: 0, 10, 15, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 99, 100;

control-station/src/styles/colors.scss

@@ -3,6 +3,7 @@
 $font-families: (
     sans: "Inter",
     mono: "JetBrains Mono, IBM Plex Mono, monospace",
+    roboto: "Roboto"
 );
 
 $font-sizes: (