🎨 Replace sir with turf + move css to dedicated scss files

src/components/login.rs

@@ -1,5 +1,4 @@
 use dioxus::prelude::*;
-use sir::css;
 use std::str::FromStr;
 use std::sync::Arc;
 
@@ -8,6 +7,8 @@ use crate::components::avatar_selector::AvatarSelector;
 use crate::components::header::Header;
 use crate::matrix_client::{LoginStyle, MatrixClient};
 
+turf::style_sheet!("src/components/login.scss");
+
 pub fn Login(cx: Scope) -> Element {
     let app_context = use_shared_state::<AppSettings>(cx).unwrap();
 
@@ -17,68 +18,8 @@ pub fn Login(cx: Scope) -> Element {
 
     let empty_placeholder = String::from("");
 
-    let root = css!(
-        "
-        width: 90%;
-        height: 98%;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        padding: 5%;
-        padding-top: 2%;
-
-        background: linear-gradient(rgb(138, 191, 209), rgb(236, 246, 249) 10%);
-        "
-    );
-
-    let header = css!(
-        "
-        height: 5%;
-        width: 100%;
-        "
-    );
-
-    let body = css!(
-        "
-        height: 50%;
-        width: 50%;
-        max-width: 400px;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        padding-bottom: 3%;
-        "
-    );
-
-    let footer_buttons = css!(
-        "
-        width: 100%;
-
-        padding-top: 5%;
-
-        display: flex;
-        justify-content: center;
-        "
-    );
-
-    let avatar_selector = css!(
-        "
-        height: 30%;
-        width: 100%;
-        "
-    );
-
-    let invalid_input_css = css!(
-        "
-        border-color: red;
-        "
-    );
     let password_class = if **invalid_login {
-        invalid_input_css
+        ClassName::INVALID_INPUT
     } else {
         ""
     };
@@ -114,18 +55,20 @@ pub fn Login(cx: Scope) -> Element {
     };
 
     cx.render(rsx! {
+        style { STYLE_SHEET },
+
         div {
-            class: "{root}",
+            class: ClassName::ROOT,
 
             div {
-                class: "{header}",
+                class: ClassName::HEADER,
                 Header {},
             },
 
             div {
-                class: "{body}",
+                class: ClassName::BODY,
                 div {
-                    class: "{avatar_selector}",
+                    class: ClassName::AVATAR_SELECTOR,
                     AvatarSelector {},
                 },
 
@@ -166,9 +109,9 @@ pub fn Login(cx: Scope) -> Element {
                 },
 
                 div {
-                    class: "{footer_buttons}",
+                    class: ClassName::FOOTER_BUTTONS,
                     input {
-                        class: "button",
+                        class: ClassName::BUTTON,
                         onclick:  run_matrix_client,
                         r#type: "submit",
                         value: "sign in",