From 149d26534bfb4815ff38ad3b9ee413c31337c0d7 Mon Sep 17 00:00:00 2001
From: wil <wilwong@users.noreply.github.com>
Date: Fri, 12 Jul 2024 16:59:06 -0400
Subject: [PATCH] Styling/ font change cont (#626)

- fixed some font alignments things here and there
- there's a missing variable uncollected for scene generation meta,
fixed it

Co-authored-by: wil <wil@storyteller.ai>
---
 .../reusable/ButtonIconSelect/ButtonIconSelect.tsx         | 7 +++++--
 .../comps/ControlsTopButtons/ControlsTopButtons.tsx        | 4 ++++
 app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx b/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx
index 1c86c488d4..78c28eedfa 100644
--- a/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx
+++ b/app/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx
@@ -41,9 +41,12 @@ export function ButtonIconSelect({
               ? "border-brand-primary bg-ui-panel/[0.3]"
               : "border-transparent hover:bg-ui-panel/[0.4]",
           )}
-          onClick={() => handleOptionChange(value)}>
+          onClick={() => handleOptionChange(value)}
+        >
           <FontAwesomeIcon icon={icon} />
-          {text && <span className="text-sm font-medium">{text}</span>}
+          {text && (
+            <span className="text-nowrap text-sm font-medium">{text}</span>
+          )}
         </button>
       ))}
     </div>
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
index ef264d12f9..12606cd3ea 100644
--- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -31,6 +31,7 @@ import { SceneGenereationMetaData as SceneGenerationMetaData } from "~/pages/Pag
 import {
   cameraAspectRatio,
   cinematic,
+  enginePreProcessing,
   faceDetail,
   globalIPAMediaToken,
   lipSync,
@@ -83,6 +84,7 @@ export const ControlsTopButtons = () => {
         styleStrength: styleStrength.value,
         lipSync: lipSync.value,
         cinematic: cinematic.value,
+        enginePreProcessing: enginePreProcessing.value,
       };
     },
     [],
@@ -150,6 +152,8 @@ export const ControlsTopButtons = () => {
   };
 
   useSignalEffect(() => {
+    //TODO: USE SIGNAL EFFECT SHOULD BE PERFORM ELSEWHERE
+    // WHERE THIS OPERATION IS EXPECTED
     if (!scene.value.isInitializing) {
       setSceneTitleInput(scene.value.title || "");
       const currentLocation = getCurrentLocationWithoutParams(
diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
index 7fc7e67d94..6f560828bf 100644
--- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
+++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
@@ -106,7 +106,7 @@ export const ControlsVideo = () => {
         </div>
         <div className="mr-2 flex items-center gap-1.5 text-sm font-medium">
           <span className="w-[54px]">{formatTime(scrubberTime.value)}</span>
-          <span className="opacity-50">/</span>
+          <span className="pl-2 opacity-50">/</span>
           <span className="w-[54px] opacity-50">
             {formatTime(filmLength.value * 60)}
           </span>