Added basic styling for checkboxes, yay

Mikayla Maki and Max created 2 years ago

Co-authored-by: Max <[e-mail]>

Change summary

crates/theme/src/theme.rs       |  3 ++-
crates/welcome/src/welcome.rs   | 14 ++++++++++----
styles/src/styleTree/welcome.ts | 33 +++++++++++++++++++++++++++------
3 files changed, 39 insertions(+), 11 deletions(-)

Detailed changes

crates/theme/src/theme.rs

@@ -860,9 +860,10 @@ pub struct WelcomeStyle {
 pub struct CheckboxStyle {
     pub width: f32,
     pub height: f32,
-    pub unchecked: ContainerStyle,
+    pub default: ContainerStyle,
     pub checked: ContainerStyle,
     pub hovered: ContainerStyle,
+    pub hovered_and_checked: ContainerStyle,
 }
 
 #[derive(Clone, Deserialize, Default)]

crates/welcome/src/welcome.rs

@@ -126,11 +126,17 @@ impl WelcomePage {
                 .with_height(style.height)
                 .contained()
                 .with_style(if checked {
-                    style.checked
-                } else if state.hovered() {
-                    style.hovered
+                    if state.hovered() {
+                        style.hovered_and_checked
+                    } else {
+                        style.checked
+                    }
                 } else {
-                    style.unchecked
+                    if state.hovered() {
+                        style.hovered
+                    } else {
+                        style.default
+                    }
                 })
                 .boxed()
         })

styles/src/styleTree/welcome.ts

@@ -6,9 +6,8 @@ export default function welcome(colorScheme: ColorScheme) {
     let layer = colorScheme.highest;
 
     // TODO
-    let checkbox_base = {
-        background: colorScheme.ramps.red(0.5).hex(),
-        cornerRadius: 8,
+    let checkboxBase = {
+        cornerRadius: 4,
         padding: {
             left: 8,
             right: 8,
@@ -26,9 +25,31 @@ export default function welcome(colorScheme: ColorScheme) {
         checkbox: {
             width: 9,
             height: 9,
-            unchecked: checkbox_base,
-            checked: checkbox_base,
-            hovered: checkbox_base
+            default: {
+                ...checkboxBase,
+                background: colorScheme.ramps.blue(0.5).hex(),
+            },
+            checked: {
+                ...checkboxBase,
+                background: colorScheme.ramps.red(0.5).hex(),
+            },
+            hovered: {
+                ...checkboxBase,
+                background: colorScheme.ramps.blue(0.5).hex(),
+
+                border: {
+                    color: colorScheme.ramps.green(0.5).hex(),
+                    width: 1,
+                }
+            },
+            hoveredAndChecked: {
+                ...checkboxBase,
+                background: colorScheme.ramps.red(0.5).hex(),
+                border: {
+                    color: colorScheme.ramps.green(0.5).hex(),
+                    width: 1,
+                }
+            }
         }
     }
 }