From 59544d2cf47abeb64e7ef2bc9cf313f303be32f0 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 15 Feb 2019 19:03:24 -0800
Subject: [PATCH] fix: improve a11y, move preview box inside label (#997)

---
 .../settings/instance/ThemeSettings.html      | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/routes/_components/settings/instance/ThemeSettings.html b/src/routes/_components/settings/instance/ThemeSettings.html
index 65ec2680..bcb435e9 100644
--- a/src/routes/_components/settings/instance/ThemeSettings.html
+++ b/src/routes/_components/settings/instance/ThemeSettings.html
@@ -10,11 +10,13 @@
         <input type="radio" id="choice-theme-{theme.name}"
                value={theme.name} checked="$currentTheme === theme.name"
                bind:group="selectedTheme" on:change="onThemeChange()">
-        <div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}"
-             style="background-color: {theme.color};" >
-        </div>
         <label class="theme-picker-label" for="choice-theme-{theme.name}">
-          {theme.label} {theme.name === DEFAULT_THEME ? '(default)' : ''}
+          <div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}"
+               style="background-color: {theme.color};" >
+          </div>
+          <span class="theme-picker-label-span">
+            {theme.label} {theme.name === DEFAULT_THEME ? '(default)' : ''}
+          </span>
         </label>
       </div>
       {/each}
@@ -43,15 +45,18 @@
   }
   .theme-picker {
     display: flex;
-    flex-direction: row;
     align-items: center;
   }
   .theme-picker-label {
+    display: flex;
+    align-items: center;
+  }
+  .theme-picker-label-span {
     margin: 2px 10px 0;
   }
   .theme-preview {
-    width: 1.5em;
-    height: 1.5em;
+    width: 21px;
+    height: 21px;
     box-sizing: border-box;
     border-radius: 2px;
     margin: 0 2px 0 10px;