Skip to content

Commit 008b5a2

Browse files
The-DevBlogThe-DevBlog
committed
Fix styling
1 parent 3bd8a8d commit 008b5a2

File tree

7 files changed

+98
-135
lines changed

7 files changed

+98
-135
lines changed

‎devblog/devblog/ClientApp/src/components/Footer.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
1+
import { useEffect, useState } from "react";
2+
import { IsLoggedIn } from "../components/AuthenticationService";
13
import DeleteAccount from "./DeleteAccount";
24
import "./styles/Footer.css";
35

6+
7+
48
const Footer = () => {
9+
const [userName, setUsername] = useState("");
10+
const [loggedIn, setLoggedIn] = useState(false);
11+
12+
useEffect(() => {
13+
setLoggedIn(IsLoggedIn);
14+
setUsername(localStorage.getItem("userName")!);
15+
}, []);
16+
517
return (
618
<div className="footer">
719
<DeleteAccount />
20+
{loggedIn &&
21+
<span>
22+
Welcome {userName}
23+
</span>
24+
}
825
</div>
926
)
1027
}

‎devblog/devblog/ClientApp/src/components/Nav.tsx

Lines changed: 17 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import "./styles/Nav.css";
88

99
const Nav = () => {
1010
const [loggedIn, setLoggedIn] = useState(false);
11-
const [userName, setUsername] = useState("");
1211
const [isMenuClicked, setIsMenuClicked] = useState(false)
1312
const [display, setDisplay] = useState("none")
1413
const [isAdmin, setIsAdmin] = useState(false);
@@ -38,59 +37,37 @@ const Nav = () => {
3837

3938
useEffect(() => {
4039
setLoggedIn(IsLoggedIn);
41-
setUsername(localStorage.getItem("userName")!);
4240
}, []);
4341

4442
return (
4543
<>
4644
<nav className="navbar">
4745
<Link className="logo-link" to="/">
4846
<div className="logo">
49-
<span>The</span>
50-
<br />
51-
<span>DevBlog</span>
47+
<span>The DevBlog</span>
5248
</div>
5349
</Link>
5450

55-
<div className="nav-items">
56-
<Link to="/" className={isActive("/")}>Home</Link>
57-
<Link to="/posts" className={isActive("/posts")}>Posts</Link>
58-
<Link to="/about" className={isActive("/about")}>About</Link>
59-
{isAdmin && <Link to="/insights" className={isActive("/insights")}>Insights</Link>}
51+
<div className="nav-drop-down">
52+
<MdMenu className="nav-icon" onClick={updateMenu} size={69} />
6053

61-
{loggedIn ? (
62-
<span className="accounts">
63-
<SignOut />
64-
<span>Welcome {userName}</span>
65-
</span>
66-
) : (
67-
<span className="accounts">
68-
<Link to="/signin" className={isActive("/signin")}>Login</Link>
69-
<Link to="/signup" className={isActive("/signup")}>SignUp</Link>
70-
</span>
71-
)}
72-
</div>
73-
</nav >
74-
75-
<div className="mobile-nav">
76-
<MdMenu className="mobile-nav-icon" onClick={updateMenu} size={75} />
54+
<div className="nav-links" style={{ display: display }}>
55+
<Link to="/" className={isActive("/")}>Home</Link>
56+
<Link to="/posts" className={isActive("/posts")}>Posts</Link>
57+
<Link to="/about" className={isActive("/about")}>About</Link>
58+
{isAdmin && <Link to="/insights" className={isActive("/insights")}>Insights</Link>}
7759

78-
<div className="mobile-nav-links" style={{ display: display }}>
79-
<Link to="/" className={isActive("/")}>Home</Link>
80-
<Link to="/posts" className={isActive("/posts")}>Posts</Link>
81-
<Link to="/about" className={isActive("/about")}>About</Link>
82-
{isAdmin && <Link to="/insights" className={isActive("/insights")}>Insights</Link>}
60+
{loggedIn && <SignOut />}
8361

84-
{loggedIn && <SignOut />}
85-
86-
{!loggedIn &&
87-
<span className="mobile-nav-accounts">
88-
<Link to="/signin" className={isActive("/signin")}>Login</Link>
89-
<Link to="/signup" className={isActive("/signup")}>SignUp</Link>
90-
</span>
91-
}
62+
{!loggedIn &&
63+
<span className="nav-accounts">
64+
<Link to="/signin" className={isActive("/signin")}>Login</Link>
65+
<Link to="/signup" className={isActive("/signup")}>SignUp</Link>
66+
</span>
67+
}
68+
</div>
9269
</div>
93-
</div>
70+
</nav >
9471
</>
9572
);
9673
}

‎devblog/devblog/ClientApp/src/components/styles/Footer.css

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
.footer {
2-
height: 50px;
2+
height: 50;
33
width: 100vw;
44
bottom: 0;
55
left: 0;
66
position: fixed;
77
z-index: 10;
8+
display: flex;
89
}
910

10-
.footer button {
11+
.footer button,
12+
.footer>span {
1113
padding: 5px;
1214
margin: 10px;
15+
}
16+
17+
.footer button {
18+
height: fit-content;
19+
}
20+
21+
.footer>span {
22+
margin-left: auto;
23+
margin-right: 20px;
1324
}

‎devblog/devblog/ClientApp/src/components/styles/Nav.css

Lines changed: 48 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
z-index: 10;
1010
}
1111

12-
.nav-items>a,
13-
.logo-link,
14-
.accounts,
15-
.nav-items .accounts:last-child a {
12+
.logo-link {
1613
color: white;
1714
font-size: 20px;
1815
height: fit-content;
@@ -22,114 +19,77 @@
2219

2320
.logo {
2421
font-size: 40px;
22+
padding: 5px;
2523
}
2624

27-
.nav-items {
28-
display: flex;
29-
width: 100%;
25+
.non-active,
26+
.accounts a {
27+
opacity: 0.7;
28+
}
29+
30+
.navbar a:hover,
31+
.accounts a:hover {
32+
opacity: 1.0;
3033
}
3134

32-
.accounts {
33-
margin: auto 20px 5px auto;
35+
.nav-links,
36+
.nav-icon {
37+
display: none;
3438
}
3539

36-
.nav-items>span:last-child {
40+
.nav-drop-down {
41+
display: flex;
42+
margin-left: auto;
43+
margin-right: 20px;
3744
flex-direction: column;
45+
right: 5px;
46+
z-index: 20;
47+
position: fixed;
48+
background-color: rgb(26, 32, 41);
3849
}
3950

40-
.nav-items>span:last-child a {
41-
padding: 3px;
51+
.nav-links a,
52+
.nav-links form {
53+
text-decoration: none;
54+
padding-top: 5px;
4255
}
4356

44-
s .navbar .nav-items a.active {
45-
text-decoration: underline;
46-
font-weight: bold;
57+
.nav-links>a:hover {
4758
opacity: 1.0;
4859
}
4960

50-
.nav-items>a:nth-child(1) {
51-
margin-left: 30px;
61+
.nav-links a.active {
62+
text-decoration: underline;
5263
}
5364

54-
.nav-items>a:nth-child(1),
55-
.nav-items>a:nth-child(2),
56-
.nav-items>a:nth-child(3),
57-
.nav-items>a:nth-child(4) {
58-
margin-top: auto;
59-
margin-bottom: 5px;
65+
.nav-icon {
66+
cursor: pointer;
67+
display: flex;
68+
margin-left: auto;
6069
}
6170

62-
.non-active,
63-
.accounts a {
64-
opacity: 0.7;
71+
.nav-links {
72+
margin-left: auto;
73+
padding: 10px;
74+
flex-direction: column;
6575
}
6676

67-
.navbar a:hover,
68-
.accounts a:hover {
69-
opacity: 1.0;
77+
.nav-accounts {
78+
display: flex;
79+
flex-direction: column;
7080
}
7181

72-
.mobile-nav-links,
73-
.mobile-nav-icon {
74-
display: none;
82+
.logout-form {
83+
width: fit-content;
7584
}
7685

86+
.logout {
87+
font-size: 16px;
88+
padding: 0px;
89+
}
7790

78-
79-
@media (max-width: 800px) {
80-
.mobile-nav {
81-
display: flex;
82-
margin-left: auto;
83-
margin-right: 20px;
84-
flex-direction: column;
85-
top: 25px;
86-
right: 5px;
87-
z-index: 20;
88-
position: fixed;
89-
background-color: rgb(26, 32, 41);
90-
}
91-
92-
.nav-items {
93-
display: none;
94-
}
95-
96-
.mobile-nav-links a,
97-
.mobile-nav-links form {
98-
text-decoration: none;
99-
padding-top: 5px;
100-
}
101-
102-
.mobile-nav-links>a:hover {
103-
opacity: 1.0;
104-
}
105-
106-
.mobile-nav-links a.active {
107-
text-decoration: underline;
108-
}
109-
110-
.mobile-nav-icon {
111-
cursor: pointer;
112-
display: flex;
113-
margin-left: auto;
114-
}
115-
116-
.mobile-nav-links {
117-
margin-left: auto;
118-
padding: 10px;
119-
flex-direction: column;
120-
}
121-
122-
.mobile-nav-accounts {
123-
display: flex;
124-
flex-direction: column;
125-
}
126-
127-
.logout-form {
128-
width: fit-content;
129-
}
130-
131-
.logout {
132-
font-size: 16px;
133-
padding: 0px;
91+
@media(max-width: 450px) {
92+
.logo {
93+
font-size: 30px;
13494
}
13595
}

‎devblog/devblog/ClientApp/src/components/styles/Post.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44

55
.post {
66
width: 90%;
7-
margin-bottom: 5em;
8-
border: .15em solid rgb(70, 68, 60);
7+
margin-bottom: 1.5em;
98
border-radius: .5em;
109
padding: 1em;
1110
}

‎devblog/devblog/ClientApp/src/pages/styles/Posts.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
display: flex;
44
flex-direction: column;
55
justify-content: center;
6-
margin: 150px 20px 0px 20px;
6+
margin: 100px 20px 0px 20px;
77
}
88

99
.pager:first-child {

‎devblog/devblog/ClientApp/src/theme.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
}
1212

1313
.post {
14-
border: 1px solid rgb(94, 94, 94);
1514
background-color: #1a2029;
1615
}
1716

@@ -23,7 +22,7 @@
2322
.comment,
2423
textarea,
2524
button {
26-
border: 1px solid rgb(94, 94, 94);
25+
border: #0d1116;
2726
background-color: #0d1116;
2827
color: white;
2928
}

0 commit comments

Comments
 (0)