Skip to content

Commit 2c46c9b

Browse files
sergomensergomen
authored
Add logo for acm-fun (#56)
* Add logo for acm-fun * Trying to make merge and PR * Add new logos * Change logo and favicon for acm-fun * Change logo and icon for acm-fun
1 parent bfb5649 commit 2c46c9b

File tree

5 files changed

+141
-121
lines changed

5 files changed

+141
-121
lines changed

‎public/favicon.ico‎

94.4 KB
Binary file not shown.

‎src/components/common/Navbar.js‎

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect } from 'react';
22
import { Link, useLocation } from "react-router-dom";
33
import "../../styles/components/common/Navbar.css";
4-
import logo from '../../logo.svg';
4+
import logo from '../../logo.png';
55
import home_icon from '../../assets/icons/home-outline.svg';
66
import game_icon from '../../assets/icons/game-controller-outline.svg';
77
import pulse_icon from '../../assets/icons/pulse-outline.svg';
@@ -23,7 +23,6 @@ const navbarOptions = [
2323
url: "/activities"
2424
}
2525
]
26-
2726
export const Navbar = () => {
2827
let location = useLocation();
2928

@@ -61,27 +60,41 @@ export const Navbar = () => {
6160
return (
6261
<div className="navbar-wrapper">
6362
<div className="navbar-root">
64-
<div className="navbar-heading">
65-
<Link to="/" className="nav-logo">
66-
<img src={logo} alt="ACM Fun Logo" />
67-
<h1>ACM FUN</h1>
68-
</Link>
69-
</div>
70-
<ul>
71-
{navbarOptions.map((item, i) => {
72-
return (
73-
<li key={i} className="list ">
74-
<Link to={item.url} class="navbar-item">
75-
<span class="icon">
76-
<img src={item.icon} alt={item.title} />
77-
</span>
78-
<span class="text">{item.title}</span>
79-
</Link>
80-
</li>
81-
);
82-
})}
83-
<div class="indicator"></div>
84-
</ul>
63+
<div className="navbar-heading">
64+
<Link
65+
to="/"
66+
className="nav-logo"
67+
>
68+
<img src={logo} alt="ACM Fun Logo" />
69+
{/* <h1>ACM FUN</h1> */}
70+
</Link>
71+
</div>
72+
<ul>
73+
{
74+
navbarOptions.map((item, i) => {
75+
76+
return (
77+
<li
78+
key={i}
79+
className="list "
80+
>
81+
<Link
82+
to={item.url}
83+
class="navbar-item"
84+
>
85+
<span class="icon">
86+
<img src={item.icon} alt={item.title} />
87+
</span>
88+
<span class="text">
89+
{item.title}
90+
</span>
91+
</Link>
92+
</li>
93+
)
94+
})
95+
}
96+
< div class="indicator"></div>
97+
</ul>
8598
</div>
8699
</div>
87100
);

‎src/logo.png‎

13.2 KB
Loading

‎src/logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/styles/components/common/Navbar.css‎

Lines changed: 105 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,163 @@
11
* {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
font-family: "Poppins", sans-serif;
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Poppins', sans-serif;
66
}
77

88
:root {
9-
--clr: #ffffff;
9+
--clr: #ffffff;
1010
}
1111

12-
.navbar-wrapper {
13-
height: 110px;
14-
}
1512
.navbar-root {
16-
margin-left: auto;
17-
margin-right: auto;
18-
top: 40px;
19-
background: var(--clr);
13+
margin-left: auto;
14+
margin-right: auto;
15+
top: 40px;
16+
background: var(--clr);
2017

21-
position: relative;
22-
width: 400px;
23-
height: 70px;
24-
background: #88847e;
25-
display: flex;
26-
justify-content: center;
27-
align-items: center;
28-
border-radius: 20px;
18+
position: relative;
19+
width: 400px;
20+
height: 70px;
21+
background: #88847e;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
border-radius: 20px;
2926
}
3027

3128
.navbar-heading {
32-
display: flex;
33-
flex-direction: row;
34-
align-items: center;
35-
flex-basis: 30%;
29+
display: flex;
30+
flex-direction: row;
31+
align-items: center;
32+
flex-basis: 30%;
3633
}
3734

3835
.navbar-heading img {
39-
height: 50px;
40-
width: 50px;
36+
height: 50px;
37+
width: 50px;
38+
margin-left: 10px;
4139
}
4240

4341
.navbar-heading h1 {
44-
font-size: 22px;
45-
color: #fff;
46-
margin-bottom: 0px;
47-
display: flex;
48-
flex-direction: row;
42+
display: flex;
43+
flex-direction: row;
44+
font-size: 12px;
45+
font-family: 'Poppins';
46+
color: #032d7a;
47+
padding-left: 2px;
48+
margin-bottom: 0px;
49+
align-items: center;
50+
width: 100px;
4951
}
5052

5153
.navbar-root ul {
52-
display: flex;
53-
width: 350px;
54-
padding-left: 30px;
54+
display: flex;
55+
width: 350px;
56+
padding-left: 30px;
5557
}
5658

5759
.navbar-root li {
58-
position: relative;
59-
list-style: none;
60-
width: 70px;
61-
height: 70px;
62-
z-index: 1;
60+
position: relative;
61+
list-style: none;
62+
width: 70px;
63+
height: 70px;
64+
z-index: 1;
6365
}
6466

6567
.navbar-root ul li .navbar-item {
66-
position: relative;
67-
display: flex;
68-
justify-content: center;
69-
align-items: center;
70-
flex-direction: column;
71-
width: 100%;
72-
text-align: center;
73-
font-weight: 500;
68+
position: relative;
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
flex-direction: column;
73+
width: 100%;
74+
text-align: center;
75+
font-weight: 500;
7476
}
7577

7678
.nav-logo {
77-
display: flex;
78-
text-decoration: none;
79+
display: flex;
80+
text-decoration: none;
81+
}
82+
83+
.nav-logo img {
84+
margin-left: 30px;
85+
width: 60px;
86+
height: 60px;
7987
}
8088

8189
.navbar-root ul li .navbar-item .icon {
82-
position: relative;
83-
display: block;
84-
line-height: 75px;
85-
font-size: 1.5em;
86-
text-align: center;
87-
transition: 0.5s;
88-
color: var(--clr);
89-
width: 48px;
90-
height: 48px;
90+
position: relative;
91+
display: block;
92+
line-height: 75px;
93+
font-size: 1.5em;
94+
text-align: center;
95+
transition: 0.5s;
96+
color: var(--clr);
97+
width: 48px;
98+
height: 48px;
9199
}
92100

93101
.navbar-root ul li.active .navbar-item .icon {
94-
transform: translateY(-32px);
102+
transform: translateY(-32px);
95103
}
96104

97105
.navbar-root ul li .navbar-item .text {
98-
position: absolute;
99-
color: var(--clr);
100-
font-weight: 400;
101-
letter-spacing: 0.05em;
102-
transition: 0.5s;
103-
opacity: 0;
104-
transform: translateY(20px);
106+
position: absolute;
107+
color: var(--clr);
108+
font-weight: 400;
109+
letter-spacing: 0.05em;
110+
transition: 0.5s;
111+
opacity: 0;
112+
transform: translateY(20px);
105113
}
106114

107115
.navbar-root ul li.active .navbar-item .text {
108-
opacity: 1;
109-
transform: translateY(20px);
116+
opacity: 1;
117+
transform: translateY(20px);
110118
}
111119

112120
.indicator {
113-
position: absolute;
114-
top: -60%;
115-
width: 70px;
116-
height: 70px;
117-
background: #26b4ec;
118-
border-radius: 50%;
119-
border: 6px solid var(--clr);
120-
transition: 0.5s;
121+
position: absolute;
122+
top: -60%;
123+
width: 70px;
124+
height: 70px;
125+
background: #26b4ec;
126+
border-radius: 50%;
127+
border: 6px solid var(--clr);
128+
transition: 0.5s;
121129
}
122130

123131
.indicator::before {
124-
content: "";
125-
position: absolute;
126-
top: 60%;
127-
left: -22px;
128-
width: 23px;
129-
height: 20px;
130-
background-color: transparent;
131-
border-top-right-radius: 20px;
132-
box-shadow: 0px -10px 0 0 var(--clr);
132+
content: '';
133+
position: absolute;
134+
top: 60%;
135+
left: -22px;
136+
width: 23px;
137+
height: 20px;
138+
background-color: transparent;;
139+
border-top-right-radius: 20px;
140+
box-shadow: 0px -10px 0 0 var(--clr);
133141
}
134142

135143
.indicator::after {
136-
content: "";
137-
position: absolute;
138-
top: 60%;
139-
right: -22px;
140-
width: 23px;
141-
height: 20px;
142-
background-color: transparent;
143-
border-top-left-radius: 20px;
144-
box-shadow: 0px -10px 0 0 var(--clr);
144+
content: '';
145+
position: absolute;
146+
top: 60%;
147+
right: -22px;
148+
width: 23px;
149+
height: 20px;
150+
background-color: transparent;;
151+
border-top-left-radius: 20px;
152+
box-shadow: 0px -10px 0 0 var(--clr);
145153
}
146154

147155
.navbar-root ul li:nth-child(1).active ~ .indicator {
148-
transform: translateX(calc(70px * 0));
156+
transform: translateX(calc(70px * 0));
149157
}
150158
.navbar-root ul li:nth-child(2).active ~ .indicator {
151-
transform: translateX(calc(70px * 1));
159+
transform: translateX(calc(70px * 1));
152160
}
153161
.navbar-root ul li:nth-child(3).active ~ .indicator {
154-
transform: translateX(calc(70px * 2));
162+
transform: translateX(calc(70px * 2));
155163
}

0 commit comments

Comments
 (0)