feat(ui): update BackgroundMenu styles

mateusfg7 · Sep 5, 2022 · 4a48c10 · 4a48c10
1 parent d39bda9
commit 4a48c10
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/src/components/BackgroundMenu/index.tsx b/src/components/BackgroundMenu/index.tsx
@@ -9,7 +9,7 @@ export const BackgroundMenu = () => {
   const background = useBackgroundStore(set => set.background)
 
   return (
-    <Menu as="div">
+    <Menu as="div" className="z-50">
       <div className="flex group">
         <Menu.Button className="opacity-90 group-hover:opacity-100">
           <FiMonitor size={22} />
@@ -24,16 +24,16 @@ export const BackgroundMenu = () => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 mt-2 p-2 origin-top-right rounded-2xl bg-white/20 backdrop-blur-md shadow-lg">
-          <div className="flex flex-col gap-2 w-52">
+        <Menu.Items className="max-h-[85vh] md:w-52 overflow-y-auto absolute left-4 right-4 md:left-auto md:right-0 mt-2 p-2 origin-top-right rounded-2xl bg-white/20 backdrop-blur-md shadow-lg focus:outline-none">
+          <div className="flex flex-col gap-2 ">
             <Menu.Item>
               {({ active }) => (
                 <button
                   className={`border-2 ${
                     background === 'animated' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
-                  } font-bold text-xl p-6 rounded-2xl cursor-pointer animate-background-change-sm`}
+                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer animate-background-change-sm`}
                   onClick={() => setBackground('animated')}
                 >
                   Animated
@@ -47,7 +47,7 @@ export const BackgroundMenu = () => {
                     background === 'dark' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
-                  } font-bold text-xl p-6 rounded-2xl cursor-pointer bg-gray-900`}
+                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-gray-900`}
                   onClick={() => setBackground('dark')}
                 >
                   Dark
@@ -61,7 +61,7 @@ export const BackgroundMenu = () => {
                     background === 'lofi-rain' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
-                  } font-bold text-xl p-6 rounded-2xl cursor-pointer bg-lofi-rain bg-center bg-cover`}
+                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-lofi-rain bg-center bg-cover`}
                   onClick={() => setBackground('lofi-rain')}
                 >
                   LoFi Rain
@@ -75,7 +75,7 @@ export const BackgroundMenu = () => {
                     background === 'train-rain' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
-                  } font-bold text-xl p-6 rounded-2xl cursor-pointer bg-train-rain bg-center bg-cover`}
+                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-train-rain bg-center bg-cover`}
                   onClick={() => setBackground('train-rain')}
                 >
                   Train Rain
@@ -89,7 +89,7 @@ export const BackgroundMenu = () => {
                     background === 'tree' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
-                  } font-bold text-xl p-6 rounded-2xl cursor-pointer bg-tree bg-center bg-cover`}
+                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-tree bg-center bg-cover`}
                   onClick={() => setBackground('tree')}
                 >
                   Tree