Update various style details to be consistent with design

Author: ids1024

src/keyboard.rs

@@ -211,6 +211,7 @@ impl Keyboard {
                 ..add(&cascade! {
                     gtk::Label::new(Some(&fl!("stack-keymap-desc")));
                     ..set_line_wrap(true);
+                    ..set_justify(gtk::Justification::Center);
                     ..set_max_width_chars(100);
                     ..set_halign(gtk::Align::Center);
                 });

src/picker/group_box/group/ansi.rs

@@ -2,10 +2,15 @@ use gtk::prelude::*;
 
 use super::{PickerGroup, PickerKey};
 
-// TODO: somehow acount for spacing in widths?
+const KEY_WIDTH: f64 = 48.0;
+const KEY_SPACE: f64 = 4.0;
+
+// A 2U key takes same space as 2 1U including spacing
+// 2 1.5U keys take same space as 3 1U
+// Space bar is the same as 3 1U + 1 1.5U to line up with previous row
 static KEY_WIDTHS: &[(f64, &[&str])] = &[
     (
-        1.5,
+        1.5 * KEY_WIDTH + 0.5 * KEY_SPACE,
         &[
             "DEL",
             "BKSP",
@@ -18,8 +23,11 @@ static KEY_WIDTHS: &[(f64, &[&str])] = &[
             "RIGHT_CTRL",
         ],
     ),
-    (2.0, &["LEFT_SHIFT", "RIGHT_SHIFT", "ENTER"]),
-    (4.5, &["SPACE"]),
+    (
+        2.0 * KEY_WIDTH + KEY_SPACE,
+        &["LEFT_SHIFT", "RIGHT_SHIFT", "ENTER"],
+    ),
+    (4.5 * KEY_WIDTH + 3.5 * KEY_SPACE, &["SPACE"]),
 ];
 
 static ROWS: &[&[&str]] = &[
@@ -111,13 +119,13 @@ impl PickerAnsiGroup {
                             None
                         }
                     })
-                    .unwrap_or(1.0);
-                let key = PickerKey::new(name, width);
+                    .unwrap_or(KEY_WIDTH);
+                let key = PickerKey::new(name, width / KEY_WIDTH);
                 fixed.put(&key, x, y);
                 keys.push(key);
-                x += (48.0 * width) as i32 + 4
+                x += width as i32 + 4
             }
-            y += 48 + 4;
+            y += KEY_WIDTH as i32 + 4;
         }
 
         PickerAnsiGroup {

src/picker/mod.rs

@@ -90,6 +90,7 @@ impl ObjectImpl for PickerInner {
 
         let stack_switcher = cascade! {
             gtk::StackSwitcher::new();
+            ..style_context().add_class("picker-stack-switcher");
             ..set_stack(Some(&stack));
         };
 
@@ -98,7 +99,12 @@ impl ObjectImpl for PickerInner {
             ..set_spacing(8);
             ..set_orientation(gtk::Orientation::Vertical);
             ..set_halign(gtk::Align::Center);
-            ..add(&stack_switcher);
+            ..add(&cascade! {
+                gtk::Box::new(gtk::Orientation::Vertical, 0);
+                ..add(&gtk::Separator::new(gtk::Orientation::Horizontal));
+                ..add(&stack_switcher);
+                ..add(&gtk::Separator::new(gtk::Orientation::Horizontal));
+            });
             ..add(&stack);
             ..show_all();
         };

src/picker/tap_hold.rs

@@ -8,7 +8,7 @@ use gtk::{
 use once_cell::sync::Lazy;
 use std::cell::{Cell, RefCell};
 
-use super::{group_box::PickerBasicGroup, PickerGroupBox, PickerKey};
+use super::{group_box::PickerBasicGroup, PickerGroupBox};
 use backend::{is_qmk_basic, DerefCell, Keycode, Mods};
 
 #[derive(Clone, Copy, PartialEq)]
@@ -80,13 +80,13 @@ impl ObjectImpl for TapHoldInner {
         let hold_group_box = cascade! {
             PickerGroupBox::new(vec![
                 Box::new(PickerBasicGroup::new(
-                    "Standard Modifiers".to_string(),
+                    "Modifiers".to_string(),
                     4,
                     1.5,
                     MODIFIERS,
                 )),
                 Box::new(PickerBasicGroup::new(
-                    "Access Layer Modifiers".to_string(),
+                    "Layer Keys".to_string(),
                     4,
                     1.5,
                     LAYERS,
@@ -122,9 +122,12 @@ impl ObjectImpl for TapHoldInner {
                 }));
                 ..set_halign(gtk::Align::Start);
             });
-            // TODO label groups? Use group box?
             ..add(&hold_group_box);
-            // TODO shift click label
+            ..add(&cascade! {
+                gtk::Label::new(Some("Shift + click to select multiple modifiers."));
+                ..set_halign(gtk::Align::Start);
+            });
+            // XXX grey?
             ..add(&cascade! {
                 gtk::Label::new(Some("2. Select an action to use when the key is tapped."));
                 ..set_attributes(Some(&cascade! {

src/style.css

@@ -7,3 +7,17 @@
     border-color: #fbb86c;
     border-width: 4px;
 }
+
+.picker-stack-switcher button {
+    border: none;
+    box-shadow: none;
+    background: none;
+}
+
+.picker-stack-switcher button:checked {
+    border-bottom: 2px solid #fbb86c;
+}
+
+.picker-stack-switcher button:selected {
+    background: black;
+}