Skip to content

Commit a504164

Browse files
MarSH-UpMarSH-Up
committed
[Feature] Visual improvements
1 parent 78a9225 commit a504164

File tree

2 files changed

+34
-155
lines changed

2 files changed

+34
-155
lines changed

‎src/design/Layouts/FullScreen.tsx‎

Lines changed: 33 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,10 @@ const FullScreen = () => {
1717
maxWidth: "100vw",
1818
width: "100%",
1919
overflowX: "hidden",
20-
backgroundColor: "transparent",
20+
backgroundColor: Colors.primary.main,
2121
transition: "background 0.3s ease-in-out",
22-
background: "#7b81a5",
2322
backdropFilter: "blur(2.5px)",
24-
borderBottom: `2px solid ${Colors.primary.main}`,
23+
borderBottom: `2px solid ${Colors.primary.dark}`,
2524
left: "0",
2625
height: "6rem",
2726
}}
@@ -42,161 +41,41 @@ const FullScreen = () => {
4241
flexDirection: "column",
4342
}}
4443
>
45-
<Typography variant="h1" fontSize={"2rem"} fontWeight={800}>
44+
<Typography variant="h1" sx={{ color: Colors.white }}>
4645
NeuroJSON.io
4746
</Typography>
48-
<Typography variant="h2" fontSize={"1.5rem"}>
49-
Free Data Worth Sharing
50-
</Typography>
47+
<Typography variant="h2">Free Data Worth Sharing</Typography>
5148
</Box>
5249
</Grid>
5350

54-
{/* Mission */}
55-
<Grid item sm={3} md={2} lg={1}>
56-
<Typography
57-
align="center"
58-
margin={"0.75rem"}
59-
fontWeight={600}
60-
lineHeight={"1.5rem"}
61-
letterSpacing={"0.05rem"}
62-
sx={{
63-
transition: "color 0.3s ease, transform 0.3s ease",
64-
"&:hover": {
65-
color: Colors.primary.light,
66-
transform: "scale(1.05)",
67-
cursor: "pointer",
68-
},
69-
}}
70-
>
71-
Mission
72-
</Typography>
73-
</Grid>
74-
75-
{/* Get Started */}
76-
<Grid item sm={3} md={2} lg={1}>
77-
<Typography
78-
align="center"
79-
margin={"0.75rem"}
80-
fontWeight={600}
81-
lineHeight={"1.5rem"}
82-
letterSpacing={"0.05rem"}
83-
sx={{
84-
transition: "color 0.3s ease, transform 0.3s ease",
85-
"&:hover": {
86-
color: Colors.primary.light,
87-
transform: "scale(1.05)",
88-
cursor: "pointer",
89-
},
90-
}}
91-
>
92-
Get Started
93-
</Typography>
94-
</Grid>
95-
96-
{/* Contribute */}
97-
<Grid item sm={3} md={2} lg={1}>
98-
<Typography
99-
align="center"
100-
margin={"0.75rem"}
101-
fontWeight={600}
102-
lineHeight={"1.5rem"}
103-
letterSpacing={"0.05rem"}
104-
sx={{
105-
transition: "color 0.3s ease, transform 0.3s ease",
106-
"&:hover": {
107-
color: Colors.primary.light,
108-
transform: "scale(1.05)",
109-
cursor: "pointer",
110-
},
111-
}}
112-
>
113-
Contribute
114-
</Typography>
115-
</Grid>
116-
117-
{/* Tools */}
118-
<Grid item sm={3} md={2} lg={1}>
119-
<Typography
120-
align="center"
121-
margin={"0.75rem"}
122-
fontWeight={600}
123-
lineHeight={"1.5rem"}
124-
letterSpacing={"0.05rem"}
125-
sx={{
126-
transition: "color 0.3s ease, transform 0.3s ease",
127-
"&:hover": {
128-
color: Colors.primary.light,
129-
transform: "scale(1.05)",
130-
cursor: "pointer",
131-
},
132-
}}
133-
>
134-
Tools
135-
</Typography>
136-
</Grid>
137-
138-
{/* Search */}
139-
<Grid item sm={6} md={2} lg={1}>
140-
<Typography
141-
align="center"
142-
margin={"0.75rem"}
143-
fontWeight={600}
144-
lineHeight={"1.5rem"}
145-
letterSpacing={"0.05rem"}
146-
sx={{
147-
transition: "color 0.3s ease, transform 0.3s ease",
148-
"&:hover": {
149-
color: Colors.primary.light,
150-
transform: "scale(1.05)",
151-
cursor: "pointer",
152-
},
153-
}}
154-
>
155-
Search
156-
</Typography>
157-
</Grid>
158-
159-
{/* Forum */}
160-
<Grid item sm={6} md={2} lg={1}>
161-
<Typography
162-
align="center"
163-
margin={"0.75rem"}
164-
fontWeight={600}
165-
lineHeight={"1.5rem"}
166-
letterSpacing={"0.05rem"}
167-
sx={{
168-
transition: "color 0.3s ease, transform 0.3s ease",
169-
"&:hover": {
170-
color: Colors.primary.light,
171-
transform: "scale(1.05)",
172-
cursor: "pointer",
173-
},
174-
}}
175-
>
176-
Forum
177-
</Typography>
178-
</Grid>
179-
180-
{/* About */}
181-
<Grid item sm={6} md={2} lg={1}>
182-
<Typography
183-
align="center"
184-
margin={"0.75rem"}
185-
fontWeight={600}
186-
lineHeight={"1.5rem"}
187-
letterSpacing={"0.05rem"}
188-
sx={{
189-
transition: "color 0.3s ease, transform 0.3s ease",
190-
"&:hover": {
191-
color: Colors.primary.light,
192-
transform: "scale(1.05)",
193-
cursor: "pointer",
194-
},
195-
}}
196-
>
197-
About
198-
</Typography>
199-
</Grid>
51+
{[
52+
"Mission",
53+
"Get Started",
54+
"Contribute",
55+
"Tools",
56+
"Search",
57+
"Forum",
58+
"About",
59+
].map((text) => (
60+
<Grid item sm={3} md={2} lg={1} key={text} mt={"3rem"}>
61+
<Typography
62+
align="center"
63+
fontWeight={600}
64+
lineHeight={"1.5rem"}
65+
letterSpacing={"0.05rem"}
66+
sx={{
67+
transition: "color 0.3s ease, transform 0.3s ease",
68+
"&:hover": {
69+
color: Colors.white,
70+
transform: "scale(1.05)",
71+
cursor: "pointer",
72+
},
73+
}}
74+
>
75+
{text}
76+
</Typography>
77+
</Grid>
78+
))}
20079
</Grid>
20180
</Toolbar>
20281
</AppBar>
@@ -206,7 +85,7 @@ const FullScreen = () => {
20685
height: "calc(100vh - 6rem)",
20786
boxSizing: "border-box",
20887
marginTop: "6rem",
209-
background: "#f0f0f0",
88+
backgroundColor: Colors.lightGray,
21089
overflow: "auto",
21190
}}
21291
>

‎src/pages/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const Home: React.FC = () => {
4949
maxWidth: "42%",
5050
zIndex: "3",
5151
position: "absolute",
52-
top: "10%",
52+
top: "6%",
5353
left: "5%",
5454
backgroundColor: "rgba(255, 255, 255, 0.8)",
5555
padding: "1.5rem",

0 commit comments

Comments
 (0)