From 96dcdbfb26fbf010eda59daa403f25376024e016 Mon Sep 17 00:00:00 2001
From: "kateryna.mishchenko" <kateryna.mishchenko@danads.se>
Date: Fri, 10 Jan 2025 14:24:30 +0200
Subject: [PATCH] Responsive layout fixes

---
 .../src/app/home/actions/actions.component.ts |  7 ++-
 .../app/shared/header/header.component.html   |  6 +--
 .../src/styles/scss/components/_actions.scss  | 25 +++++----
 .../src/styles/scss/components/_admin.scss    | 26 ++++++++--
 .../src/styles/scss/components/_btn.scss      | 14 +++++
 .../src/styles/scss/components/_toasters.scss | 12 +++--
 .../styles/scss/components/_use-cases.scss    | 52 +++++++++++++++++--
 .../src/styles/scss/layouts/_header.scss      | 13 +++--
 .../src/styles/scss/pages/home/_hero.scss     | 22 ++++++--
 9 files changed, 143 insertions(+), 34 deletions(-)

diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/home/actions/actions.component.ts b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/home/actions/actions.component.ts
index eb468e6..ab039c8 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/home/actions/actions.component.ts
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/home/actions/actions.component.ts
@@ -39,7 +39,12 @@ export class ActionsComponent implements OnInit {
             description: `Actions.UpdateProfileDescription`,
             actionTitle: `Actions.InitiateButton`,
             action: () => this.router.navigate(['/update-profile']),
-            featuresDescription: [`Actions.UpdateProfileFeature1`, `Actions.UpdateProfileFeature2`, `Actions.UpdateProfileFeature3`, `Actions.UpdateProfileFeature4`],
+            featuresDescription: [
+                `Actions.UpdateProfileFeature1`,
+                `Actions.UpdateProfileFeature2`,
+                `Actions.UpdateProfileFeature3`,
+                `Actions.UpdateProfileFeature4`
+            ],
             iconSrc: 'assets/img/ic-custom-three.png'
         },
         {
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/shared/header/header.component.html b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/shared/header/header.component.html
index 36e46da..04ce20d 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/shared/header/header.component.html
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/shared/header/header.component.html
@@ -1,13 +1,13 @@
 <header class="header" [class.header-home]="isHomePage$ | async" role="banner">
     <div class="container-fluid">
-        <nav class="navbar navbar-expand-lg navbar-light p-0 align-items-lg-end justify-content-lg-between">
+        <nav class="navbar navbar-expand-sm navbar-light p-0 align-items-sm-end justify-content-sm-between">
             <a class="navbar-brand d-inline-flex align-items-center p-0" [routerLink]="['']" routerLinkActive="active" translate>
                 <span class="navbar-brand-image d-inline-block">
                     <img [src]="style === 'black' ? 'assets/img/logo-text-white.png' : 'assets/img/logo-text-black.png'" alt="" />
                 </span>
             </a>
-            <div class="align-self-lg-center">
-                <ul class="navbar-nav">
+            <div class="align-self-sm-center navbar-buttons">
+                <ul class="navbar-nav flex-row">
                     <li class="nav-item">
                         <a class="nav-link" href="https://github.com/docusign/sample-app-business-csharp" target="blank" translate>
                             GitHubSource
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_actions.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_actions.scss
index ba7cba0..72e784c 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_actions.scss
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_actions.scss
@@ -1,3 +1,10 @@
+app-action,
+.action-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .action-section {
     margin: 0 auto;
     background: $white;
@@ -8,30 +15,26 @@
 }
 
 .actions {
-    display: flex;
     width: 100%;
-    flex-wrap: wrap;
-    justify-content: end;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 28px;
     padding-bottom: 64px;
-}
 
-.actions > * {
-    width: calc(100% / 2);
-    @include media-breakpoint-down(md) {
-        width: 100%;
+    @include media-breakpoint-up(md) {
+      grid-template-columns: repeat(2, 1fr);
     }
 }
-
 .card-info {
     position: relative;
     background-color: $gray-100;
     padding: 40px;
     text-align: left;
-    margin: 0 27px 27px 0;
     border-radius: 16px;
     height: auto;
     min-width: 360px;
     color: $black;
+    flex:1;
 
     @include media-breakpoint-down(md) {
         padding: 10px 20px;
@@ -85,7 +88,7 @@
         font-weight: 400;
         line-height: 22px;
         min-height: 20px;
-        height: 44px;
+        //height: 44px;
         display: block;
         opacity: 0.8;
     }
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_admin.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_admin.scss
index 99f38c4..1273372 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_admin.scss
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_admin.scss
@@ -78,7 +78,7 @@
 }
 
 .step-container {
-    padding: 24px;
+  padding: 24px;
 
     .step-title {
         color: $gray-400;
@@ -105,6 +105,16 @@
     }
 }
 
+.phone-wrapper {
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+
+    .input-wrapper {
+      margin-left: 0 !important;
+    }
+  }
+}
+
 .form-control-input {
     border-radius: 4px;
     border-color: $gray-500 !important;
@@ -128,7 +138,10 @@
 
     &.account-id,
     &.user-id {
+      width: 100%;
+      @include media-breakpoint-up(md) {
         width: 330px;
+      }
     }
 
     &.disabled {
@@ -136,12 +149,19 @@
     }
 
     &.full-name {
+      width: 314px;
+      @include media-breakpoint-up(md) {
         width: 530px;
+      }
     }
-    
+
     &.phone {
-        margin-top: 40px;
+      margin-top: 20px;
+      width: 314px;
+      @include media-breakpoint-up(md) {
         width: 353px;
+        margin-top: 40px;
+      }
     }
 }
 
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_btn.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_btn.scss
index 98a18bd..48a6f04 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_btn.scss
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_btn.scss
@@ -21,6 +21,11 @@
 }
 
 .buttons-group {
+  @include media-breakpoint-down(md) {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
     .btn {
         &:not(:last-child) {
             &:not(.btn-sm):not(.btn-lg) {
@@ -29,6 +34,10 @@
                 @include media-breakpoint-up(lg) {
                     margin-right: 15px;
                 }
+                @include media-breakpoint-down(md) {
+                  display: block;
+                  width: 100%;
+                }
             }
         }
     }
@@ -89,6 +98,11 @@
 .btn-login.btn-connect {
     border: 1.5px solid $white;
     margin-top: 16px;
+
+  @include media-breakpoint-between(sm, lg) {
+    margin-top: 35px;
+    margin-left: 16px;
+  }
 }
 
 .authorize-btn-as-admin {
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_toasters.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_toasters.scss
index 19e8371..3d0620b 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_toasters.scss
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_toasters.scss
@@ -28,15 +28,17 @@
     position: relative;
     overflow: hidden;
     margin: 0 0 6px;
-    padding: 40px;
-    width: 500px;
+    padding: 40px 120px 40px 40px;
+    width: 100%;
     height: auto;
-    border-radius: 15px;
     background-position: right 40px center;
     background-repeat: no-repeat;
     box-shadow: none;
     border: none;
-    background-size: 60px;
+    background-size: 40px;
+    @include media-breakpoint-up(md) {
+      width: 500px;
+    }
 
     &:hover,
     &:focus,
@@ -60,7 +62,7 @@
         background-color: $yellow;
         background-image: url('./../../../assets/img/success-icon.png');
     }
-    
+
     &.info-message {
         background-color: $gray-400;
         background-size: 80px;
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_use-cases.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_use-cases.scss
index 125d6fc..c7ca4e0 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_use-cases.scss
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_use-cases.scss
@@ -62,6 +62,10 @@
         opacity: 1;
     }
 
+    .step-container {
+      overflow: hidden;
+    }
+
     .options-list li {
         font-size: 12px;
         font-weight: 400;
@@ -79,11 +83,19 @@
     margin-top: 32px;
 
     form {
+      width: 100%;
+      @include media-breakpoint-up(lg) {
         width: 44%;
+      }
     }
 
     .step-container {
-        width: 100%;
+        @include media-breakpoint-down(md) {
+          width: 100%;
+          padding-left: 0;
+          padding-right: 0;
+        }
+
         .step-title {
             color: $black;
             opacity: 1;
@@ -143,7 +155,19 @@
 
 .use-case-wrapper {
     .buttons-container {
-        margin-bottom: 300px;
+      margin-bottom: 300px;
+
+      @include media-breakpoint-down(md) {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .btn {
+        @include media-breakpoint-down(md) {
+          margin-right: 0 !important;
+        }
+      }
     }
 
     .user-info-container {
@@ -198,7 +222,10 @@
     background-color: $gray-200;
     padding: 20px;
     margin-top: 15px;
-    display: inline-block;
+    text-wrap: balance;
+    @include media-breakpoint-up(md) {
+      display: inline-block;
+    }
 }
 
 .country-codes {
@@ -223,9 +250,28 @@
 .phone-wrapper {
     .input-wrapper {
         margin-left: 16px;
+        @include media-breakpoint-down(md) {
+          width: 100%;
+        }
 
         .phone-input {
             width: 386px;
+          @include media-breakpoint-down(md) {
+            width: 100%;
+          }
         }
     }
 }
+
+.access-code-wrapper {
+  display: flex;
+  gap: 10px;
+
+  .d-inline-block {
+    flex: 1;
+  }
+
+  .form-control.access-code {
+    width: 100%;
+  }
+}
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/layouts/_header.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/layouts/_header.scss
index 7138eb8..52cf2e3 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/layouts/_header.scss
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/layouts/_header.scss
@@ -35,7 +35,7 @@
     .navbar-brand-image {
         margin-right: 4px;
         img {
-            width: 50%;
+          height: 60px;
             margin-left: -20px;
         }
     }
@@ -80,7 +80,8 @@
         }
 
         a {
-            color: $white;
+          color: $white;
+          border-radius: 24px;
         }
     }
 
@@ -89,7 +90,7 @@
         @include media-breakpoint-up(lg) {
             opacity: 1;
             padding: 7px 20px;
-            border-radius: 24px;
+
             height: 32px;
         }
 
@@ -108,4 +109,10 @@
             }
         }
     }
+
+  .navbar-buttons {
+    @include media-breakpoint-down(md) {
+      margin-left: -50%;
+    }
+  }
 }
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/pages/home/_hero.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/pages/home/_hero.scss
index 9bd12b2..c215723 100644
--- a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/pages/home/_hero.scss
+++ b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/pages/home/_hero.scss
@@ -4,15 +4,19 @@
 
 .hero-section {
     &.hero-home {
-        height: 630px;
+        height: 940px;
         padding-top: 130px;
         background: $black;
-        @include media-breakpoint-down(lg) {
-            height: 940px;
+        @include media-breakpoint-up(lg) {
+          height: 630px;
         }
 
         &.small-container {
             height: 450px;
+          @include media-breakpoint-down(md) {
+            height: auto;
+            padding-bottom: 20px;
+          }
         }
 
         .container-fluid {
@@ -103,11 +107,11 @@
 
     @include media-breakpoint-down(lg) {
         height: 160px;
-        padding: 10px;
+        padding: 10px 60px 10px 10px;
     }
 
     @include media-breakpoint-down(md) {
-        height: 200px;
+        height: auto;
     }
 
     .info-icon {
@@ -199,4 +203,12 @@
         margin-top: 48px;
         color: $gray-400;
     }
+
+    .btn.btn-connect {
+      @include media-breakpoint-down(sm) {
+        display: block;
+        width: 100%;
+        margin-left: 0;
+      }
+    }
 }