Merge pull request #98 from akshayr-mecha/fix-connect

fix(connect app): fix styling issues
mecha-org · Apr 20, 2024 · a861248 · a861248
2 parents 529c6f3 + c702273
commit a861248
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 81 deletions.
diff --git 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,15 +209,15 @@
     border-radius: 4px;
     font-weight: 440;
     padding: 20px 14px 20px 14px;
-    margin:10px 5px 10px 5px;
+    margin: 10px 5px 10px 5px;
 }
 
 .about-device-name {
     font-size: 20px;
     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,49 +247,47 @@
 }
 
 .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 {
     color: #6e6e72;
 }
 
 .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,18 +304,18 @@
     min-height: 3px;
 }
 
-.carousel { 
-	margin-bottom: -15px;
+.carousel {
+    margin-bottom: -15px;
 }
 
 /* .custom-toast toastoverlay toast {
 	background-color: #3b3f49;
 } */
 
 .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
@@ -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
@@ -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<MachineInformation> {
 async fn get_machine_info(sender: AsyncComponentSender<ConfigureMachine>) {
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)