chore: Address UX comments and improve responsiveness

api-catalog-ui/frontend/package.json

@@ -8,10 +8,13 @@
         "@emotion/is-prop-valid": "1.1.0",
         "@emotion/react": "11.5.0",
         "@emotion/styled": "11.9.3",
+        "@jest/globals": "29.7.0",
         "@material-ui/core": "4.12.3",
         "@material-ui/icons": "4.11.2",
         "@mui/icons-material": "5.1.0",
         "@mui/material": "5.1.0",
+        "@types/enzyme": "3.10.14",
+        "@types/jest": "29.5.5",
         "@types/react": "17.0.31",
         "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
         "agentkeepalive": "4.1.4",
@@ -29,6 +32,7 @@
         "react": "17.0.2",
         "react-app-polyfill": "2.0.0",
         "react-dom": "17.0.2",
+        "react-hook-form": "7.46.1",
         "react-loadable": "5.5.0",
         "react-redux": "7.2.5",
         "react-router-dom": "5.3.0",
@@ -74,6 +78,7 @@
         "@babel/core": "7.22.11",
         "@babel/eslint-parser": "7.18.2",
         "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+        "@babel/preset-env": "^7.22.20",
         "@babel/preset-react": "7.18.6",
         "@testing-library/dom": "8.11.1",
         "@testing-library/jest-dom": "5.16.1",

api-catalog-ui/frontend/src/assets/scss/_components.scss

@@ -4,6 +4,7 @@
 @import "../../components/Tile/tile";
 @import "../../components/Dashboard/dashboard";
 @import "../../components/Search/search";
+@import "../../components/Login/login";
 @import "../../components/Spinner/spinner";
 @import "../../components/Footer/footer";
 @import "../../components/DetailPage/detailPage";

api-catalog-ui/frontend/src/assets/scss/_media.scss

@@ -3,6 +3,64 @@
     .filtering-container {
       width: 100%;
     }
+    .mobile-view {
+      display: flex !important;
+    }
+    .desktop-view {
+      display: none !important;
+    }
+    .feedback-dialog .form textarea {
+      height: 150px;
+    }
+    .header {
+      #doc, .product-name {
+        margin-right: var( --spaceSmaller );
+      }
+      .product-name {
+        min-width: 27px;
+      }
+      .mobile-view:not(.mobile-menu-trigger-ctn) {
+        display: none !important;
+      }
+    }//end header
+
+    &.mobile-menu-open {
+      &, .App, .main-content2 {
+        overflow: hidden !important;
+      }
+      .main-content2, .header {
+        filter: blur(1px);
+        -webkit-filter: blur(1px);
+      }
+      &:after {
+        content: "";
+        background-color: var( --unknown10 );
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        opacity: .7;
+        left: 0;
+        top: 0px;
+      }
+      .content .main .nav-bar,
+      .dashboard-mobile-menu {
+        left: 0;
+      }
+      .dashboard-mobile-menu {
+        .header {
+          filter: blur(0px);
+          -webkit-filter: blur(0px);
+
+          .mobile-view {
+            display: flex !important;
+          }
+          .right-icons a {
+            width: 100%;
+          }
+        }
+      }
+    }//end mobile-menu-open
+
     .content {
       .main-content {
         width: calc(100vw - calc(#{var( --contentPadding )} * 2));
@@ -12,15 +70,27 @@
         }
       }
       .main {
+        --sideNavWidth: var( --sideNavMobileWidth );
+        --sideNavRightPadding: var( --spaceSmall );
+
         .side-bar {
           display: none;
         }
+        .nav-bar {
+          @include mobileNav();
+        }
         .main-content2 {
-          width: calc(100% - #{var(--sideNavWidth)} - #{var(--contentLeftPadding)});
+          --contentLeftPadding: var( --spaceMedium );
+          --contentRightPadding: var( --spaceMedium );
+          width: 100%;
           overflow: auto;
+
+          &:before {
+            width: 100%;
+          }
         }
-      }
-    }
+      }//end main
+    }//end content
 
     .api-diff-form {
       flex-wrap: wrap;
@@ -35,6 +105,6 @@
         margin-right: 0px;
         margin-bottom: var( --spaceSmaller );
       }
-    }
+    }//end api-diff-form
   }//end body
-}
+}

api-catalog-ui/frontend/src/assets/scss/_mixin.scss

@@ -13,4 +13,15 @@
     color: var( --text20Disabled );
     cursor: default;
   }
