diff --git a/src/features/schedule/components/ScheduleStartPage.scss b/src/features/schedule/components/ScheduleStartPage.scss index a4fb0e9b..32f262e8 100644 --- a/src/features/schedule/components/ScheduleStartPage.scss +++ b/src/features/schedule/components/ScheduleStartPage.scss @@ -228,4 +228,66 @@ box-shadow: 0 0 0 0.2em colors.$focus-shadow; } } + + // PrimeReact AutoComplete dropdown — match Angular's subtle chevron + .p-autocomplete-dropdown { + background: transparent !important; + border: none !important; + color: colors.$gray !important; + width: 2rem !important; + padding: 0 !important; + + .p-icon { + width: 0.75rem; + height: 0.75rem; + } + } + + // PrimeReact Calendar button — match Angular's outline icon + .p-datepicker-trigger { + background: transparent !important; + border: none !important; + color: colors.$gray !important; + width: 2rem !important; + padding: 0 !important; + + .p-icon { + width: 1rem; + height: 1rem; + color: colors.$blue; + } + } + + // Swap button — match Angular's flat style + .change-container { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + + .button-change { + margin-top: vars.$space-m; + margin-bottom: -(vars.$space-m); + display: flex; + align-items: center; + justify-content: center; + height: vars.$medium-button-height; + width: 35px; + background-color: colors.$white; + border: none; + box-shadow: none; + cursor: pointer; + + &:hover { + background-color: colors.$white; + } + + .svg--change-city { + width: 25px; + height: 12px; + fill: colors.$blue; + transform: rotate(90deg); + } + } + } }