mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
convert aspect ratio to 5:1
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user