From 7305b0da6704b3a6cc23c937fd7210492bdcde66 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Fri, 5 Apr 2024 18:18:02 +1100
Subject: [PATCH] convert aspect ratio to 5:1

---
 src/interface/components/ThemeCover.tsx    | 2 +-
 src/interface/components/ThemeSelector.tsx | 2 +-
 src/interface/pages/ThemeCreator.tsx       | 4 ++--
 tailwind.config.js                         | 3 +++
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/interface/components/ThemeCover.tsx b/src/interface/components/ThemeCover.tsx
index ac9453a0..bc086970 100644
--- a/src/interface/components/ThemeCover.tsx
+++ b/src/interface/components/ThemeCover.tsx
@@ -30,7 +30,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
 
   return (
     <button
-      className={`relative group w-full h-16 flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 ${
+      className={`relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 ${
         isSelected ? 'dark:ring-2 ring-4' : 'ring-0'
       }`}
       onClick={handleThemeClick}
diff --git a/src/interface/components/ThemeSelector.tsx b/src/interface/components/ThemeSelector.tsx
index 6fefe001..390f6296 100644
--- a/src/interface/components/ThemeSelector.tsx
+++ b/src/interface/components/ThemeSelector.tsx
@@ -100,7 +100,7 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
 
         <button
           onClick={() => Browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })}
-          className="flex items-center justify-center w-full h-16 transition rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
+          className="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
         >
           <span className="text-xl font-IconFamily">{'\uec60'}</span>
           <span className="ml-2">Create Theme</span>
diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx
index f030ba34..4293a6ed 100644
--- a/src/interface/pages/ThemeCreator.tsx
+++ b/src/interface/pages/ThemeCreator.tsx
@@ -168,9 +168,9 @@ function ThemeCreator() {
         <Divider />
 
         <p className='pr-2 text-sm font-semibold'>Cover Image <span className='italic font-light opacity-80'>(optional)</span></p>
-        <p className='pb-3 text-sm'>Upload an image to use as the cover image for your theme. <span className='italic font-light'>Recommended resolution: 512x128</span></p>
+        <p className='pb-3 text-sm'>Upload an image to use as the cover image for your theme. <span className='italic font-light'>Recommended resolution: 640x128</span></p>
 
-        <div className="relative flex justify-center aspect-[4/1] w-full gap-1 overflow-hidden transition rounded-lg group place-items-center bg-zinc-100 dark:bg-zinc-900">
+        <div className="relative flex justify-center w-full gap-1 overflow-hidden transition rounded-lg aspect-theme group place-items-center bg-zinc-100 dark:bg-zinc-900">
           <PlusIcon className={`transition pointer-events-none z-30 ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`} height={18} />
           <span className={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
           <input type="file" accept='image/*' onChange={(e) => {
diff --git a/tailwind.config.js b/tailwind.config.js
index f672d7be..e4b8c52a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,9 @@ export default {
     extend: {
       fontFamily: {
         "IconFamily": "IconFamily"
+      },
+      aspectRatio: {
+        "theme": "5 / 1"
       }
     }
   },