From 75318b2e8d9a40ccd890327d7de2d9637bfa5666 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 11 Oct 2024 11:28:31 +0700
Subject: [PATCH] big styling updates (#672)

---
 app/components/reusable/Button/Button.tsx     |   4 +-
 .../ButtonDropdown/ButtonDropdown.tsx         |   2 +-
 .../ButtonIconSelect/ButtonIconSelect.tsx     |   2 +-
 .../reusable/FileUploader/DragAndDropZone.tsx |   4 +-
 app/components/reusable/Gravatar/Gravatar.tsx |   2 +-
 app/components/reusable/Input/Input.tsx       |   4 +-
 app/components/reusable/LoadingBar.tsx        |   2 +-
 .../reusable/SearchFilter/SearchFilter.tsx    |   2 +-
 app/components/reusable/Slider/Slider.tsx     |   2 +-
 app/components/reusable/Textarea/Textarea.tsx |  10 +-
 .../reusable/UploadModal/DragAndDropZone.tsx  |   4 +-
 app/components/reusable/index.ts              |  19 +--
 app/components/signaled/Toaster.tsx           |   2 +-
 app/components/signaled/TopBar/TopBar.tsx     |   2 +-
 .../UploadAudioComponent.tsx                  |   4 +-
 app/pages/PageEnigma/Wizard/MainPage.tsx      |   4 +-
 .../Wizard/ObjectSelectionButton.tsx          |   2 +-
 app/pages/PageEnigma/Wizard/RemixVideo.tsx    |   2 +-
 .../comps/Controls3D/Controls3D.tsx           |   2 +-
 .../ControlsTopButtons/ControlsTopButtons.tsx |   6 +-
 .../ScenePicker/SceneCard.tsx                 |   2 +-
 .../comps/ControlsVideo/ControlsVideo.tsx     |   4 +-
 .../comps/DragComponent/DragComponent.tsx     |   2 +-
 .../comps/GenerateModals/CompletedCard.tsx    |   2 +-
 .../PageEnigma/comps/Outliner/Outliner.tsx    |   2 +-
 .../PreviewEngineCamera.tsx                   |   4 +-
 app/pages/PageEnigma/comps/PreviewImages.tsx  |   4 +-
 .../PageEnigma/comps/SidePanel/SidePanel.tsx  |   9 +-
 .../comps/SidePanelMenu/SidePanelMenu.tsx     |  10 +-
 .../SidePanelTabs/sharedComps/ItemElement.tsx |   6 +-
 .../tabComps/AudioTab/audioItemElement.tsx    |   2 +-
 .../tabComps/AudioTab/pageTTS.tsx             |   2 +-
 .../tabComps/AudioTab/pageVoiceToVoice.tsx    |   2 +-
 .../tabComps/AudioTab/voiceModelElement.tsx   |   4 +-
 .../StylizeTab/GenerateMovieButton.tsx        |   4 +-
 .../tabComps/StylizeTab/IPAdapter.tsx         |   4 +-
 .../tabComps/StylizeTab/ItemPicker.tsx        |   4 +-
 .../tabComps/StylizeTab/Prompts.tsx           |   6 +-
 .../tabComps/StylizeTab/StyleButtons.tsx      |  16 +-
 .../tabComps/StylizeTab/StyleOptions.tsx      |  10 +-
 .../StylizeTab/StyleSelectionButton.tsx       |   2 +-
 .../comps/StyleSelection/ItemPicker.tsx       |   4 +-
 .../comps/Timeline/PremiumLockTimeline.tsx    |   2 +-
 .../PageEnigma/comps/Timeline/TrackClip.tsx   |   4 +-
 .../comps/Timeline/TrackClipPrompt.tsx        |   4 +-
 .../PageEnigma/signals/outliner/outliner.ts   |   1 -
 app/styles/base.css                           | 144 +++++++++---------
 app/styles/tailwind.css                       |   6 +-
 tailwind.config.ts                            |  62 ++++----
 49 files changed, 193 insertions(+), 216 deletions(-)

diff --git a/app/components/reusable/Button/Button.tsx b/app/components/reusable/Button/Button.tsx
index 4290b2daf8..35af46e2ad 100644
--- a/app/components/reusable/Button/Button.tsx
+++ b/app/components/reusable/Button/Button.tsx
@@ -31,7 +31,7 @@ export const Button = ({
         return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
       case "action": {
-        return " bg-action hover:bg-action-500 text-white focus-visible:outline-action";
+        return "bg-action hover:bg-action-900 text-white focus-visible:outline-action";
       }
       case "primary":
       default: {
@@ -45,7 +45,7 @@ export const Button = ({
   );
 
   const className = twMerge(
-    "text-sm font-medium rounded-lg px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150 flex gap-2 items-center justify-center",
+    "text-sm font-medium rounded-lg px-3 py-2 border border-[#3F3F3F] shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150 flex gap-2 items-center justify-center",
     getVariantClassNames(propsVariant),
     propsClassName,
     disabledClass,
diff --git a/app/components/reusable/ButtonDropdown/ButtonDropdown.tsx b/app/components/reusable/ButtonDropdown/ButtonDropdown.tsx
index 6c87669ca6..de698f6784 100644
--- a/app/components/reusable/ButtonDropdown/ButtonDropdown.tsx
+++ b/app/components/reusable/ButtonDropdown/ButtonDropdown.tsx
@@ -116,7 +116,7 @@ export const ButtonDropdown = ({
                         disabled={option.disabled}
                         className={twMerge(
                           "duration-50 bg-brand-secondary font-medium text-white transition-all",
-                          active ? "bg-ui-controls-button/60" : "",
+                          active ? "bg-brand-secondary-800" : "",
                           option.disabled
                             ? "pointer-events-none opacity-40"
                             : "",
diff --git a/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx b/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx
index 78c28eedfa..c028cecf48 100644
--- a/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx
+++ b/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx
@@ -35,7 +35,7 @@ export function ButtonIconSelect({
         <button
           key={value}
           className={twMerge(
-            `flex h-8 items-center justify-center rounded-lg border-2 text-sm transition-all duration-150`,
+            `flex h-8 items-center justify-center rounded-lg border text-sm transition-all duration-150`,
             text ? "h-auto w-auto gap-2 px-2.5 py-1" : "w-8",
             selectedOption === value
               ? "border-brand-primary bg-ui-panel/[0.3]"
diff --git a/app/components/reusable/FileUploader/DragAndDropZone.tsx b/app/components/reusable/FileUploader/DragAndDropZone.tsx
index 68cc73b869..5446311cac 100644
--- a/app/components/reusable/FileUploader/DragAndDropZone.tsx
+++ b/app/components/reusable/FileUploader/DragAndDropZone.tsx
@@ -12,7 +12,7 @@ export const DragAndDropZone = ({
 }) => {
   if (!file) {
     return (
-      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border-2 border-dashed border-ui-controls-button/50 bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileArrowUp} className="text-4xl" />
         <div className="flex flex-col gap-0">
           <P className="font-medium">
@@ -34,7 +34,7 @@ export const DragAndDropZone = ({
       : `${Math.floor(file.size / 1024)} KB`;
 
   return (
-    <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border-2 border-dashed border-ui-controls-button/50 bg-brand-secondary p-3">
+    <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
       <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
       <div className="flex grow flex-col gap-0">
         <P className="font-medium">
diff --git a/app/components/reusable/Gravatar/Gravatar.tsx b/app/components/reusable/Gravatar/Gravatar.tsx
index 0459dbadd4..da7ac4c004 100644
--- a/app/components/reusable/Gravatar/Gravatar.tsx
+++ b/app/components/reusable/Gravatar/Gravatar.tsx
@@ -70,7 +70,7 @@ function Gravatar(props: Props) {
   return (
     <div
       className={twMerge(
-        "relative aspect-square overflow-hidden rounded-full border-2 border-white",
+        "relative aspect-square overflow-hidden rounded-full border border-white",
         props.className,
       )}
     >
diff --git a/app/components/reusable/Input/Input.tsx b/app/components/reusable/Input/Input.tsx
index ffdec38278..a94103f23e 100644
--- a/app/components/reusable/Input/Input.tsx
+++ b/app/components/reusable/Input/Input.tsx
@@ -51,8 +51,8 @@ export const Input = React.forwardRef(
             ref={ref}
             id={id ? id : label ? kebabCase(label) : undefined}
             className={twMerge(
-              "h-10 w-full rounded-lg bg-brand-secondary px-3 py-2.5 text-white outline-none",
-              "outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary",
+              "h-10 w-full rounded-lg bg-brand-secondary px-3 py-2.5 text-white placeholder-white/50 outline-none",
+              "border border-[#3F3F3F] transition-all duration-150 ease-in-out hover:border-brand-primary/60 focus:border-brand-primary focus:!outline-none",
               icon && "pl-10",
               isError && "outline-red focus:outline-red",
               inputClassName,
diff --git a/app/components/reusable/LoadingBar.tsx b/app/components/reusable/LoadingBar.tsx
index 6190753184..502bd30a5e 100644
--- a/app/components/reusable/LoadingBar.tsx
+++ b/app/components/reusable/LoadingBar.tsx
@@ -49,7 +49,7 @@ export const LoadingBar = ({
     propsInnerWrapperClassName,
   );
   const progressBackgroundClassName = twMerge(
-    "w-full bg-gray-500 rounded-full h-2.5",
+    "w-full bg-brand-secondary-800 rounded-full h-2.5",
     propsProgressBackgroundClassName,
   );
   const progressClassName = twMerge(
diff --git a/app/components/reusable/SearchFilter/SearchFilter.tsx b/app/components/reusable/SearchFilter/SearchFilter.tsx
index 21ca6878ca..e37eb8753a 100644
--- a/app/components/reusable/SearchFilter/SearchFilter.tsx
+++ b/app/components/reusable/SearchFilter/SearchFilter.tsx
@@ -58,7 +58,7 @@ export const SearchFilter = ({
           ref={inputRef}
           icon={faSearch}
           iconClassName="opacity-50 pt-[11px] text-sm"
-          inputClassName="h-9 rounded-lg text-sm bg-ui-controls-button/30 pr-8 pl-9"
+          inputClassName="h-9 rounded-lg text-sm pr-8 pl-9"
           placeholder={placeholder}
           className="grow"
           value={inputValue}
diff --git a/app/components/reusable/Slider/Slider.tsx b/app/components/reusable/Slider/Slider.tsx
index adeb63c6a7..60ee6de92c 100644
--- a/app/components/reusable/Slider/Slider.tsx
+++ b/app/components/reusable/Slider/Slider.tsx
@@ -88,7 +88,7 @@ export const Slider: React.FC<SliderProps> = ({
     <div
       ref={sliderRef}
       className={twMerge(
-        "relative h-2.5 w-full cursor-pointer rounded-full bg-gray-500",
+        "relative h-2.5 w-full cursor-pointer rounded-full bg-brand-secondary-900",
         className,
       )}
       onMouseDown={handleMouseDown}
diff --git a/app/components/reusable/Textarea/Textarea.tsx b/app/components/reusable/Textarea/Textarea.tsx
index 6c7dc72638..d0b77c136b 100644
--- a/app/components/reusable/Textarea/Textarea.tsx
+++ b/app/components/reusable/Textarea/Textarea.tsx
@@ -34,21 +34,17 @@ export const Textarea = ({
       <textarea
         id={id ? id : label ? kebabCase(label) : undefined}
         className={twMerge(
-          "rounded-lg border border-ui-panel-border bg-ui-controls px-3 py-2",
+          "rounded-lg border border-[#3F3F3F] bg-brand-secondary px-3 py-2 placeholder-white/50 outline-none transition-all duration-150 ease-in-out hover:border-brand-primary/60 focus:border-brand-primary focus:outline-none",
           className,
         )}
         style={{
-          outline: "2px solid transparent",
-          transition: "outline-color 0.15s ease-in-out",
           resize: resize,
         }}
-        onFocus={(e) => {
+        onFocus={() => {
           disableHotkeyInput(DomLevels.INPUT);
-          e.currentTarget.style.outlineColor = "#e66462";
         }}
-        onBlur={(e) => {
+        onBlur={() => {
           enableHotkeyInput(DomLevels.INPUT);
-          e.currentTarget.style.outlineColor = "transparent";
         }}
         onKeyDown={(event) => event.stopPropagation()}
         {...rest}
diff --git a/app/components/reusable/UploadModal/DragAndDropZone.tsx b/app/components/reusable/UploadModal/DragAndDropZone.tsx
index 1c65a97131..5949b0d50c 100644
--- a/app/components/reusable/UploadModal/DragAndDropZone.tsx
+++ b/app/components/reusable/UploadModal/DragAndDropZone.tsx
@@ -20,7 +20,7 @@ export const DragAndDropZone = ({ file, fileTypes }: Props) => {
 
   if (!file) {
     return (
-      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border-2 border-dashed border-ui-controls-button/50 bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileArrowUp} className="text-4xl" />
         <div className="flex flex-col gap-0">
           <P className="font-medium">
@@ -34,7 +34,7 @@ export const DragAndDropZone = ({ file, fileTypes }: Props) => {
     );
   } else {
     return (
-      <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border-2 border-dashed border-ui-controls-button/50 bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
         <div className="flex grow flex-col gap-0">
           <P className="font-medium">
diff --git a/app/components/reusable/index.ts b/app/components/reusable/index.ts
index 1118856f09..33ff2991f6 100644
--- a/app/components/reusable/index.ts
+++ b/app/components/reusable/index.ts
@@ -1,35 +1,32 @@
 export * from "./Badge";
 export * from "./Button";
-export * from "./ButtonDialogue"; //dependency on TransitionDialogue
+export * from "./ButtonDialogue";
 export * from "./ButtonDropdown";
 export * from "./ButtonIcon";
 export * from "./ButtonIconSelect";
 export * from "./ButtonLink";
 export * from "./ConfirmationModal";
 export * from "./FileUploader";
-export * from "./FilterButtons"; //this relies on a list of filters locally, could be more flexible
+export * from "./FilterButtons";
 export * from "./Gravatar";
-export * from "./Input"; //need to decouple hotkey signal
-export * from "./InputVector"; //need to decouple hotkey signal
+export * from "./Input";
+export * from "./InputVector";
 export * from "./ListDropdown";
 export * from "./LoadingBar";
+export * from "./LoadingDots";
+export * from "./LoadingSpinner";
 export * from "./NumberInput";
 export * from "./Pagination";
 export * from "./Pill";
 export * from "./SearchFilter";
-export * from "./Select"; //Select's onChange type should be generic
+export * from "./Select";
 export * from "./Slider";
 export * from "./Tabs";
 export * from "./Textarea";
 export * from "./Tooltip";
-export * from "./TransitionDialogue"; //need to decouple hotkey signal
+export * from "./TransitionDialogue";
 export * from "./Typography";
 export * from "./UploadModal";
 export * from "./UploadModal3D";
 export * from "./UploadModalMedia";
 export * from "./WaveformPlayer";
-
-//TODO: need to rewrite because it's against tailwind
-export * from "./LoadingDots";
-//TODO: need to rewrite because it's not using fontawesome
-export * from "./LoadingSpinner";
diff --git a/app/components/signaled/Toaster.tsx b/app/components/signaled/Toaster.tsx
index 6c137ea204..3ec9245018 100644
--- a/app/components/signaled/Toaster.tsx
+++ b/app/components/signaled/Toaster.tsx
@@ -70,7 +70,7 @@ export const Toaster = () => {
         <div
           key={toast.id}
           ref={(el) => (toastRefs.current[index] = el)}
-          className="absolute z-50 w-[360px] animate-fadeIn rounded-lg border-2 border-[#5E5E7C] bg-ui-controls p-3 shadow-xl"
+          className="absolute z-50 w-[360px] animate-fadeIn rounded-lg border border-[#5E5E7C] bg-ui-controls p-3 shadow-xl"
           style={{
             top: heights
               .slice(0, index)
diff --git a/app/components/signaled/TopBar/TopBar.tsx b/app/components/signaled/TopBar/TopBar.tsx
index 5039047ffc..659ab1c8a4 100644
--- a/app/components/signaled/TopBar/TopBar.tsx
+++ b/app/components/signaled/TopBar/TopBar.tsx
@@ -22,7 +22,7 @@ export const TopBar = ({ pageName }: Props) => {
   );
 
   return (
-    <header className="fixed left-0 top-0 z-30 w-full border-b border-ui-panel-border bg-ui-panel">
+    <header className="fixed left-0 top-0 z-30 w-full border-b border-ui-panel-border bg-ui-background">
       <nav
         className="mx-auto grid h-[64px] w-screen grid-cols-3 items-center justify-between p-3"
         aria-label="Global"
diff --git a/app/components/signaled/UploadAudioComponent/UploadAudioComponent.tsx b/app/components/signaled/UploadAudioComponent/UploadAudioComponent.tsx
index f2c5f7e540..539a50f7b8 100644
--- a/app/components/signaled/UploadAudioComponent/UploadAudioComponent.tsx
+++ b/app/components/signaled/UploadAudioComponent/UploadAudioComponent.tsx
@@ -169,7 +169,7 @@ const DragAndDropZone = ({ file }: { file: File | undefined }) => {
 
   if (!file) {
     return (
-      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border-2 border-dashed border-ui-controls-button/50 bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileArrowUp} className="text-4xl" />
         <div className="flex flex-col gap-0">
           <P className="font-medium">
@@ -183,7 +183,7 @@ const DragAndDropZone = ({ file }: { file: File | undefined }) => {
     );
   } else {
     return (
-      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border-2 border-dashed border-ui-controls-button/50 bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
         <div className="flex flex-col gap-0">
           <P className="font-medium">
diff --git a/app/pages/PageEnigma/Wizard/MainPage.tsx b/app/pages/PageEnigma/Wizard/MainPage.tsx
index abded357c3..00d5fca3f6 100644
--- a/app/pages/PageEnigma/Wizard/MainPage.tsx
+++ b/app/pages/PageEnigma/Wizard/MainPage.tsx
@@ -21,7 +21,7 @@ export const MainPage = () => {
             {option.label === "Remix" && (
               <button
                 className={twMerge(
-                  "group relative flex h-[249px] w-full flex-col items-center rounded-lg border-2 border-white/5 bg-brand-secondary/50 px-2 pt-[58px] transition-all duration-150 hover:border-brand-primary hover:bg-brand-secondary",
+                  "group relative flex h-[249px] w-full flex-col items-center rounded-lg border border-white/5 bg-brand-secondary/50 px-2 pt-[58px] transition-all duration-150 hover:border-brand-primary hover:bg-brand-primary/20",
                 )}
                 onClick={() => (showWizard.value = option.value as string)}
               >
@@ -56,7 +56,7 @@ export const MainPage = () => {
             {option.label === "Blank Scene" && (
               <button
                 className={twMerge(
-                  "group relative flex h-[249px] w-full flex-col items-center rounded-lg border-2 border-white/5 bg-brand-secondary/50 px-2 pt-[58px] transition-all duration-150 hover:border-brand-primary hover:bg-brand-secondary",
+                  "group relative flex h-[249px] w-full flex-col items-center rounded-lg border border-white/5 bg-brand-secondary/50 px-2 pt-[58px] transition-all duration-150 hover:border-brand-primary hover:bg-brand-primary/20",
                 )}
                 onClick={() => (showWizard.value = option.value as string)}
               >
diff --git a/app/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx b/app/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx
index 0ef3d479ae..25326080dd 100644
--- a/app/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx
+++ b/app/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx
@@ -20,7 +20,7 @@ export function ObjectSelectionButton({
   return (
     <div className="flex flex-col">
       <button
-        className="flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border-2 border-white/30 bg-ui-controls-button/70 p-2 pr-3 text-start transition-all hover:border-brand-primary hover:bg-ui-controls-button/60"
+        className="flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border border-white/30 bg-ui-controls-button/70 p-2 pr-3 text-start transition-all hover:border-brand-primary hover:bg-ui-controls-button/60"
         onClick={onClick}
         disabled={disabled}
       >
diff --git a/app/pages/PageEnigma/Wizard/RemixVideo.tsx b/app/pages/PageEnigma/Wizard/RemixVideo.tsx
index 493b0e13d8..f717b4dadc 100644
--- a/app/pages/PageEnigma/Wizard/RemixVideo.tsx
+++ b/app/pages/PageEnigma/Wizard/RemixVideo.tsx
@@ -60,7 +60,7 @@ export const RemixVideo = ({
       <button
         key={card.token}
         className={twMerge(
-          "relative block aspect-video w-[352px] overflow-hidden rounded-lg border-2 transition-all duration-150",
+          "relative block aspect-video w-[352px] overflow-hidden rounded-lg border transition-all duration-150",
           card.token === selectedRemixCard.value?.token
             ? "border-brand-primary"
             : "border-white/5 hover:border-white/25",
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index 00b3583ac4..b3e027b3c7 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -54,7 +54,7 @@ export const Controls3D = () => {
   return (
     <div>
       <div className="flex justify-center">
-        <div className="rounded-b-lg bg-ui-controls p-1.5 text-white shadow-md">
+        <div className="rounded-b-lg border border-[#3F3F3F] bg-ui-controls p-1.5 text-white shadow-md">
           <div className="flex items-center justify-center gap-3">
             <ButtonIconSelect
               options={modes}
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 12606cd3ea..38988ac02d 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -4,6 +4,7 @@ import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
 import {
   faCheckSquare,
   faFile,
+  faQuestion,
   faSquare,
 } from "@fortawesome/pro-solid-svg-icons";
 
@@ -291,9 +292,7 @@ export const ControlsTopButtons = () => {
           className="shadow-xl"
           iconClassName={twMerge(
             "text-[16px]",
-            outlinerIsShowing.value
-              ? "text-white"
-              : "text-ui-controls-button/90",
+            outlinerIsShowing.value ? "text-white" : "text-white/20",
           )}
           variant="secondary"
           onClick={handleShowOutliner}
@@ -306,6 +305,7 @@ export const ControlsTopButtons = () => {
             variant: "secondary",
             label: "Help",
             className: "shadow-xl",
+            icon: faQuestion,
           }}
           dialogProps={{
             className: "max-w-6xl w-auto",
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx
index 77d9013fdd..aae1bf0a7f 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ScenePicker/SceneCard.tsx
@@ -39,7 +39,7 @@ export const SceneCard: React.FC<SceneCardProps> = ({
     <button
       key={scene.token}
       className={twMerge(
-        "relative aspect-video w-full cursor-pointer overflow-hidden rounded-lg border-2 transition-colors ease-in-out ",
+        "relative aspect-video w-full cursor-pointer overflow-hidden rounded-lg border transition-colors ease-in-out",
         selectedSceneId === scene.token
           ? "border-brand-primary"
           : "border-ui-controls-button/25 hover:border-ui-controls-button",
diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
index 8cd433b6e1..f843378134 100644
--- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
+++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
@@ -140,8 +140,8 @@ export const ControlsVideo = () => {
                   className={twMerge(
                     "h-7 w-7 p-0 text-sm",
                     isRepeating
-                      ? "border-2 border-brand-primary"
-                      : "border-2 border-transparent",
+                      ? "border border-brand-primary"
+                      : "border border-transparent",
                   )}
                 />
               </Tooltip>
diff --git a/app/pages/PageEnigma/comps/DragComponent/DragComponent.tsx b/app/pages/PageEnigma/comps/DragComponent/DragComponent.tsx
index a5de97c106..cdb97682de 100644
--- a/app/pages/PageEnigma/comps/DragComponent/DragComponent.tsx
+++ b/app/pages/PageEnigma/comps/DragComponent/DragComponent.tsx
@@ -47,7 +47,7 @@ export const DragComponent = () => {
             className={[
               "absolute p-2",
               "rounded opacity-60",
-              "border-2-dnd-timeGridBorder border bg-dnd-timeGrid",
+              "border border-dnd-timeGridBorder bg-dnd-timeGrid",
             ].join(" ")}
             style={{
               bottom: timelineHeight.value - 60,
diff --git a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx b/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
index 91a14a6ac9..1e7d09b3fc 100644
--- a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
+++ b/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
@@ -42,7 +42,7 @@ export function CompletedCard({ movie, setMovieId }: Props) {
       }}
     >
       <div className="flex gap-4">
-        <div className="flex h-32 w-32 justify-center overflow-hidden rounded-lg bg-ui-background">
+        <div className="flex h-32 w-32 justify-center overflow-hidden rounded-lg bg-black/60">
           <img
             src={
               loadError ? "/resources/images/movie-placeholder.png" : imageUrl
diff --git a/app/pages/PageEnigma/comps/Outliner/Outliner.tsx b/app/pages/PageEnigma/comps/Outliner/Outliner.tsx
index df5ea41392..525d9208e9 100644
--- a/app/pages/PageEnigma/comps/Outliner/Outliner.tsx
+++ b/app/pages/PageEnigma/comps/Outliner/Outliner.tsx
@@ -207,7 +207,7 @@ export const Outliner = () => {
 
       <div className="relative mx-4 my-2.5">
         <Input
-          inputClassName="h-8 rounded-lg text-sm bg-ui-controls-button/30 pr-8"
+          inputClassName="h-8 rounded-lg text-sm pr-8"
           placeholder="Search..."
           value={searchTerm}
           onInput={handleSearchChange}
diff --git a/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx b/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx
index 03b94857ba..a751444171 100644
--- a/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx
+++ b/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx
@@ -87,7 +87,7 @@ export const PreviewEngineCamera = () => {
       >
         <div
           className={twMerge(
-            "origin -z-10 flex h-auto w-full flex-wrap items-center gap-1.5 rounded-t-lg bg-ui-controls p-2 text-white",
+            "origin -z-10 flex h-auto w-full flex-wrap items-center gap-1.5 rounded-t-lg bg-ui-panel p-2 text-white",
             cameraAspectRatio.value !== CameraAspectRatio.VERTICAL_9_16
               ? "justify-between"
               : "flex-col justify-center",
@@ -118,7 +118,7 @@ export const PreviewEngineCamera = () => {
             )}
 
             <Button
-              variant="action"
+              variant="secondary"
               onClick={handleButtonCameraView}
               className="rounded-md px-2 py-1 text-sm"
             >
diff --git a/app/pages/PageEnigma/comps/PreviewImages.tsx b/app/pages/PageEnigma/comps/PreviewImages.tsx
index 77e2ab4d48..436324e224 100644
--- a/app/pages/PageEnigma/comps/PreviewImages.tsx
+++ b/app/pages/PageEnigma/comps/PreviewImages.tsx
@@ -16,7 +16,7 @@ export const PreviewImages = () => {
   return (
     <div className="flex justify-center gap-1">
       <div
-        className="block w-full overflow-hidden rounded-lg border-2 border-ui-controls/25 bg-ui-panel"
+        className="block w-full overflow-hidden rounded-lg border border-ui-controls/25 bg-ui-panel"
         style={{ height: imageHeight, width: imageWidth }}
       >
         <canvas id="raw-preview" width={imageWidth} height={imageHeight} />
@@ -28,7 +28,7 @@ export const PreviewImages = () => {
         />
       </div>
       <div
-        className="block w-full overflow-hidden rounded-lg border-2 border-ui-controls/25 bg-ui-panel"
+        className="block w-full overflow-hidden rounded-lg border border-ui-controls/25 bg-ui-panel"
         style={{ height: imageHeight, width: imageWidth }}
       >
         <img
diff --git a/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx b/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx
index 6b9c6325b5..fc733d63b3 100644
--- a/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx
+++ b/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx
@@ -30,15 +30,12 @@ export const SidePanel = () => {
     <>
       <div
         className={[
-          "fixed",
-          "z-[25] border-l border-l-ui-panel-border bg-ui-panel",
-          "flex",
-          "transition-all duration-300 ease-in-out",
+          "fixed z-20 flex border-l border-[#3F3F3F] bg-ui-panel transition-all duration-100",
         ].join(" ")}
         style={{
           top: 64,
-          right: 84,
-          width: sidePanelVisible.value ? displayWidth : 0,
+          right: sidePanelVisible.value ? 84 : -320,
+          width: displayWidth,
         }}
       >
         <div className="relative block h-full w-full bg-ui-panel">
diff --git a/app/pages/PageEnigma/comps/SidePanelMenu/SidePanelMenu.tsx b/app/pages/PageEnigma/comps/SidePanelMenu/SidePanelMenu.tsx
index 310d9989bf..8c328932ed 100644
--- a/app/pages/PageEnigma/comps/SidePanelMenu/SidePanelMenu.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelMenu/SidePanelMenu.tsx
@@ -36,8 +36,8 @@ export const SidePanelMenu = ({
     <div
       className={twMerge(
         "fixed z-[25] bg-assets-background",
-        "right-0 top-[64px] w-[84px] px-2 py-2",
-        "overflow-y-auto",
+        "right-0 top-[64px] w-[84px] overflow-auto border-l px-2 py-2",
+        sidePanelVisible.value ? "border-transparent" : "border-[#3F3F3F]",
       )}
       style={{
         height: pageHeight.value - 64,
@@ -61,9 +61,9 @@ export const SidePanelMenu = ({
             <button
               key={tab.title}
               className={twMerge([
-                "flex flex-col items-center rounded-lg border-2 border-transparent px-2 py-3 transition-all duration-200 hover:bg-assets-selectedTab/70",
-                tab.title === selectedTab.title
-                  ? "bg-assets-selectedTab opacity-100 hover:bg-assets-selectedTab"
+                "flex flex-col items-center rounded-lg border border-transparent px-2 py-3 transition-all duration-200 hover:bg-brand-secondary",
+                tab.title === selectedTab.title && sidePanelVisible.value
+                  ? "border-[#3F3F3F] bg-brand-secondary-900/60 opacity-100 hover:bg-brand-secondary-900/60"
                   : "opacity-60",
                 tab.title === TabTitles.RENDER &&
                   "bg-brand-primary font-medium opacity-90 hover:border-white/25 hover:bg-brand-primary hover:opacity-100",
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx
index c7c33a0690..bb5adb72fe 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElement.tsx
@@ -25,7 +25,7 @@ const mapCharacterObejctType = (mediaType: string) => {
     }
   }
 };
-const patchExpressionObejctType = (mediaType: string) => {
+const patchExpressionObjectType = (mediaType: string) => {
   const typeCased = mediaType.toLowerCase();
   if (typeCased === "vmd") {
     return "Mixamo";
@@ -49,7 +49,7 @@ export const ItemElement = ({ item }: Props) => {
             item.type === AssetType.CHARACTER
               ? mapCharacterObejctType(item.media_type)
               : item.type === AssetType.EXPRESSION
-                ? patchExpressionObejctType(item.media_type)
+                ? patchExpressionObjectType(item.media_type)
                 : item.media_type.toUpperCase()
           }
           className="absolute right-0 mr-[3px] mt-[3px]"
@@ -65,7 +65,7 @@ export const ItemElement = ({ item }: Props) => {
         alt={item.name}
         className="pointer-events-none aspect-[4.5/5] w-full select-none bg-gradient-to-b from-[#CCCCCC] to-[#A0A0A0] object-cover object-center"
       />
-      <div className="pointer-events-none w-full select-none truncate bg-ui-controls px-2 py-1 text-center text-[12px] transition-all duration-200 group-hover:bg-ui-controls-button/50">
+      <div className="pointer-events-none w-full select-none truncate bg-brand-secondary-950 px-2 py-1 text-center text-[12px] transition-all duration-200 group-hover:bg-brand-secondary-800">
         {item.name || item.media_id}
       </div>
     </div>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/audioItemElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/audioItemElement.tsx
index b9567a24cf..2e3c390bde 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/audioItemElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/audioItemElement.tsx
@@ -35,7 +35,7 @@ export const AudioItemElement = ({ item }: Props) => {
         DndAsset.onPointerDown(event, item);
       }}
     >
-      <div className="flex w-full flex-col gap-0.5 rounded-lg bg-assets-background p-2.5">
+      <div className="flex w-full flex-col gap-0.5 rounded-lg bg-brand-secondary p-2.5">
         <div className="flex justify-between">
           <AudioTypePill category={item.category} />
           {/* <p>{item.length}</p> */}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageTTS.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageTTS.tsx
index cce7f03597..7a460af999 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageTTS.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageTTS.tsx
@@ -65,7 +65,7 @@ export const PageTTS = ({
         className="flex cursor-pointer items-center justify-between gap-3 rounded-lg bg-brand-secondary p-3 text-start transition-all hover:bg-ui-controls-button/40"
         onClick={() => changePage(AudioTabPages.SELECT_TTS_MODEL)}
       >
-        <span className="h-12 w-12 rounded-lg bg-ui-controls-button/100" />
+        <span className="h-12 w-12 rounded-lg bg-white/10" />
         <div className="grow">
           {!ttsState.voice && <H4>None Selected</H4>}
           {ttsState.voice && (
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageVoiceToVoice.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageVoiceToVoice.tsx
index 566be93db3..2699964941 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageVoiceToVoice.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/pageVoiceToVoice.tsx
@@ -55,7 +55,7 @@ export const PageVoicetoVoice = ({
           className="flex cursor-pointer items-center justify-between gap-3 rounded-lg bg-brand-secondary p-3 text-start transition-all hover:bg-ui-controls-button/40"
           onClick={() => changePage(AudioTabPages.SELECT_V2V_MODEL)}
         >
-          <span className="h-12 w-12 rounded-lg bg-ui-controls-button/100" />
+          <span className="h-12 w-12 rounded-lg bg-white/10" />
           <div className="grow">
             {!v2vState.voice && <H4>None Selected</H4>}
             {v2vState.voice && (
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/voiceModelElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/voiceModelElement.tsx
index dd2c0347bb..8852669cf2 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/voiceModelElement.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/AudioTab/voiceModelElement.tsx
@@ -12,10 +12,10 @@ export const VoiceModelElement = ({
 
   return (
     <button
-      className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border-2 border-transparent bg-brand-secondary p-3 text-start transition-all hover:border-ui-controls-button hover:bg-ui-controls-button/40"
+      className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-transparent bg-brand-secondary p-3 text-start transition-all hover:border-ui-controls-button hover:bg-ui-controls-button/40"
       onClick={() => onSelect(model)}
     >
-      <span className="h-12 w-12 rounded-lg bg-ui-controls-button/100" />
+      <span className="h-12 w-12 rounded-lg bg-white/10" />
       <div className="grow">
         <H4>{model.title}</H4>
         {creatorName && <H6 className="text-white/70">{creatorName}</H6>}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/GenerateMovieButton.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/GenerateMovieButton.tsx
index 02c2a5afe0..a8682a0a8b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/GenerateMovieButton.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/GenerateMovieButton.tsx
@@ -73,7 +73,7 @@ export function GenerateMovieButton({
   return (
     <div
       ref={ref}
-      className="absolute bottom-0 border-t border-white/15 bg-ui-controls/60 p-4 shadow-lg"
+      className="absolute bottom-0 border-t border-[#3F3F3F] bg-ui-controls/60 p-4 shadow-lg"
     >
       <Label>
         <div className="mb-2 leading-tight">
@@ -87,7 +87,7 @@ export function GenerateMovieButton({
       <Button
         icon={faFilm}
         variant="primary"
-        className="w-full"
+        className="h-11 w-full"
         onClick={generateMovie}
       >
         Generate Movie
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx
index 8ea962d538..4fc8ef0f94 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx
@@ -193,7 +193,7 @@ export const IPAdapter: React.FC = () => {
 
   const DragAndDropZone = () => {
     return (
-      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border-2 border-dashed border-ui-controls-button/50 bg-brand-secondary p-3 transition-all duration-150 hover:bg-ui-controls-button/40">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#3F3F3F] bg-brand-secondary p-3 transition-all duration-150 hover:bg-ui-controls-button/40">
         <FontAwesomeIcon icon={faFileImage} className="text-3xl" />
         <div className="flex flex-col gap-0 text-sm">
           <P className="font-medium">
@@ -232,7 +232,7 @@ export const IPAdapter: React.FC = () => {
             name="file"
             types={FILE_TYPES}
           >
-            <div className="relative h-[88px] cursor-pointer overflow-hidden rounded-lg border-2 border-white/10 bg-black/25">
+            <div className="relative h-[88px] cursor-pointer overflow-hidden rounded-lg border border-white/10 bg-black/25">
               <img
                 src={adapterImage.value}
                 alt="IPAdapter"
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/ItemPicker.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/ItemPicker.tsx
index 596cd59289..641911bcfb 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/ItemPicker.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/ItemPicker.tsx
@@ -40,10 +40,10 @@ export const ItemPicker = ({
   return (
     <button
       className={twMerge(
-        "relative cursor-pointer overflow-hidden rounded-lg border-2 transition-colors ease-in-out",
+        "relative cursor-pointer overflow-hidden rounded-lg border transition-colors ease-in-out",
         selected
           ? "border-brand-primary"
-          : "border-[#4B4B5C] hover:border-ui-controls-button",
+          : "border-[#3F3F3F] hover:border-brand-primary",
         className,
       )}
       style={{
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/Prompts.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/Prompts.tsx
index d600656005..dbec793d69 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/Prompts.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/Prompts.tsx
@@ -73,7 +73,7 @@ export const Prompts = () => {
       <div className="relative w-full">
         <Textarea
           label="Enter a Prompt"
-          className="w-full"
+          className="w-full text-sm"
           rows={3}
           name="positive-prompt"
           placeholder="Type here to describe your scene"
@@ -106,7 +106,7 @@ export const Prompts = () => {
             <div className="relative w-full">
               <Textarea
                 label="Negative Prompt"
-                className="w-full"
+                className="w-full text-sm"
                 rows={2}
                 name="negative-prompt"
                 placeholder="Type here to filter out the things you don't want in the scene"
@@ -141,7 +141,7 @@ export const Prompts = () => {
         <div className="relative w-full">
           <Textarea
             label="Negative Prompt"
-            className="w-full"
+            className="w-full text-sm"
             rows={2}
             name="negative-prompt"
             placeholder="Type here to filter out the things you don't want in the scene"
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleButtons.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleButtons.tsx
index 84e4ce12f3..e844a10aa4 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleButtons.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleButtons.tsx
@@ -9,22 +9,10 @@ import { useSignals } from "@preact/signals-react/runtime";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
-
-import {
-  faceDetail,
-  upscale,
-  lipSync,
-  cinematic,
-  enginePreProcessing,
-} from "~/pages/PageEnigma/signals/stylizeTab";
-
-import { useContext } from "react";
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
 import { StyleStrength } from "~/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleStrength";
 import { StyleOptions } from "~/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleOptions";
 export function StyleButtons() {
   useSignals();
-  const editorEngine = useContext(EngineContext);
 
   const switchPreview = async () => {
     if (editorState.value === EditorStates.EDIT) {
@@ -59,7 +47,7 @@ export function StyleButtons() {
 
   return (
     <div className="flex w-full flex-col justify-center gap-4 rounded-b-lg bg-ui-panel">
-      <div className="w-full">
+      <div className="flex w-full flex-col gap-3">
         <div className="w-full">
           <Label>Render the camera view with AI</Label>
           <div className="mb-2 text-xs text-white/70">
@@ -69,7 +57,7 @@ export function StyleButtons() {
             <>
               <Button
                 icon={faArrowsRotate}
-                variant="primary"
+                variant="action"
                 className="mt-1.5 w-full"
                 onClick={switchPreview}
               >
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleOptions.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleOptions.tsx
index 136b1fc019..a0acdd216b 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleOptions.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleOptions.tsx
@@ -66,7 +66,7 @@ export function StyleOptions() {
                 className={twMerge(
                   lipSync.value
                     ? "bg-brand-primary hover:bg-brand-primary-400"
-                    : "bg-gray-500 hover:bg-gray-400",
+                    : "bg-brand-secondary-800 hover:bg-brand-secondary-600",
                   "focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
                 )}
               >
@@ -98,7 +98,7 @@ export function StyleOptions() {
                   className={twMerge(
                     faceDetail.value
                       ? "bg-brand-primary hover:bg-brand-primary-400"
-                      : "bg-gray-500 hover:bg-gray-400",
+                      : "bg-brand-secondary-800 hover:bg-brand-secondary-600",
                     "focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
                   )}
                 >
@@ -128,7 +128,7 @@ export function StyleOptions() {
                   className={twMerge(
                     upscale.value
                       ? "bg-brand-primary hover:bg-brand-primary-400"
-                      : "bg-gray-500 hover:bg-gray-400",
+                      : "bg-brand-secondary-800 hover:bg-brand-secondary-600",
                     "relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
                   )}
                 >
@@ -157,7 +157,7 @@ export function StyleOptions() {
                   className={twMerge(
                     cinematic.value
                       ? "bg-brand-primary hover:bg-brand-primary-400"
-                      : "bg-gray-500 hover:bg-gray-400",
+                      : "bg-brand-secondary-800 hover:bg-brand-secondary-600",
                     "focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-all focus:outline-none focus:ring-0 focus:ring-offset-0",
                   )}
                 >
@@ -185,7 +185,7 @@ export function StyleOptions() {
                   className={twMerge(
                     enginePreProcessing.value
                       ? "bg-brand-primary hover:bg-brand-primary-400"
-                      : "bg-gray-500 hover:bg-gray-400",
+                      : "bg-brand-secondary-800 hover:bg-brand-secondary-600",
                     "focus:ring-indigo-500 relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0",
                   )}
                 >
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelectionButton.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelectionButton.tsx
index 67d0aa2db4..99242c9c92 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelectionButton.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleSelectionButton.tsx
@@ -30,7 +30,7 @@ export function StyleSelectionButton({
     <div className="flex flex-col">
       <Label>Select a Style</Label>
       <button
-        className="flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border-2 border-white/30 bg-ui-controls-button/70 p-2 pr-3 text-start transition-all hover:border-brand-primary hover:bg-ui-controls-button/60"
+        className="flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border border-[#3F3F3F] bg-brand-secondary p-2 pr-3 text-start transition-all hover:border-brand-primary hover:bg-brand-primary/20"
         onClick={onClick}
       >
         <div className="aspect-video w-20 overflow-hidden rounded-md bg-ui-controls-button/100">
diff --git a/app/pages/PageEnigma/comps/StyleSelection/ItemPicker.tsx b/app/pages/PageEnigma/comps/StyleSelection/ItemPicker.tsx
index 27169a219a..4c99546a65 100644
--- a/app/pages/PageEnigma/comps/StyleSelection/ItemPicker.tsx
+++ b/app/pages/PageEnigma/comps/StyleSelection/ItemPicker.tsx
@@ -23,10 +23,10 @@ export const ItemPicker = ({
   return (
     <button
       className={twMerge(
-        "relative aspect-video cursor-pointer overflow-hidden rounded-lg border-2 transition-colors ease-in-out",
+        "relative aspect-video cursor-pointer overflow-hidden rounded-lg border transition-colors ease-in-out",
         selected
           ? "border-brand-primary"
-          : "border-ui-controls-button/25 hover:border-ui-controls-button",
+          : "border-[#3F3F3F] hover:border-brand-primary",
       )}
       onClick={handleSelected}
     >
diff --git a/app/pages/PageEnigma/comps/Timeline/PremiumLockTimeline.tsx b/app/pages/PageEnigma/comps/Timeline/PremiumLockTimeline.tsx
index 334e4a4c68..23ffee1736 100644
--- a/app/pages/PageEnigma/comps/Timeline/PremiumLockTimeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/PremiumLockTimeline.tsx
@@ -20,7 +20,7 @@ export default function PremiumLockTimeline({
             className="absolute top-1/2 ml-[720px] -translate-y-1/2 transform border-l border-[#43435C] bg-ui-panel/70 backdrop-blur-sm"
           >
             <div className="flex h-full w-full flex-col justify-center pl-12">
-              <div className="flex w-[400px] flex-col gap-1 rounded-lg border-2 border-white/40 bg-ui-controls p-4 text-center shadow-lg">
+              <div className="flex w-[400px] flex-col gap-1 rounded-lg border border-white/40 bg-ui-controls p-4 text-center shadow-lg">
                 <h6 className="text-md font-medium">
                   Your timeline is currently limited to 3 seconds.
                 </h6>
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
index 9211aaaf75..b20c99d46e 100644
--- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
@@ -47,7 +47,7 @@ export const TrackClip = ({ clip, min, max, group, updateClip }: Props) => {
       <button
         className={[
           ...classes,
-          "w-[15px] rounded-l-md border-2 border-transparent",
+          "w-[15px] rounded-l-md border border-transparent",
           "block h-full cursor-ew-resize",
           clip.clip_uuid === selectedClipId
             ? "border border-b-2 border-l-2 border-r-0 border-t-2"
@@ -109,7 +109,7 @@ export const TrackClip = ({ clip, min, max, group, updateClip }: Props) => {
       <button
         className={[
           ...classes,
-          "w-[15px] rounded-r-md border-2 border-transparent",
+          "w-[15px] rounded-r-md border border-transparent",
           "block h-full cursor-ew-resize",
           clip.clip_uuid === selectedClipId
             ? "border border-b-2 border-l-0 border-r-2 border-t-2"
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClipPrompt.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClipPrompt.tsx
index 4180949d2c..c435fa9ce5 100644
--- a/app/pages/PageEnigma/comps/Timeline/TrackClipPrompt.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClipPrompt.tsx
@@ -66,7 +66,7 @@ export const TrackClipPrompt = ({
       <button
         className={[
           ...classes,
-          "z-40 w-[15px] rounded-l-md border-2 border-transparent",
+          "z-40 w-[15px] rounded-l-md border border-transparent",
           "block h-full cursor-ew-resize",
           clip.clip_uuid === selectedClipId
             ? "border border-b-2 border-l-2 border-r-0 border-t-2"
@@ -154,7 +154,7 @@ export const TrackClipPrompt = ({
       <button
         className={[
           ...classes,
-          "z-50 w-[15px] rounded-r-md border-2 border-transparent",
+          "z-50 w-[15px] rounded-r-md border border-transparent",
           "block h-full cursor-ew-resize",
           clip.clip_uuid === selectedClipId
             ? "border border-b-2 border-l-0 border-r-2 border-t-2"
diff --git a/app/pages/PageEnigma/signals/outliner/outliner.ts b/app/pages/PageEnigma/signals/outliner/outliner.ts
index e1f6746eaa..ec629f034b 100644
--- a/app/pages/PageEnigma/signals/outliner/outliner.ts
+++ b/app/pages/PageEnigma/signals/outliner/outliner.ts
@@ -1,6 +1,5 @@
 import { signal } from "@preact/signals-core";
 import { SceneObject } from "./types";
-import { faCamera, faCube, faPerson } from "@fortawesome/pro-solid-svg-icons";
 import { SceneManager } from "../../Editor/scene_manager_api";
 
 export const outlinerState = {
diff --git a/app/styles/base.css b/app/styles/base.css
index 94315b26d4..970fda564e 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -1,6 +1,6 @@
 * {
   scrollbar-width: thin;
-  scrollbar-color: #676781 #39394d79;
+  scrollbar-color: #3f3f3f #39394d79;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -9,7 +9,7 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: #39394d;
+  background: #2e2e2e;
 }
 
 *::-webkit-scrollbar-thumb {
@@ -91,57 +91,57 @@ img {
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background-color: #393948;
-  color: #393948;
+  background-color: #ffffff30;
+  color: #ffffff30;
   box-shadow:
-    9984px 0 0 0 #393948,
-    9999px 0 0 0 #393948,
-    10014px 0 0 0 #393948;
+    9984px 0 0 0 #ffffff30,
+    9999px 0 0 0 #ffffff30,
+    10014px 0 0 0 #ffffff30;
   animation: dot-typing 1.5s infinite linear;
 }
 
 @keyframes dot-typing {
   0% {
     box-shadow:
-      9984px 0 0 0 #393948,
-      9999px 0 0 0 #393948,
-      10014px 0 0 0 #393948;
+      9984px 0 0 0 #ffffff30,
+      9999px 0 0 0 #ffffff30,
+      10014px 0 0 0 #ffffff30;
   }
   16.667% {
     box-shadow:
-      9984px -10px 0 0 #393948,
-      9999px 0 0 0 #393948,
-      10014px 0 0 0 #393948;
+      9984px -10px 0 0 #ffffff30,
+      9999px 0 0 0 #ffffff30,
+      10014px 0 0 0 #ffffff30;
   }
   33.333% {
     box-shadow:
-      9984px 0 0 0 #393948,
-      9999px 0 0 0 #393948,
-      10014px 0 0 0 #393948;
+      9984px 0 0 0 #ffffff30,
+      9999px 0 0 0 #ffffff30,
+      10014px 0 0 0 #ffffff30;
   }
   50% {
     box-shadow:
-      9984px 0 0 0 #393948,
-      9999px -10px 0 0 #393948,
-      10014px 0 0 0 #393948;
+      9984px 0 0 0 #ffffff30,
+      9999px -10px 0 0 #ffffff30,
+      10014px 0 0 0 #ffffff30;
   }
   66.667% {
     box-shadow:
-      9984px 0 0 0 #393948,
-      9999px 0 0 0 #393948,
-      10014px 0 0 0 #393948;
+      9984px 0 0 0 #ffffff30,
+      9999px 0 0 0 #ffffff30,
+      10014px 0 0 0 #ffffff30;
   }
   83.333% {
     box-shadow:
-      9984px 0 0 0 #393948,
-      9999px 0 0 0 #393948,
-      10014px -10px 0 0 #393948;
+      9984px 0 0 0 #ffffff30,
+      9999px 0 0 0 #ffffff30,
+      10014px -10px 0 0 #ffffff30;
   }
   100% {
     box-shadow:
-      9984px 0 0 0 #393948,
-      9999px 0 0 0 #393948,
-      10014px 0 0 0 #393948;
+      9984px 0 0 0 #ffffff30,
+      9999px 0 0 0 #ffffff30,
+      10014px 0 0 0 #ffffff30;
   }
 }
 
@@ -157,93 +157,93 @@ img {
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background-color: #393948;
-  color: #393948;
+  background-color: #ffffff30;
+  color: #ffffff30;
   box-shadow:
-    9991px -16px 0 0 #393948,
-    9991px 0 0 0 #393948,
-    10007px 0 0 0 #393948;
+    9991px -16px 0 0 #ffffff30,
+    9991px 0 0 0 #ffffff30,
+    10007px 0 0 0 #ffffff30;
   animation: dot-bricks 2s infinite ease;
 }
 
 @keyframes dot-bricks {
   0% {
     box-shadow:
-      9991px -16px 0 0 #393948,
-      9991px 0 0 0 #393948,
-      10007px 0 0 0 #393948;
+      9991px -16px 0 0 #ffffff30,
+      9991px 0 0 0 #ffffff30,
+      10007px 0 0 0 #ffffff30;
   }
   8.333% {
     box-shadow:
-      10007px -16px 0 0 #393948,
-      9991px 0 0 0 #393948,
-      10007px 0 0 0 #393948;
+      10007px -16px 0 0 #ffffff30,
+      9991px 0 0 0 #ffffff30,
+      10007px 0 0 0 #ffffff30;
   }
   16.667% {
     box-shadow:
-      10007px -16px 0 0 #393948,
-      9991px -16px 0 0 #393948,
-      10007px 0 0 0 #393948;
+      10007px -16px 0 0 #ffffff30,
+      9991px -16px 0 0 #ffffff30,
+      10007px 0 0 0 #ffffff30;
   }
   25% {
     box-shadow:
-      10007px -16px 0 0 #393948,
-      9991px -16px 0 0 #393948,
-      9991px 0 0 0 #393948;
+      10007px -16px 0 0 #ffffff30,
+      9991px -16px 0 0 #ffffff30,
+      9991px 0 0 0 #ffffff30;
   }
   33.333% {
     box-shadow:
-      10007px 0 0 0 #393948,
-      9991px -16px 0 0 #393948,
-      9991px 0 0 0 #393948;
+      10007px 0 0 0 #ffffff30,
+      9991px -16px 0 0 #ffffff30,
+      9991px 0 0 0 #ffffff30;
   }
   41.667% {
     box-shadow:
-      10007px 0 0 0 #393948,
-      10007px -16px 0 0 #393948,
-      9991px 0 0 0 #393948;
+      10007px 0 0 0 #ffffff30,
+      10007px -16px 0 0 #ffffff30,
+      9991px 0 0 0 #ffffff30;
   }
   50% {
     box-shadow:
-      10007px 0 0 0 #393948,
-      10007px -16px 0 0 #393948,
-      9991px -16px 0 0 #393948;
+      10007px 0 0 0 #ffffff30,
+      10007px -16px 0 0 #ffffff30,
+      9991px -16px 0 0 #ffffff30;
   }
   58.333% {
     box-shadow:
-      9991px 0 0 0 #393948,
-      10007px -16px 0 0 #393948,
-      9991px -16px 0 0 #393948;
+      9991px 0 0 0 #ffffff30,
+      10007px -16px 0 0 #ffffff30,
+      9991px -16px 0 0 #ffffff30;
   }
   66.666% {
     box-shadow:
-      9991px 0 0 0 #393948,
-      10007px 0 0 0 #393948,
-      9991px -16px 0 0 #393948;
+      9991px 0 0 0 #ffffff30,
+      10007px 0 0 0 #ffffff30,
+      9991px -16px 0 0 #ffffff30;
   }
   75% {
     box-shadow:
-      9991px 0 0 0 #393948,
-      10007px 0 0 0 #393948,
-      10007px -16px 0 0 #393948;
+      9991px 0 0 0 #ffffff30,
+      10007px 0 0 0 #ffffff30,
+      10007px -16px 0 0 #ffffff30;
   }
   83.333% {
     box-shadow:
-      9991px -16px 0 0 #393948,
-      10007px 0 0 0 #393948,
-      10007px -16px 0 0 #393948;
+      9991px -16px 0 0 #ffffff30,
+      10007px 0 0 0 #ffffff30,
+      10007px -16px 0 0 #ffffff30;
   }
   91.667% {
     box-shadow:
-      9991px -16px 0 0 #393948,
-      9991px 0 0 0 #393948,
-      10007px -16px 0 0 #393948;
+      9991px -16px 0 0 #ffffff30,
+      9991px 0 0 0 #ffffff30,
+      10007px -16px 0 0 #ffffff30;
   }
   100% {
     box-shadow:
-      9991px -16px 0 0 #393948,
-      9991px 0 0 0 #393948,
-      10007px 0 0 0 #393948;
+      9991px -16px 0 0 #ffffff30,
+      9991px 0 0 0 #ffffff30,
+      10007px 0 0 0 #ffffff30;
   }
 }
 
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 27ca1eddae..63b18e5b52 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -4,14 +4,14 @@
 
 @layer components {
   .filter-tab {
-    @apply text-nowrap rounded-lg border-2 border-assets-background bg-assets-background px-2.5 py-1 text-[13px] font-medium text-white/80 transition-all duration-150 hover:border-assets-background/0 hover:bg-assets-background/80;
+    @apply text-nowrap rounded-lg border border-[#3F3F3F] bg-ui-controls-button px-2.5 py-1 text-[13px] font-medium text-white/80 transition-all duration-150 hover:border-brand-primary/50 hover:bg-assets-background/80;
   }
 
   .filter-tab.active {
-    @apply border-2 border-brand-primary text-white hover:border-brand-primary hover:bg-assets-background;
+    @apply border border-brand-primary text-white hover:border-brand-primary hover:bg-ui-controls-button;
   }
 
   .filter-tab:disabled {
-    @apply border-transparent bg-assets-background/50 hover:border-transparent disabled:text-white/30;
+    @apply border-transparent bg-ui-controls-button/50 hover:border-transparent disabled:text-white/30;
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 39d9c9e301..9d5a0d4f8b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -43,18 +43,18 @@ export default {
       },
       "brand-secondary": {
         //gunpowder
-        DEFAULT: "#39394c", //=950
-        "50": "#f5f6f9",
-        "100": "#e8eaf1",
-        "200": "#d7dbe6",
-        "300": "#bbc1d5",
-        "400": "#9aa2c0",
-        "500": "#8188b0",
-        "600": "#6f74a1",
-        "700": "#636492",
-        "800": "#545579",
-        "900": "#464762",
-        "950": "#39394c",
+        DEFAULT: "#2E2E2E",
+        "50": "#f6f6f6",
+        "100": "#e7e7e7",
+        "200": "#d1d1d1",
+        "300": "#b0b0b0",
+        "400": "#888888",
+        "500": "#6d6d6d",
+        "600": "#5d5d5d",
+        "700": "#4f4f4f",
+        "800": "#454545",
+        "900": "#3d3d3d",
+        "950": "#2e2e2e",
       },
       "brand-tertiary": {
         //Aquamarine Blue
@@ -105,18 +105,18 @@ export default {
 
       action: {
         //comet
-        DEFAULT: "#55556b", //600
-        "50": "#f7f7f8",
-        "100": "#eeedf1",
-        "200": "#d8d8df",
-        "300": "#b5b5c4",
-        "400": "#8d8da3",
-        "500": "#6f7088",
-        "600": "#55556b",
-        "700": "#49495b",
-        "800": "#3f3f4d",
-        "900": "#373743",
-        "950": "#26252c",
+        DEFAULT: "#2E2E2E",
+        "50": "#f6f6f6",
+        "100": "#e7e7e7",
+        "200": "#d1d1d1",
+        "300": "#b0b0b0",
+        "400": "#888888",
+        "500": "#6d6d6d",
+        "600": "#5d5d5d",
+        "700": "#4f4f4f",
+        "800": "#454545",
+        "900": "#3d3d3d",
+        "950": "#2e2e2e",
       },
 
       character: {
@@ -159,8 +159,8 @@ export default {
         selected: "#FFDE67",
       },
       assets: {
-        background: "#39394D",
-        selectedTab: "#55556B",
+        background: "#242424",
+        selectedTab: "#2E2E2E",
       },
       dnd: {
         canDrop: "#46936E",
@@ -172,11 +172,11 @@ export default {
       },
 
       ui: {
-        background: "#1a1a27",
-        panel: "#242433",
-        "panel-border": "#393948",
-        controls: "#39394D",
-        "controls-button": "#676781",
+        background: "#242424",
+        panel: "#1F1F1F",
+        "panel-border": "#3F3F3F",
+        controls: "#2E2E2E",
+        "controls-button": "#2E2E2E",
         divider: "#515168",
       },