🚧 Remove AvatarSelector component

src/ui/_base.scss

@@ -217,37 +217,3 @@ input {
 ::selection {
     background-color: transparent;
 }
-
-
-// TODO: To remove once the design updated.
-.aeroButton {
-    height: 50%;
-    min-height: 16px;
-    aspect-ratio: 1;
-    background-color: transparent;
-    border: 2px solid transparent;
-    background-size: contain !important;
-    margin-right: 1%;
-}
-.aeroButton:hover {
-    border-image: url(/public/images/aerobutton_border.png) 2 round;
-}
-.aeroButton:active {
-    border-image: url(/public/images/aerobutton_border_down.png) 2 round;
-}
-
-.button {
-    height: 50%;
-    min-height: 16px;
-    aspect-ratio: 1;
-    background-color: transparent;
-    border: 2px solid transparent;
-    background-size: contain !important;
-    margin-right: 1%;
-}
-.button:hover {
-    border-image: url(/public/images/button_border.png) 2 round;
-}
-.button:active {
-    border-image: url(/public/images/button_border_down.png) 2 round;
-}

src/ui/components/avatar_selector.rs

@@ -1,54 +0,0 @@
-use dioxus::prelude::*;
-
-turf::style_sheet!("src/ui/components/avatar_selector.scss");
-
-pub fn AvatarSelector() -> Element {
-    rsx! {
-        style { {STYLE_SHEET} },
-
-        div {
-            class: ClassName::AVATAR_SELECTOR,
-            svg {
-                view_box: "0 0 100 100",
-                linearGradient {
-                    id: "avatar-gradient",
-                    x1: 1,
-                    y1: 1,
-                    x2: 0,
-                    y2: 0,
-                    stop {
-                        offset: "0%",
-                        stop_color: "rgb(138, 191, 209)",
-                    }
-                    stop {
-                        offset: "60%",
-                        stop_color: "rgb(236, 246, 249)",
-                    }
-                },
-                filter {
-                    id: "avatar-shadow",
-                    feDropShadow {
-                        dx: 2,
-                        dy: 2,
-                        std_deviation: 3,
-                        flood_opacity: 0.5,
-                    },
-                },
-                rect {
-                    x: "10",
-                    y: "10",
-                    width: "80",
-                    height: "80",
-                    rx: "12",
-                    fill: "url('#avatar-gradient')",
-                    filter: "url('#avatar-shadow')",
-                    stroke: "grey",
-                },
-            },
-            img {
-                class: ClassName::AVATAR_SELECTOR_PICTURE,
-                src: "/public/images/default-avatar.png",
-            },
-        },
-    }
-}

src/ui/components/avatar_selector.scss

@@ -1,17 +0,0 @@
-.avatar-selector {
-	position: relative;
-	height: 100%;
-	aspect-ratio: 1;
-
-    &__picture {
-		$height: 65%;
-		$margin: calc(100% - $height) / 2;
-
-        position: absolute;
-	    height: $height;
-	    aspect-ratio: 1;
-
-		top: $margin;
-		right: $margin;
-    }
-}

src/ui/components/header.rs

@@ -1,25 +0,0 @@
-use dioxus::prelude::*;
-
-turf::style_sheet!("src/ui/components/header.scss");
-
-pub fn Header() -> Element {
-    rsx! {
-        style { {STYLE_SHEET} },
-
-        div {
-            class: ClassName::ROOT,
-            img {
-                src: "/public/images/logo-msn.png"
-            }
-            svg {
-                view_box: "0 0 100 10",
-                text {
-                    y: "55%",
-                    dominant_baseline: "middle",
-                    font_size: "5",
-                    "Windows Live Messenger",
-                },
-            },
-        }
-    }
-}

src/ui/components/header.scss

@@ -1,13 +0,0 @@
-.root {
-    height: 100%;
-    width: 100%;
-    display: flex;
-
-    img {
-        height: 100%;
-    }
-
-	svg {
-        fill: white;
-    }
-}

src/ui/components/loading.rs

@@ -1,28 +0,0 @@
-use dioxus::prelude::*;
-use log::debug;
-
-use super::spinner::Spinner;
-use super::wallpaper::Wallpaper;
-
-turf::style_sheet!("src/ui/components/loading.scss");
-
-pub fn LoadingPage() -> Element {
-    debug!("LoadingPage rendering");
-
-    rsx! {
-        style { {STYLE_SHEET} },
-
-        div {
-            class: ClassName::LOADING,
-
-            Wallpaper {
-                display_version: true
-            },
-
-            div {
-                class: ClassName::LOADING_SPINNER,
-                Spinner {},
-            }
-        }
-    }
-}

src/ui/components/loading.scss

@@ -1,80 +0,0 @@
-@import "../_base.scss"
-@import "./spinner.scss"
-
-.loading {
-    height: 100%;
-    width: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &__spinner {
-        height: 5%;
-        aspect-ratio: $logo-aspect-ratio;
-
-        position: absolute;
-
-        $logo-center-pos: calc(50% + ($background-height / 2) - ($logo-height / 2));
-
-        @media (0px < height <= calc($background-height * 5)) {
-            top: $logo-center-pos;
-        }
-        @media (calc($background-height * 5) < height <= calc($background-height * 6)) {
-            top: calc($logo-center-pos + ($background-height * 1));
-        }
-        @media (calc($background-height * 6) < height <= calc($background-height * 8)) {
-            top: calc($logo-center-pos + ($background-height * 2));
-        }
-        @media (calc($background-height * 8) < height <= calc($background-height * 10)) {
-            top: calc($logo-center-pos + ($background-height * 3));
-        }
-        @media (calc($background-height * 10) < height <= calc($background-height * 12)) {
-            top: calc($logo-center-pos + ($background-height * 4));
-        }
-        @media (calc($background-height * 12) < height <= calc($background-height * 14)) {
-            top: calc($logo-center-pos + ($background-height * 5));
-        }
-        @media (calc($background-height * 14) < height <= calc($background-height * 16)) {
-            top: calc($logo-center-pos + ($background-height * 6));
-        }
-        @media (calc($background-height * 16) < height <= calc($background-height * 18)) {
-            top: calc($logo-center-pos + ($background-height * 7));
-        }
-        @media (calc($background-height * 18) < height <= calc($background-height * 20)) {
-            top: calc($logo-center-pos + ($background-height * 8));
-        }
-        @media (calc($background-height * 20) < height <= calc($background-height * 22)) {
-            top: calc($logo-center-pos + ($background-height * 9));
-        }
-        @media (calc($background-height * 22) < height <= calc($background-height * 24)) {
-            top: calc($logo-center-pos + ($background-height * 10));
-        }
-        @media (calc($background-height * 24) < height <= calc($background-height * 26)) {
-            top: calc($logo-center-pos + ($background-height * 11));
-        }
-        @media (calc($background-height * 26) < height <= calc($background-height * 28)) {
-            top: calc($logo-center-pos + ($background-height * 12));
-        }
-        @media (calc($background-height * 28) < height <= calc($background-height * 30)) {
-            top: calc($logo-center-pos + ($background-height * 13));
-        }
-        @media (calc($background-height * 30) < height <= calc($background-height * 32)) {
-            top: calc($logo-center-pos + ($background-height * 14));
-        }
-        @media (calc($background-height * 32) < height <= calc($background-height * 34)) {
-            top: calc($logo-center-pos + ($background-height * 15));
-        }
-        @media (calc($background-height * 34) < height <= calc($background-height * 36)) {
-            top: calc($logo-center-pos + ($background-height * 16));
-        }
-        @media (calc($background-height * 36) < height <= calc($background-height * 38)) {
-            top: calc($logo-center-pos + ($background-height * 17));
-        }
-        @media (calc($background-height * 38) < height <= calc($background-height * 40)) {
-            top: calc($logo-center-pos + ($background-height * 18));
-        }
-
-        background-color: get-color(greyscale, 0);
-    }
-}

src/ui/components/mod.rs

@@ -1,12 +1,8 @@
-pub(crate) mod avatar_selector;
 pub(crate) mod button;
-pub(crate) mod chats_window;
-pub(crate) mod contacts_window;
-pub(crate) mod header;
+pub(crate) mod chat_panel;
+pub(crate) mod conversations;
 pub(crate) mod icons;
-pub(crate) mod loading;
 pub(crate) mod login;
-pub(crate) mod main_window;
 pub(crate) mod modal;
 pub(crate) mod spinner;
 pub(crate) mod text_input;