Merge remote-tracking branch 'origin/styling/stylization-tab-rebased' into feature/add-play-button

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>

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>

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>
   );
-}
+};

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>;
+export const P = ({ className, children }: TypogProps) => (
+  <p className={twMerge(baseTypo, className)}> {children} </p>
+);

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")
       }
     >

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>

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"