Adjust Nav Styling (#1525)

* fix logo text and bg, initial tabs work wrestling with mui

* nav styles

* snapshots updated

* Set font-weight on .sub-items

* nav spacing and font weight

* remove dupe

* brought indicator back

* brought back proper spacing with new structure for indicator

Co-authored-by: Jordan Pellizzari <jordan@weave.works>

ui/components/Layout.tsx

@@ -3,7 +3,6 @@ import _ from "lodash";
 import React, { forwardRef } from "react";
 import styled from "styled-components";
 import useNavigation from "../hooks/navigation";
-import images from "../lib/images";
 import { formatURL, getParentNavValue } from "../lib/nav";
 import { V2Routes } from "../lib/types";
 import Flex from "./Flex";
@@ -23,7 +22,9 @@ const navItems = [
   {
     value: V2Routes.Sources,
     label: "Sources",
+    sub: true,
   },
+
   {
     value: V2Routes.FluxRuntime,
     label: "Flux Runtime",
@@ -42,52 +43,59 @@ const LinkTab = (props) => (
 const StyleLinkTab = styled(LinkTab)`
   span {
     align-items: flex-start;
-    color: #4b4b4b;
   }
 `;
 
-const negativeSpaceColor = "#f5f5f5";
-
 const AppContainer = styled.div`
   width: 100%;
   overflow-x: hidden;
   height: 100%;
   margin: 0 auto;
   padding: 0;
-  background-color: ${negativeSpaceColor};
-  background-image: url(${images.background});
-  background-position: bottom right;
-  background-repeat: no-repeat;
 `;
 
 const NavContainer = styled.div`
   width: 240px;
   min-height: 100%;
   margin-top: ${(props) => props.theme.spacing.medium};
-  padding-right: ${(props) => props.theme.spacing.small};
-  background-color: ${(props) => props.theme.colors.white};
+  background-color: ${(props) => props.theme.colors.neutral00};
+  border-radius: 10px;
 `;
 
 const NavContent = styled.div`
   min-height: 100%;
   padding-top: ${(props) => props.theme.spacing.medium};
   padding-left: ${(props) => props.theme.spacing.xs};
-  padding-right: ${(props) => props.theme.spacing.xl};
-
-  .MuiTab-wrapper {
-    text-transform: capitalize;
-    font-size: 20px;
-    font-weight: bold;
+  .MuiTab-textColorInherit {
+    opacity: 1;
+    .MuiTab-wrapper {
+      font-weight: 600;
+      font-size: 20px;
+      color: ${(props) => props.theme.colors.neutral40};
+    }
+    &.sub-item {
+      opacity: 0.7;
+      .MuiTab-wrapper {
+        font-weight: 400;
+      }
+    }
   }
-
   .MuiTabs-indicator {
-    left: 0;
     width: 4px;
     background-color: ${(props) => props.theme.colors.primary};
   }
-
+  .MuiTab-root {
+    padding: 0px 12px;
+    min-height: 24px;
+    &.sub-item {
+      margin-bottom: 24px;
+    }
+  }
   ${Link} {
     justify-content: flex-start;
+    &.sub-item: {
+      font-weight: 400;
+    }
   }
 `;
 
@@ -140,12 +148,13 @@ function Layout({ className, children }: Props) {
                 orientation="vertical"
                 value={getParentNavValue(currentPage)}
               >
-                {_.map(navItems, (n) => (
+                {_.map(navItems, (n, i) => (
                   <StyleLinkTab
                     key={n.value}
                     label={n.label}
                     to={formatURL(n.value)}
                     value={n.value}
+                    className={n.sub && "sub-item"}
                   />
                 ))}
               </Tabs>

ui/components/Logo.tsx

@@ -15,10 +15,10 @@ type Props = {
 function Logo({ className }: Props) {
   return (
     <Spacer padding="medium">
-      <Flex className={className}>
+      <Flex className={className} align>
         <img src={logoSrc} />
         <Spacer padding="xxs" />
-        <img src={titleSrc} />
+        <img src={titleSrc} style={{ height: "90%" }} />
       </Flex>
     </Spacer>
   );

ui/components/Page.tsx

@@ -23,18 +23,18 @@ export type PageProps = {
 };
 
 export const Content = styled.div`
-  min-height: 80vh;
+  min-height: 85vh;
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
   min-width: 1260px;
-  min-height: 762px;
   box-sizing: border-box;
   background-color: rgba(255, 255, 255, 0.75);
   padding-left: ${(props) => props.theme.spacing.large};
   padding-right: ${(props) => props.theme.spacing.large};
   padding-top: ${(props) => props.theme.spacing.large};
   padding-bottom: ${(props) => props.theme.spacing.medium};
+  border-radius: 10px;
 `;
 
 const Children = styled.div``;
@@ -120,7 +120,6 @@ function Page({
 
 export default styled(Page)`
   min-height: 1216px;
-
   .MuiAlert-root {
     width: 100%;
   }

ui/components/__tests__/__snapshots__/Logo.test.tsx.snap

@@ -9,10 +9,10 @@ exports[`Logo snapshots renders 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: start;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-box-pack: space-evenly;
   -webkit-justify-content: space-evenly;
   -ms-flex-pack: space-evenly;
@@ -41,6 +41,11 @@ exports[`Logo snapshots renders 1`] = `
     />
     <img
       src=""
+      style={
+        Object {
+          "height": "90%",
+        }
+      }
     />
   </div>
 </div>

ui/components/__tests__/__snapshots__/Page.test.tsx.snap

@@ -53,18 +53,18 @@ exports[`Page snapshots default 1`] = `
 }
 
 .c1 {
-  min-height: 80vh;
+  min-height: 85vh;
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
   min-width: 1260px;
-  min-height: 762px;
   box-sizing: border-box;
   background-color: rgba(255,255,255,0.75);
   padding-left: 32px;
   padding-right: 32px;
   padding-top: 32px;
   padding-bottom: 24px;
+  border-radius: 10px;
 }
 
 .c2 {

ui/lib/theme.ts

@@ -89,9 +89,8 @@ export const GlobalStyle = createGlobalStyle`
     padding: 0;
     margin: 0;
     min-width: fit-content;
-    background: right bottom url(${bg}) no-repeat fixed ${
-  theme.colors.neutral10
-}; 
+    background: right bottom url(${bg}) no-repeat fixed ${(props) =>
+  props.theme.colors.neutral10}; 
     background-size: 100%;
   }
   .auth-modal-size {