Skip to content

Commit df841c1

Browse files
adamrefaeyadamrefaey
authored
Merge pull request #141 from ModusCreateOrg/ADE-200
ADE-200 - Icons and background
2 parents a8c5d3f + 5d64166 commit df841c1

File tree

9 files changed

+133
-55
lines changed

9 files changed

+133
-55
lines changed

‎frontend/assets/Reports_bg.png‎ renamed to ‎frontend/src/assets/Reports_bg.png‎

File renamed without changes.

‎frontend/src/assets/icons/upload-normal.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎frontend/src/assets/icons/upload-pressed.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎frontend/src/common/components/Router/TabNavigation.scss‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
&__bar {
33
border-radius: 2rem;
44
margin: 0 0.75rem 0.75rem;
5-
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
5+
box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
66
height: var(--tab-bar-height, 3.5rem);
7-
--background: #ffffff;
7+
8+
--background: #fff;
89

910
/* Override default iOS padding */
1011
padding-bottom: 0;
@@ -45,7 +46,10 @@
4546
display: flex;
4647
align-items: center;
4748
justify-content: center;
48-
background-color: #4765ff;
49+
50+
/* Replace solid background with gradient */
51+
background-color: transparent;
52+
background-image: linear-gradient(135deg, #4765ff 0%, #6357fa 50%, #a557fa 100%);
4953
color: white;
5054
width: 3rem;
5155
height: 3rem;
@@ -54,9 +58,28 @@
5458
bottom: calc(50% - 0.5rem);
5559
left: 50%;
5660
transform: translateX(-50%);
57-
box-shadow: 0 0.25rem 0.5rem rgba(71, 101, 255, 0.3);
61+
62+
/* Enhanced shadow effect */
63+
box-shadow:
64+
0 0.5rem 1rem rgb(100 87 250 / 40%),
65+
0 0.125rem 0.25rem rgb(65 101 255 / 30%);
5866
z-index: 10;
5967

68+
/* Add slight transition for hover effects */
69+
transition:
70+
transform 0.2s ease,
71+
box-shadow 0.2s ease,
72+
background-image 0.2s ease,
73+
border 0.2s ease;
74+
75+
/* Active state styling to match the image */
76+
&:active {
77+
transform: translateX(-50%) scale(0.95);
78+
background-image: linear-gradient(135deg, #3a52d0 0%, #4f47c7 50%, #7e44c2 100%);
79+
box-shadow: 0 0.25rem 0.5rem rgb(100 87 250 / 30%);
80+
border: 2px solid white;
81+
}
82+
6083
.ls-tab-navigation__bar-button-icon {
6184
color: white;
6285
margin: 0;

‎frontend/src/common/components/Upload/UploadModal.scss‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
&__error-message {
1616
border: 1px solid var(--ion-color-danger);
1717
border-radius: 0.5rem;
18+
1819
--background: rgba(var(--ion-color-danger-rgb), 0.2);
20+
1921
color: white;
2022
width: 100%;
2123

@@ -28,7 +30,7 @@
2830
color: var(--ion-color-danger);
2931
}
3032

31-
@media (min-width: 768px) {
33+
@media (width >= 768px) {
3234
--width: 28.125rem; // 450px
3335
--height: 65vh; // Use viewport height instead of fixed pixels
3436
--border-radius: 1rem; // Matching the image example
@@ -38,8 +40,10 @@
3840
display: flex;
3941
flex-direction: column;
4042
padding: 1.25rem;
43+
4144
--background: var(--ion-color-primary);
4245
--color: white;
46+
4347
border-radius: 1rem;
4448
}
4549

@@ -58,7 +62,9 @@
5862

5963
.upload-modal__close-button {
6064
--color: white;
65+
6166
margin: 0;
67+
6268
--padding-start: 0.5rem;
6369
--padding-end: 0.5rem;
6470
}
@@ -81,9 +87,9 @@
8187
justify-content: center;
8288
width: 100%;
8389
padding: 2rem 1rem;
84-
border: 0.0625rem dashed rgba(255, 255, 255, 0.5);
90+
border: 0.0625rem dashed rgb(255 255 255 / 50%);
8591
border-radius: 0.75rem;
86-
background-color: rgba(255, 255, 255, 0.1);
92+
background-color: rgb(255 255 255 / 10%);
8793
margin: 0.75rem 0;
8894

8995
h2 {
@@ -97,7 +103,7 @@
97103
p {
98104
margin-top: 0;
99105
margin-bottom: 0.5rem;
100-
color: rgba(255, 255, 255, 0.7);
106+
color: rgb(255 255 255 / 70%);
101107
font-size: 0.875rem;
102108
}
103109
}
@@ -123,7 +129,7 @@
123129
p {
124130
margin-bottom: 0.25rem;
125131
font-size: 0.75rem;
126-
color: rgba(255, 255, 255, 0.7);
132+
color: rgb(255 255 255 / 70%);
127133
}
128134
}
129135

@@ -136,28 +142,33 @@
136142
width: 100%;
137143
max-width: 12rem;
138144
font-weight: 500;
145+
139146
--background: white;
140147
--color: var(--ion-color-primary);
141148
--border-radius: 0.5rem;
149+
142150
height: 2.5rem;
151+
152+
// Override Ionic button internals with a more direct approach
153+
--background-activated: inherit !important;
154+
155+
&.ion-activated::part(native) {
156+
background-color: white !important;
157+
box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
158+
border: 1px solid #abbccd;
159+
}
143160
}
144161

145162
&__selected-file {
146-
background-color: rgba(255, 255, 255, 0.1);
163+
background-color: rgb(255 255 255 / 10%);
147164
border-radius: 0.5rem;
148165
padding: 1rem;
149166
margin-bottom: 1rem;
150167
}
151168

152-
&__filename {
153-
font-weight: 600;
154-
margin-bottom: 0.5rem;
155-
word-break: break-all;
156-
color: white;
157-
}
158-
159169
&__start-upload {
160170
margin-top: 0.5rem;
171+
161172
--background: white;
162173
--color: var(--ion-color-primary);
163174
}
@@ -171,14 +182,8 @@
171182
width: 100%;
172183
}
173184

174-
&__file-info {
175-
width: 100%;
176-
text-align: center;
177-
margin-bottom: 1.5rem;
178-
}
179-
180185
&__filesize {
181-
color: rgba(255, 255, 255, 0.7);
186+
color: rgb(255 255 255 / 70%);
182187
font-size: 0.875rem;
183188
margin-top: 0;
184189
}
@@ -190,7 +195,8 @@
190195
height: 0.5rem;
191196
border-radius: 0.25rem;
192197
overflow: hidden;
193-
--background: rgba(255, 255, 255, 0.2);
198+
199+
--background: rgb(255 255 255 / 20%);
194200
--progress-background: white;
195201
}
196202
}
@@ -204,12 +210,13 @@
204210
ion-spinner {
205211
width: 1rem;
206212
height: 1rem;
213+
207214
--color: white;
208215
}
209216

