fix: update BlockImageTeasers spacing and LanguageSwitcher style

AmazeeLabs · May 24, 2024 · 398ff4e · 398ff4e
1 parent ab4c8c0
commit 398ff4e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/packages/ui/src/components/Molecules/LanguageSwitcher.tsx b/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
@@ -37,25 +37,22 @@ export function LanguageSwitcher() {
     <div className="relative inline-block text-left">
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <Menu.Button className="inline-flex justify-center w-full rounded-md bg-white text-sm">
+          <Menu.Button className="inline-flex justify-center w-full rounded-md bg-white text-sm hover:text-blue-600">
             {getLanguageName(currentLocale as string)}
-            <ChevronDownIcon
-              className="-mr-1 ml-2 h-5 w-5"
-              aria-hidden="true"
-            />
+            <ChevronDownIcon className="ml-1 h-5 w-5" aria-hidden="true" />
           </Menu.Button>
         </div>
 
         <Transition
           as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
         >
-          <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 border border-gray-300 rounded-md shadow-lg bg-white">
+          <Menu.Items className="origin-top-right absolute z-50 right-0 mt-3 w-48 rounded bg-white shadow-md ring-1 ring-gray-100">
             <div className="py-1">
               {otherLocales.map((locale) => (
                 <Menu.Item key={locale}>
@@ -64,7 +61,7 @@ export function LanguageSwitcher() {
                       <Link
                         href={translations[locale]!}
                         className={clsx(
-                          focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                          focus ? 'text-blue-600' : 'text-gray-500',
                           'block px-4 py-2 text-sm',
                         )}
                       >
@@ -73,8 +70,8 @@ export function LanguageSwitcher() {
                     ) : (
                       <span
                         className={clsx(
-                          focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                          'block px-4 py-2 text-sm',
+                          focus ? 'bg-gray-100 text-gray-900' : 'text-gray-500',
+                          'block px-3.5 py-2 text-sm',
                         )}
                       >
                         {getLanguageName(locale as string)}

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
@@ -7,7 +7,7 @@ import { isTruthy } from '../../../utils/isTruthy';
 export function BlockImageTeasers(props: BlockImageTeasersFragment) {
   return (
     // eslint-disable-next-line tailwindcss/no-custom-classname
-    <section className="my-16 block-background-image-cards">
+    <section className="my-10 block-background-image-cards">
       <div className="text-center">
         <div
           className={clsx('grid gap-2', {
@@ -32,7 +32,7 @@ export function BlockImageTeaser(
     <div className="p-8 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
       {props.image ? (
         <Image
-          className="object-cover w-full h-72 lg:h-96 mb-5 absolute top-0 left-0"
+          className="object-cover w-full h-72 lg:h-96 absolute top-0 left-0"
           source={props.image.source}
           alt={props.image.alt}
         />