style: update styling on color inputs

HRemonen · Feb 4, 2024 · 5441cf8 · 5441cf8
1 parent eb38221
commit 5441cf8
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/common/SwapButton.tsx b/src/components/common/SwapButton.tsx
@@ -8,11 +8,11 @@ const SwapButton = ({ handleSwapColors }: SwapButtonProps) => (
   <div className='flex flex-col items-center justify-center'>
     <button
       type='button'
-      className='flex h-10 w-10 items-center justify-center rounded-md border-[1px] border-solid border-gray-400 hover:border-2 hover:border-blue-600 dark:border-0 dark:bg-gray-50 dark:bg-opacity-15 dark:hover:border-2 dark:hover:border-blue-300 md:mt-6 lg:mt-3'
+      className='flex p-2 my-2 md:my-4 space-x-2 lg:size-10 items-center justify-center rounded-md border-[1px] border-solid border-gray-400 hover:border-2 hover:border-blue-600 dark:border-0 dark:bg-gray-50 dark:bg-opacity-15 dark:hover:border-2 dark:hover:border-blue-300 lg:mt-7'
       onClick={handleSwapColors}
     >
       <IoSwapHorizontal aria-hidden='true' focusable='false' size={24} />
-      <span className='sr-only'>Swap color values</span>
+      <span className='lg:sr-only'>Swap color values</span>
     </button>
   </div>
 )

diff --git a/src/components/contrast/ColorContrast.tsx b/src/components/contrast/ColorContrast.tsx
@@ -25,7 +25,7 @@ const ColorContrast = () => {
         <ColorPreview textColor={textColor} backgroundColor={backgroundColor} />
 
         <div className='w-full max-w-[600px]'>
-          <div className='flex flex-col md:pr-2 lg:flex-row lg:space-x-2 lg:pr-8 '>
+          <div className='flex flex-col space-y-4 md:space-y-0 md:pr-2 lg:flex-row lg:space-x-2 lg:pr-8 '>
             <ColorPicker
               id='textColor'
               label='Text color'

diff --git a/src/components/contrast/ColorPicker.tsx b/src/components/contrast/ColorPicker.tsx
@@ -10,7 +10,7 @@ const ColorPicker = ({ id, label, color, onChange }: ColorPickerProps) => {
   }
 
   return (
-    <div className='mx-2 mb-2 lg:mx-0 lg:mb-8'>
+    <div className='relative mx-2 mb-2 lg:mx-0 lg:mb-8'>
       <div className='flex items-start justify-between'>
         <h2 className='text-md mb-2 text-left font-semibold capitalize lg:mb-4 lg:text-lg'>
           {label}
@@ -30,7 +30,7 @@ const ColorPicker = ({ id, label, color, onChange }: ColorPickerProps) => {
         color={color}
         onChange={onChange}
       />
-      <span className='hidden peer-has-[input:invalid]:block text-red-500 dark:text-red-200 text-sm mt-2'>Please input correct HEX value</span>
+      <span className='hidden peer-has-[input:invalid]:block absolute bottom-[-4] text-red-500 dark:text-red-200 text-sm lg:mt-2'>Please input correct HEX value</span>
     </div>
   )
 }