From b0b62f7288ba1754b344f6c99c47d63323ecb9c1 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 1 Apr 2024 15:08:03 +0700
Subject: [PATCH 1/2] stylization tab styling fixes

---
 app/components/Input.tsx            |  7 ++--
 app/components/Textarea.tsx         | 54 ++++++++++++++++---------
 app/components/Typography.tsx       | 62 +++++++++++++++++++++--------
 app/modules/SidePanel/SidePanel.tsx |  2 +-
 app/modules/Tabs/Tabs.tsx           |  8 ++--
 5 files changed, 88 insertions(+), 45 deletions(-)

diff --git a/app/components/Input.tsx b/app/components/Input.tsx
index 18554df835..eff8cbab3a 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Label } from "./Typography";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
@@ -8,12 +9,10 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 export function Input({ label, className, ...rest }: InputProps) {
   return (
     <div className={"flex flex-col " + className}>
-      {label && (
-        <label className="text-md mb-2 font-medium text-white">{label}</label>
-      )}
+      {label && <Label>{label}</Label>}
 
       <input
-        className="h-10 rounded-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary"
+        className="h-10 rounded-md bg-brand-secondary p-3 text-white outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary"
         {...rest}
       />
     </div>
diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
index 3b069b39ee..4d85c98782 100644
--- a/app/components/Textarea.tsx
+++ b/app/components/Textarea.tsx
@@ -1,24 +1,42 @@
-import { TextareaHTMLAttributes } from "react"
+import { TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
+import { Label } from "./Typography";
+
+type ResizeType =
+  | "none"
+  | "both"
+  | "horizontal"
+  | "vertical"
+  | "block"
+  | "inline"
+  | undefined;
 
 export const Textarea = ({
   className,
+  label,
+  resize = "vertical",
   ...rest
-}:TextareaHTMLAttributes<HTMLTextAreaElement>) => {
-  return(
-    <textarea
-      
-      className={twMerge(
-        "rounded-lg bg-ui-controls border border-ui-panel-border py-2 px-4"
-        ,className
-      )}
-      style={{
-        outline: "2px solid transparent",
-        transition: "outline-color 0.15s ease-in-out",
-      }}
-      onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
-      onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
-      {...rest}
-    />
+}: TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  label?: string;
+  resize?: ResizeType;
+}) => {
+  return (
+    <div className="flex flex-col">
+      {label && <Label>{label}</Label>}
+      <textarea
+        className={twMerge(
+          "rounded-lg border border-ui-panel-border bg-ui-controls p-3",
+          className,
+        )}
+        style={{
+          outline: "2px solid transparent",
+          transition: "outline-color 0.15s ease-in-out",
+          resize: resize,
+        }}
+        onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
+        onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
+        {...rest}
+      />
+    </div>
   );
-}
\ No newline at end of file
+};
diff --git a/app/components/Typography.tsx b/app/components/Typography.tsx
index f2c0bda536..f93a5e9c4c 100644
--- a/app/components/Typography.tsx
+++ b/app/components/Typography.tsx
@@ -1,31 +1,59 @@
 import { twMerge } from "tailwind-merge";
 
-interface TypogProps  {
+interface TypogProps {
   className?: string;
   children: React.ReactNode;
 }
 const baseTypo = "text-white";
 
-export const H1 = ({className,children,}:TypogProps)=>
-  <h1 className={twMerge(baseTypo, "font-medium text-2xl",className)}>{children}</h1>;
+export const H1 = ({ className, children }: TypogProps) => (
+  <h1 className={twMerge(baseTypo, "text-2xl font-medium", className)}>
+    {children}
+  </h1>
+);
 
-export const H2 = ({className,children,}:TypogProps)=>
-  <h2 className={twMerge(baseTypo, "font-medium text-xl", className)}> {children} </h2>;
+export const H2 = ({ className, children }: TypogProps) => (
+  <h2 className={twMerge(baseTypo, "text-xl font-medium", className)}>
+    {" "}
+    {children}{" "}
+  </h2>
+);
 
-export const H3 = ({className,children,}:TypogProps)=>
-  <h3 className={twMerge(baseTypo, "font-medium text-lg", className)}> {children} </h3>;
+export const H3 = ({ className, children }: TypogProps) => (
+  <h3 className={twMerge(baseTypo, "text-lg font-medium", className)}>
+    {" "}
+    {children}{" "}
+  </h3>
+);
 
-export const H4 = ({className,children,}:TypogProps)=>
-  <h4 className={twMerge(baseTypo, "font-medium text-base", className)}> {children} </h4>;
+export const H4 = ({ className, children }: TypogProps) => (
+  <h4 className={twMerge(baseTypo, "text-base font-medium", className)}>
+    {" "}
+    {children}{" "}
+  </h4>
+);
 
-  export const Label = ({className,children,}:TypogProps)=>
-  <label className={twMerge(baseTypo, "font-medium text-base", className)}> {children} </label>;
+export const Label = ({ className, children }: TypogProps) => (
+  <label className={twMerge(baseTypo, "mb-2 text-base font-medium", className)}>
+    {" "}
+    {children}{" "}
+  </label>
+);
 
-export const H5 = ({className,children,}:TypogProps)=>
-  <h5 className={twMerge(baseTypo, "font-medium text-sm",className)}> {children} </h5>;
+export const H5 = ({ className, children }: TypogProps) => (
+  <h5 className={twMerge(baseTypo, "text-sm font-medium", className)}>
+    {" "}
+    {children}{" "}
+  </h5>
+);
 
-export const H6 = ({className,children,}:TypogProps)=>
-  <h6 className={twMerge(baseTypo, "font-light text-sm",className)}> {children} </h6>;
+export const H6 = ({ className, children }: TypogProps) => (
+  <h6 className={twMerge(baseTypo, "text-sm font-light", className)}>
+    {" "}
+    {children}{" "}
+  </h6>
+);
 
-export const P = ({className,children,}:TypogProps)=>
-  <p className={twMerge(baseTypo, className)}> {children} </p>;
\ No newline at end of file
+export const P = ({ className, children }: TypogProps) => (
+  <p className={twMerge(baseTypo, className)}> {children} </p>
+);
diff --git a/app/modules/SidePanel/SidePanel.tsx b/app/modules/SidePanel/SidePanel.tsx
index f06c83c850..f0ef82595d 100644
--- a/app/modules/SidePanel/SidePanel.tsx
+++ b/app/modules/SidePanel/SidePanel.tsx
@@ -15,7 +15,7 @@ export const SidePanel = ({ children }: Props) => {
   return (
     <div
       className={
-        "relative border-l border-l-ui-panel-border bg-ui-panel transition-all duration-300 ease-in-out" +
+        "relative h-full border-l border-l-ui-panel-border bg-ui-panel transition-all duration-300 ease-in-out" +
         (isVisible ? " w-[23.5rem]" : " w-0")
       }
     >
diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx
index 9b32021140..a9f34093b6 100644
--- a/app/modules/Tabs/Tabs.tsx
+++ b/app/modules/Tabs/Tabs.tsx
@@ -19,7 +19,7 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => {
     );
 
   return (
-    <div className="w-full h-full px-2 sm:px-0 flex flex-col">
+    <div className="flex h-full w-full flex-col px-2 sm:px-0">
       <Tab.Group defaultIndex={3}>
         <Tab.List className="flex">
           {tabs.map((tab, idx) => (
@@ -31,11 +31,9 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => {
             </Tab>
           ))}
         </Tab.List>
-        <Tab.Panels className="grow p-4">
+        <Tab.Panels className="grow overflow-auto p-4">
           {tabs.map((tab, idx) => (
-            <Tab.Panel key={idx}>
-              {tab.children}
-            </Tab.Panel>
+            <Tab.Panel key={idx}>{tab.children}</Tab.Panel>
           ))}
         </Tab.Panels>
       </Tab.Group>

From 8c2d6d9b02fa143847745ffc42cbaa6321d627f4 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 1 Apr 2024 15:31:20 +0700
Subject: [PATCH 2/2] updates

---
 app/components/ItemPicker.tsx                 |  2 +-
 .../comps/SidePanelTabs/TabStylization.tsx    | 36 +++++++++----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/components/ItemPicker.tsx b/app/components/ItemPicker.tsx
index 6831e1ef0e..2f70dc1593 100644
--- a/app/components/ItemPicker.tsx
+++ b/app/components/ItemPicker.tsx
@@ -26,7 +26,7 @@ export const ItemPicker = ({
       )}
       onClick={handleSelected}
     >
-      <img className="aspect-square min-w-20" {...imgProps} />
+      <img className="aspect-square" {...imgProps} />
       <div className="absolute left-0 top-0 h-full w-full bg-gradient-to-t from-gray-700" />
       <H4 className="absolute bottom-0 left-2 drop-shadow-md">{label}</H4>
     </div>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
index d04ce64519..c3f8cf5027 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
@@ -58,9 +58,9 @@ export const TabStylization = () => {
     }
   };
   return (
-    <div className="h-full w-full gap-2 overflow-scroll">
+    <div className="flex h-full w-full flex-col gap-2">
       <H4>Select Base Stylizer</H4>
-      <div className="my-2 flex gap-2">
+      <div className="grid grid-cols-4 gap-2">
         <ItemPicker
           label={ArtStyle.Anime2_5D}
           selected={selection === ArtStyle.Anime2DFlat}
@@ -86,23 +86,21 @@ export const TabStylization = () => {
           src="/resources/avatars/3.webp"
         />
       </div>
-      <H4>Enter a Prompt</H4>
-      <div className="my-2 flex gap-2">
-        <Textarea
-          className="h-32 w-full"
-          placeholder="Type here to describe your scene"
-          onChange={onChangeHandlerPositive}
-        />
-      </div>
-      <H4>Negative Prompt</H4>
-      <div className="my-2 flex gap-2">
-        <Textarea
-          className="h-32 w-full"
-          placeholder="Type here to filter out the things you don't want in the scene"
-          onChange={onChangeHandlerNegative}
-        />
-      </div>
-      <div className="mt-6 flex justify-center gap-2">
+      <Textarea
+        label="Positive Prompt"
+        className="h-32 w-full"
+        placeholder="Type here to describe your scene"
+        onChange={onChangeHandlerPositive}
+        resize="none"
+      />
+      <Textarea
+        label="Negative Prompt"
+        className="h-32 w-full"
+        placeholder="Type here to filter out the things you don't want in the scene"
+        onChange={onChangeHandlerNegative}
+        resize="none"
+      />
+      <div className="mt-3 flex justify-center gap-2">
         <Button onClick={handleChangeViewMode}>
           {appUiState?.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE
             ? "Back to Scene"