💄 Fix conflicts regarding the generated CSS class names

Cargo.toml

@@ -38,3 +38,6 @@ target = "x86_64-unknown-linux-gnu"
 
 [build-dependencies]
 regex = "1.10.3"
+
+[package.metadata.turf.class_names]
+template = "<original_name>--<id>"

src/_base.scss

@@ -69,16 +69,14 @@ $border-radius: 16px;
 
 $geist-font-path: "../fonts/Geist";
 
+$transition-duration: 300ms;
+
 @font-face {
     src: url("#{$geist-font-path}/Geist-Bold.woff2") format("woff2");
     font-family: "Geist";
     font-weight: bold;
 }
 
-* {
-    font-family: "Geist";
-}
-
 body {
     height: 100vh;
     width: 100vw;
@@ -90,8 +88,15 @@ body {
 #main {
     height: 100%;
     width: 100%;
+
+    font-family: "Geist";
 }
 
+::selection {
+    background-color: transparent;
+}
+
+
 // TODO: To remove once the design updated.
 .aeroButton {
     height: 50%;

src/components/avatar_selector.rs

@@ -7,7 +7,7 @@ pub fn AvatarSelector(cx: Scope) -> Element {
         style { STYLE_SHEET },
 
         div {
-            class: ClassName::SELECTOR,
+            class: ClassName::AVATAR_SELECTOR,
             svg {
                 view_box: "0 0 100 100",
                 linearGradient {
@@ -46,7 +46,7 @@ pub fn AvatarSelector(cx: Scope) -> Element {
                 },
             },
             img {
-                class: ClassName::PICTURE,
+                class: ClassName::AVATAR_SELECTOR_PICTURE,
                 src: "./images/default-avatar.png",
             },
         },

src/components/avatar_selector.scss

@@ -1,9 +1,9 @@
-.selector {
+.avatar-selector {
 	position: relative;
 	height: 100%;
 	aspect-ratio: 1;
 
-    .picture {
+    &__picture {
 		$height: 65%;
 		$margin: calc(100% - $height) / 2;
 

src/components/button.rs

@@ -80,7 +80,7 @@ pub fn RegisterButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
         Button {
             id: cx.props.id.unwrap_or(""),
 
-            style: ClassName::REGISTER,
+            style: ClassName::REGISTER_BUTTON,
 
             onclick: |event| {
                 if let Some(cb) = &cx.props.onclick {
@@ -126,7 +126,7 @@ pub fn LoginButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
         Button {
             id: cx.props.id.unwrap_or(""),
 
-            style: ClassName::LOGIN,
+            style: ClassName::LOGIN_BUTTON,
 
             onclick: |event| {
                 if let Some(cb) = &cx.props.onclick {

src/components/button.scss

@@ -1,6 +1,6 @@
 @import "../_base.scss"
 
-.root {
+%button {
     height: 100%;
     aspect-ratio: 3.5;
 
@@ -18,27 +18,31 @@
     }
 }
 
-.register {
+.register-button {
-    @extend .root;
+    @extend %button;
 
     background-color: $color-ternary-90;
-}
+
-.register:hover {
+    &:hover {
         background-color: $color-ternary-80;
     }
-.register:active {
+
+    &:active {
         background-color: $color-ternary-70;
     }
+}
 
 
-.login {
+.login-button {
-    @extend .root;
+    @extend %button;
 
     background-color: $color-secondary-90;
-}
+
-.login:hover {
+    &:hover {
         background-color: $color-secondary-80;
     }
-.login:active {
+
+    &:active {
         background-color: $color-secondary-70;
     }
+}

src/components/loading.rs

@@ -14,12 +14,12 @@ pub fn LoadingPage(cx: Scope) -> Element {
         style { STYLE_SHEET },
 
         div {
-            class: ClassName::ROOT,
+            class: ClassName::LOADING,
 
             Wallpaper {},
 
             div {
-                class: ClassName::SPINNER,
+                class: ClassName::LOADING_SPINNER,
                 Spinner {},
             }
         }

src/components/loading.scss

@@ -1,7 +1,7 @@
 @import "../_base.scss"
 @import "./spinner.scss"
 
-.root {
+.loading {
     height: 100%;
     width: 100%;
 
@@ -9,7 +9,7 @@
     align-items: center;
     justify-content: center;
 
-    .spinner {
+    &__spinner {
         height: 5%;
         aspect-ratio: $logo-aspect-ratio;
 
@@ -77,5 +77,4 @@
 
         background-color: $greyscale-0;
     }
-
 }

src/components/login.rs

@@ -375,14 +375,14 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
     let avatar = match random_avatar_future.value() {
         Some(Some(svg)) => {
             rsx!(div {
-                class: ClassName::CONTENT,
+                class: ClassName::LOGIN_FORM_PHOTO_CONTENT,
                 dangerous_inner_html: svg.as_str(),
             })
         }
         Some(None) | None => {
             warn!("No profile image set or generated, display the placeholder");
             rsx!(div {
-                class: ClassName::CONTENT,
+                class: ClassName::LOGIN_FORM_PHOTO_CONTENT,
                 img {
                     src: "./images/login-profile-placeholder.svg"
                 }
@@ -468,13 +468,13 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
         Wallpaper {},
 
         div {
-            class: ClassName::ROOT,
+            class: ClassName::LOGIN,
 
             div {
                 class: "{form_classes_str}",
 
                 div {
-                    class: ClassName::PHOTO,
+                    class: ClassName::LOGIN_FORM_PHOTO,
 
                     onclick: move |_| {
                         random_avatar_future.restart()
@@ -484,7 +484,7 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
                 },
 
                 div {
-                    class: ClassName::HOMESERVER,
+                    class: ClassName::LOGIN_FORM_HOMESERVER,
                     TextInput {
                         id: "hs_url",
                         r#type: "text",
@@ -497,7 +497,7 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
                 },
 
                 div {
-                    class: ClassName::ID,
+                    class: ClassName::LOGIN_FORM_ID,
                     TextInput {
                         r#type: "text",
                         placeholder: "{id_placeholder}",
@@ -533,21 +533,21 @@ pub fn Login<'a>(cx: Scope<'a, LoginProps>) -> Element<'a> {
                 },
 
                 div {
-                    class: ClassName::SPINNER,
+                    class: ClassName::LOGIN_FORM_SPINNER,
                     Spinner {
                         animate: **spinner_animated,
                     },
                 },
 
                 div {
-                    class: ClassName::REGISTER,
+                    class: ClassName::LOGIN_FORM_REGISTER_BUTTON,
                     RegisterButton {
                         onclick: on_register,
                     },
                 },
 
                 div {
-                    class: ClassName::LOGIN,
+                    class: ClassName::LOGIN_FORM_LOGIN_BUTTON,
                     LoginButton {
                         focus: true,
                         onclick: on_login,

src/components/login.scss

@@ -1,7 +1,7 @@
 @import "../_base.scss"
 @import "./spinner.scss"
 
-.root {
+.login {
     height: 100%;
     width: 100%;
 
@@ -12,7 +12,9 @@
     position: relative;
     top: -100vh;
 
-    .form {
+    margin-bottom: -100vh;
+
+    &__form {
         $height: 95%;
         height: $height;
 
@@ -64,13 +66,13 @@
             ". . . . . . . . . . ."
         ;
 
-        transition: 300ms;
+        transition: $transition-duration;
 
         &.register {
             grid-template-rows: $padding-row $profile-img-height auto 5% 5% 5% 5% 5% 5% 5% 5% $spinner-height 5% $button-height $padding-row;
         }
 
-        .photo {
+        &__photo {
             grid-area: photo;
 
             display: flex;
@@ -82,25 +84,25 @@
 
             overflow: hidden;
 
-            .content {
+            &__content {
                 height: calc(100% + (2 * $border-big-width));
                 aspect-ratio: 1;
             }
         }
 
-        .homeserver {
+        &__homeserver {
             grid-area: homeserver;
         }
 
-        .id {
+        &__id {
             grid-area: id;
         }
 
-        .password {
+        &__password {
             grid-area: password;
         }
 
-        .confirm-password {
+        &__confirm-password {
             grid-area: confirm;
             display: none;
 
@@ -109,7 +111,7 @@
             }
         }
 
-        .spinner {
+        &__spinner {
             grid-area: spinner;
         }
 
@@ -117,11 +119,11 @@
             width: 100%;
         }
 
-        .register {
+        &__register-button {
             grid-area: register;
         }
 
-        .login {
+        &__login-button {
             grid-area: login;
         }
     }

src/components/spinner.rs

@@ -34,7 +34,7 @@ pub fn Spinner(cx: Scope<SpinnerProps>) -> Element {
         style { STYLE_SHEET },
 
         div {
-            class: ClassName::ROOT,
+            class: ClassName::SPINNER,
 
             Icon {
                 class: if cx.props.animate { "" } else { ClassName::PAUSED },

src/components/spinner.scss

@@ -6,7 +6,7 @@ $logo-height: calc(32px * 2);
 $logo-width: calc(64px * 2);
 $logo-aspect-ratio: calc($logo-width / $logo-height);
 
-.root {
+.spinner {
     height: 100%;
     width: 100%;
 

src/components/text_input.rs

@@ -57,7 +57,7 @@ pub fn TextInput<'a>(cx: Scope<'a, TextInputProps<'a>>) -> Element<'a> {
         style { STYLE_SHEET },
 
         div {
-            class: ClassName::ROOT,
+            class: ClassName::TEXT_INPUT,
 
             input {
                 class: level_class,

src/components/wallpaper.rs

@@ -7,10 +7,10 @@ pub fn Wallpaper(cx: Scope) -> Element {
     cx.render(rsx! {
         style { STYLE_SHEET },
         div {
-            class: ClassName::ROOT,
+            class: ClassName::WALLPAPER,
 
             div {
-                class: ClassName::CONTENT,
+                class: ClassName::WALLPAPER_CONTENT,
             }
         }
     })

src/components/wallpaper.scss

@@ -1,6 +1,6 @@
 @import "../_base.scss"
 
-.root {
+.wallpaper {
     height: 100%;
     width: 100%;
     z-index: -1;
@@ -11,7 +11,7 @@
 
     overflow: hidden;
 
-    .content {
+    &__content {
         background-image: url("./images/wallpaper-pattern.svg");
         background-position: center;