chore: Address UX comments and improve responsiveness

api-catalog-ui/frontend/package.json

@@ -29,6 +29,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",

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 );
 }