+}
+
+@mixin mobileNav() {
+  position: absolute;
+  top: 0;
+  height: 100dvh;
+  left: calc(calc(#{var(--sideNavWidth)} * -1) - calc(#{var(--sideNavLeftPadding)} + var(--sideNavRightPadding)));
+  width: var( --sideNavWidth );
+  z-index: 2;
+  background-color: var( --surface05 );
+  transition: left .5s ease;
 }

api-catalog-ui/frontend/src/assets/scss/_theme_default.scss

@@ -79,6 +79,8 @@
   --controlText15Hover: #0E478B;
   --controlText15Disabled: rgba(115, 127, 141, 0.95);
 
+  --formMandatoryTextColor: #FC1E00;
+
   //input
   --input00Bg: var( --surface05 );
   --input00BgDisabled: rgba(56, 70, 72, 0.15);
@@ -124,6 +126,30 @@
   --borderRadius1: 3px;
   --borderRadius2: 6px;
 
+  //various
   --sideNavWidth: 25%;
-  --contentLeftPadding: 4%;
+  --defaultBottomPadding: var( --spaceSmall);
+
+  --sideNavMobileWidth: 80%;
+
+  --sideNavLeftPadding: var( --spaceSmall );
+  --sideNavRightPadding: var( --spaceMedium );
+  --sideNavBottomPadding: var( --defaultBottomPadding );
+
+  --contentLeftPadding: 3%;
+  --contentRightPadding: var( --spaceMedium );
+  --contentBottomPadding: var( --defaultBottomPadding );
+  --contentTopPadding: var( --spaceLarge );
+
+  --headerVPadding: var( --spaceSmall );
+  --headerInternalHeight: 28px;
+  --headerHeight: calc(#{var( --headerVPadding )} + #{var( --headerInternalHeight )});
+
+  --contentHeightAdj: calc(100dvh - calc(#{var( --headerHeight )} + #{var( --contentBottomPadding )}));
+
+  --scrollPadding: var( --spaceSmaller );
+
+  --spacing1: var( --spaceSmallest );
+  --spacing2: var( --spaceSmall );
+  --spacing3: var( --spaceMedium );
 }

api-catalog-ui/frontend/src/assets/scss/_utility.scss

@@ -0,0 +1,154 @@
+body {
+  //flex
+
+  .flex-dir-row,
+  .flex-dir-col,
+  .flex-jc-end,
+  .flex-jc-start,
+  .flex-jc-center,
+  .flex-ai-end,
+  .flex-ai-start,
+  .flex-ai-center,
+  .flex {
+    display: flex;
+  }
+  .flex-dir-row {
+    flex-direction: row;
+  }
+  .flex-dir-col {
+    flex-direction: column;
+
+    > label {
+      & + * {
+        margin-top: var( --spacing1 );
+      }
+    } 
+  }
+  .flex-jc-end {
+    justify-content: flex-end;
+  }
+  .flex-jc-start {
+    justify-content: flex-start;
+  }
+  .flex-jc-center {
+    justify-content: center;
+  }
+  .flex-ai-end {
+    align-items: flex-end;
+  }
+  .flex-ai-start {
+    align-items: flex-start;
+  }
+  .flex-ai-center {
+    align-items: center;
+  }
+
+  //width
+
+  .full-width {
+    width: 100%;
+  }
+  .half-width {
+    width: 50%;
+  }
+  .no-width {
+    width: 0px;
+  }
+
+  //padding
+
+
+  .pl-1 {
+    padding-left: var( --spacing1 );
+  }
+  .pl-2 {
+    padding-left: var( --spacing2 );
+  }
+  .pl-3 {
+    padding-left: var( --spacing3 );
+  }
+  .pr-1 {
+    padding-right: var( --spacing1 );
+  }
+  .pr-2 {
+    padding-right: var( --spacing2 );
+  }
+  .pr-3 {
+    padding-right: var( --spacing3 );
+  }
+  .pb-1 {
+    padding-bottom: var( --spacing1 );
+  }
+  .pb-2 {
+    padding-bottom: var( --spacing2 );
+  }
+  .pb-3 {
+    padding-bottom: var( --spacing3 );
+  }
+  .pt-1 {
+    padding-top: var( --spacing1 );
+  }
+  .pt-2 {
+    padding-top: var( --spacing2 );
+  }
+  .pt-3 {
+    padding-top: var( --spacing3 );
+  }
+  .p-1 {
+    padding: var( --spacing1 );
+  }
+  .p-2 {
+    padding: var( --spacing2 );
+  }
+  .p-3 {
+    padding: var( --spacing3 );
+  }
+
+  //margin
+
+  .ml-1 {
+    margin-left: var( --spacing1 );
+  }
+  .ml-2 {
+    margin-left: var( --spacing2 );
+  }
+  .ml-3 {
+    margin-left: var( --spacing3 );
+  }
+  .mr-1 {
+    margin-right: var( --spacing1 );
+  }
+  .mr-2 {
+    margin-right: var( --spacing2 );
+  }
+  .mr-3 {
+    margin-right: var( --spacing3 );
+  }
+  .mb-1 {
+    margin-bottom: var( --spacing1 );
+  }
+  .mb-2 {
+    margin-bottom: var( --spacing2 );
+  }
+  .mb-3 {
+    margin-bottom: var( --spacing3 );
+  }
+  .mt-1 {
+    margin-top: var( --spacing1 );
+  }
+  .mt-2 {
+    margin-top: var( --spacing2 );
+  }
+  .mt-3 {
+    margin-top: var( --spacing3 );
+  }
+  .m-1 {
+    margin: var( --spacing1 );
+  }
+  .m-2 {
+    margin: var( --spacing2 );
+  }
+  .m-3 {
+    margin: var( --spacing3 );
+  }
+}