Fix button inconsistencies and macOS layout shifts

This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.

Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.

Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.

This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.
This commit is contained in:
undergroundwires
2023-12-29 17:26:40 +01:00
parent 2f06043559
commit 86fde6d7dc
19 changed files with 363 additions and 106 deletions

View File

@@ -17,7 +17,7 @@
class="search__query__close-button"
@click="clearSearchQuery()"
>
<AppIcon icon="xmark" />
<FlatButton icon="xmark" />
</div>
</div>
<div v-if="!searchHasMatches" class="search-no-matches">
@@ -39,19 +39,19 @@
import {
defineComponent, PropType, ref, computed,
} from 'vue';
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
import { injectKey } from '@/presentation/injectionSymbols';
import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
import FlatButton from '@/presentation/components/Shared/FlatButton.vue';
export default defineComponent({
components: {
ScriptsTree,
CardList,
AppIcon,
FlatButton,
},
props: {
currentView: {
@@ -149,14 +149,10 @@ $margin-inner: 4px;
flex-direction: row;
align-items: center;
margin-top: 1em;
color: $color-primary;
color: $color-primary-light;
.search__query__close-button {
@include clickable;
font-size: 1.25em;
margin-left: 0.25rem;
@include hover-or-touch {
color: $color-primary-dark;
}
}
}
.search-no-matches {