210217
span {
211218
font-size: 0.875rem;
212-
color: rgba(255, 255, 255, 0.7);
219+
color: rgb(255 255 255 / 70%);
213220
}
214221
}
215222

@@ -231,7 +238,7 @@
231238
}
232239

233240
p {
234-
color: rgba(255, 255, 255, 0.7);
241+
color: rgb(255 255 255 / 70%);
235242
margin-bottom: 2rem;
236243
}
237244
}
@@ -265,6 +272,7 @@
265272
margin-top: 1rem;
266273
width: 100%;
267274
max-width: 15rem;
275+
268276
--background: white;
269277
--color: var(--ion-color-primary);
270278
}
@@ -282,12 +290,14 @@
282290
margin-top: 1rem;
283291
width: 100%;
284292
max-width: 12rem; // Match the upload button's max-width
293+
285294
--color: white;
286-
--border-color: rgba(255, 255, 255, 0.6);
287-
--background: rgba(255, 255, 255, 0.1);
295+
--border-color: rgb(255 255 255 / 60%);
296+
--background: rgb(255 255 255 / 10%);
288297
--border-radius: 0.5rem;
289298
--border-width: 1px;
290299
--border-style: solid;
300+
291301
height: 2.5rem; // Exactly match the upload button's height (40px)
292302
font-weight: 500;
293303
text-transform: none;
@@ -314,7 +324,7 @@
314324
padding: 0.75rem;
315325
margin: 1.5rem 0;
316326
width: 100%;
317-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
327+
box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
318328
max-width: 100%;
319329
box-sizing: border-box;
320330
}
@@ -365,8 +375,10 @@
365375
height: 0.25rem;
366376
border-radius: 0.125rem;
367377
margin-top: 0.25rem;
368-
--background: rgba(0, 0, 0, 0.1);
378+
379+
--background: rgb(0 0 0 / 10%);
369380
--progress-background: var(--ion-color-primary);
381+
370382
width: 100%;
371383
}
372384

