style: redesign (#14)

* style: redesign * fix: responsive
fal-ai · May 7, 2024 · 751d962 · 751d962
1 parent a385ec3
commit 751d962
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -175,7 +175,7 @@ export default function UpscalerBattleground() {
       <div className="flex flex-col justify-between h-[calc(100vh-56px)]">
         <div className="py-4 px-0  mx-auto w-full max-w-5xl">
           <div className="container px-3 md:px-0 flex w-full items-center justify-between mt-4 md:mt-10 pb-3">
-            <div className="flex flex-col px-3 w-full md:flex-row md:items-end justify-between space-x-3">
+            <div className="border rounded-xl bg-black/[2%] md:w-full dark:bg-white/[2%] p-2  flex flex-col pl-3 md:flex-row md:items-end justify-between space-x-3 mx-1 md:mx-0">
               <div className="flex flex-col md:flex-row space-x-4 space-y-4 md:space-y-0 mb-4 md:mb-0">
                 <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 text-sm items-center justify-center">
                   <label className="text-neutral-500 md:mr-1 dark:text-neutral-400 uppercase text-xs">
@@ -241,7 +241,7 @@ export default function UpscalerBattleground() {
 
               <Button
                 size="lg"
-                className="mx-auto md:mx-0"
+                className="mx-auto md:mx-0 !rounded-lg"
                 onClick={() => handleCompare(imageFile)}
                 disabled={!imageFile || firstModelLoading || secondModelLoading}
               >
@@ -252,7 +252,7 @@ export default function UpscalerBattleground() {
               </Button>
             </div>
           </div>
-          <div className="flex w-full items-end justify-between border-y py-2 mb-3">
+          <div className="border rounded-xl bg-black/[2%] dark:bg-white/[2%] p-2 md:w-full flex items-end justify-between border-y py-2 mb-3 mx-4 md:mx-0">
             <div className="w-1/2 flex justify-start">
               <ModelDropdown
                 disableList={[firstModel?.name, secondModel?.name]}
@@ -269,32 +269,34 @@ export default function UpscalerBattleground() {
               />
             </div>
           </div>
-          {mode === "model" && (
-            <ModelCompare
-              originalImage={originalImage}
-              position={position}
-              setPosition={setPosition}
-              firstModel={firstModel}
-              firstModelOutput={firstModelOutput}
-              firstModelLoading={firstModelLoading}
-              secondModel={secondModel}
-              secondModelOutput={secondModelOutput}
-              secondModelLoading={secondModelLoading}
-            />
-          )}
-          {mode === "original" && (
-            <OriginalCompare
-              originalImage={originalImage}
-              position={position}
-              setPosition={setPosition}
-              firstModel={firstModel}
-              firstModelOutput={firstModelOutput}
-              firstModelLoading={firstModelLoading}
-              secondModel={secondModel}
-              secondModelOutput={secondModelOutput}
-              secondModelLoading={secondModelLoading}
-            />
-          )}
+          <div className="border rounded-xl bg-black/[2%] dark:bg-white/[2%] p-2 md:p-4 flex flex-col lg:flex-row lg:space-x-4 space-y-2 md:space-y-4 lg:space-y-0 items-center justify-center aspect-[1/2] lg:aspect-[2/1] xl:aspect-[16/4] mx-4 md:mx-auto">
+            {mode === "model" && (
+              <ModelCompare
+                originalImage={originalImage}
+                position={position}
+                setPosition={setPosition}
+                firstModel={firstModel}
+                firstModelOutput={firstModelOutput}
+                firstModelLoading={firstModelLoading}
+                secondModel={secondModel}
+                secondModelOutput={secondModelOutput}
+                secondModelLoading={secondModelLoading}
+              />
+            )}
+            {mode === "original" && (
+              <OriginalCompare
+                originalImage={originalImage}
+                position={position}
+                setPosition={setPosition}
+                firstModel={firstModel}
+                firstModelOutput={firstModelOutput}
+                firstModelLoading={firstModelLoading}
+                secondModel={secondModel}
+                secondModelOutput={secondModelOutput}
+                secondModelLoading={secondModelLoading}
+              />
+            )}
+          </div>
         </div>
         <div className="container flex flex-col items-center justify-center my-4">
           <p className="text-sm text-base-content/70 py-4 text-center text-neutral-400">

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -12,7 +12,7 @@ const spaceMono = Space_Mono({
 
 export function Nav() {
   return (
-    <div className="h-14 py-2 px-2 md:px-8 border-b flex items-center">
+    <div className="h-14 py-2 px-2 md:px-8 flex items-center">
       <div className="flex flex-1 items-center">
         <Link href="/">
           <h1

diff --git a/components/original-compare.tsx b/components/original-compare.tsx
@@ -35,7 +35,7 @@ const OriginalCompare = ({
     secondModelLoading || secondModelOutput?.model !== secondModel.model;
 
   return (
-    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-0 lg:space-x-6">
+    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 md:px-0 pt-0 lg:space-x-6">
       <div className="flex-1 mx-1 md:mx-0">
         {originalImage ? (
           <div className="aspect-square w-full flex items-center justify-center">
@@ -88,9 +88,8 @@ const OriginalCompare = ({
             />
           </div>
         )}
-
         {firstModel && (
-          <div className="flex items-center space-x-2 mb-1 mt-2">
+          <div className="flex items-center justify-start space-x-2 mb-1 mt-2">
             <Image
               alt=""
               src="https://fal.ai/fal-icon.svg"