Changed size, weight, and color assignments to improve contrast and r…

…eadability
by-The-Lindemans · Sep 27, 2024 · d6d3634 · d6d3634
1 parent 44c57ef
commit d6d3634
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/gui/src/lib.rs b/gui/src/lib.rs
@@ -80,7 +80,6 @@ fn LabeledProgressBar(numerator: u32, denominator: u32) -> impl IntoView {
         0.0
     }
     .round();
-    let width_percentage = format!("{:.0}%", percent);
 
     view! {
         <div class="labeled-progress-bar">
@@ -348,8 +347,9 @@ fn App() -> impl IntoView {
                     width: 100%;
                     overflow: hidden;
                     background-color: var(--background-color);
-                    font-size: xx-large;
+                    font-size: x-large;
                     font-family: "Noto Sans", sans-serif;
+                    font-weight: 400;
                 }
 
                 #app {
@@ -369,7 +369,7 @@ fn App() -> impl IntoView {
                 }
 
                 .widget-title {
-                    font-weight: bold;
+                    font-weight: 500;
                 }
 
                 .widget-main-content {
@@ -381,6 +381,10 @@ fn App() -> impl IntoView {
 
                 }
 
+                .widget-description {
+                    font-size: large;
+                }
+
                 .widget-title,
                 .widget-description {
                     flex: 1;
@@ -393,6 +397,7 @@ fn App() -> impl IntoView {
                     top: 0; 
                     z-index: 1;
                     font-family: 'Code New Roman', monospace;
+                    font-size: xxx-large;
                 }
 
                 #title-widget .widget-content {
@@ -404,6 +409,12 @@ fn App() -> impl IntoView {
                     background-color: transparent;
                     cursor: default;
                 }
+
+                .header-title {
+                    color: var(--widget-background);
+                    font-weight: 700;
+                    font-size: xx-large;
+                }
                 
                 .labeled-progress-bar {
                     display: flex;
@@ -420,7 +431,7 @@ fn App() -> impl IntoView {
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    font-weight: bold;
+                    font-weight: 600;
                 }
 
                 .progress-container {
@@ -437,7 +448,7 @@ fn App() -> impl IntoView {
                     padding: 2%;
                     box-sizing: border-box;
                     border-radius: var(--border-radius);
-                    background-color: var(--background-color);
+                    background-color: var(--text-color);
                     overflow: hidden;
                     position: relative;
                 }