feat: adjust layout for phone

Pettor · Feb 24, 2024 · 88ec630 · 88ec630
1 parent 4b03dfe
commit 88ec630
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/src/components/layout/BasicLayout.tsx b/src/components/layout/BasicLayout.tsx
@@ -31,8 +31,8 @@ export function BasicLayout({
         </main>
       </div>
       {footer && (
-        <footer className="footer footer-center gap-y-2 bg-base-300 p-4 text-base-content">
-          <aside className="mt-2">
+        <footer className="footer footer-center gap-y-2 bg-base-300 lg:p-4 text-base-content py-2">
+          <aside className="lg:mt-2">
             <p className="text-base font-bold">Made with ☕ by Petter Hancock</p>
             <p>Copyright © 2024 - All right reserved</p>
           </aside>

diff --git a/src/components/views/home/HomeView.tsx b/src/components/views/home/HomeView.tsx
@@ -19,38 +19,40 @@ export function HomeView({ themeSwitchProps, socialLinkProps = {}, onDrop }: Hom
 
   return (
     <BasicLayout container footer {...socialLinkProps}>
-      <div className="w-full flex items-center justify-center h-20 mt-4 px-4 lg:px-0 lg:mt-8">
+      <div className="w-full flex items-center justify-center h-20 mt-2 px-4 lg:px-0 lg:mt-8">
         <div className="flex flex-1">
-          <img className="w-14 h-14 lg:w-16 lg:h-16" src={LogoImageSrc} alt="Pixi Image Editor Logo" />
+          <img className="w-10 h-10 lg:w-16 lg:h-16" src={LogoImageSrc} alt="Pixi Image Editor Logo" />
         </div>
         <div className="flex flex-row items-center h-8">
           <div className="z-20">
             <ThemeSwitch {...themeSwitchProps} />
           </div>
           <div className="divider divider-horizontal w-0" />
-          <button
-            className="btn btn-square btn-ghost p-2 fill-neutral dark:fill-neutral-content"
-            onClick={onGithubClick}
-          >
-            <GithubIcon />
-          </button>
-          <button
-            className="btn btn-square btn-ghost p-2 fill-neutral dark:fill-neutral-content"
-            onClick={onLinkedInClick}
-          >
-            <LinkedInIcon />
-          </button>
+          <div className="flex gap-2">
+            <button
+              className="btn btn-square btn-ghost p-2 fill-neutral dark:fill-neutral-content"
+              onClick={onGithubClick}
+            >
+              <GithubIcon />
+            </button>
+            <button
+              className="btn btn-square btn-ghost p-2 fill-neutral dark:fill-neutral-content"
+              onClick={onLinkedInClick}
+            >
+              <LinkedInIcon />
+            </button>
+          </div>
         </div>
       </div>
       <div className="flex flex-1">
         <div className="hero-content text-center">
           <div className="max-w-xl">
             <div className="flex flex-1 flex-row justify-center items-center">
-              <h1 className="inline-block bg-gradient-to-r from-primary to-secondary bg-clip-text p-2 text-5xl font-bold text-transparent md:text-5xl lg:text-7xl">
+              <h1 className="inline-block bg-gradient-to-r from-primary to-secondary bg-clip-text lg:p-2 text-4xl font-bold text-transparent md:text-5xl lg:text-7xl">
                 Pixi Image Editor
               </h1>
             </div>
-            <p className="py-6 text-lg lg:text-xl">
+            <p className="py-4 lg:py-6 text-lg lg:text-xl">
               This is a image editor built using <b className="text-secondary">PixiJS</b> and React. You can upload an
               image to get started.
             </p>