chore: Add Brian work for the UI (#3156)

* Enhancements for Tiles, Header, footer, dashboard, homepage (#3154)

* Enhancements for Tiles, Header, footer, dashboard, homepage

* fix mobile styling

* more mobile fixes

---------

Co-authored-by: Brian Lee <brian-mf.lee@broadcom.com>

* revert back tile.jsx

Signed-off-by: at670475 <andrea.tabone@broadcom.com>

* Back button (#3157)

* Back button

* icon

* fix color

---------

Co-authored-by: Brian Lee <brian-mf.lee@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>
Co-authored-by: Pablo Carle <pablocarle@users.noreply.github.com>

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

@@ -13,6 +13,10 @@
     .feedback-dialog .form textarea {
       height: 150px;
     }
+    #swagger {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
     .header {
       #doc, .product-name {
         margin-right: var( --spaceSmaller );

api-catalog-ui/frontend/src/components/App/_app.scss

@@ -51,6 +51,10 @@ body {
     color: var( --criticalShade10 );
     font-weight: var( --fontWeightMedium );
   }
+  #onetrust-button-group-parent {
+    margin-left: 2% !important;
+  }
+
   .button-cta {
     background: var( --criticalShade10 );
     padding: var( --spaceSmaller ) var( --spaceSmall );
@@ -59,11 +63,18 @@ body {
     &:hover {
       background: var( --criticalShade00 );
     }
+    &.feedback-button {
+      border-radius: 24px;
+    }
     &, * {
       color: var( --text100 );
       text-transform: none;
       line-height: 100%;
       font-size: var( --fontMedium );
+
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
   .MuiButton-root {

api-catalog-ui/frontend/src/components/Dashboard/_dashboard.scss

@@ -30,12 +30,6 @@
     margin: 0 var( --spaceSmaller );
     flex: 1 1 100%;
 
-    > * {
-      display: flex;
-      flex: 1 1;
-      align-items: center;
-      justify-content: center;
-    }
     .empty, .tile-title {
       flex: 4 1;
       justify-content: flex-start;
@@ -60,8 +54,6 @@
     &::-webkit-scrollbar {
       width: 0px;
     }
-
-
   }
   .zowe-styling {
     grid-gap: 20px !important;
@@ -140,11 +132,6 @@
   flex-direction: row-reverse;
   z-index: 1000;
   right: 2vw;
-
-  .MuiButtonBase-root, &.MuiFab-root, &.MuiFab-extended {
-    background-color: var( --criticalShade10 ) !important;
-    color: white;
-  }
 }
 
 body {

api-catalog-ui/frontend/src/components/Footer/_footer.scss

@@ -2,6 +2,7 @@ body {
   #pageFooter {
     > div {
       display: flex;
+      justify-content: center;
     }
   }
   #bottom-info-div {
@@ -41,22 +42,22 @@ h6#footer-message {
 }
 
 @media (max-width: 800px) {
-  body #bottom-info-div {
-    flex-direction: column;
-  }
-  .left {
-    .MuiTypography-root, .MuiTypography-subtitle2 {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      margin-left: 0 !important;
-      #footer-logo {
-        width: auto !important;
-        margin-right: 0 !important;
-        margin-bottom: 6px !important;
+  body {
+    #bottom-info-div {
+      flex-direction: column;
+    }
+    #onetrust-banner-sdk {
+      #onetrust-accept-btn-handler,
+      #onetrust-pc-btn-handler {
+        min-width: 100%;
       }
     }
-  }
-
+
+    #pageFooter {
+      .MuiContainer-root:not(:first-child) {
+        margin-top: var( --spaceMedium );
+      }
+    }
+  } 
 }
 

api-catalog-ui/frontend/src/components/Header/_header.scss

@@ -6,21 +6,27 @@ body {
         }
     }
   #go-back-button-portal {
-      background-color: #CC092F;
-      margin-right: 25px;
-      border-radius: 3px;
-      height: 40px;
-      &, > span {
-          &, > a {
-              text-decoration: none;
-              color: white;
-              font-size: var( --fontMedium );
-          }
-          &, > a:hover {
-              color: var(--linkHover);
-          }
+      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 );
       }
   }
+  .dashboard-develop-link {
+    margin-right: var( --spaceLarger );
+  }
   #product-title {
       font-size: var( --spaceLarger );
       font-family: var( --fontFamily00 );

api-catalog-ui/frontend/src/components/Tile/_tile.scss

@@ -12,9 +12,96 @@ body {
 
     &:hover {
       cursor: pointer;
-      background: var( --surface15 );
+      box-shadow: 0 0 0 2px var( --linkHover ) inset;
+
+      .tile-title #tiles-service-title {
+        color: var( --linkHover );
+      }
     }
-  }
+    .MuiCardActionArea-focusHighlight,
+    .MuiTouchRipple-root {
+      display: none;
+    }
+    .tile-desc,
+    .icon-ctn > .expanded-spacer {
+      flex: 0 0;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+    .tile-desc {
+      transition: all .5s ease;
+    }
+
+    .icon-ctn {
+      display: flex;
+      flex: 4 1;
+
+      > * {
+        display: flex;
+        flex: 1 1;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        transition: height .5s ease;
+
+        .swagger-img {
+          background-image: url(../../assets/images/swagger.svg);
+        }
+        &.link-counter .icon-img-ctn:hover svg path {
+          fill: var( --linkHover );
+        }
+        &.disabled-counter {
+          svg path {
+            fill: var( --control00Disabled );
+          }
+          .media-labels,
+          .expanded-icon-title {
+            color: var( --control00Disabled ) !important;
+          }
+        }
+
+        .expanded-icon-title {
+          margin-top: var( --spaceSmallest );
+          display: none;
+          color: #014ba4;
+          font-weight: var( --fontWeightBold );
+        }
+        .icon-img-ctn {
+          display: flex;
+          align-items: center;
+          height: 22px;
+
+          svg {
+            width: 100%;
+          }
+        }
+      }
+    }//end icon-ctn
+
+    &.expanded {
+      .tile-ctn, #swagger {
+        flex-direction: column;
+      }
+      .expanded-icon-title {
+        display: block;
+      }
+      .expanded-spacer {
+        flex: 4 1;
+      }
+      .tile-desc {
+        padding: var( --spaceLarger ) 0;
+        text-align: left;
+        width: 100%;
+      }
+      .tile-desc,
+      .expanded-spacer {
+        width: auto;
+        height: auto;
+        overflow: visible;
+      }
+    }//end expanded
+  }//end card-root
 
   .MuiCardContent-root,
   .dashboard-grid-header {
@@ -66,16 +153,18 @@ body {
     .media-labels {
         font-size: 14px;
     }
+    #tutorials-counter,
+    #videos-counter { 
+      margin-right: var( --spaceSmaller );
+    }
     #videos-counter {
         color: #602C0A;
-        margin-right: 5px;
     }
     #use-cases-counter {
         color: #D61A00;
     }
     #tutorials-counter {
         color: #9B51E0;
-        margin-right: 5px;
     }
     .imageCounter {
       display: flex