From 28b2d8dcabb4c0c040be663f059e8ebfb85355d4 Mon Sep 17 00:00:00 2001
From: brecert <me@bree.dev>
Date: Tue, 7 Sep 2021 06:31:49 -0400
Subject: [PATCH] Improve accessibility and styling of theme shop

---
 src/pages/settings/panes/ThemeShop.tsx | 49 +++++++++++++++-----------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/pages/settings/panes/ThemeShop.tsx b/src/pages/settings/panes/ThemeShop.tsx
index 23717f29..205f0960 100644
--- a/src/pages/settings/panes/ThemeShop.tsx
+++ b/src/pages/settings/panes/ThemeShop.tsx
@@ -45,23 +45,25 @@ const ThemeInfo = styled.article`
     grid-area: preview;
     aspect-ratio: 323 / 202;
     
-    display: grid;
-    grid: 1fr / 1fr;
-
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-    
     background-color: var(--secondary-background);
     border-radius: calc(var(--border-radius) /  2);
-    box-shadow: 0 0 0 1px var(--tertiary-foreground);
+    
+    // prep style for later
+    outline: 3px solid transparent;
 
+    // hide random svg parts, crop border on firefox
     overflow: hidden;
     
+    // hide until loaded
     opacity: 0;
-    transition: 0.25s opacity;
-
+    
+    // style button
+    border: 0;
+    margin: 0;
+    padding: 0;
+    
+    transition: 0.25s opacity, 0.25s outline;
+    
     > * {
       grid-area: 1 / 1;
     }
@@ -71,6 +73,10 @@ const ThemeInfo = styled.article`
       width: 100%;
       object-fit: contain;
     }
+    
+    &:hover, &:active, &:focus-visible {
+      outline: 3px solid var(--tertiary-background);
+    }
   }
 
   .name {
@@ -107,7 +113,7 @@ type ThemePreviewProps = Omit<JSX.HTMLAttributes<SVGSVGElement>, "as"> & {
 };
 
 const ThemePreview = ({ theme, ...props }: ThemePreviewProps) => {
-  return <ThemedSVG {...props} theme={theme} width="24" height="24" aria-hidden="true" data-loaded={!!theme}>
+  return <ThemedSVG {...props} theme={theme} width="323" height="202" aria-hidden="true" data-loaded={!!theme}>
     <use href={`${previewPath}#preview`} width="100%" height="100%" />
   </ThemedSVG >
 }
@@ -151,19 +157,20 @@ export function ThemeShop() {
           {/* Maybe id's of the users should be included as well / instead? */}
           <div class="creator">by {theme.creator}</div>
           <div class="description">{theme.description}</div>
-          <div class="preview">
+          <button
+            class="preview"
+            onClick={() => dispatch({
+              type: "SETTINGS_SET_THEME",
+              theme: {
+                custom: themeData[slug],
+              }
+            })}
+          >
             <ThemePreview
               slug={slug}
               theme={themeData[slug]}
-              // todo: add option to set or override the current theme
-              onClick={() => dispatch({
-                type: "SETTINGS_SET_THEME",
-                theme: {
-                  custom: themeData[slug],
-                }
-              })}
             />
-          </div>
+          </button>
         </ThemeInfo>
       ))}
     </ThemeList>