Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

User-Dashboard #9

Merged
merged 41 commits into from
Jan 8, 2024
Merged

User-Dashboard #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
1b3c6ee
user-Dashboard
Ameer2000Mzori Jan 8, 2024
6c7094c
added dashboard page + dashboard wrap
Ameer2000Mzori Jan 8, 2024
977ef53
added dsahboards wraps
Ameer2000Mzori Jan 8, 2024
ab09665
added elements for dashboard top
Ameer2000Mzori Jan 8, 2024
73ed593
added all elements for dsahboard top left
Ameer2000Mzori Jan 8, 2024
7cd9d9e
added all elements needed for dashboard-Top-Mid
Ameer2000Mzori Jan 8, 2024
8e83939
added all elements needed for dashboard-Top-Right
Ameer2000Mzori Jan 8, 2024
ba9dfa8
added elements needed for dashboard mid
Ameer2000Mzori Jan 8, 2024
657f2be
added all elements needed for dashboard mid left left wrap
Ameer2000Mzori Jan 8, 2024
a360e2c
added dashboard-mid-right all elements
Ameer2000Mzori Jan 8, 2024
60c8ab2
added dashboard card wrap
Ameer2000Mzori Jan 8, 2024
3cab7dc
added dashboard card inputs
Ameer2000Mzori Jan 8, 2024
d5e9d0a
added all elements neeeded for dashbaord mid and dsahboard card wrap …
Ameer2000Mzori Jan 8, 2024
e1c7eda
added all elements needed for dashboard mid bottom
Ameer2000Mzori Jan 8, 2024
d53488a
added icons to the card buttons
Ameer2000Mzori Jan 8, 2024
2c28d84
added elements to dashboard bottom left and right
Ameer2000Mzori Jan 8, 2024
fcce3b4
finished dashboard bottom dsiadhboarf left and right and all text and…
Ameer2000Mzori Jan 8, 2024
d7284b5
linters fix + added new stylesheet for dashboard page and added styli…
Ameer2000Mzori Jan 8, 2024
b454f52
added styling to dashboard-wrap
Ameer2000Mzori Jan 8, 2024
1783630
added styling to dashboard top
Ameer2000Mzori Jan 8, 2024
8a5eba3
added styling dashboard top left
Ameer2000Mzori Jan 8, 2024
b213a90
added styling to dashboard name holder + html tree posation change
Ameer2000Mzori Jan 8, 2024
890d903
added styling to dashboard top right and dshboard top right text 1
Ameer2000Mzori Jan 8, 2024
4cb91a3
added styling to dashboard-Mid
Ameer2000Mzori Jan 8, 2024
4b36b67
added styling to dashboard mid and left wrap
Ameer2000Mzori Jan 8, 2024
d3f2f21
added sashboard transfer card styling + small changse in size of font…
Ameer2000Mzori Jan 8, 2024
d1814d5
added styling to .dashboard-Mid-Right and linters errors fix
Ameer2000Mzori Jan 8, 2024
c9cf359
added styling to all dashboard mid- top and mid and bottom elements
Ameer2000Mzori Jan 8, 2024
658528a
added colors and styling to the background and borders with to the ca…
Ameer2000Mzori Jan 8, 2024
8f33a5b
styling fixes and more everywhere
Ameer2000Mzori Jan 8, 2024
ae657db
syled inputs and more
Ameer2000Mzori Jan 8, 2024
659afb5
added styling to buttons + added hover and active effects
Ameer2000Mzori Jan 8, 2024
0c5a484
addded styling to .dashboard-Bottom
Ameer2000Mzori Jan 8, 2024
5a46d2c
added styling to dashboar bottom left
Ameer2000Mzori Jan 8, 2024
c3b5245
added styling to dashboard bottom right
Ameer2000Mzori Jan 8, 2024
f2a867f
added styling to dashboard bottom left in wrap and out wrap
Ameer2000Mzori Jan 8, 2024
44d9569
added styling to dashboard bottom left sort btn
Ameer2000Mzori Jan 8, 2024
5367ead
added hover and active effects the the sort btn
Ameer2000Mzori Jan 8, 2024
706ab76
linters errors fix + added overflow mods
Ameer2000Mzori Jan 8, 2024
2a13044
added responsvness size 800px to dashboard page
Ameer2000Mzori Jan 8, 2024
c58be36
html change
Ameer2000Mzori Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
392 changes: 392 additions & 0 deletions src/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,392 @@
.dashboard {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
height: 100vh;
background-color: rgb(209, 209, 209);
}

.dashboard .dashboard-Wrap {
width: 769px;
height: 600px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: space-between;
border: solid white 2px;
border-radius: 17px 17px 0 0;
}

