Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adjust Nav Styling #1525

Merged
merged 8 commits into from
Feb 25, 2022
Merged

Adjust Nav Styling #1525

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
eabe21a
fix logo text and bg, initial tabs work wrestling with mui
joshri Feb 24, 2022
18a1e08
nav styles
joshri Feb 24, 2022
c5d5c8d
snapshots updated
joshri Feb 24, 2022
f97545a
Set font-weight on .sub-items
jpellizzari Feb 24, 2022
cce74fa
nav spacing and font weight
joshri Feb 24, 2022
3b98428
remove dupe
joshri Feb 24, 2022
6651efc
brought indicator back
joshri Feb 25, 2022
f518bcd
brought back proper spacing with new structure for indicator
joshri Feb 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
75 changes: 46 additions & 29 deletions ui/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ 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";
import Link from "./Link";
import Logo from "./Logo";
import Spacer from "./Spacer";

type Props = {
className?: string;
Expand All @@ -19,11 +19,14 @@ const navItems = [
{
value: V2Routes.Automations,
label: "Applications",
subItems: [
{
value: V2Routes.Sources,
label: "Sources",
},
],
},
{
value: V2Routes.Sources,
label: "Sources",
},

{
value: V2Routes.FluxRuntime,
label: "Flux Runtime",
Expand All @@ -42,52 +45,52 @@ 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};
}

${Link} {
justify-content: flex-start;
&.sub-item: {
font-weight: 400;
}
}
`;

Expand Down Expand Up @@ -141,12 +144,26 @@ function Layout({ className, children }: Props) {
value={getParentNavValue(currentPage)}
>
{_.map(navItems, (n) => (
<StyleLinkTab
key={n.value}
label={n.label}
to={formatURL(n.value)}
value={n.value}
/>
<Flex column>
<StyleLinkTab
key={n.value}
label={n.label}
to={formatURL(n.value)}
value={n.value}
/>
{_.map(n.subItems, (sub) => {
return (
<StyleLinkTab
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at Figma, sub items should be 12px below the main one. This looks a like a little bigger gap.

key={sub.value}
label={sub.label}
to={formatURL(sub.value)}
value={sub.value}
className={"sub-item"}
/>
);
})}
<Spacer padding="small" />
</Flex>
))}
</Tabs>
</NavContent>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/Logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%" }} />
jpellizzari marked this conversation as resolved.
Show resolved Hide resolved
</Flex>
</Spacer>
);
Expand Down
5 changes: 2 additions & 3 deletions ui/components/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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``;
Expand Down Expand Up @@ -120,7 +120,6 @@ function Page({

export default styled(Page)`
min-height: 1216px;

.MuiAlert-root {
width: 100%;
}
Expand Down
13 changes: 9 additions & 4 deletions ui/components/__tests__/__snapshots__/Logo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -41,6 +41,11 @@ exports[`Logo snapshots renders 1`] = `
/>
<img
src=""
style={
Object {
"height": "90%",
}
}
/>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/__tests__/__snapshots__/Page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
10 changes: 0 additions & 10 deletions ui/images/background.svg
View file
Open in desktop

This file was deleted.

5 changes: 2 additions & 3 deletions ui/lib/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down