[BB-3966] Fix UX issues (#761)

* BB-3966 Header: Expand to screen width. * BB-3966 Update Redeployment toolbar. * BB-3966: Align console content to header * BB-3966 Fix footer at bottom
open-craft · Apr 5, 2021 · 84cb231 · 84cb231
1 parent 60b87ae
commit 84cb231
Show file tree

Hide file tree

Showing 35 changed files with 217 additions and 358 deletions.
diff --git a/frontend/src/console/components/ConsoleContainer/ConsoleContainer.tsx b/frontend/src/console/components/ConsoleContainer/ConsoleContainer.tsx
@@ -4,7 +4,7 @@ import { ConsoleRoutes } from 'routes/console';
 import './styles.scss';
 
 export const ConsoleContainer: React.FC = () => (
-  <Col className="console-container">
+  <Col className="console-container p-0">
     <ConsoleRoutes />
   </Col>
 );
diff --git a/...tend/src/console/components/ConsoleContainer/__snapshots__/ConsoleContainer.spec.tsx.snap b/...tend/src/console/components/ConsoleContainer/__snapshots__/ConsoleContainer.spec.tsx.snap
@@ -2,6 +2,6 @@
 
 exports[`renders without crashing 1`] = `
 <div
-  className="console-container col"
+  className="console-container p-0 col"
 />
 `;
diff --git a/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap b/frontend/src/console/components/ConsolePage/__snapshots__/ConsolePage.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`Console Page Correctly renders loading page 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -318,10 +318,10 @@ exports[`Console Page Correctly renders page with data 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"

diff --git a/frontend/src/console/components/ConsolePage/styles.scss b/frontend/src/console/components/ConsolePage/styles.scss
@@ -38,8 +38,7 @@
 
   .console-page-container {
     background-color: #fff;
-    padding: 3rem 1rem;
-    margin: 0 -15px;
+    padding: 3rem 0;
     flex: 1;
 
     .console-page-content {

diff --git a/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap b/frontend/src/console/components/CoursesManage/__snapshots__/CoursesManage.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"
@@ -55,13 +55,13 @@ exports[`renders without crashing 1`] = `
       className="new-console-page-content row"
     >
       <div
-        className="container-fluid"
+        className="pr-4 pl-0 container-fluid"
       >
         <div
-          className="justify-content-center console-page-inner-content row"
+          className="justify-content-center m-0 row"
         >
           <div
-            className="col-md-3"
+            className="p-0 m-0 col-md-3"
           >
             <div
               className="new-customization-menu accordion"
@@ -71,14 +71,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Theme
-                  </div>
+                  Theme
                 </div>
                 <div
                   aria-expanded={null}
@@ -142,14 +138,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Custom Pages
-                  </div>
+                  Custom Pages
                 </div>
                 <div
                   aria-expanded={null}
@@ -213,14 +205,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Instance Settings
-                  </div>
+                  Instance Settings
                 </div>
                 <div
                   aria-expanded={null}
@@ -258,14 +246,10 @@ exports[`renders without crashing 1`] = `
               >
                 <div
                   className="card-header"
+                  onClick={[Function]}
+                  variant="link"
                 >
-                  <div
-                    className="card-header"
-                    onClick={[Function]}
-                    variant="link"
-                  >
-                    Courses (Studio)
-                  </div>
+                  Courses (Studio)
                 </div>
                 <div
                   aria-expanded={null}
@@ -292,7 +276,7 @@ exports[`renders without crashing 1`] = `
             </div>
           </div>
           <div
-            className="col-md-7"
+            className="pr-0 col-md-9"
           >
             <div
               className="customization-form"

diff --git a/frontend/src/console/components/Hero/__snapshots__/Hero.spec.tsx.snap b/frontend/src/console/components/Hero/__snapshots__/Hero.spec.tsx.snap
@@ -1157,10 +1157,10 @@ exports[`Hero customization page renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"

diff --git a/...tend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap b/...tend/src/console/components/InstanceSettings/__snapshots__/InstanceSettings.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"

diff --git a/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap b/frontend/src/console/components/Logos/__snapshots__/Logos.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"

diff --git a/frontend/src/console/components/NoticeBoard/__snapshots__/NoticeBoard.spec.tsx.snap b/frontend/src/console/components/NoticeBoard/__snapshots__/NoticeBoard.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`NoticeBoard tests Renders all notification types without crashing 1`] =
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"

diff --git a/frontend/src/console/components/RedeploymentToolbar/RedeploymentToolbar.tsx b/frontend/src/console/components/RedeploymentToolbar/RedeploymentToolbar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMatomo } from '@datapunt/matomo-tracker-react';
 import { WrappedMessage } from 'utils/intl';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Container, Modal } from 'react-bootstrap';
 import {
   CustomStatusPill,
   NotificationToast,
@@ -93,8 +93,11 @@ export const RedeploymentToolbar: React.FC<Props> = ({
     : handleShowModal;
 
   return (
-    <div className="d-flex justify-content-center align-middle redeployment-toolbar">
-      <div className="redeployment-nav">
+    <Container
+      fluid
+      className="d-flex justify-content-between redeployment-toolbar px-4 py-3"
+    >
+      <div className="d-flex flex-row justify-content-between w-100">
         <CustomStatusPill
           loading={loading}
           redeploymentStatus={deploymentStatus}
@@ -159,6 +162,6 @@ export const RedeploymentToolbar: React.FC<Props> = ({
         closeMessage={messages.notificationHelp.defaultMessage}
         messages={messages}
       />
-    </div>
+    </Container>
   );
 };
diff --git a/...rc/console/components/RedeploymentToolbar/__snapshots__/RedeploymentToolbar.spec.tsx.snap b/...rc/console/components/RedeploymentToolbar/__snapshots__/RedeploymentToolbar.spec.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when deployment info isn't there 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -49,10 +49,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when d
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when deployment is by admin 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -103,10 +103,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when d
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance has pending changes 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -157,10 +157,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when i
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance is being deployed by user 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -204,10 +204,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when i
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance is being prepared 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"
@@ -251,10 +251,10 @@ exports[`RedeploymentToolbar Component Correctly renders redeployment bar when i
 
 exports[`RedeploymentToolbar Component Correctly renders redeployment bar when instance is up-to-date 1`] = `
 <div
-  className="d-flex justify-content-center align-middle redeployment-toolbar"
+  className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
 >
   <div
-    className="redeployment-nav"
+    className="d-flex flex-row justify-content-between w-100"
   >
     <span
       className="status-pill badge badge-pill badge-primary"

diff --git a/frontend/src/console/components/RedeploymentToolbar/styles.scss b/frontend/src/console/components/RedeploymentToolbar/styles.scss
@@ -2,18 +2,8 @@
 
 
 .redeployment-toolbar {
-  background-color: $light-blue;
-  padding: 15px;
-  margin: 0 -15px;
-
-  display: flex;
-  align-items: center;
-
-  .redeployment-nav {
-    display: inline-block;
-    width: 100%;
-    max-width: 1100px;
-  }
+  background-color: white;
+  box-shadow: 0 2px 8px 0 rgba(15, 31, 36, 0.3);
 }
 
 .tooltip {

diff --git a/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap b/frontend/src/console/components/ThemeButtons/__snapshots__/ThemeButtons.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"

diff --git a/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap b/frontend/src/console/components/ThemeNavigation/__snapshots__/ThemeNavigation.spec.tsx.snap
@@ -5,10 +5,10 @@ exports[`renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"

diff --git a/...onsole/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap b/...onsole/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap
@@ -1894,10 +1894,10 @@ exports[`Theme preview and colors page renders without crashing 1`] = `
   className="console-page"
 >
   <div
-    className="d-flex justify-content-center align-middle redeployment-toolbar"
+    className="d-flex justify-content-between redeployment-toolbar px-4 py-3 container-fluid"
   >
     <div
-      className="redeployment-nav"
+      className="d-flex flex-row justify-content-between w-100"
     >
       <span
         className="status-pill badge badge-pill badge-primary"