Skip to content

Commit b013cfe

Browse files
ForLoopCodesForLoopCodes
committed
some ui update
1 parent 0b995a8 commit b013cfe

File tree

6 files changed

+412
-73
lines changed

6 files changed

+412
-73
lines changed

‎public/css/theme.css‎

Lines changed: 123 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
22
* {
33
font-family: Poppins;
4-
transition: 0.3s ease;
4+
transition: 0.5s ease;
55
}
66
html,
77
body,
88
.viewport {
99
height: 100%;
1010
width: 100%;
11-
margin: 0;
12-
background: #eff3f7;
11+
margin-top: 120px;
12+
background: #f9f9fb;
1313
display: flex;
1414
justify-content: center;
1515
}
@@ -71,3 +71,123 @@ select:hover {
7171
background: #fff;
7272
border: 1px solid #3b80f3;
7373
}
74+
.navbar {
75+
background: #f9f9fb;
76+
position: fixed;
77+
bottom: 0;
78+
left: 0;
79+
width: 130px;
80+
height: calc(100% - 100px);
81+
display: flex;
82+
flex-direction: column;
83+
justify-content: center;
84+
align-items: center;
85+
z-index: 2;
86+
}
87+
.navbar-item {
88+
margin: 12px 0;
89+
height: 20px;
90+
width: 20px;
91+
padding: 13.5px;
92+
border-radius: 10px;
93+
background: #fff;
94+
}
95+
.navbar-item:hover {
96+
background: #05001b;
97+
}
98+
.navbar-item svg {
99+
height: 100% !important;
100+
width: 100% !important;
101+
}
102+
.navbar-item:hover svg path,
103+
.navbar-item:hover svg circle {
104+
fill: #fff !important;
105+
}
106+
.navbar-item svg path,
107+
.navbar-item svg circle {
108+
fill: #050017 !important;
109+
}
110+
.header {
111+
height: 100px;
112+
width: 100%;
113+
position: fixed;
114+
top: 0;
115+
right: 0;
116+
background: #f9f9fb;
117+
z-index: 2;
118+
display: flex;
119+
justify-content: center;
120+
align-items: center;
121+
}
122+
.main-body {
123+
width: calc(100% - 130px - 400px - 20px);
124+
height: calc(100% - 100px);
125+
position: fixed;
126+
top: 100px;
127+
left: 130px;
128+
background: #fff;
129+
z-index: 1;
130+
padding-left: 20px;
131+
overflow: scroll;
132+
border-top-left-radius: 30px;
133+
border-top-right-radius: 30px;
134+
}
135+
.header-logo img {
136+
position: absolute;
137+
top: 40px;
138+
left: 50px;
139+
z-index: 3;
140+
height: 30px !important;
141+
width: 30px !important;
142+
}
143+
.sidebar {
144+
height: calc(100% - 100px);
145+
width: 400px;
146+
position: fixed;
147+
bottom: 0;
148+
right: 0;
149+
z-index: 2;
150+
background: #f9f9fb;
151+
}
152+
.main-body div {
153+
animation: fade 1s ease;
154+
}
155+
@keyframes fade {
156+
from {
157+
opacity: 0;
158+
}
159+
to {
160+
opacity: 1;
161+
}
162+
}
163+
.main-look-timer {
164+
font-size: 40px;
165+
}
166+
.timer-blink {
167+
animation: blink 1s ease infinite;
168+
}
169+
@keyframes blink {
170+
0% {
171+
opacity: 0;
172+
}
173+
50% {
174+
opacity: 1;
175+
}
176+
100% {
177+
opacity: 0;
178+
}
179+
}
180+
.alt-look-timer {
181+
font-size: 20px;
182+
}
183+
.timer-details {
184+
font-size: 15px;
185+
}
186+
.timer-input-invisible,
187+
.timer-button-invisible {
188+
padding-left: 0;
189+
padding-right: 0;
190+
font-size: 0;
191+
opacity: 0;
192+
visibility: hidden;
193+
}

