Skip to content

Commit

Permalink
ft seller side info (#61)
Browse files Browse the repository at this point in the history 
* ft-seller-side-info

* requested changes
  • Loading branch information
@SaddockAime @hbapte
SaddockAime authored and hbapte committed Aug 2, 2024
1 parent 4fe597e commit 83181e1
Show file tree
Hide file tree
Showing 18 changed files with 542 additions and 584 deletions.
3 changes: 2 additions & 1 deletion src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,5 @@
@import "./assets/styles/tables.scss";
@import "./assets/styles/adminDashboard.scss";
@import "./assets/styles/users.scss";
@import "./assets//styles/UserProfile.scss"
@import "./assets//styles/UserProfile.scss";
@import "./assets/styles/SellerSideProduct.scss";
288 changes: 193 additions & 95 deletions src/assets/styles/SellerLayout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,129 @@
.seller__wrapper {
height: 100vh;
display: flex;

.left__side {
width: 26rem;
width: 26rem;
display: flex;

.icons__side {
display: flex;

.icons__side {
flex-direction: column;
background-color: $primary-color;
height: 100%;
width: 6.5rem;

.icons {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
justify-content: space-between;

.icons__upper {
margin-top: 10rem;
display: flex;
flex-direction: column;
background-color: $primary-color;
height: 100%;
width: 6.5rem;

.icons {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
gap: 34rem;

.icons__upper {
margin-top: 10rem;
display: flex;
flex-direction: column;
gap: 3rem;

.icon {
color: $white-color;
font-size: 2rem;
}
}

.icons__bottom {
height: 4rem;
display: flex;
align-items: center;

.icon {
color: $white-color;
font-size: 3rem;
}
}
gap: 3rem;

.icon {
color: $white-color;
font-size: 2rem;
}
}

.icons__bottom {
height: 4rem;
display: flex;
align-items: center;
margin-bottom: 3rem;

.icon {
color: $white-color;
font-size: 3rem;
}
}
}

.dashboard__lower__link h2 {
cursor: pointer;
}

.dashboard__items {
}

.dashboard__lower__link h2 {
cursor: pointer;
}

.dashboard__items {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
margin-left: 1.5rem;

.dashboard__side {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: space-between;

.dashboard__links {
display: flex;
flex-direction: column;
height: 100%;
width: 19.5rem;
margin-left: .1rem;

.dashboard__side {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
gap: 37.5rem;

.dashboard__links {
display: flex;
flex-direction: column;
margin-top: 11rem;
height: 5rem;
gap: 3.5rem;

.text_content {
color: $text-color;
font-size: 1.8rem;
transition: all 0.5s ease-in-out;
text-decoration: none;
}
}

.dashboard__lower__link {
height: 4rem;
display: flex;
align-items: center;

.text_content {
color: $text-color;
font-size: 1.8rem;
transition: all 0.5s ease-in-out;
text-decoration: none;
}
margin-top: 10rem;
width: 15rem;
gap: 3rem;

.text_content {
color: $text-color;
font-size: 1.8rem;
text-decoration: none;
padding: 1rem;
border-radius: .5rem;
transition: background-color 0.3s, color 0.3s;
display: block;


&:hover {
background-color: $menu-hover;
color: $white !important;
width: 15rem !important ;
}
}

.active {
display: flex;
background-color: $menu-hover;
width: 15rem;
padding: 1rem 1rem;
transition: all 0.5s ease-in-out;
align-items: center;
}

.dashboard__lower__link {
height: 4rem;
display: flex;
margin-bottom: 3rem;

.text_content {
color: $text-color;
font-size: 1.9rem;
text-decoration: none;
padding: 1rem;
border-radius: .5rem;
}
transition: background-color 0.3s, color 0.3s;
display: block;

&:hover {
background-color: $menu-hover;
color: $white !important;
width: 15rem;
}
}
}
}

.active {
display: flex;
background-color: $menu-hover;
color: $white !important;
padding: 1rem;
border-radius: .5rem;
width: 15rem;
}
}
}

.main__seller__content__dashboard {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -155,21 +174,100 @@
height: 40%;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
padding: 2rem;
.profile-image {
border-radius: 50%;
height: 6rem;
border: 0.2rem solid #FF6D18;
width: 6rem;
object-fit: cover;
margin-bottom: 1rem;
}
.profile-name {
font-size: 1.8rem;
font-weight: 600;
color: $text-color;
margin: 0;
}
.profile-edit {
font-size: 1.4rem;
color: $text-color;
background-color: #ffede2;
margin: 0;
cursor: pointer;
border: none;
color: $primary-color;
border-radius: 2rem;
padding: 0.5rem 1.8rem;
margin-top: 1rem;
font-size: 1.4rem;
.icon-edit {
color: $primary-color;
margin-left: 1rem;
}
}
.progress-bar-container {
display: flex;
align-items: center;
font-size: 1.4rem;
margin-top: 1rem;
color: $text-color;
.order-progress {
color: $primary-color;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}

.progress-bar {
width: 3rem;
height: 1rem;
background-color: #e0e0e0;
border-radius: 0.5rem;
overflow: hidden;
}

.progress-bar-fill {
height: 100%;
transition: width 0.3s ease;
}
}

.right-products {
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
background-color: $white-color;
height: 60%;
overflow-y: scroll;
scroll-behavior: smooth;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
padding: 2rem;
padding: 1rem;
&::-webkit-scrollbar {
display: none;
}
.right-header {
font-size: 1.4rem;
color: #000;
}
.product-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3rem 0.9rem;
border-radius: 2rem;
margin-top: 1rem;
background-color: #d9d9d9;
color: #FF6D18;
}
}
}
}
Expand Down
1 change: 0 additions & 1 deletion src/assets/styles/SellerProduct.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@

max-width: 100%;
max-height: 100%;

.seller-product-header {
display: flex;
flex-direction: row;
Expand Down
49 changes: 49 additions & 0 deletions src/assets/styles/SellerSideProduct.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@

.product-card {
display: flex;
align-items: center;
padding: 0.5rem 0.7rem;
border-radius: 1rem;
background-color: #fff;
box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
margin: 1rem 0;

&__number {
font-size: 1.3rem;
font-weight: bold;
margin-right: 1.2rem;
}

&__image {
width: 3rem;
height: 3rem;
border-radius: 10%;
}

&__details {
flex-grow: 1;
margin-left: 1rem;

&__title {
font-size: 16px;
font-weight: bold;
}
}

&__availability {
font-size: 0.7rem;
font-weight: bold;
padding: 0.2rem 0.6rem;
border-radius: 0.5rem;

&.available {
color: rgb(3, 216, 3);
background-color: rgba(3, 216, 3, 0.3);
}

&.unavailable {
color: #fff;
background-color: #f44336;
}
}
}
Loading

0 comments on commit 83181e1

Please sign in to comment.