Fix social proof

storybookjs · Jun 2, 2024 · d04e517 · d04e517
1 parent 1122397
commit d04e517
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 44 deletions.
diff --git a/apps/frontpage/components/home/hero/social-proof.tsx b/apps/frontpage/components/home/hero/social-proof.tsx
@@ -9,49 +9,19 @@ import logoBBC from './logos/logo-bbc.svg';
 
 export default function SocialProof() {
   return (
-    <div className="relative border-b border-b-white/20 z-10 m-auto px-8 md:px-16 py-12 sm:py-16 md:py-20 mb-12 md:mb-20">
-      <div className="flex w-full justify-evenly items-center gap-8 sm:gap-8 md:gap-12 lg:gap-16 text-zinc-600">
-        <div className="flex-initial flex-shrink-0 hidden sm:flex items-center justify-center h-10">
-          <Image
-            alt="VSCode"
-            className="w-full h-full opacity-50"
-            src={logoVSCode}
-          />
-        </div>
-        <div className="flex-initial flex-shrink-0 hidden sm:flex items-center justify-center h-8">
-          <Image alt="EU" className="w-full h-full opacity-50" src={logoEu} />
-        </div>
-        <div className="flex-grow-1 flex-shrink-0 flex items-center justify-center h-5 sm:h-6">
-          <Image
-            alt="Github"
-            className="w-full h-full opacity-50"
-            src={logoGithub}
-          />
-        </div>
-        <div className="flex-grow-1 flex-shrink-0 flex items-center justify-center h-6 sm:h-8">
-          <Image
-            alt="Airbnb"
-            className="w-full h-full opacity-50"
-            src={logoAirbnb}
-          />
-        </div>
-        <div className="flex-grow-1 flex-shrink-0 flex items-center justify-center h-6 sm:h-7">
-          <Image
-            alt="Mozilla"
-            className="w-full h-full opacity-50"
-            src={logoMozilla}
-          />
-        </div>
-        <div className="flex-grow-1 flex-shrink-0 hidden lg:flex items-center justify-center h-7">
-          <Image
-            alt="Monday.com"
-            className="w-full h-full opacity-50"
-            src={logoMonday}
-          />
-        </div>
-        <div className="flex-grow-1 flex-shrink-0 hidden items-center justify-center h-6 xl:flex">
-          <Image alt="BBC" className="w-full h-full opacity-50" src={logoBBC} />
-        </div>
+    <div className="w-full text-zinc-600 relative border-b border-b-white/20 z-10 m-auto px-4 py-12 sm:py-16 md:py-20 mb-12 md:mb-20">
+      <div className="flex justify-evenly items-center  gap-8 md:gap-12 lg:gap-16 opacity-50 flex-wrap">
+        <Image alt="VSCode" className="w-8" src={logoVSCode} />
+        <Image alt="EU" className="w-8 hidden sm:block" src={logoEu} />
+        <Image alt="Github" className="w-20" src={logoGithub} />
+        <Image alt="Airbnb" className="w-20" src={logoAirbnb} />
+        <Image alt="Mozilla" className="w-20" src={logoMozilla} />
+        <Image
+          alt="Monday.com"
+          className="w-32 hidden sm:block"
+          src={logoMonday}
+        />
+        <Image alt="BBC" className="w-20" src={logoBBC} />
       </div>
     </div>
   );

diff --git a/packages/ui/src/header/mobile-menu.tsx b/packages/ui/src/header/mobile-menu.tsx
@@ -12,8 +12,9 @@ export const MobileMenu: FC<HeaderProps> = ({ variant }) => {
       <DropdownMenu.Trigger asChild>
         <button
           className={cn(
-            'ui-group ui-flex ui-items-center ui-justify-center ui-gap-2 ui-text-sm ui-text-zinc-500 ui-font-bold hover:ui-bg-blue-100 hover:ui-text-blue-500  dark:ui-text-white dark:hover:ui-bg-blue-500/10 ui-h-9 ui-w-9 ui-rounded min-[920px]:ui-hidden',
+            'ui-group ui-flex ui-items-center ui-justify-center ui-gap-2 ui-text-sm  ui-font-bold hover:ui-bg-blue-100 hover:ui-text-blue-500  dark:ui-text-white dark:hover:ui-bg-blue-500/10 ui-h-9 ui-w-9 ui-rounded min-[920px]:ui-hidden',
             variant === 'home' && 'ui-text-white',
+            variant === 'system' && 'ui-text-zinc-500',
           )}
           type="button"
         >