diff --git a/src/features/online-board/components/OnlineBoardFilter.scss b/src/features/online-board/components/OnlineBoardFilter.scss index 66cb92fe..7ec628c4 100644 --- a/src/features/online-board/components/OnlineBoardFilter.scss +++ b/src/features/online-board/components/OnlineBoardFilter.scss @@ -151,29 +151,32 @@ .change-container { display: flex; + align-items: center; justify-content: center; - padding: vars.$space-m 0; + width: 100%; .button-change { + margin-top: vars.$space-m; + margin-bottom: -(vars.$space-m); display: flex; align-items: center; justify-content: center; - width: 32px; - height: 32px; - border: 1px solid colors.$border; - border-radius: 50%; - background: colors.$white; + height: vars.$medium-button-height; + width: 35px; + background-color: colors.$white; + border: none; + box-shadow: none; cursor: pointer; - transition: background-color 0.2s; &:hover { - background-color: colors.$blue-extra-light; + background-color: colors.$white; } .svg--change-city { - width: 16px; - height: 16px; - color: colors.$blue; + width: 25px; + height: 12px; + fill: colors.$blue; + transform: rotate(90deg); } } } @@ -294,4 +297,33 @@ transform: rotate(180deg); } } + + // PrimeReact AutoComplete dropdown button — 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 style + .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; + } + } }