chore: Brian work (#3162)

* UI enhancements per Jan (#3160) Co-authored-by: Brian Lee <brian-mf.lee@broadcom.com> * fix eslint Signed-off-by: at670475 <andrea.tabone@broadcom.com> * remove tile.jsx and fix eslint Signed-off-by: at670475 <andrea.tabone@broadcom.com> * fix code smell Signed-off-by: at670475 <andrea.tabone@broadcom.com> --------- Signed-off-by: at670475 <andrea.tabone@broadcom.com> Co-authored-by: briandavid85 <blee1006@gmail.com> Co-authored-by: Brian Lee <brian-mf.lee@broadcom.com>
zowe · Oct 23, 2023 · 6bbea21 · 6bbea21
1 parent d8e5f6c
commit 6bbea21
Show file tree

Hide file tree

Showing 16 changed files with 135 additions and 68 deletions.
diff --git a/api-catalog-ui/frontend/src/assets/images/square-envelope-mobile.svg b/api-catalog-ui/frontend/src/assets/images/square-envelope-mobile.svg
diff --git a/api-catalog-ui/frontend/src/assets/images/square-envelope.svg b/api-catalog-ui/frontend/src/assets/images/square-envelope.svg
diff --git a/api-catalog-ui/frontend/src/assets/scss/_media.scss b/api-catalog-ui/frontend/src/assets/scss/_media.scss
@@ -21,6 +21,9 @@
       #doc, .product-name {
         margin-right: var( --spaceSmaller );
       }
+      .right-icons {
+        display: none;
+      }
       .product-name {
         min-width: 27px;
       }
@@ -33,6 +36,9 @@
       &, .App, .main-content2 {
         overflow: hidden !important;
       }
+      .dashboard-mobile-menu .header .right-icons {
+        display: flex;
+      }
       .main-content2, .header {
         filter: blur(1px);
         -webkit-filter: blur(1px);
@@ -59,6 +65,13 @@
           .mobile-view {
             display: flex !important;
           }
+          .feedback-button {
+            height: auto;
+
+            * {
+              color: var( --text10 );
+            }
+          } 
           .right-icons a {
             width: 100%;
           }

diff --git a/api-catalog-ui/frontend/src/components/App/_app.scss b/api-catalog-ui/frontend/src/components/App/_app.scss
@@ -32,11 +32,16 @@ body {
     height: var( --contentHeightAdj );
     overflow: auto;
   }
-  .title1 {
-    font-size: var( --fontLarger );
+  .title1, .title2 {
     font-weight: var( --fontWeightMedium );
     color: var( --controlText15 );
   }
+  .title1 {
+    font-size: var( --fontLarger );
+  }
+  .title2 {
+    font-size: var( --fontLarge );
+  }
   .no-content {
     padding: var( --spaceLarger );
     text-align: center;
@@ -65,6 +70,12 @@ body {
     }
     &.feedback-button {
       border-radius: 24px;
+      height: 30px;
+      box-shadow: none;
+
+      span {
+        font-size: var( --fontSmall );
+      }
     }
     &, * {
       color: var( --text100 );
@@ -107,7 +118,7 @@ body {
         background-color: transparent;
       }
       .mobile-menu-trigger {
-        margin-right: var( --spaceSmaller );
+        margin-right: var( --spaceSmall );
         padding: var( --spaceTiny );
       }
     }

diff --git a/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx b/api-catalog-ui/frontend/src/components/Dashboard/Dashboard.jsx
@@ -152,14 +152,13 @@ export default class Dashboard extends Component {
                                 {apiPortalEnabled && (
                                     <div>
                                         <h1 className="api-heading">API Catalog</h1>
-                                        <h3>Discover All Broadcom APIs in one place</h3>
                                     </div>
                                 )}
                                 <div id="search">
                                     <Shield title="Search Bar is broken !">
                                         <SearchCriteria
                                             id="search-input"
-                                            placeholder="Search for APIs..."
+                                            placeholder="Search..."
                                             doSearch={this.handleSearch}
                                         />
                                     </Shield>

diff --git a/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss b/api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss
@@ -267,6 +267,7 @@ body {
             h5 {
               margin: var( --spaceSmaller ) 0 var( --spaceLarger );
               font-size: var( --fontSmall );
+              text-transform: none;
             }
             p {
               line-height: 130%;

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx b/api-catalog-ui/frontend/src/components/DetailPage/DetailPage.jsx
@@ -165,7 +165,7 @@ export default class DetailPage extends Component {
                             <div className="detailed-description-container">
                                 <div className="title-api-container">
                                     {tiles !== undefined && tiles.length === 1 && (
-                                        <h2 id="title" className="text-block-11">
+                                        <h2 id="title" className="text-block-11 title2">
                                             {tiles[0].title}
                                         </h2>
                                     )}

diff --git a/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss b/api-catalog-ui/frontend/src/components/DetailPage/_detailPage.scss
@@ -33,7 +33,7 @@ body .detail-content {
     .scheme-container {
       &.information-container,
       &.filter {
-        margin-top: var( --spaceSmall );
+        margin-top: var( --spaceSmallest );
 
         a {
           @include blueLink();
@@ -68,10 +68,11 @@ body .detail-content {
         h2.title {
           @extend .MuiTypography-h4;
           margin-top: 0px;
-          visibility: hidden;
-        }
-        h2.title span {
+
+          span {
+            font-weight: normal;
             visibility: visible;
+          }
         }
         .version {
           &:before {

diff --git a/api-catalog-ui/frontend/src/components/Footer/_footer.scss b/api-catalog-ui/frontend/src/components/Footer/_footer.scss
@@ -27,7 +27,7 @@ body {
       font-size: var( --fontSmall );
 
       &:hover {
-        color: var( --text15 );
+          color: var(--linkHover);
       }
     }
   }

diff --git a/api-catalog-ui/frontend/src/components/Header/_header.scss b/api-catalog-ui/frontend/src/components/Header/_header.scss
@@ -1,32 +1,19 @@
 body {
-    /* Extra small devices (phones, 600px and down) */
-    @media only screen and (max-width: 600px) {
-        #zowe-links {
-            display: contents;
-        }
-    }
-  #go-back-button-portal {
-      margin-right: var( --spaceMedium );
-      background-image: url(../../assets/images/angles-left.svg);
-      background-repeat: no-repeat;
-      background-size: 16px;
-      background-position: 8px 50%;
-      padding: var(--spaceSmaller ) var(--spaceMedium ) 6px var( --spaceLargest );
-      background-color: var( --surface05 );
-      border: 1px solid var( --divider20 );
-
-      &, * {
-        color: var( --link20 );
-        font-size: var( --fontSmall );
-      }
-      &:hover, &:focus-visible {
-        background-color: var( --surface15 );
-        border-color: var( --divider15 );
+  /* Extra small devices (phones, 600px and down) */
+  @media only screen and (max-width: 600px) {
+      #zowe-links {
+          display: contents;
       }
   }
+
   .dashboard-develop-link {
     margin-right: var( --spaceLarger );
   }
+  .mobile-product-title {
+    position: absolute;
+    top: var( --spaceSmallest );
+    left: var( --spaceSmall );
+  }
   #product-title {
       font-size: var( --spaceLarger );
       font-family: var( --fontFamily00 );
@@ -60,18 +47,30 @@ body {
     .right-icons {
       margin-left: auto;
       margin-right: var( --spaceSmall );
+      width: 100%;
+      justify-content: flex-end;
 
       .MuiLink-root:hover .ext{
         color: var(--controlText15Hover);
         filter: invert(28%) sepia(93%) saturate(1803%) hue-rotate(190deg) brightness(96%) contrast(101%);
       }
-      a, #zowe-links {
+      > a {
         display: flex;
         align-items: center;
+        text-align: right;
 
         img:first-child {
           margin-right: var( --spaceSmallest );
         }
+        img:last-child {
+          margin-right: var( --spaceLarger );
+          margin-left: var( --spaceSmaller );
+          height: 15px;
+          width: 15px;
+        }
+        &:last-child img:last-child {
+          margin-right: 0;
+        }
       }
 
       .logout-container > button {
@@ -91,13 +90,6 @@ body {
         margin-left: var( --spaceSmall);
       }
     }
-
-      #img-internal-link {
-          margin-right: var( --spaceLarger );
-          margin-left: var( --spaceSmall );
-          height: 15px;
-          width: 15px;
-      }
   }//end header
 
   .dashboard-mobile-menu {
@@ -128,13 +120,12 @@ body {
       .feedback-ctn .MuiFab-extended{
         width: 100%;
         border-radius: var( --borderRadius1 );
-        background-color: var( --surface05 );
         justify-content: flex-start;
       }
     }
 
     #internal-link {
       margin-right: 0 !important;
-  }
+    }
   }
 }
diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx b/api-catalog-ui/frontend/src/components/ServiceTab/ServiceTab.jsx
@@ -249,7 +249,7 @@ export default class ServiceTab extends Component {
                                 {selectedService.description}
                             </Typography>
                             <br />
-                            <Typography id="swagger-label" size="medium" variant="outlined">
+                            <Typography id="swagger-label" className="title2" size="medium" variant="outlined">
                                 Swagger
                             </Typography>
                             {!apiPortalEnabled && containsVersion && currentService && (

diff --git a/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss b/api-catalog-ui/frontend/src/components/ServiceTab/_serviceTab.scss
@@ -27,10 +27,7 @@ p.MuiTypography-root.version-text.MuiTypography-body1 {
     font-weight: bold;
 }
 #swagger-label {
-    color: var( --criticalShade10 );
-    font-size: var( --fontLarger );
-    letter-spacing: 0.5px;
-    margin-top: var( --spaceSmaller );
+    margin: var( --spaceSmaller ) 0 var( --spaceMedium );
 }
 #version-label {
     margin-top: var( --spaceMedium );

diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/ServicesNavigationBar.jsx
@@ -9,7 +9,7 @@
  */
 
 import { Component } from 'react';
-import { Tab, Tabs, Tooltip, Typography, withStyles, Button } from '@material-ui/core';
+import { Tab, Tabs, Tooltip, Typography, withStyles, Button, IconButton } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Shield from '../ErrorBoundary/Shield/Shield';
@@ -74,6 +74,8 @@ export default class ServicesNavigationBar extends Component {
         const url = window.location.href;
         const parts = url.split('/');
         const serviceId = parts[parts.length - 1];
+        const dashboard = '#/dashboard';
+        const backButtonText = 'BACK';
         let selectedTab = Number(0);
         let allServices;
         if (hasTiles) {
@@ -88,6 +90,17 @@ export default class ServicesNavigationBar extends Component {
         ));
         return (
             <div>
+                {isAPIPortal() && (
+                    <IconButton
+                        id="go-back-button-portal"
+                        className="button-cta"
+                        onClick={closeMobileMenu}
+                        size="medium"
+                        href={dashboard}
+                    >
+                        {backButtonText}
+                    </IconButton>
+                )}
                 {isAPIPortal() && (
                     <div className="mobile-view mobile-menu-close-ctn">
                         <h2 className="title1">API Catalog</h2>
@@ -102,11 +115,7 @@ export default class ServicesNavigationBar extends Component {
                 )}
                 <div id="search2">
                     <Shield title="Search Bar is broken !">
-                        <SearchCriteria
-                            data-testid="search-bar"
-                            placeholder="Search for APIs..."
-                            doSearch={this.handleSearch}
-                        />
+                        <SearchCriteria data-testid="search-bar" placeholder="Search..." doSearch={this.handleSearch} />
                     </Shield>
                 </div>
                 <Typography id="serviceIdTabs" variant="h5">

diff --git a/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss b/api-catalog-ui/frontend/src/components/ServicesNavigationBar/_serviceNavigationBar.scss
@@ -2,7 +2,8 @@ $red-selected-bx: 0 0 0 2px var( --criticalShade10 ) inset;
 
 #serviceIdTabs {
     margin-bottom: var( --spaceSmall );
-    font-weight: bold;
+    color: var( --criticalShade10 );
+    font-size: var( --fontLarger );
 }
 #search_no_results {
     margin: auto;
@@ -97,3 +98,23 @@ svg.MuiSvgIcon-root.clear-text-search {
 #search2:has(.Mui-focused, :hover) {
     border: 1px solid var(--linkHover);
 }
+
+#go-back-button-portal {
+    margin-right: var( --spaceMedium );
+    background-image: url(../../assets/images/angles-left.svg);
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-position: 8px 50%;
+    padding: var(--spaceSmaller ) var(--spaceMedium ) 6px var( --spaceLargest );
+    background-color: var( --surface05 );
+    border: 1px solid var( --divider20 );
+
+    &, * {
+      color: var( --link20 );
+      font-size: var( --fontSmall );
+    }
+    &:hover, &:focus-visible {
+      background-color: var( --surface15 );
+      border-color: var( --divider15 );
+    }
+}
diff --git a/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx b/api-catalog-ui/frontend/src/components/Swagger/SwaggerUI.jsx
@@ -46,7 +46,6 @@ function setFilterBarStyle() {
         if (divInfo && searchLabel) {
             searchLabel.setAttribute('id', 'filter-label');
             searchLabel.textContent = 'Search through Swagger';
-            searchLabel.style.fontWeight = 'bold';
             searchLabel.style.fontSize = '13.3px';
             divInfo.appendChild(searchLabel);
         }