‎src/components/Main.jsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,31 @@ import LeaveScreen from "./bases/LeaveScreen";
55
import Tally from "./bases/Tally";
66
import Expenses from "./bases/Expenses";
77
import Mood from "./bases/Mood";
8+
import NavBar from "./bases/NavBar";
9+
import Dashboard from "./bases/Dashboard";
810

911
export default function Main() {
12+
const [ActiveTab, setActiveTab] = React.useState("Timer");
13+
const handleTabChange = (tab) => {
14+
setActiveTab(tab);
15+
};
1016
return (
1117
<div className="main">
12-
<Mood />
18+
<NavBar
19+
handleChange={handleTabChange}
20+
className="navbar"
21+
activeTab={ActiveTab}
22+
/>
1323
<hr />
14-
<Expenses />
15-
<hr />
16-
<Timer />
17-
<hr />
18-
<Tally />
19-
<hr />
20-
<Tasks />
21-
<hr />
22-
<LeaveScreen />
24+
<div className="main-body">
25+
{ActiveTab === "Dashboard" && <Dashboard />}
26+
{ActiveTab === "Timer" && <Timer />}
27+
{ActiveTab === "Tasks" && <Tasks />}
28+
{ActiveTab === "Tally" && <Tally />}
29+
{ActiveTab === "Expenses" && <Expenses />}
30+
{ActiveTab === "Mood" && <Mood />}
31+
{ActiveTab === "LeaveScreen" && <LeaveScreen />}
32+
</div>
2333
</div>
2434
);
2535
}

‎src/components/bases/Dashboard.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react";
2+
3+
export default function Dashboard() {}

