From c70227365fc707fe6246c8ba9b8ecd35fdc0f1d9 Mon Sep 17 00:00:00 2001 From: akshayr-mecha Date: Sat, 20 Apr 2024 17:42:20 +0530 Subject: [PATCH] fix(connect app): fix styling issues --- client/app/src/assets/css/style.css | 96 +++++++++++------------ client/app/src/pages/check_internet.rs | 2 - client/app/src/pages/configure_machine.rs | 5 -- client/app/src/pages/machine_info.rs | 1 - client/app/src/pages/no_internet.rs | 2 - client/app/src/pages/setup_failed.rs | 4 - client/app/src/pages/setup_success.rs | 4 - client/app/src/pages/start_screen.rs | 21 ++--- 8 files changed, 54 insertions(+), 81 deletions(-) diff --git a/client/app/src/assets/css/style.css b/client/app/src/assets/css/style.css index df8af507..c43f5fd0 100644 --- a/client/app/src/assets/css/style.css +++ b/client/app/src/assets/css/style.css @@ -1,11 +1,11 @@ .window { - background-color: #070809; - font-family: 'Space Grotesk'; - color:#d47a7a; + background-color: #070809; + font-family: 'Space Grotesk'; + color: #d47a7a; } .footer-container { - margin: 0px 10px; + margin: 0px 10px 12px 10px; } .footer-container-button { @@ -14,9 +14,9 @@ } -.app-container { - padding: 0px 20px 30px 20px; - color: #FAFBFC; +.app-container { + padding: 0px 20px; + color: #FAFBFC; } .start-screen-header { @@ -61,23 +61,23 @@ } .start-screen-steps-label { - margin: 10px 20px 10px 20px; + margin: 20px; } .start-screen-steps-box { font-weight: 500; font-size: 16px; line-height: 20px; - padding: 28px 28px 28px 28px; - margin: 20px 10px 25px 10px; background-color: #15171D; border-radius: 10px; + padding: 15px; + margin-top: 8px; } .start-screen-steps-icon { min-width: 76px; min-height: 76px; - margin: 15px 0px; + margin-bottom: 10px; } .check-internet-text { @@ -89,7 +89,7 @@ .link-machine-steps-container { margin: 10px 0px; - color:#FAFBFC; + color: #FAFBFC; } .link-machine-header-label { @@ -123,14 +123,14 @@ .link-machine-steps-box { /* padding:15px 0px 15px 0px; */ - margin: 15px 2px; + margin: 8px 2px; color: #FAFBFC; } .link-machine-steps-text { font-weight: 500; - font-size: 16px; - line-height: 20px; + font-size: 14px; + line-height: 18px; color: #E4E7EE; margin: 0px 3px; } @@ -157,7 +157,9 @@ } .gif-img { - margin: 32px 40px 20px 40px; + min-width: 200px; + min-height: 200px; + margin: 24px 40px 26px 40px; } .configure-text { @@ -172,9 +174,9 @@ } .timeout-img { - min-width: 240px; - min-height: 290px; - margin: 30px 40px 30px 40px; + min-width: 210px; + min-height: 240px; + margin: 24px 40px 26px 40px; } .setup-status-label { @@ -194,7 +196,7 @@ font-size: 16px; line-height: 22px; color: red; - margin:6px 0px; + margin: 6px 0px; padding: 4px 10px; background-color: #202124; border-radius: 10px; @@ -207,7 +209,7 @@ border-radius: 4px; font-weight: 440; padding: 20px 14px 20px 14px; - margin:10px 5px 10px 5px; + margin: 10px 5px 10px 5px; } .about-device-name { @@ -215,7 +217,7 @@ margin: 10px 0px 10px 5px; } -.device-id-text{ +.device-id-text { color: #848DA6; } @@ -233,10 +235,10 @@ .device-info-sentence { font-weight: 500; - font-size: 16px; - line-height: 22px; + font-size: 14px; + line-height: 20px; color: #B7BBC8; - margin:10px 5px; + margin: 10px 5px; } .device-info-status-icon { @@ -245,22 +247,20 @@ } .device-info-icon { - min-width: 127px; - min-height: 127px; + min-width: 80px; + min-height: 80px; border-radius: 10px; /* margin-top: 40px; */ } .device-info-icon-box { - min-width: 128px; - min-height: 128px; - margin-top: 40px; - border-radius: 10px; + margin-top: 40px; + border-radius: 10px; background-color: #202431; } .blue { - color: #3283E8; + color: #3283E8; } .gray { @@ -268,26 +268,26 @@ } .custom-circle { - min-width: 35px; - min-height: 35px; - border: 1px solid rgb(59, 61, 201); - border-radius: 50px; - margin: auto; + min-width: 35px; + min-height: 35px; + border: 1px solid rgb(59, 61, 201); + border-radius: 50px; + margin: auto; background: conic-gradient(rgb(44, 47, 236) 40%, #eee 0); } -.time-progressbar trough{ - background-color: #8da3ba; +.time-progressbar trough { + background-color: #8da3ba; border-radius: 50px; min-width: 40px; - min-height: 40px; - border: 4px solid #8da3ba; + min-height: 40px; + border: 4px solid #8da3ba; } -.time-progressbar trough progress{ +.time-progressbar trough progress { border-radius: 50px; min-width: 40px; - min-height: 40px; + min-height: 40px; } /* .window stack box progressbar trough progress{ @@ -304,8 +304,8 @@ min-height: 3px; } -.carousel { - margin-bottom: -15px; +.carousel { + margin-bottom: -15px; } /* .custom-toast toastoverlay toast { @@ -313,9 +313,9 @@ } */ .custom-toast-box { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 10px; - padding: 4px 10px; + background-color: rgba(255, 255, 255, 0.2); + border-radius: 10px; + padding: 4px 10px; margin: 40px 10px 5px 10px; } diff --git a/client/app/src/pages/check_internet.rs b/client/app/src/pages/check_internet.rs index 80f16c91..9c97fa34 100644 --- a/client/app/src/pages/check_internet.rs +++ b/client/app/src/pages/check_internet.rs @@ -97,8 +97,6 @@ impl AsyncComponent for CheckInternet { let paintable = get_gif_from_path(gif_path); let image_from = gtk::Image::builder() - .width_request(350) - .height_request(350) .paintable(&paintable) .css_classes(["gif-img"]) .build(); diff --git a/client/app/src/pages/configure_machine.rs b/client/app/src/pages/configure_machine.rs index cc26de59..17ee9d72 100644 --- a/client/app/src/pages/configure_machine.rs +++ b/client/app/src/pages/configure_machine.rs @@ -80,12 +80,8 @@ impl AsyncComponent for ConfigureMachine { let paintable = get_gif_from_path(gif_path); let image_from = gtk::Image::builder() - .width_request(290) - .height_request(290) .paintable(&paintable) .css_classes(["gif-img"]) - .vexpand(true) - .valign(gtk::Align::Center) .build(); let label1 = gtk::Label::builder() @@ -150,7 +146,6 @@ async fn machine_info_sevice_call() -> Result { async fn get_machine_info(sender: AsyncComponentSender) { let fn_name = "configure_machine_screen -> get_machine_info"; let result = tokio::time::timeout(Duration::from_secs(15), machine_info_sevice_call()).await; - let _ = sender.output(ConfigureOutput::Timeout); match result { Ok(res) => match res { diff --git a/client/app/src/pages/machine_info.rs b/client/app/src/pages/machine_info.rs index 1566969c..60fa07aa 100644 --- a/client/app/src/pages/machine_info.rs +++ b/client/app/src/pages/machine_info.rs @@ -194,7 +194,6 @@ impl AsyncComponent for MachineInfo { let info_sentence = gtk::Label::builder() .label("You can unlink your machine from your Mecha account") .hexpand(true) - .justify(gtk::Justification::Fill) .wrap(true) .wrap_mode(pango::WrapMode::Word) .build(); diff --git a/client/app/src/pages/no_internet.rs b/client/app/src/pages/no_internet.rs index 06900d91..36daf49b 100644 --- a/client/app/src/pages/no_internet.rs +++ b/client/app/src/pages/no_internet.rs @@ -66,8 +66,6 @@ impl SimpleComponent for NoInternet { let paintable = get_gif_from_path(gif_path); let image_from = gtk::Image::builder() - .width_request(350) - .height_request(350) .paintable(&paintable) .css_classes(["gif-img"]) .build(); diff --git a/client/app/src/pages/setup_failed.rs b/client/app/src/pages/setup_failed.rs index 46385a12..f3dcd02f 100644 --- a/client/app/src/pages/setup_failed.rs +++ b/client/app/src/pages/setup_failed.rs @@ -88,12 +88,8 @@ impl SimpleComponent for SetupFailed { let paintable = get_gif_from_path(gif_path); let image_from = gtk::Image::builder() - .width_request(250) - .height_request(250) .paintable(&paintable) .css_classes(["gif-img"]) - .vexpand(true) - .valign(gtk::Align::Center) .build(); main_content_box.append(&image_from); diff --git a/client/app/src/pages/setup_success.rs b/client/app/src/pages/setup_success.rs index e2758025..8dd9055b 100644 --- a/client/app/src/pages/setup_success.rs +++ b/client/app/src/pages/setup_success.rs @@ -80,12 +80,8 @@ impl SimpleComponent for SetupSuccess { let paintable = get_gif_from_path(gif_path); let image_from = gtk::Image::builder() - .width_request(290) - .height_request(290) .paintable(&paintable) .css_classes(["gif-img"]) - .vexpand(true) - .valign(gtk::Align::Center) .build(); // bold diff --git a/client/app/src/pages/start_screen.rs b/client/app/src/pages/start_screen.rs index 72672f0d..4969fc0b 100644 --- a/client/app/src/pages/start_screen.rs +++ b/client/app/src/pages/start_screen.rs @@ -73,6 +73,7 @@ impl AsyncComponent for StartScreen { let main_content_box = gtk::Box::builder() .orientation(gtk::Orientation::Vertical) + .vexpand(true) .css_classes(["app-container"]) .build(); @@ -132,7 +133,8 @@ impl AsyncComponent for StartScreen { let hbox_line2 = gtk::Box::builder() .orientation(gtk::Orientation::Vertical) .hexpand(true) - .vexpand(true) + .halign(gtk::Align::Center) + .valign(gtk::Align::Center) .css_classes(["start-screen-steps-box"]) .build(); @@ -150,7 +152,7 @@ impl AsyncComponent for StartScreen { .css_classes(["start-screen-steps-label"]) .wrap(true) .wrap_mode(pango::WrapMode::Word) - .vexpand(true) + // .vexpand(true) .halign(gtk::Align::Center) .valign(gtk::Align::End) .justify(gtk::Justification::Center) @@ -162,7 +164,6 @@ impl AsyncComponent for StartScreen { let hbox_line3 = gtk::Box::builder() .orientation(gtk::Orientation::Vertical) .hexpand(true) - .vexpand(true) .css_classes(["start-screen-steps-box"]) .build(); @@ -176,7 +177,6 @@ impl AsyncComponent for StartScreen { .css_classes(["start-screen-steps-label"]) .wrap(true) .wrap_mode(pango::WrapMode::Word) - .vexpand(true) .halign(gtk::Align::Center) .valign(gtk::Align::End) .justify(gtk::Justification::Center) @@ -188,7 +188,6 @@ impl AsyncComponent for StartScreen { let hbox_line4 = gtk::Box::builder() .orientation(gtk::Orientation::Vertical) .hexpand(true) - .vexpand(true) .css_classes(["start-screen-steps-box"]) .build(); @@ -202,7 +201,7 @@ impl AsyncComponent for StartScreen { .css_classes(["start-screen-steps-label"]) .wrap(true) .wrap_mode(pango::WrapMode::Word) - .vexpand(true) + // .vexpand(true) .halign(gtk::Align::Center) .valign(gtk::Align::End) .justify(gtk::Justification::Center) @@ -216,7 +215,7 @@ impl AsyncComponent for StartScreen { .spacing(15) .width_request(150) .height_request(70) - .css_classes(["carousel"]) + // .css_classes(["carousel"]) .build(); carousel.append(&hbox_line2); @@ -229,14 +228,6 @@ impl AsyncComponent for StartScreen { main_content_box.append(&carousel); main_content_box.append(&carousel_dots); - // let advance_carousel = clone!(@weak carousel => move || { - // let mut carousel_ref = carousel.borrow_mut(); - // carousel_ref.next_sibling(); - // return glib::ControlFlow::Continue; - // }); - - // glib::timeout_add_seconds_local(2, advance_carousel); - let footer_box = gtk::Box::builder() .orientation(gtk::Orientation::Horizontal) .hexpand(true)