Skip to content

ADE-200 - Icons and background #141

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

Merged
adamrefaey merged 8 commits into from
May 1, 2025
Merged

ADE-200 - Icons and background #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
62ead37
Fix category and apply buttons
GuidoBR Apr 30, 2025
e0e5a89
Merge branch 'main' of github.com:ModusCreateOrg/app-med-ai-gen into …
GuidoBR May 1, 2025
f548376
Merge branch 'main' of github.com:ModusCreateOrg/app-med-ai-gen into …
GuidoBR May 1, 2025
00801e6
Fix pressed state in upload button
GuidoBR May 1, 2025
7bffa8e
Add new icons
GuidoBR May 1, 2025
47529c6
Gradient in upload icon
GuidoBR May 1, 2025
155d44e
Effect in active state
GuidoBR May 1, 2025
5d64166
Background
GuidoBR May 1, 2025
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
0 frontend/assets/Reports_bg.png → frontend/src/assets/Reports_bg.png
View file
Open in desktop
File renamed without changes
22 changes: 22 additions & 0 deletions frontend/src/assets/icons/upload-normal.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions frontend/src/assets/icons/upload-pressed.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 27 additions & 4 deletions frontend/src/common/components/Router/TabNavigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
&__bar {
border-radius: 2rem;
margin: 0 0.75rem 0.75rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
height: var(--tab-bar-height, 3.5rem);
--background: #ffffff;

--background: #fff;

/* Override default iOS padding */
padding-bottom: 0;
Expand Down Expand Up @@ -45,7 +46,10 @@
display: flex;
align-items: center;
justify-content: center;
background-color: #4765ff;

/* Replace solid background with gradient */
background-color: transparent;
background-image: linear-gradient(135deg, #4765ff 0%, #6357fa 50%, #a557fa 100%);
color: white;
width: 3rem;
height: 3rem;
Expand All @@ -54,9 +58,28 @@
bottom: calc(50% - 0.5rem);
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0.25rem 0.5rem rgba(71, 101, 255, 0.3);

/* Enhanced shadow effect */
box-shadow:
0 0.5rem 1rem rgb(100 87 250 / 40%),
0 0.125rem 0.25rem rgb(65 101 255 / 30%);
z-index: 10;

/* Add slight transition for hover effects */
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background-image 0.2s ease,
border 0.2s ease;

/* Active state styling to match the image */
&:active {
transform: translateX(-50%) scale(0.95);
background-image: linear-gradient(135deg, #3a52d0 0%, #4f47c7 50%, #7e44c2 100%);
box-shadow: 0 0.25rem 0.5rem rgb(100 87 250 / 30%);
border: 2px solid white;
}

.ls-tab-navigation__bar-button-icon {
color: white;
margin: 0;
Expand Down
68 changes: 40 additions & 28 deletions frontend/src/common/components/Upload/UploadModal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
&__error-message {
border: 1px solid var(--ion-color-danger);
border-radius: 0.5rem;

--background: rgba(var(--ion-color-danger-rgb), 0.2);

color: white;
width: 100%;

Expand All @@ -28,7 +30,7 @@
color: var(--ion-color-danger);
}

@media (min-width: 768px) {
@media (width >= 768px) {
--width: 28.125rem; // 450px
--height: 65vh; // Use viewport height instead of fixed pixels
--border-radius: 1rem; // Matching the image example
Expand All @@ -38,8 +40,10 @@
display: flex;
flex-direction: column;
padding: 1.25rem;

--background: var(--ion-color-primary);
--color: white;

border-radius: 1rem;
}

Expand All @@ -58,7 +62,9 @@

.upload-modal__close-button {
--color: white;

margin: 0;

--padding-start: 0.5rem;
--padding-end: 0.5rem;
}
Expand All @@ -81,9 +87,9 @@
justify-content: center;
width: 100%;
padding: 2rem 1rem;
border: 0.0625rem dashed rgba(255, 255, 255, 0.5);
border: 0.0625rem dashed rgb(255 255 255 / 50%);
border-radius: 0.75rem;
background-color: rgba(255, 255, 255, 0.1);
background-color: rgb(255 255 255 / 10%);
margin: 0.75rem 0;

h2 {
Expand All @@ -97,7 +103,7 @@
p {
margin-top: 0;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.7);
color: rgb(255 255 255 / 70%);
font-size: 0.875rem;
}
}
Expand All @@ -123,7 +129,7 @@
p {
margin-bottom: 0.25rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
color: rgb(255 255 255 / 70%);
}
}

Expand All @@ -136,28 +142,33 @@
width: 100%;
max-width: 12rem;
font-weight: 500;

--background: white;
--color: var(--ion-color-primary);
--border-radius: 0.5rem;

height: 2.5rem;

// Override Ionic button internals with a more direct approach
--background-activated: inherit !important;

&.ion-activated::part(native) {
background-color: white !important;
box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
border: 1px solid #abbccd;
}
}

&__selected-file {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgb(255 255 255 / 10%);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
}

&__filename {
font-weight: 600;
margin-bottom: 0.5rem;
word-break: break-all;
color: white;
}

&__start-upload {
margin-top: 0.5rem;

--background: white;
--color: var(--ion-color-primary);
}
Expand All @@ -171,14 +182,8 @@
width: 100%;
}

&__file-info {
width: 100%;
text-align: center;
margin-bottom: 1.5rem;
}

&__filesize {
color: rgba(255, 255, 255, 0.7);
color: rgb(255 255 255 / 70%);
font-size: 0.875rem;
margin-top: 0;
}
Expand All @@ -190,7 +195,8 @@
height: 0.5rem;
border-radius: 0.25rem;
overflow: hidden;
--background: rgba(255, 255, 255, 0.2);

--background: rgb(255 255 255 / 20%);
--progress-background: white;
}
}
Expand All @@ -204,12 +210,13 @@
ion-spinner {
width: 1rem;
height: 1rem;

--color: white;
}