‎src/components/bases/NavBar.jsx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import logo from "./resources/logo.svg";
2+
import React from "react";
3+
4+
export default function NavBar(props) {
5+
return (
6+
<div>
7+
<div className="header-logo">
8+
<img src={logo} alt="logo" />
9+
</div>
10+
<div className="header">
11+
<h1 className="header-heading">{props.activeTab}.</h1>
12+
</div>
13+
<div className="navbar">
14+
<span
15+
className="navbar-item"
16+
onClick={() => props.handleChange("Dashboard")}
17+
>
18+
<svg
19+
width="128"
20+
height="128"
21+
x="0"
22+
y="0"
23+
viewBox="0 0 24 24"
24+
style={{ enableBackground: "new 0 0 512 512" }}
25+
>
26+
<g>
27+
<path
28+
d="M16.773,2.9c-.747-.634-1.53-1.3-2.327-2.024A3.354,3.354,0,0,0,11.731.031,3.264,3.264,0,0,0,9.4,1.516h0a18.708,18.708,0,0,0-2.126,5.02,2.458,2.458,0,0,0-3.795-.163,9.159,9.159,0,0,0-2.61,6.493A11.024,11.024,0,0,0,9.133,23.64,11.667,11.667,0,0,0,11.99,24,11.122,11.122,0,0,0,23.127,12.874C23.127,8.3,20.183,5.8,16.773,2.9Zm.218,16.386a7.974,7.974,0,0,1-.9.6,4.486,4.486,0,0,0,.44-1.919c0-1.927-1.343-4.164-3-6.125a2.025,2.025,0,0,0-3.079,0C8.1,14.6,6.627,17.582,8,20a8.1,8.1,0,0,1-4.129-7.127,5.951,5.951,0,0,1,1.345-3.9q.212.348.455.673a2.3,2.3,0,0,0,2.375.87,2.364,2.364,0,0,0,1.8-1.826,17.255,17.255,0,0,1,2.091-5.567A.259.259,0,0,1,12.132,3a.367.367,0,0,1,.295.093c.824.749,1.633,1.437,2.405,2.091,3.189,2.708,5.295,4.5,5.295,7.686A8.081,8.081,0,0,1,16.991,19.288Z"
29+
fill="#000"
30+
data-original="#000000"
31+
></path>
32+
</g>
33+
</svg>
34+
</span>
35+
<span
36+
className="navbar-item"
37+
onClick={() => props.handleChange("Timer")}
38+
>
39+
<svg
40+
width="128"
41+
height="128"
42+
x="0"
43+
y="0"
44+
viewBox="0 0 24 24"
45+
style={{ enableBackground: "new 0 0 512 512" }}
46+
>
47+
<g>
48+
<path
49+
d="m16.632 24h-9.264a4.379 4.379 0 0 1 -3.319-1.523 4.307 4.307 0 0 1 -1-3.451 12.207 12.207 0 0 1 3.934-7.026 12.207 12.207 0 0 1 -3.935-7.025 4.307 4.307 0 0 1 1-3.451 4.379 4.379 0 0 1 3.32-1.524h9.264a4.378 4.378 0 0 1 3.318 1.523 4.3 4.3 0 0 1 1 3.448 12.235 12.235 0 0 1 -3.938 7.029 12.234 12.234 0 0 1 3.94 7.03 4.3 4.3 0 0 1 -1 3.447 4.378 4.378 0 0 1 -3.32 1.523zm0-21h-9.264a1.382 1.382 0 0 0 -1.046.48 1.3 1.3 0 0 0 -.307 1.048c.337 2.243 1.746 4.362 4.188 6.3a1.5 1.5 0 0 1 0 2.352c-2.442 1.933-3.851 4.052-4.188 6.3a1.3 1.3 0 0 0 .307 1.048 1.382 1.382 0 0 0 1.046.472h9.264a1.384 1.384 0 0 0 1.046-.481 1.294 1.294 0 0 0 .307-1.044c-.335-2.236-1.745-4.355-4.191-6.3a1.5 1.5 0 0 1 0-2.348c2.446-1.946 3.856-4.065 4.191-6.3a1.3 1.3 0 0 0 -.307-1.045 1.384 1.384 0 0 0 -1.046-.482z"
50+
fill="#000"
51+
data-original="#000000"
52+
></path>
53+
</g>
54+
</svg>
55+
</span>
56+
<span
57+
className="navbar-item"
58+
onClick={() => props.handleChange("Tasks")}
59+
>
60+
<svg
61+
width="128"
62+
height="128"
63+
x="0"
64+
y="0"
65+
viewBox="0 0 24 24"
66+
style={{ enableBackground: "new 0 0 512 512" }}
67+
>
68+
<g>
69+
<path
70+
d="M4.5,7A3.477,3.477,0,0,1,2.025,5.975L.5,4.62a1.5,1.5,0,0,1,2-2.24L4.084,3.794A.584.584,0,0,0,4.5,4a.5.5,0,0,0,.353-.146L8.466.414a1.5,1.5,0,0,1,2.068,2.172L6.948,6A3.449,3.449,0,0,1,4.5,7ZM24,3.5A1.5,1.5,0,0,0,22.5,2h-8a1.5,1.5,0,0,0,0,3h8A1.5,1.5,0,0,0,24,3.5ZM6.948,14l3.586-3.414A1.5,1.5,0,0,0,8.466,8.414l-3.613,3.44a.5.5,0,0,1-.707,0L2.561,10.268A1.5,1.5,0,0,0,.439,12.39l1.586,1.585A3.5,3.5,0,0,0,6.948,14ZM24,11.5A1.5,1.5,0,0,0,22.5,10h-8a1.5,1.5,0,0,0,0,3h8A1.5,1.5,0,0,0,24,11.5ZM6.948,22l3.586-3.414a1.5,1.5,0,0,0-2.068-2.172l-3.613,3.44A.5.5,0,0,1,4.5,20a.584.584,0,0,1-.416-.206L2.5,18.38a1.5,1.5,0,0,0-2,2.24l1.523,1.355A3.5,3.5,0,0,0,6.948,22ZM24,19.5A1.5,1.5,0,0,0,22.5,18h-8a1.5,1.5,0,0,0,0,3h8A1.5,1.5,0,0,0,24,19.5Z"
71+
fill="#000"
72+
data-original="#000000"
73+
></path>
74+
</g>
75+
</svg>
76+
</span>
77+
<span
78+
className="navbar-item"
79+
onClick={() => props.handleChange("Tally")}
80+
>
81+
<svg
82+
width="128"
83+
height="128"
84+
x="0"
85+
y="0"
86+
viewBox="0 0 24 24"
87+
style={{ enableBackground: "new 0 0 512 512" }}
88+
>
89+
<g>
90+
<path
91+
d="M23.871,6.733c-.336-.758-1.225-1.1-1.98-.763l-.891,.395V1.5c0-.829-.672-1.5-1.5-1.5s-1.5,.671-1.5,1.5V7.697l-2,.888V1.5c0-.829-.672-1.5-1.5-1.5s-1.5,.671-1.5,1.5V9.916l-2,.888V1.5c0-.829-.671-1.5-1.5-1.5s-1.5,.671-1.5,1.5V12.134l-2,.888V1.5c0-.829-.671-1.5-1.5-1.5s-1.5,.671-1.5,1.5V14.353l-2.108,.935c-.757,.336-1.099,1.223-.763,1.979,.249,.56,.797,.892,1.372,.892,.203,0,.41-.041,.608-.129l.891-.395v4.865c0,.828,.671,1.5,1.5,1.5s1.5-.672,1.5-1.5v-6.196l2-.888v7.083c0,.828,.671,1.5,1.5,1.5s1.5-.672,1.5-1.5V14.085l2-.888v9.302c0,.828,.672,1.5,1.5,1.5s1.5-.672,1.5-1.5V11.867l2-.888v11.521c0,.828,.672,1.5,1.5,1.5s1.5-.672,1.5-1.5V9.648l2.108-.935c.758-.336,1.099-1.223,.763-1.979Z"
92+
fill="#000"
93+
data-original="#000000"
94+
></path>
95+
</g>
96+
</svg>
97+
</span>
98+
<span
99+
className="navbar-item"
100+
onClick={() => props.handleChange("Expenses")}
101+
>
102+
<svg
103+
width="128"
104+
height="128"
105+
x="0"
106+
y="0"
107+
viewBox="0 0 24 24"
108+
style={{ enableBackground: "new 0 0 512 512" }}
109+
>
110+
<g>
111+
<path
112+
d="M16.771,22c-1.637,0-3.111-.409-4.537-.805-1.289-.357-2.506-.695-3.733-.695-1.364,0-2.142,.146-2.954,.38-1.316,.38-2.703,.124-3.801-.703-1.109-.834-1.745-2.108-1.745-3.495V7.749C0,5.556,1.381,3.555,3.437,2.771c1.343-.512,2.618-.771,3.791-.771,1.636,0,3.11,.409,4.537,.805,1.29,.357,2.508,.695,3.735,.695,1.362,0,2.14-.145,2.951-.379,1.315-.382,2.702-.124,3.802,.703,1.109,.834,1.745,2.108,1.745,3.495v8.933h0c0,2.193-1.382,4.194-3.438,4.978-1.344,.512-2.619,.771-3.791,.771Zm-8.271-4.5c1.636,0,3.11,.409,4.535,.805,1.29,.357,2.507,.695,3.735,.695,.805,0,1.721-.193,2.723-.575,.915-.349,1.506-1.202,1.506-2.174V7.318c0-.435-.201-.835-.549-1.097-.339-.255-.768-.335-1.167-.218-1.224,.353-2.319,.497-3.783,.497-1.636,0-3.11-.409-4.537-.805-1.29-.357-2.508-.695-3.735-.695-.806,0-1.722,.193-2.723,.575-.915,.349-1.506,1.202-1.506,2.174v8.933c0,.436,.201,.835,.549,1.098,.338,.254,.764,.335,1.166,.217,1.225-.353,2.321-.497,3.786-.497Zm5.5-3v-5c0-.607-.365-1.154-.926-1.386-.561-.233-1.205-.104-1.635,.325l-2,2c-.586,.585-.586,1.536,0,2.121,.422,.421,1.032,.541,1.561,.354v1.585c0,.829,.672,1.5,1.5,1.5s1.5-.671,1.5-1.5ZM5.5,7c-.828,0-1.5,.672-1.5,1.5s.672,1.5,1.5,1.5,1.5-.672,1.5-1.5-.672-1.5-1.5-1.5Zm11.5,2.5c0,.828,.672,1.5,1.5,1.5s1.5-.672,1.5-1.5-.672-1.5-1.5-1.5-1.5,.672-1.5,1.5Zm-11.5,3.5c-.828,0-1.5,.672-1.5,1.5s.672,1.5,1.5,1.5,1.5-.672,1.5-1.5-.672-1.5-1.5-1.5Zm11.5,2.5c0,.828,.672,1.5,1.5,1.5s1.5-.672,1.5-1.5-.672-1.5-1.5-1.5-1.5,.672-1.5,1.5Z"
113+
fill="#000"
114+
data-original="#000000"
115+
></path>
116+
</g>
117+
</svg>
118+
</span>
119+
<span
120+
className="navbar-item"
121+
onClick={() => props.handleChange("Mood")}
122+
>
123+
<svg
124+
width="128"
125+
height="128"
126+
x="0"
127+
y="0"
128+
viewBox="0 0 24 24"
129+
style={{ enableBackground: "new 0 0 512 512" }}
130+
>
131+
<g>
132+
<path
133+
d="M8.5,7A2.587,2.587,0,0,1,11,9.667C11,11,9.881,11,8.5,11S6,11,6,9.667A2.587,2.587,0,0,1,8.5,7ZM13,9.667C13,11,14.119,11,15.5,11S18,11,18,9.667A2.587,2.587,0,0,0,15.5,7,2.587,2.587,0,0,0,13,9.667ZM24,12A12,12,0,1,0,12,24,12.013,12.013,0,0,0,24,12Zm-3,0a9,9,0,1,1-9-9A9.011,9.011,0,0,1,21,12Zm-5.5,1h-7a1.468,1.468,0,0,0-1.268,2.2A5.865,5.865,0,0,0,12,18a5.865,5.865,0,0,0,4.767-2.8A1.468,1.468,0,0,0,15.5,13Z"
134+
fill="#000"
135+
data-original="#000000"
136+
></path>
137+
</g>
138+
</svg>
139+
</span>
140+
<span
141+
className="navbar-item"
142+
onClick={() => props.handleChange("LeaveScreen")}
143+
>
144+
<svg
145+
width="128"
146+
height="128"
147+
x="0"
148+
y="0"
149+
viewBox="0 0 509.348 509.348"
150+
style={{ enableBackground: "new 0 0 512 512" }}
151+
>
152+
<g>
153+
<g>
154+
<path
155+
d="M488.935,188.541C437.397,109.024,349.407,60.662,254.652,59.773C159.898,60.662,71.908,109.024,20.37,188.541 c-27.16,39.859-27.16,92.279,0,132.139c51.509,79.566,139.504,127.978,234.283,128.896 c94.754-0.889,182.744-49.251,234.283-128.768C516.153,280.919,516.153,228.429,488.935,188.541z M436.199,284.541 c-39.348,62.411-107.769,100.488-181.547,101.035c-73.777-0.546-142.198-38.624-181.547-101.035 c-12.267-18.022-12.267-41.712,0-59.733c39.348-62.411,107.769-100.488,181.547-101.035 c73.777,0.546,142.198,38.624,181.547,101.035C448.466,242.829,448.466,266.519,436.199,284.541z"
156+
fill="#000"
157+
data-original="#000000"
158+
></path>
159+
<circle
160+
cx="254.652"
161+
cy="254.674"
162+
r="85.333"
163+
fill="#000"
164+
data-original="#000000"
165+
></circle>
166+
</g>
167+
</g>
168+
</svg>
169+
</span>
170+
</div>
171+
<div className="sidebar">hi</div>
172+
</div>
173+
);
174+
}

0 commit comments

Comments
 (0)