Added tick markers to scale

Author: NatLeung96

src/ui/widgets/Tank/tank.module.css

@@ -23,6 +23,15 @@
 }
 
 .ScaleMarker {
-    position: absolute;
-    left: 0%;
+  position: absolute;
+  left: 0%;
+}
+
+.ScaleTick {
+  position: absolute;
+  left: 20px;
+  height: 2px;
+  width: 10px;
+  background-color: black;
+  transform: translateY(-1px);
 }

src/ui/widgets/Tank/tankWithScale.tsx

@@ -43,40 +43,58 @@ export const TankWithScale = (props: {
           width: "100px",
           top: "10%",
           color: foregroundColor.toString(),
-          transform: "rotate(-90deg) translateX(15px) translateY(-30px)",
+          transform: "rotate(-90deg) translateX(15px) translateY(-35px)",
           ...font?.css()
         }}
       >
         {logScale ? Number(max).toExponential(0) : Number(max).toFixed(1)}
       </span>
+      <span
+        className={classes.ScaleTick}
+        style={{
+          top: "10%"
+        }}
+      />
       <span
         className={classes.ScaleMarker}
         style={{
           height: "30px",
           width: "100px",
           top: "50%",
           color: foregroundColor.toString(),
-          transform: "rotate(-90deg) translateX(15px) translateY(-30px)",
+          transform: "rotate(-90deg) translateX(15px) translateY(-35px)",
           ...font?.css()
         }}
       >
         {logScale
           ? Number(max / 2).toExponential(0)
           : Number(max / 2).toFixed(1)}
       </span>
+      <span
+        className={classes.ScaleTick}
+        style={{
+          top: "50%"
+        }}
+      />
       <span
         className={classes.ScaleMarker}
         style={{
           height: "30px",
           width: "100px",
           top: "90%",
           color: foregroundColor.toString(),
-          transform: "rotate(-90deg) translateX(15px) translateY(-30px)",
+          transform: "rotate(-90deg) translateX(15px) translateY(-35px)",
           ...font?.css()
         }}
       >
         {logScale ? Number(min).toExponential(0) : Number(min).toFixed(1)}
       </span>
+      <span
+        className={classes.ScaleTick}
+        style={{
+          top: "90%"
+        }}
+      />
       <span
         className={classes.EmptyTank}
         style={{