diff --git a/backend/cdk.context.json b/backend/cdk.context.json index 5c5a7f04..6a1d74de 100644 --- a/backend/cdk.context.json +++ b/backend/cdk.context.json @@ -1,6 +1,7 @@ { "acknowledged-issue-numbers": [ - 32775 + 32775, + 31885 ], "availability-zones:account=841162674562:region=us-east-1": [ "us-east-1a", diff --git a/frontend/src/pages/Home/components/ReportItem/ReportItem.scss b/frontend/src/pages/Home/components/ReportItem/ReportItem.scss index 32eea10f..38650df8 100644 --- a/frontend/src/pages/Home/components/ReportItem/ReportItem.scss +++ b/frontend/src/pages/Home/components/ReportItem/ReportItem.scss @@ -12,7 +12,7 @@ } &__category-label { - font-size: 12px; + font-size: 13px; color: #4355b9; margin-bottom: 4px; font-weight: 700; @@ -38,7 +38,7 @@ } &__date { - font-size: 12px; + font-size: 13px; color: #777; } @@ -47,19 +47,21 @@ display: flex; align-items: center; justify-content: center; + align-self: center; + margin-right: 6px; &-icon { - font-size: 22px; + font-size: 12px; color: #aaa; transition: all 0.2s ease; - width: 1em; - height: 1em; + width: 12px; + height: 12px; display: flex; align-items: center; justify-content: center; background-color: white; border-radius: 50%; - padding: 8px; + padding: 11px; box-sizing: content-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); @@ -72,8 +74,8 @@ } &__icon { - width: 40px; - height: 40px; + width: 56px; + height: 56px; border-radius: 50%; display: flex; align-items: center; @@ -89,8 +91,8 @@ } img { - width: 24px; - height: 24px; + width: 28px; + height: 28px; filter: none; /* Remove previous filter that made the SVG white */ } } diff --git a/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx b/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx index 9c9975e2..d18605c8 100644 --- a/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx +++ b/frontend/src/pages/Home/components/ReportItem/ReportItem.tsx @@ -55,8 +55,8 @@ const ReportItem: React.FC = ({ {t(getCategoryTranslationKey(), ); diff --git a/frontend/src/pages/Reports/ReportsListPage.scss b/frontend/src/pages/Reports/ReportsListPage.scss index aa694bc8..17bd8d9c 100644 --- a/frontend/src/pages/Reports/ReportsListPage.scss +++ b/frontend/src/pages/Reports/ReportsListPage.scss @@ -1,11 +1,9 @@ .reports-list-page { - --background: url('../../../assets/Reports_bg.png') no-repeat center center; - &__header { box-shadow: none; ion-toolbar { - --border-width: 0; + --border-width: 0 !important; --min-height: 60px; padding: 10px 16px; display: flex; @@ -60,6 +58,37 @@ &__segment-wrapper { padding: 0 1rem; + margin-top: 4px; + + ion-segment { + --background: #EBEEF8; + border-radius: 9999px; + overflow: hidden; + padding: 4px; + + ion-segment-button { + --background: #EBEEF8; + --background-checked: #FFFFFF; + --color: #313E4C; + --color-checked: #313E4C; + --indicator-color: transparent; + --border-radius: 9999px; + --border-style: none; + font-weight: 500; + text-transform: none; + min-height: 36px; + margin: 0; + transition: background-color 0.3s ease; + + &::part(indicator) { + display: none; + } + + &::part(native) { + padding: 6px 16px; + } + } + } } &__category-tags { @@ -73,7 +102,6 @@ &__content-container { --padding-top: 0; - --background: var(--ion-background-color); } &__content { diff --git a/frontend/src/theme/theme-overrides.css b/frontend/src/theme/theme-overrides.css index c44cc54a..d55dc9e3 100644 --- a/frontend/src/theme/theme-overrides.css +++ b/frontend/src/theme/theme-overrides.css @@ -1,4 +1,4 @@ -/* +/* * Theme overrides for Ionic * This file contains overrides for Ionic's default theme variables */ @@ -58,6 +58,11 @@ ion-content { --padding-top: var(--ion-safe-area-top, 1rem); } +/* Background for the entire app */ +body, ion-app, ion-content { + background: url('../../assets/Reports_bg.png') no-repeat center center !important; +} + /* Remove left padding from router outlet to avoid double padding */ ion-router-outlet { padding-top: 0;