@@ -375,7 +387,7 @@
375387
display: flex;
376388
align-items: center;
377389
border-radius: 4px;
378-
background: rgba(41, 69, 196, 0.5); // Darker blue background matching design
390+
background: rgb(41 69 196 / 50%); // Darker blue background matching design
379391
padding: 12px 16px;
380392
margin: 5px 0;
381393
width: 100%;

‎frontend/src/pages/Home/HomePage.scss‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.home-page {
2-
background: url('../../../assets/Reports_bg.png') no-repeat center center;
3-
background-color: var(--ion-color-light);
42
min-height: 100%;
53

64
&__greeting {
@@ -19,7 +17,7 @@
1917
}
2018

2119
&-title {
22-
font-family: 'Merriweather', serif;
20+
font-family: Merriweather, serif;
2321
font-size: 1rem;
2422
color: var(--ion-color-medium);
2523
margin: 0 0 0.25rem;
@@ -41,19 +39,21 @@
4139
width: 4rem;
4240
height: 4rem;
4341
border: 3px solid white;
44-
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
42+
box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
4543
}
4644
}
4745

4846
&__ai-card {
4947
margin-bottom: 1.5rem;
5048
border-radius: 1rem;
51-
box-shadow: 0 0.25rem 1rem rgba(71, 101, 255, 0.1);
49+
box-shadow: 0 0.25rem 1rem rgb(71 101 255 / 10%);
5250
background-color: #4765ff;
5351
overflow: visible;
5452
position: relative;
53+
5554
--ion-card-margin-start: 0;
5655
--ion-card-margin-end: 0;
56+
5757
margin-inline: 0;
5858
height: 7.5rem;
5959

@@ -187,7 +187,6 @@
187187
max-width: 100%;
188188
height: auto;
189189
display: block;
190-
vertical-align: bottom;
191190
margin-bottom: 0;
192191
}
193192
}
@@ -217,12 +216,15 @@
217216
&-list {
218217
margin-bottom: 1rem;
219218
background: transparent;
219+
box-shadow: none;
220220

221221
ion-item {
222222
--background: white;
223-
--border-color: rgba(0, 0, 0, 0.05);
223+
--border-color: rgb(0 0 0 / 5%);
224+
224225
margin-bottom: 0.5rem;
225226
border-radius: 0.75rem;
227+
226228
--padding-start: 1rem;
227229
--padding-end: 1rem;
228230

@@ -233,12 +235,6 @@
233235
}
234236
}
235237

236-
&__reports-list {
237-
margin-bottom: 2rem;
238-
box-shadow: none;
239-
background: transparent;
240-
}
241-
242238
&__empty-state {
243239
display: flex;
244240
justify-content: center;

0 commit comments

Comments
 (0)