Skip to content

Commit 7a309b0

Browse files
netpoenetpoe
committed
feat: NavBar & Footer
1 parent 5d17304 commit 7a309b0

15 files changed

+289
-94
lines changed

‎app/src/context/theme/ThemeContextController.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { LocalStorageKeys } from "hooks/useLocalStorage/useLocalStorage.types";
77
import { ThemeContext } from "./ThemeContext";
88
import { ThemeContextControllerProps } from "./ThemeContext.types";
99

10-
const themes: Theme[] = ["fileagent", "fileagent-dark", "yipiti-light", "yipiti-dark", "lease-721"];
10+
const themes: Theme[] = ["svpervnder"];
1111

1212
export const ThemeContextController = ({ children }: ThemeContextControllerProps) => {
13-
const [theme, setTheme] = useState<Theme>("lease-721");
13+
const [theme, setTheme] = useState<Theme>("svpervnder");
1414

1515
const localStorage = useLocalStorage();
1616

‎app/src/layouts/home-layout/HomeLayout.module.scss

-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@
33

44
.home-layout {
55
position: relative;
6-
display: flex;
76
}

‎app/src/layouts/home-layout/HomeLayout.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { MainPanel } from "ui/mainpanel/MainPanel";
77
import { ToastContextController } from "context/toast/ToastContextController";
88
import { ThemeContextController } from "context/theme/ThemeContextController";
99
import { EvmWalletSelectorContextController } from "context/evm/wallet-selector/EvmWalletSelectorContextController";
10+
import { Footer } from "ui/footer/Footer";
1011

1112
import { ChatLayoutProps } from "./HomeLayout.types";
1213
import styles from "./HomeLayout.module.scss";
@@ -33,6 +34,8 @@ export const HomeLayout: React.FC<ChatLayoutProps> = ({ children }) => {
3334
<Navbar />
3435

3536
<MainPanel>{children}</MainPanel>
37+
38+
<Footer />
3639
</div>
3740
</ToastContextController>
3841
</EvmWalletSelectorContextController>

‎app/src/theme/globals.scss

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
@import "src/theme/base";
2+
@import "./forms/forms";
3+
@import "./icons";
4+
@import "src/ui/table/reboot";
5+
@import "src/theme/variants/svpervnder";
26

37
html {
48
@media (max-width: $mq-medium) {
@@ -46,12 +50,3 @@ a {
4650
code {
4751
background-color: var(--color-background-contrast);
4852
}
49-
50-
@import "./forms/forms";
51-
@import "./icons";
52-
@import "src/ui/table/reboot";
53-
@import "src/ui/dropzone/overrides";
54-
@import "src/theme/variants/fileagent";
55-
@import "src/theme/variants/fileagent-dark";
56-
@import "src/theme/variants/yipiti-light";
57-
@import "src/theme/variants/lease-721";

‎app/src/theme/variants/_svpervnder.scss

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/* stylelint-disable CssSyntaxError */
2+
body[data-theme="lease-721"] {
3+
// Status colors
4+
--color-status-info: #5356fc;
5+
--color-status-info-light: rgba(83, 86, 252, 0.7);
6+
--color-status-info-lighter: rgba(83, 86, 252, 0.4);
7+
--color-status-success: #3dd598;
8+
--color-status-success-light: #d6fff5;
9+
--color-status-success-lighter: #e6fff9;
10+
--color-status-warning: #ffeea3;
11+
--color-status-warning-light: #fffdb8;
12+
--color-status-warning-lighter: #fffeeb;
13+
--color-status-critical: #bd2d00;
14+
--color-status-critical-light: #ffe2e0;
15+
--color-status-critical-lighter: #fff5f5;
16+
--color-status-unknown: #f4f6f8;
17+
18+
// Gray dark
19+
--color-white: #fff;
20+
--color-black: #161b1c;
21+
--color-dark-11: #222529;
22+
--color-dark-10: #2c3035;
23+
--color-dark-9: #2c3035;
24+
--color-dark-8: #40404a;
25+
--color-dark-7: #5b5b65;
26+
--color-dark-6: #70707c;
27+
--color-dark-5: #8a8a98;
28+
--color-dark-4: #a9a9b7;
29+
--color-dark-3: #d0d0da;
30+
--color-dark-2: #f5f5ff;
31+
--color-dark-1: #ffffff;
32+
33+
// Brand
34+
--color-primary: #faff0a;
35+
--color-primary-shade-mid: #faff0a;
36+
--color-primary-shade-low: #faff0a;
37+
--color-secondary: #fff;
38+
--color-secondary-shade-mid: var(--color-dark-4);
39+
--color-secondary-shade-low: var(--color-dark-7);
40+
41+
// Background
42+
--color-background: #171719;
43+
--color-background-contrast: #000;
44+
45+
// Sidebar
46+
--color-sidebar-item: var(--color-white);
47+
--color-sidebar-divider: var(--color-dark-8);
48+
49+
// Navbar
50+
--color-navbar-logo: var(--color-primary);
51+
--color-navbar-background: var(--color-background);
52+
53+
// Button
54+
--color-button-primary: var(--color-primary);
55+
--color-button-primary-text: var(--color-background);
56+
--color-button-primary-hover: var(--color-primary);
57+
--color-button-primary-hover-text: var(--color-background-contrast);
58+
--color-button-primary-disabled: var(--color-dark-5);
59+
--color-button-secondary: var(--color-white);
60+
--color-button-secondary-text: var(--color-white);
61+
--color-button-secondary-hover: var(--color-dark-10);
62+
--color-button-secondary-hover-text: var(--color-white);
63+
--color-button-status-critical: var(--color-status-critical);
64+
--color-button-status-critical-text: var(--color-status-critical);
65+
--color-button-status-critical-hover: var(--color-status-critical);
66+
--color-button-status-critical-hover-text: var(--color-white);
67+
68+
// Button outlined
69+
--color-button-outlined-primary-text: var(--color-primary);
70+
--color-button-outlined-primary-hover: var(--color-primary);
71+
--color-button-outlined-primary-hover-text: var(--color-dark-4);
72+
--color-button-outlined-primary-border: var(--color-primary);
73+
--color-button-outlined-primary-border-hover: var(--color-dark-4);
74+
--color-button-outlined-info: #ffd74b;
75+
--color-button-outlined-info-text: #ffd74b;
76+
--color-button-outlined-disabled: #5b5b65;
77+
--color-button-outlined-disabled-text: #8a8a98;
78+
79+
// Button text
80+
--color-button-outlined-primary-text: var(--color-primary);
81+
--color-button-outlined-primary-hover: var(--color-primary);
82+
--color-button-outlined-primary-hover-text: var(--color-dark-4);
83+
--color-button-outlined-primary-border: var(--color-primary);
84+
--color-button-outlined-primary-border-hover: var(--color-dark-4);
85+
--color-button-outlined-info: #ffd74b;
86+
--color-button-outlined-info-text: #ffd74b;
87+
--color-button-outlined-disabled: #5b5b65;
88+
--color-button-outlined-disabled-text: #8a8a98;
89+
90+
// Theme Selector
91+
--color-theme-button-light: #ffffff00;
92+
--color-theme-button-dark: #ffffff40;
93+
--color-theme-button-divider: var(--color-background-contrast);
94+
95+
// Typography
96+
--color-typography-headline-1: var(--color-white);
97+
--color-typography-headline-2: var(--color-white);
98+
--color-typography-headline-3: var(--color-white);
99+
--color-typography-headline-4: var(--color-white);
100+
--color-typography-headline-5: var(--color-white);
101+
--color-typography-headline-6: var(--color-white);
102+
--color-typography-text: var(--color-white);
103+
--color-typography-text-bold: var(--color-white);
104+
--color-typography-subtitle: var(--color-dark-5);
105+
--color-typography-button-label: var(--color-white);
106+
--color-typography-mini-button-label: var(--color-white);
107+
--color-typography-description: var(--color-status-warning);
108+
--color-typography-mini-description: var(--color-dark-5);
109+
--color-typography-link: var(--color-secondary-shade-mid);
110+
--color-typography-link-hover: var(--color-secondary-shade-low);
111+
112+
// Tab
113+
--color-tab-navigation-border: var(--color-dark-7);
114+
--color-tab-item-default: var(--color-dark-7);
115+
--color-tab-item-active: var(--color-white);
116+
117+
// Market Card
118+
--color-market-card-background: var(--color-background);
119+
--color-market-card-background-contrast: var(--color-background);
120+
--color-market-card-title: #fff;
121+
--color-market-card-stat: #b1b1b1;
122+
123+
// Market Fees Card
124+
--color-market-fees-card-background: #ffd74b;
125+
--color-market-fees-card-text: #fff;
126+
127+
// Horizontal Line
128+
--color-horizontal-line-background: var(--color-secondary-shade-mid);
129+
130+
// Data Visualization colors
131+
--color-value-increase: #00d3a1;
132+
--color-value-increase-bright: #00bb8e;
133+
--color-value-decrease: #ff7c35;
134+
--color-value-decrease-bright: #e76823;
135+
136+
// Forms
137+
--color-input-text: var(--color-background);
138+
--color-input-text-disabled: var(--color-typography-description);
139+
--color-input-background: white;
140+
--color-input-background-disabled: var(--color-background-contrast);
141+
--color-input-border: var(--color-black);
142+
--color-input-label: rgba(255, 255, 255, 0.7);
143+
--color-input-placeholder: var(--color-typography-description);
144+
145+
// Dropzone
146+
--color-dropzone-border: var(--color-typography-description);
147+
--color-dropzone-border-hover: var(--color-primary);
148+
149+
// Chat Sidebar
150+
--color-chat-sidebar-background: var(--color-background-contrast);
151+
--color-chat-sidebar-background-hover: var(--color-background);
152+
153+
// Table
154+
--color-table-background: var(--color-background-contrast);
155+
}

‎app/src/ui/fileagent/navbar/Navbar.module.scss

+10-8
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
left: 0;
1010
z-index: $z-index-content;
1111
width: 100%;
12+
border-bottom: 1px solid var(--color-background-contrast);
1213
background-color: var(--color-navbar-background);
1314

1415
&__sidebar-toggle {
@@ -87,6 +88,13 @@
8788
height: $navbar-height-mobile;
8889
}
8990

91+
svg {
92+
@include atLargeTablet {
93+
height: $navbar-logo-width;
94+
}
95+
width: $navbar-logo-width-mobile;
96+
}
97+
9098
svg,
9199
span {
92100
color: var(--color-typography-text);
@@ -170,15 +178,9 @@
170178
}
171179
display: none;
172180

173-
a {
174-
color: var(--color-typography-subtitle);
175-
176-
&:hover {
177-
text-decoration: none;
178-
}
179-
}
180-
181181
&--item {
182+
margin-left: $space-l;
183+
182184
p {
183185
margin: 0;
184186
color: var(--color-typography-subtitle);

‎app/src/ui/fileagent/navbar/Navbar.tsx

+30-39
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,39 @@ import clsx from "clsx";
22

33
import { Typography } from "ui/typography/Typography";
44
import { Grid } from "ui/grid/Grid";
5-
import { useThemeContext } from "context/theme/useThemeContext";
6-
import { Lease721Logo } from "ui/icons/Lease721Logo";
7-
import { WalletSelector } from "ui/wallet-selector/WalletSelector";
85

96
import { NavbarProps } from "./Navbar.types";
107
import styles from "./Navbar.module.scss";
118

12-
export const Navbar: React.FC<NavbarProps> = ({ className }) => {
13-
const { theme } = useThemeContext();
14-
15-
return (
16-
<div className={clsx(styles.navbar, className)}>
17-
<Grid.Container fluid>
18-
<Grid.Row>
19-
<Grid.Col lg={4} sm={4} xs={4}>
20-
<div className={styles.navbar__left}>
21-
<div className={styles["navbar__left--item"]}>
22-
<div className={clsx(styles.navbar__logo, styles["navbar__logo-mobile"])}>
23-
<Typography.Link href="#">
24-
<Lease721Logo theme={theme} />
25-
</Typography.Link>
26-
</div>
27-
<div className={clsx(styles.navbar__logo, styles["navbar__logo-desktop"])}>
28-
<Typography.Link href="#">
29-
<Lease721Logo theme={theme} />
30-
</Typography.Link>
31-
</div>
32-
</div>
9+
export const Navbar: React.FC<NavbarProps> = ({ className }) => (
10+
<div className={clsx(styles.navbar, className)}>
11+
<Grid.Container fluid>
12+
<Grid.Row>
13+
<Grid.Col lg={4} sm={4} xs={4}>
14+
<div />
15+
</Grid.Col>
16+
<Grid.Col lg={4} sm={4} xs={4}>
17+
<div className={styles.navbar__center}>
18+
<div className={styles["navbar__center--item"]}>
19+
<Typography.Link href="#">Collections</Typography.Link>
20+
</div>
21+
<div className={styles["navbar__center--item"]}>
22+
<Typography.Link href="#">Artists</Typography.Link>
23+
</div>
24+
<div className={styles["navbar__center--item"]}>
25+
<Typography.Link href="#">Events</Typography.Link>
3326
</div>
34-
</Grid.Col>
35-
<Grid.Col lg={4} sm={4} xs={4}>
36-
<div />
37-
</Grid.Col>
38-
<Grid.Col lg={4} sm={4} xs={4}>
39-
<div className={styles.navbar__right}>
40-
<div className={styles["navbar__right--item"]}>
41-
<WalletSelector />
42-
</div>
27+
<div className={styles["navbar__center--item"]}>
28+
<Typography.Link href="#">About</Typography.Link>
4329
</div>
44-
</Grid.Col>
45-
</Grid.Row>
46-
</Grid.Container>
47-
</div>
48-
);
49-
};
30+
</div>
31+
</Grid.Col>
32+
<Grid.Col lg={4} sm={4} xs={4}>
33+
<div className={styles.navbar__right}>
34+
<div className={styles["navbar__right--item"]}>{/* <WalletSelector /> */}</div>
35+
</div>
36+
</Grid.Col>
37+
</Grid.Row>
38+
</Grid.Container>
39+
</div>
40+
);

‎app/src/ui/fileagent/navbar/_variables.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
$navbar-height: 70px;
1+
$navbar-height: 63px;
22
$navbar-height-mobile: 56px;
3-
$navbar-logo-width: 124px;
4-
$navbar-logo-width-mobile: 89px;
3+
$navbar-logo-width: 56px;
4+
$navbar-logo-width-mobile: 42px;

‎app/src/ui/footer/Footer.module.scss

+29-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,37 @@
11
@import "src/theme/base";
22
@import "src/ui/typography/mixins";
3+
@import "src/ui/fileagent/navbar/variables";
34

45
.footer {
5-
background-color: black;
6+
position: fixed;
7+
right: 0;
8+
bottom: 0;
9+
left: 0;
10+
width: 100%;
11+
border-top: 1px solid var(--color-background-contrast);
12+
background-color: var(--color-background);
13+
14+
&__left,
15+
&__right,
16+
&__center {
17+
&--item {
18+
@include atLargeTablet {
19+
min-height: $navbar-height;
20+
}
21+
position: relative;
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
min-height: $navbar-height-mobile;
26+
padding: $space-default 0;
27+
}
28+
}
29+
30+
&__center {
31+
text-align: center;
32+
}
633

734
&__right {
8-
padding: $space-default;
935
text-align: right;
1036

1137
a {
@@ -14,15 +40,8 @@
1440
}
1541

1642
&__powered-by {
17-
@include description;
18-
display: flex;
19-
justify-content: flex-end;
20-
color: var(--color-typography-text);
21-
2243
svg {
23-
width: 18px;
24-
fill: var(--color-background);
25-
margin-right: $space-xs;
44+
width: 70px;
2645
}
2746
}
2847

0 commit comments

Comments
 (0)