Settings refactor and redesign (#1669)

* new settings work

* Polishing work on settings refactor

* Run intl:extract

* List view -> Rows view

* Remove current preferred system theme indicator to make the themes fit on one line

* Remove extra margin on top of navstack

components/ui/Checkbox.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="checkbox-outer button-within"
-    :class="{ disabled }"
+    :class="{ disabled, checked: modelValue }"
     role="presentation"
     @click="toggle"
   >
@@ -82,6 +82,12 @@ export default {
   &.disabled {
     cursor: not-allowed;
   }
+
+  &.checked {
+    outline: 2px solid transparent;
+    outline-offset: 4px;
+    border-radius: 0.25rem;
+  }
 }
 
 .checkbox {

components/ui/MessageBanner.vue

@@ -24,6 +24,7 @@ const ariaLabelByType = computed(() => `Banner with ${props.messageType} message
   border-radius: var(--size-rounded-card);
   overflow: hidden;
   outline: 2px solid transparent;
+  outline-offset: -2px;
 
   margin-bottom: var(--spacing-card-md);
 

components/ui/Modal.vue

@@ -119,6 +119,7 @@ export default {
     overflow-y: auto;
     width: 600px;
     pointer-events: auto;
+    outline: 3px solid transparent;
 
     .header {
       display: flex;

components/ui/NavRow.vue

@@ -134,6 +134,12 @@ export default {
     &.router-link-exact-active {
       color: var(--color-text);
 
+      &:not(:focus-visible) {
+        outline: 2px solid transparent;
+        outline-offset: 6px;
+        border-radius: 0.25rem;
+      }
+
       &::after {
         opacity: 1;
       }
@@ -157,6 +163,8 @@ export default {
     transition: all ease-in-out 0.2s;
     border-radius: var(--size-rounded-max);
     background-color: var(--color-brand);
+    outline: 2px solid transparent;
+    outline-offset: -2px;
 
     @media (prefers-reduced-motion) {
       transition: none !important;

components/ui/NavStack.vue

@@ -19,6 +19,10 @@ ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
+
+  > :first-child {
+    margin-top: 0;
+  }
 }
 
 li {

components/ui/NavStackItem.vue

@@ -70,6 +70,7 @@ export default {
   box-shadow: none;
   padding: 0;
   width: 100%;
+  outline: none;
 
   :where(.nav-link) {
     --text-color: var(--color-text);
@@ -94,6 +95,9 @@ export default {
   }
 
   &.router-link-exact-active {
+    outline: 2px solid transparent;
+    border-radius: 0.25rem;
+
     .nav-content {
       color: var(--color-button-text-active);
       background-color: var(--color-button-bg);

components/ui/Pagination.vue

@@ -133,6 +133,7 @@ a {
     background: var(--color-brand);
     color: var(--color-brand-inverted);
     cursor: default;
+    outline: 2px solid transparent;
   }
 
   &.paginate.disabled {