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

src/components/avatar_selector.rs

@@ -1,30 +1,13 @@
 use dioxus::prelude::*;
-use sir::css;
+
+turf::style_sheet!("src/components/avatar_selector.scss");
 
 pub fn AvatarSelector(cx: Scope) -> Element {
-    let selector = css!(
-        "
-	    position: relative;
-	    //left: 35%;
-	    height: 100%;
-	    aspect-ratio: 1;
-        "
-    );
-
-    let picture = css!(
-        "
-        position: absolute;
-	    height: 75%;
-	    aspect-ratio: 1;
-
-	    bottom: 17.5%;
-	    right: 18%;
-        "
-    );
-
     cx.render(rsx! {
+        style { STYLE_SHEET },
+
         div {
-            class: "{selector}",
+            class: ClassName::SELECTOR,
             svg {
                 view_box: "0 0 100 100",
                 linearGradient {
@@ -69,7 +52,7 @@ pub fn AvatarSelector(cx: Scope) -> Element {
                 // },
             },
             img {
-                class: "{picture}",
+                class: ClassName::PICTURE,
                 src: "./images/default-avatar.png",
             },
         },