Responsive updates for Maestro

Author: kateryna.mishchenko

client/src/components/Footer/Footer.module.css

@@ -1,23 +1,32 @@
 .footerWithContent {
-    min-height: 300px;
+    padding: 1rem;
     margin-top: auto;
     margin-left: 5%;
     width: 90%;
-    height: 33.3%;
-
     display: flex;
     flex-direction: column;
+    gap: 2rem;
     background: var(--black-main);
     color: var(--grey-main);
     border-radius: 20px 20px 0 0;
+
+    @media screen and (min-width: 992px) {
+        min-height: 300px;
+        height: 33.3%;
+        padding: 0;
+        gap: 0;
+    }
 }
 
 .footer {
-    height: 3.25rem;
     margin-top: auto;
     margin-left: 5%;
     width: 90%;
 
+    @media screen and (min-width: 992px) {
+        height: 3.25rem;
+    }
+
     display: flex;
     flex-direction: column;
     background: var(--black-main);
@@ -29,9 +38,13 @@
 .container {
     display: flex;
     flex-direction: column;
-    margin-top: 64px;
+    margin-top: 32px;
     height: 100%;
     width: 100%;
+
+    @media screen and (min-width: 992px) {
+        margin-top: 64px;
+    }
 }
 
 .header {
@@ -63,8 +76,7 @@
     display: flex;
     align-self: center;
     line-height: 16px;
-    margin-top: auto;
-    margin-bottom: 1.5em;
+    margin: 1em 0;
     text-align: center;
 
     color: var(--grey-main);
@@ -74,12 +86,20 @@
 
 .buttons {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    gap: 1rem;
     width: 100%;
-    height: 40px;
-    padding-top: 1.5%;
     margin-left: auto;
     margin-right: auto;
+    padding-top: 1.5%;
+
+    @media screen and (min-width: 992px) {
+        justify-content: center;
+        flex-direction: row;
+        gap: 0;
+        height: 40px;
+
+    }
 }
 
 .button {
@@ -100,10 +120,12 @@
     background: none !important;
     border: none;
     padding: 0 !important;
-    margin-left: 16px;
-
     color: var(--white-main);
     line-height: 16px;
     font-size: 16px;
     font-weight: 500;
+
+    @media screen and (min-width: 992px) {
+        margin-left: 16px;
+    }
 }

client/src/components/Header/Header.module.css

@@ -5,14 +5,20 @@
 
 .navBar {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    flex-direction: column;
     background: rgba(0, 0, 0, 0);
-    padding-top: 1.5rem;
-    min-height: 80px;
     margin-left: 0;
     margin-right: 0;
     width: 100%;
+    padding:1.5rem 5%;
+
+    @media screen and (min-width: 992px) {
+        padding-bottom: 0;
+        min-height: 80px;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+    }
 }
 
 .navBar p {
@@ -34,6 +40,7 @@
     border: transparent !important;
     box-shadow: none !important;
     color: var(--black-main) !important;
+    padding: 0;
 }
 
 .dropDown {
@@ -70,7 +77,6 @@
 
 .logo {
     display: flex;
-    padding-left: 5%;
     justify-content: start;
     height: 28px;
     width: 140px;
@@ -79,8 +85,17 @@
 
 .headerEnd {
     display: flex;
-    flex-direction: row;
-    padding-right: 5%;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: .5rem;
+    margin-top: -24px;
+
+    @media screen and (min-width: 992px) {
+        flex-direction: row;
+        gap: 0;
+        padding-right: 5%;
+        margin-top: 0;
+    }
 }
 
 .navLink {

client/src/components/Loader/Loader.module.css

@@ -21,6 +21,7 @@
 
     max-width: 504px;
     width: 100%;
+    padding: 0 1rem;
     line-height: 24px;
     margin-left: auto;
     margin-right: auto;

client/src/components/LoginForm/LoginForm.module.css

@@ -48,29 +48,42 @@ input[type=radio] {
     line-height: 16px;
     font-size: 12px;
     font-weight: 400;
-    width: 100%;
-    margin-left: 6.25rem;
+    margin-left: 3.25rem;
     padding-right: 2rem;
     margin-top: -0.25rem;
 
     display: inline-block;
     color: var(--black-extralight);
     text-align: left;
+
+    @media screen and (min-width: 992px) {
+        width: 100%;
+        margin-left: 6.25rem;
+    }
 }
 
 .authVariants {
     gap: 24px;
     width: 100%;
     display: flex;
-    flex-direction: row;
+    padding: 0 1rem;
+    flex-direction: column;
     justify-content: center;
+
+    @media screen and (min-width: 992px) {
+        flex-direction: row;
+        padding: 0;
+    }
 }
 
 .formButtons {
-    margin-top: 40px;
+    margin: 40px 0;
     display: flex;
     gap: 8px;
     justify-content: center;
+    @media screen and (min-width: 992px) {
+        margin-bottom: 0;
+    }
 }
 
 .formButtons button {

client/src/components/Popups/WorkflowTriggerResult/WorkflowTriggerResult.module.css

@@ -1,18 +1,21 @@
 .popupContainer {
-  padding-top: 3rem;
+  padding: 3rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .popupContainer h2 {
-  height: 54px;
-  width: 450px;
   line-height: 28px !important;
   margin: 12px 0 0 0;
   text-align: center;
   font-size: 24px !important;
   font-weight: 700 !important;
+
+  @media screen and (min-width: 992px) {
+    height: 54px;
+    width: 450px;
+  }
 }
 
 .popupContainer p {

client/src/components/TriggerForm/TriggerForm.module.css

@@ -1,13 +1,17 @@
 .formContainer {
-  margin: 6rem 10rem 0 0;
   padding: 0 0 1rem 3rem;
-  width: 50%;
-  min-width: 500px;
+  width: 100%;
   background-color: var(--white-main);
   border-radius: 8px;
   box-shadow: 0 4px 16px 0 #0800143d !important;
   display: flex;
   flex-direction: column;
+
+  @media screen and (min-width: 992px) {
+    min-width: 500px;
+    margin: 6rem 10rem 0 0;
+    width: 50%;
+  }
 }
 
 .formContainer h2 {

client/src/components/WorkflowDescription/WorkflowDescription.module.css

@@ -17,8 +17,13 @@
   display: flex;
   flex-direction: column;
   gap: 32px;
-  min-width: 394px;
-  width: 30%;
+  padding-bottom: 2rem;
+
+  @media screen and (min-width: 992px) {
+    min-width: 394px;
+    padding-bottom: 0;
+    width: 30%;
+  }
 }
 
 .descriptionContainer h2 {
@@ -53,6 +58,13 @@
   max-height: 62vh;
   min-width: 380px;
   overflow-y: auto;
+
+  @media screen and (max-width: 991.98px) {
+    position: static !important;
+    max-height: 100%;
+    min-width: 100%;
+    transform: none !important;
+  }
 }
 
 .dropDownMenu h4 {

client/src/components/WorkflowList/WorkflowList.module.css

@@ -1,11 +1,17 @@
 .listGroup {
   width: 100%;
-  margin-left: 34px;
-  max-height: 62vh;
+  @media screen and (min-width: 992px) {
+    margin-left: 34px;
+    max-height: 62vh;
+  }
 }
 
 .listContainer {
-  padding-top: 6.25rem;
+  padding-top: 1rem;
+
+  @media screen and (min-width: 992px) {
+    padding-top: 6.25rem;
+  }
 }
 
 .listGroup a {
@@ -196,6 +202,10 @@
   position: static;
   padding-top: 7.5rem;
   padding-right: 30rem;
+
+  @media screen and (max-width: 991.98px) {
+    padding: 1rem;
+  }
 }
 
 .emptyListContainer h1 {

client/src/hocs/withPopup/withPopup.module.css

@@ -14,8 +14,6 @@
   align-items: center;
   justify-content: center;
   background-color: var(--white-main);
-  min-height: 342px;
-  min-width: 660px;
   position: absolute;
   left: 50%;
   top: 50%;
@@ -24,6 +22,11 @@
   box-shadow: 0 0 10px 0 var(--black-main);
   max-width: 100%;
   max-height: 100%;
+
+  @media screen and (min-width: 992px) {
+    min-height: 342px;
+    min-width: 660px;
+  }
 }
 
 .inner h2 {

client/src/index.css

@@ -48,7 +48,7 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
-  background: url('assets/img/hero-background.png') center;
+  background: #fff url('assets/img/hero-background.png') center;
   background-size: cover;
 }