feat: UI overhaul

src/components/select_button.rs

@@ -0,0 +1,28 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+#[component]
+pub(crate) fn SelectButton<I: IconShape + Clone + PartialEq + 'static>(
+    icon: I,
+    is_selected: bool,
+    on_select: Callback,
+) -> Element {
+    rsx! {
+        button {
+            r#type: "button",
+            class: format!(
+                "pt-4.5 flex flex-row justify-center items-center {} rounded-xl transition-all duration-150",
+                if is_selected { "pb-3.75 bg-gray-900 drop-shadow-[0_0_0_var(--color-gray-900-muted)]" }
+                else { "pb-2.75 mt-1 bg-gray-800-muted hover:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] text-gray-400 cursor-pointer" }
+            ),
+            onclick: move |_| {
+                on_select.call(());
+            },
+            Icon {
+                icon,
+                height: 16,
+                width: 16
+            }
+        },
+    }
+}