span {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
color: rgb(255 255 255 / 70%);
}
}

Expand All @@ -231,7 +238,7 @@
}

p {
color: rgba(255, 255, 255, 0.7);
color: rgb(255 255 255 / 70%);
margin-bottom: 2rem;
}
}
Expand Down Expand Up @@ -265,6 +272,7 @@
margin-top: 1rem;
width: 100%;
max-width: 15rem;

--background: white;
--color: var(--ion-color-primary);
}
Expand All @@ -282,12 +290,14 @@
margin-top: 1rem;
width: 100%;
max-width: 12rem; // Match the upload button's max-width

--color: white;
--border-color: rgba(255, 255, 255, 0.6);
--background: rgba(255, 255, 255, 0.1);
--border-color: rgb(255 255 255 / 60%);
--background: rgb(255 255 255 / 10%);
--border-radius: 0.5rem;
--border-width: 1px;
--border-style: solid;

height: 2.5rem; // Exactly match the upload button's height (40px)
font-weight: 500;
text-transform: none;
Expand All @@ -314,7 +324,7 @@
padding: 0.75rem;
margin: 1.5rem 0;
width: 100%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
max-width: 100%;
box-sizing: border-box;
}
Expand Down Expand Up @@ -365,8 +375,10 @@
height: 0.25rem;
border-radius: 0.125rem;
margin-top: 0.25rem;
--background: rgba(0, 0, 0, 0.1);

--background: rgb(0 0 0 / 10%);
--progress-background: var(--ion-color-primary);

width: 100%;
}

Expand All @@ -375,7 +387,7 @@
display: flex;
align-items: center;
border-radius: 4px;
background: rgba(41, 69, 196, 0.5); // Darker blue background matching design
background: rgb(41 69 196 / 50%); // Darker blue background matching design
padding: 12px 16px;
margin: 5px 0;
width: 100%;
Expand Down
22 changes: 9 additions & 13 deletions frontend/src/pages/Home/HomePage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.home-page {
background: url('../../../assets/Reports_bg.png') no-repeat center center;
background-color: var(--ion-color-light);
min-height: 100%;

&__greeting {
Expand All @@ -19,7 +17,7 @@
}

&-title {
font-family: 'Merriweather', serif;
font-family: Merriweather, serif;
font-size: 1rem;
color: var(--ion-color-medium);
margin: 0 0 0.25rem;
Expand All @@ -41,19 +39,21 @@
width: 4rem;
height: 4rem;
border: 3px solid white;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
}
}

&__ai-card {
margin-bottom: 1.5rem;
border-radius: 1rem;
box-shadow: 0 0.25rem 1rem rgba(71, 101, 255, 0.1);
box-shadow: 0 0.25rem 1rem rgb(71 101 255 / 10%);
background-color: #4765ff;
overflow: visible;
position: relative;

--ion-card-margin-start: 0;
--ion-card-margin-end: 0;

margin-inline: 0;
height: 7.5rem;

Expand Down Expand Up @@ -187,7 +187,6 @@
max-width: 100%;
height: auto;
display: block;
vertical-align: bottom;
margin-bottom: 0;
}
}
Expand Down Expand Up @@ -217,12 +216,15 @@
&-list {
margin-bottom: 1rem;
background: transparent;
box-shadow: none;

ion-item {
--background: white;
--border-color: rgba(0, 0, 0, 0.05);
--border-color: rgb(0 0 0 / 5%);

margin-bottom: 0.5rem;
border-radius: 0.75rem;

--padding-start: 1rem;
--padding-end: 1rem;

Expand All @@ -233,12 +235,6 @@
}
}

&__reports-list {
margin-bottom: 2rem;
box-shadow: none;
background: transparent;
}

&__empty-state {
display: flex;
justify-content: center;
Expand Down
Loading