fix: scrollbars and added hover

Author: ZigTag

examples/gauge/Components/Input.tsx

@@ -88,8 +88,10 @@ export class Checkbox extends DisplayComponent<CheckboxProps> {
       <InterfaceNavbarItemV2
         content={""}
         active={this.isActive}
-        class={`h-full flex-grow bg-white text-black flex items-center justify-center ${this.props.class ?? ""}`}
-        activeClass="!bg-green-400 !text-white"
+        class={`h-full flex-grow bg-white text-black flex items-center justify-center hover:bg-gray-400 ${
+          this.props.class ?? ""
+        }`}
+        activeClass="hover:!bg-green-700 !bg-green-500 !text-white"
         setActive={() => this.onClick()}
       >
         <span class="text-4xl">{this.isActive.map(val => (val ? "✔" : "X"))}</span>

examples/gauge/Components/Pages/Dashboard/Dashboard.tsx

@@ -37,7 +37,7 @@ export class Dashboard extends DisplayComponent<DashboardProps> {
   private displayItems(data: PackageInfo, index: number): VNode {
     return (
       <InterfaceNavbarItemV2
-        class="w-full p-4 flex items-center"
+        class="w-full p-4 flex items-center hover:bg-blue-800"
         activeClass="bg-blue-400"
         content={""}
         active={this.props.selectedDatabaseIndex.map(val => val === index)}
@@ -78,7 +78,7 @@ export class Dashboard extends DisplayComponent<DashboardProps> {
                 />
               </div>
             </div>
-            <Button onClick={() => this.setDatabase()} class="p-4 bg-blue-400">
+            <Button onClick={() => this.setDatabase()} class="p-4 bg-blue-400 hover:bg-blue-800">
               <p class="text-2xl">Select Database</p>
             </Button>
           </div>

examples/gauge/Components/Pages/Test/Test.tsx

@@ -162,7 +162,7 @@ export class TestPage extends DisplayComponent<TestPageProps> {
               {this.functionList.map(obj => (
                 <InterfaceNavbarItemV2
                   content={""}
-                  class="w-full p-2 flex flex-col items-start"
+                  class="w-full p-2 flex flex-col items-start hover:bg-blue-800"
                   activeClass="bg-blue-400"
                   active={this.selectedFunction.map(index => index === obj.index)}
                   setActive={() => this.selectedFunction.set(obj.index)}
@@ -237,7 +237,7 @@ export class TestPage extends DisplayComponent<TestPageProps> {
               <p class="text-xl whitespace-pre">{this.output}</p>
             </div>
             <Button
-              class="h-16 flex flex-row items-center pl-4 bg-blue-400 overflow-auto"
+              class="h-16 flex flex-row items-center pl-4 bg-blue-400 overflow-auto hover:bg-blue-800"
               onClick={() => this.handleFunction()}
             >
               <span class="text-3xl">Try:</span>

examples/gauge/MyInstrument.css

@@ -6,3 +6,20 @@
   width: 100%;
   height: 100%;
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1d2838;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #7f868f;
+  border-radius: 2rem;
+}
+
+::-webkit-scrollbar-corner {
+  background: #1d2838;
+}