.dashboard .dashboard-Wrap .dashboard-Top {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-items: center;
width: 100%;
height: 10%;
background-color: aliceblue;
border-radius: 15px 15px 0 0;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Left {
padding: 0;
margin: 0;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Left .dashboard-Top-Left-Text-1 {
padding: 0;
font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
font-size: 1.2rem;
color: rgb(34, 34, 34);
margin: 5px;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid {
padding: 0;
margin: 0;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-1,
.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
padding: 0;
margin: 0;
font-size: 1.2rem;
color: rgb(34, 34, 34);
font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
color: gray;
font-size: 0.8rem;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Right {
display: flex;
flex-direction: column;
height: 100%;
text-align: start;
align-items: start;
justify-content: start;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Right .dashboard-Top-Right-Text-1 {
padding: 0;
font-size: 1.2rem;
color: rgb(34, 34, 34);
font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
margin: 5px;
}

.dashboard .dashboard-Wrap .dashboard-Mid {
height: 75%;
width: 100%;
display: flex;
flex-direction: row;
text-align: center;
align-items: center;
justify-content: space-between;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left {
height: 100%;
width: 65%;
display: flex;
border-radius: 0 15px 15px 0;
overflow: hidden;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
text-align: start;
align-items: start;
overflow-y: auto;
overflow-x: hidden;
gap: 1px;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
text-align: center;
align-items: center;
justify-content: space-evenly;
background-color: aliceblue;
border: solid rgba(175, 175, 175, 0.678) 1px;
border-left: none;
border-top: none;
border-right: none;
padding: 1px;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right {
height: 100%;
width: 30%;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: space-evenly;
background-color: aliceblue;
border-radius: 15px 0 0 15px;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
width: 90%;
padding: 5px;
border-radius: 15px;
background-color: rgb(0, 196, 10);
color: white;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
width: 90%;
height: 100%;
font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs {
outline: none;
border-radius: 15px;
border: none;
padding: 1px;
padding-left: 15px;
font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons {
width: 50px;
background-color: transparent;
border: solid white 2px;
color: white;
border-radius: 5px;
cursor: pointer;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:hover,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:hover,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:hover {
background-color: aliceblue;
color: black;
border: solid black 2px;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:active,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:active,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons:active {
transform: scale(0.9);
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid {
background-color: rgb(196, 72, 0);
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom {
background-color: rgb(224, 1, 1);
}

.dashboard .dashboard-Wrap .dashboard-Bottom {
display: flex;
width: 100%;
flex-direction: row;
text-align: center;
align-items: center;
justify-content: center;
height: 10%;
padding: 0;
margin: 0;
border-radius: 15px 15px 0 0;
background-color: aliceblue;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left {
display: flex;
width: 55%;
height: 100%;
text-align: center;
align-items: center;
justify-content: space-between;
flex-direction: row;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-In-Wrap,
.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Out-Wrap {
height: 50%;
background-color: green;
color: white;
border-radius: 15px;
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 150px;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Out-Wrap {
background-color: red;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn {
background-color: transparent;
border: solid black 2px;
cursor: pointer;
width: 70px;
height: 50%;
font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
color: black;
font-weight: 600;
transition: all 50ms ease-in-out;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn:hover {
color: white;
background-color: black;
border: solid white 2px;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn:active {
transform: scale(0.9);
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Right {
width: 30%;
height: 100%;
display: flex;
font-size: 0.8rem;
text-align: end;
align-items: center;
justify-content: end;
flex-direction: row;
}

@media screen and (max-width: 800px) {
.dashboard {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
height: 100vh;
background-color: rgb(209, 209, 209);
}

.dashboard .dashboard-Wrap {
width: 360px;
height: 600px;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Left .dashboard-Top-Left-Text-1 {
font-size: 0.9rem;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-1,
.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
font-size: 0.9rem;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Mid .dashboard-Top-Mid-Text-2 {
font-size: 0.7rem;
}

.dashboard .dashboard-Wrap .dashboard-Top .dashboard-Top-Right .dashboard-Top-Right-Text-1 {
padding: 0;
font-size: 0.9rem;
color: rgb(34, 34, 34);
font-family: "Poppins", "Helvetica Neue", helvetica, sans-serif;
margin: 5px;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left {
width: 55%;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card .type-Of-Transfer {
font-size: 0.8rem;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card .date-Of-Transfer {
font-size: 0.7rem;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Left .dashboard-Mid-Left-Wrap .dashboard-Transfer-Card .amount-Of-Transfer {
font-size: 0.8rem;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right {
width: 40%;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Title,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Title,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Title {
font-size: 0.8rem;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs {
width: 80%;
}

.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Top .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Mid .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons,
.dashboard .dashboard-Wrap .dashboard-Mid .dashboard-Mid-Right .dashboard-Mid-Bottom .dashboard-Card-Wrap .dashboard-Card-Inputs-Wrap .dashboard-Card-Inputs-Buttons {
border: solid white 1px;
width: 50%;
}

.dashboard .dashboard-Wrap .dashboard-Bottom {
justify-content: space-between;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left {
width: 70%;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-In-Wrap {
font-size: 0.7rem;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Out-Wrap {
font-size: 0.7rem;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Left .dashboard-Bottom-Left-Sort-Btn {
cursor: pointer;
width: 50px;
font-size: 0.7rem;
}

.dashboard .dashboard-Wrap .dashboard-Bottom .dashboard-Bottom-Right {
font-size: 0.6rem;
text-align: center;
width: 25%;
}
}
1 change: 1 addition & 0 deletions src/dashboard.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading