From 570a969cee9dfb78ca4cbbe3eccd2b6e22e3b10c Mon Sep 17 00:00:00 2001 From: Adrien Date: Thu, 21 Mar 2024 18:32:40 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20conflicts=20regarding=20th?= =?UTF-8?q?e=20generated=20CSS=20class=20names?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Cargo.toml | 3 +++ src/_base.scss | 13 +++++++--- src/components/avatar_selector.rs | 4 +-- src/components/avatar_selector.scss | 4 +-- src/components/button.rs | 4 +-- src/components/button.scss | 38 ++++++++++++++++------------- src/components/loading.rs | 4 +-- src/components/loading.scss | 5 ++-- src/components/login.rs | 18 +++++++------- src/components/login.scss | 26 +++++++++++--------- src/components/spinner.rs | 2 +- src/components/spinner.scss | 2 +- src/components/text_input.rs | 2 +- src/components/wallpaper.rs | 4 +-- src/components/wallpaper.scss | 4 +-- 15 files changed, 73 insertions(+), 60 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index d97419a..d3e0b06 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -38,3 +38,6 @@ target = "x86_64-unknown-linux-gnu" [build-dependencies] regex = "1.10.3" + +[package.metadata.turf.class_names] +template = "--" diff --git a/src/_base.scss b/src/_base.scss index 39a96e9..4cfc393 100644 --- a/src/_base.scss +++ b/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%; diff --git a/src/components/avatar_selector.rs b/src/components/avatar_selector.rs index e14be4b..3e47f10 100644 --- a/src/components/avatar_selector.rs +++ b/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", }, }, diff --git a/src/components/avatar_selector.scss b/src/components/avatar_selector.scss index db6e999..44d843b 100644 --- a/src/components/avatar_selector.scss +++ b/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; diff --git a/src/components/button.rs b/src/components/button.rs index 51917a0..f392e8b 100644 --- a/src/components/button.rs +++ b/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 { diff --git a/src/components/button.scss b/src/components/button.scss index ee71952..5b5427c 100644 --- a/src/components/button.scss +++ b/src/components/button.scss @@ -1,6 +1,6 @@ @import "../_base.scss" -.root { +%button { height: 100%; aspect-ratio: 3.5; @@ -18,27 +18,31 @@ } } -.register { - @extend .root; +.register-button { + @extend %button; background-color: $color-ternary-90; -} -.register:hover { - background-color: $color-ternary-80; -} -.register:active { - background-color: $color-ternary-70; + + &:hover { + background-color: $color-ternary-80; + } + + &:active { + background-color: $color-ternary-70; + } } -.login { - @extend .root; +.login-button { + @extend %button; background-color: $color-secondary-90; -} -.login:hover { - background-color: $color-secondary-80; -} -.login:active { - background-color: $color-secondary-70; + + &:hover { + background-color: $color-secondary-80; + } + + &:active { + background-color: $color-secondary-70; + } } diff --git a/src/components/loading.rs b/src/components/loading.rs index 6271980..c1a5f14 100644 --- a/src/components/loading.rs +++ b/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 {}, } } diff --git a/src/components/loading.scss b/src/components/loading.scss index 424c7cf..dead425 100644 --- a/src/components/loading.scss +++ b/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; } - } diff --git a/src/components/login.rs b/src/components/login.rs index dd34424..8e9b7dc 100644 --- a/src/components/login.rs +++ b/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, diff --git a/src/components/login.scss b/src/components/login.scss index 639ce05..e188f92 100644 --- a/src/components/login.scss +++ b/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; } } diff --git a/src/components/spinner.rs b/src/components/spinner.rs index 234a779..d453081 100644 --- a/src/components/spinner.rs +++ b/src/components/spinner.rs @@ -34,7 +34,7 @@ pub fn Spinner(cx: Scope) -> Element { style { STYLE_SHEET }, div { - class: ClassName::ROOT, + class: ClassName::SPINNER, Icon { class: if cx.props.animate { "" } else { ClassName::PAUSED }, diff --git a/src/components/spinner.scss b/src/components/spinner.scss index d26b066..54868e3 100644 --- a/src/components/spinner.scss +++ b/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%; diff --git a/src/components/text_input.rs b/src/components/text_input.rs index 2959e1f..6987721 100644 --- a/src/components/text_input.rs +++ b/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, diff --git a/src/components/wallpaper.rs b/src/components/wallpaper.rs index b38545c..00abdd9 100644 --- a/src/components/wallpaper.rs +++ b/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, } } }) diff --git a/src/components/wallpaper.scss b/src/components/wallpaper.scss index ae6e8e1..fa45c0b 100644 --- a/src/components/wallpaper.scss +++ b/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;