fix: in dashboard, make the logo smaller, display without text

ixartz · Oct 17, 2024 · f780727 · f780727
1 parent 75525ed
commit f780727
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 35 deletions.
diff --git a/src/components/ToggleMenuButton.tsx b/src/components/ToggleMenuButton.tsx
@@ -2,18 +2,16 @@ import { type ForwardedRef, forwardRef } from 'react';
 
 import { Button } from '@/components/ui/button';
 
-type IToggleMenuButtonProps = {
-  onClick?: () => void;
-};
-
 /**
  * A toggle button to show/hide component in small screen.
  * @component
  * @params props - Component props.
  * @params props.onClick - Function to run when the button is clicked.
  */
 const ToggleMenuButtonInternal = (
-  props: IToggleMenuButtonProps,
+  props: {
+    onClick?: () => void;
+  },
   ref?: ForwardedRef<HTMLButtonElement>,
 ) => (
   <Button

diff --git a/src/features/dashboard/DashboardHeader.tsx b/src/features/dashboard/DashboardHeader.tsx
@@ -28,11 +28,11 @@ export const DashboardHeader = (props: {
     <>
       <div className="flex items-center">
         <Link href="/dashboard" className="max-sm:hidden">
-          <Logo />
+          <Logo isTextHidden />
         </Link>
 
         <svg
-          className="ml-1 size-8 stroke-muted-foreground max-sm:hidden"
+          className="size-8 stroke-muted-foreground max-sm:hidden"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           fill="none"

diff --git a/src/features/landing/CenteredHero.tsx b/src/features/landing/CenteredHero.tsx
@@ -1,25 +1,11 @@
-import { badgeVariants } from '@/components/ui/badgeVariants';
-
 export const CenteredHero = (props: {
-  banner: {
-    href: string;
-    text: React.ReactNode;
-  };
+  banner: React.ReactNode;
   title: React.ReactNode;
   description: string;
   buttons: React.ReactNode;
 }) => (
   <>
-    <div className="text-center">
-      <a
-        className={badgeVariants()}
-        href={props.banner.href}
-        target="_blank"
-        rel="noopener"
-      >
-        {props.banner.text}
-      </a>
-    </div>
+    <div className="text-center">{props.banner}</div>
 
     <div className="mt-3 text-center text-5xl font-bold tracking-tight">
       {props.title}

diff --git a/src/templates/Hero.tsx b/src/templates/Hero.tsx
@@ -1,6 +1,7 @@
 import { GitHubLogoIcon, TwitterLogoIcon } from '@radix-ui/react-icons';
 import { useTranslations } from 'next-intl';
 
+import { badgeVariants } from '@/components/ui/badgeVariants';
 import { buttonVariants } from '@/components/ui/buttonVariants';
 import { CenteredHero } from '@/features/landing/CenteredHero';
 import { Section } from '@/features/landing/Section';
@@ -11,16 +12,18 @@ export const Hero = () => {
   return (
     <Section className="py-36">
       <CenteredHero
-        banner={{
-          href: 'https://twitter.com/ixartz',
-          text: (
-            <>
-              <TwitterLogoIcon className="mr-1 size-5" />
-              {' '}
-              {t('follow_twitter')}
-            </>
-          ),
-        }}
+        banner={(
+          <a
+            className={badgeVariants()}
+            href="https://twitter.com/ixartz"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <TwitterLogoIcon className="mr-1 size-5" />
+            {' '}
+            {t('follow_twitter')}
+          </a>
+        )}
         title={t.rich('title', {
           important: chunks => (
             <span className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">

diff --git a/src/templates/Logo.tsx b/src/templates/Logo.tsx
@@ -1,6 +1,8 @@
 import { AppConfig } from '@/utils/AppConfig';
 
-export const Logo = () => (
+export const Logo = (props: {
+  isTextHidden?: boolean;
+}) => (
   <div className="flex items-center text-xl font-semibold">
     <svg
       className="mr-1 size-8 stroke-current stroke-2"
@@ -16,6 +18,6 @@ export const Logo = () => (
       <rect x="15" y="4" width="6" height="16" rx="1" />
       <path d="M4 20h14" />
     </svg>
-    {AppConfig.name}
+    {!props.isTextHidden && AppConfig.name}
   </div>
 );