Skip to content

Commit faa9718

Browse files
ProgrammerDATCHProgrammerDATCH
authored
Seller view collection products & view single product (#35)
* Seller-view-item * fix-feedbacks
1 parent 430125a commit faa9718

29 files changed

+2902
-89
lines changed

‎package-lock.json

+1,401-56
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,12 @@
2828
"react-toastify": "^10.0.5",
2929
"save-dev": "0.0.1-security",
3030
"socket.io-client": "^4.7.5",
31-
"yup": "^1.4.0"
31+
"yup": "^1.4.0",
32+
"@emotion/react": "^11.11.4",
33+
"@emotion/styled": "^11.11.5",
34+
"@mui/icons-material": "^5.16.4",
35+
"@mui/material": "^5.16.4",
36+
"antd": "^5.19.2"
3237
},
3338
"devDependencies": {
3439
"@babel/core": "^7.24.7",

‎src/App.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,8 @@
2222
@import "./assets/styles/Queries.scss";
2323
@import "./assets/styles/Notifications.scss";
2424
@import "./assets/styles/Search.scss";
25-
@import "./assets/styles/CustomSelect.scss";
25+
@import "./assets/styles/CustomSelect.scss";
26+
@import "./assets/styles/SellerProduct.scss";
27+
@import "./assets/styles/SellerCollection.scss";
28+
@import "./assets/styles/SellerLayout.scss";
29+
@import "./assets/styles/tables.scss";

‎src/assets/styles/Colors.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,10 @@ $text2-color: #666666;
2424
$text-family: 'Averia Serif Libre';
2525
$white-color: #FFFFFF;
2626
$border-color: #D9D9D9;
27-
$red-color:red;
27+
$red-color:red;
28+
$primary-color-half: rgb(248,244,244);
29+
$red-color:red;
30+
$menu-hover: #FE975B;
31+
$green-color: rgb(3, 216, 3);
32+
$green-middle-color: rgba(3, 216, 3, 0.3);
33+
$red-middle-color: rgba(216, 8, 3, 0.3);

‎src/assets/styles/SellerCollection.scss

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@import "./Colors";
2+
.seller__main__container {
3+
max-width: 100%;
4+
max-height: 100%;
5+
min-width: 100%;
6+
7+
.product-img {
8+
width: 4rem;
9+
height: 4rem;
10+
border-radius: 10%;
11+
box-shadow: 0 0 8px $primary-color;
12+
}
13+
}
14+
15+
.available {
16+
background-color: $green-middle-color;
17+
border-radius: 20px;
18+
padding: 4px 8px;
19+
color: $green-color;
20+
display: inline-flex;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
25+
.unavailable {
26+
display: inline-flex;
27+
justify-content: center;
28+
align-items: center;
29+
background-color: $red-middle-color;
30+
border-radius: 20px;
31+
padding: 4px 8px;
32+
color: $red-color;
33+
}
34+
35+
.action__icons {
36+
display: flex;
37+
align-items: center;
38+
gap: 1px;
39+
40+
.icon__edit {
41+
color: $fifth-color;
42+
font-size: 2rem;
43+
}
44+
.icon__view {
45+
color: $primary-color;
46+
font-size: 2rem;
47+
}
48+
49+
.icon__delete {
50+
color: $red-color;
51+
font-size: 2rem;
52+
}
53+
}

‎src/assets/styles/SellerHeader.scss

+10
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
justify-content: flex-end;
77
gap: 3.2rem;
88
padding: 2.4rem 5.2rem;
9+
min-height: 3rem;
10+
max-height: 3rem;
911
}
1012

1113
.header {
@@ -57,4 +59,12 @@
5759
height: 3.2rem;
5860
transform: translateX(0.6rem);
5961
background-color: #666;
62+
}
63+
64+
@media (max-width: 1024px) {
65+
.seller-header {
66+
.header__theme__container, line{
67+
display: none;
68+
}
69+
}
6070
}

‎src/assets/styles/SellerLayout.scss

+226
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
.seller__wrapper {
2+
height: 100vh;
3+
display: flex;
4+
5+
.left__side {
6+
width: 26rem;
7+
display: flex;
8+
9+
.icons__side {
10+
display: flex;
11+
flex-direction: column;
12+
background-color: $primary-color;
13+
height: 100%;
14+
width: 6.5rem;
15+
16+
.icons {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
height: 100%;
21+
width: 100%;
22+
gap: 34rem;
23+
24+
.icons__upper {
25+
margin-top: 10rem;
26+
display: flex;
27+
flex-direction: column;
28+
gap: 3rem;
29+
30+
.icon {
31+
color: $white-color;
32+
font-size: 2rem;
33+
}
34+
}
35+
36+
.icons__bottom {
37+
height: 4rem;
38+
display: flex;
39+
align-items: center;
40+
41+
.icon {
42+
color: $white-color;
43+
font-size: 3rem;
44+
}
45+
}
46+
}
47+
}
48+
49+
.dashboard__lower__link h2 {
50+
cursor: pointer;
51+
}
52+
53+
.dashboard__items {
54+
display: flex;
55+
flex-direction: column;
56+
height: 100%;
57+
width: 19.5rem;
58+
margin-left: .1rem;
59+
60+
.dashboard__side {
61+
display: flex;
62+
flex-direction: column;
63+
height: 100%;
64+
width: 100%;
65+
gap: 37.5rem;
66+
67+
.dashboard__links {
68+
display: flex;
69+
flex-direction: column;
70+
margin-top: 11rem;
71+
height: 5rem;
72+
gap: 3.5rem;
73+
74+
.text_content {
75+
color: $text-color;
76+
font-size: 1.8rem;
77+
transition: all 0.5s ease-in-out;
78+
text-decoration: none;
79+
}
80+
}
81+
82+
.dashboard__lower__link {
83+
height: 4rem;
84+
display: flex;
85+
align-items: center;
86+
87+
.text_content {
88+
color: $text-color;
89+
font-size: 1.8rem;
90+
transition: all 0.5s ease-in-out;
91+
text-decoration: none;
92+
}
93+
}
94+
}
95+
96+
.active {
97+
display: flex;
98+
background-color: $menu-hover;
99+
width: 15rem;
100+
padding: 1rem 1rem;
101+
transition: all 0.5s ease-in-out;
102+
align-items: center;
103+
border-radius: .5rem;
104+
}
105+
}
106+
}
107+
108+
.main__seller__content__dashboard {
109+
display: flex;
110+
flex-direction: column;
111+
flex: 1;
112+
max-height: 100vh;
113+
}
114+
115+
.main__seller__dashboard {
116+
display: flex;
117+
flex: 1;
118+
width: 100%;
119+
min-height: calc(100vh - 120px);
120+
max-height: calc(100vh - 120px);
121+
background-color: $container-color;
122+
padding: 20px;
123+
124+
.outlet {
125+
background-color: white;
126+
flex: 0 0 60%;
127+
border-radius: 20px;
128+
min-height: 95%;
129+
max-height: 95%;
130+
min-width: 70%;
131+
max-width: 70%;
132+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
133+
padding: 2rem;
134+
overflow-y: scroll;
135+
scroll-behavior: smooth;
136+
137+
&::-webkit-scrollbar {
138+
display: none;
139+
}
140+
}
141+
142+
.right__side {
143+
flex: 0 0 20%;
144+
min-width: 20%;
145+
max-width: 20%;
146+
min-height: 100%;
147+
max-height: 100%;
148+
display: flex;
149+
flex-direction: column;
150+
gap: 25px;
151+
padding: 0 20px;
152+
153+
.right-profile {
154+
background-color: $white-color;
155+
height: 40%;
156+
border-radius: 20px;
157+
display: flex;
158+
justify-content: center;
159+
align-items: center;
160+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
161+
padding: 2rem;
162+
}
163+
164+
.right-products {
165+
background-color: $white-color;
166+
height: 60%;
167+
border-radius: 20px;
168+
display: flex;
169+
justify-content: center;
170+
align-items: center;
171+
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
172+
padding: 2rem;
173+
}
174+
}
175+
}
176+
177+
}
178+
179+
.seller-dashboard-container {
180+
display: flex;
181+
justify-content: center;
182+
align-items: center;
183+
width: 100%;
184+
height: 100vh;
185+
}
186+
187+
188+
@media (max-width: 1024px) {
189+
.seller__wrapper {
190+
.left__side {
191+
width: 6.5rem;
192+
193+
.dashboard__items {
194+
display: none;
195+
}
196+
}
197+
198+
.main__seller__content__dashboard {
199+
flex: 1;
200+
padding: auto;
201+
padding-left: 0px;
202+
}
203+
204+
.main__seller__dashboard {
205+
padding: 12px;
206+
207+
.outlet {
208+
max-width: calc(100vw - 6rem);
209+
overflow-y: scroll;
210+
}
211+
212+
.right__side {
213+
display: none;
214+
}
215+
}
216+
}
217+
218+
}
219+
220+
.seller-loading {
221+
width: 100%;
222+
height: 100vh;
223+
display: flex;
224+
justify-content: center;
225+
align-items: center;
226+
}

0 commit comments

Comments
 (0)