convert aspect ratio to 5:1

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}

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>

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) => {

tailwind.config.js

@@ -29,6 +29,9 @@ export default {
     extend: {
       fontFamily: {
         "IconFamily": "IconFamily"
+      },
+      aspectRatio: {
+        "theme": "5 / 1"
       }
     }
   },