perfect styling

app/components/InputVector.tsx

@@ -1,4 +1,5 @@
 import { useRef } from "react";
+import { twMerge } from "tailwind-merge";
 
 
 interface InputVectorProps {
@@ -20,7 +21,9 @@ export const InputVector = ({
   const yRef = useRef<HTMLInputElement>(null);
   const zRef = useRef<HTMLInputElement>(null);
 
-  const className="relative w-14 h-8 rounded-r-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary";
+  const inputCommonClasses ="relative w-14 h-8 rounded-r-md bg-brand-secondary p-3 text-base text-white transition-all duration-150 ease-in-out outline-none -outline-offset-2 ";
+
+  const wrapperCommonClasses = "flex items-center before:inline-block before:w-10 before:h-10 before:bg-brand-primary before:text-white before:rounded-l-md before:h-8 before:w-4 before:text-center before:align-middle before:leading-8 text-xs";
 
   function handleOnChange(){
     const newVector = {
@@ -32,24 +35,31 @@ export const InputVector = ({
   }
   return(
     <div className="w-full flex justify-between gap-2">
-      <input
-        className={className}
-        onChange={handleOnChange}
-        ref={xRef}
-        value={x}
-      />
-      <input
-        className={className}
-        onChange={handleOnChange}
-        ref={yRef}
-        value={y}
-      />
-      <input
-        className={className}
-        onChange={handleOnChange}
-        ref={zRef}
-        value={z}
-      />
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-x before:content-['X']")}>
+        <input 
+          className={twMerge(inputCommonClasses, "focus:outline-axis-x")}
+          onChange={handleOnChange}
+          ref={xRef}
+          value={x}
+          
+        />
+      </span>
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-y before:content-['Y']")}>
+        <input
+          className={twMerge(inputCommonClasses, "focus:outline-axis-y")}
+          onChange={handleOnChange}
+          ref={yRef}
+          value={y}
+        />
+      </span>
+      <span className={twMerge(wrapperCommonClasses, "before:bg-axis-z before:content-['Z']")}>
+        <input
+          className={twMerge(inputCommonClasses, "focus:outline-axis-z")}
+          onChange={handleOnChange}
+          ref={zRef}
+          value={z}
+        />
+      </span>
     </div>
   );
 }

app/pages/PageEnigma/PageEnigmaComponent.tsx

@@ -81,10 +81,7 @@ export const PageEnigmaComponent = () => {
                   <div className="absolute bottom-0 left-0 w-full">
                     <PreviewEngineCamera />
                     <ControlsVideo />
-                    <ControlPanelSceneObject
-                      isShowing={appUiState.currentSceneObject.isShowing}
-                      {...appUiState.currentSceneObject.objectVectors}
-                    />
+                    <ControlPanelSceneObject/>
                   </div>
                 </div>
                 {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && (

app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -1,17 +1,17 @@
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
 import { Transition } from "@headlessui/react";
 import { faArrowRightArrowLeft, faCube, faTrash} from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { AppUiContext } from '../../contexts/AppUiContext';
-import { Button, H4, InputVector } from "~/components";
+import { Button, H4, H6, InputVector } from "~/components";
 
 import { XYZ } from '../../datastructures/common';
 
 
 
 export const ControlPanelSceneObject = () => {
-  const [appUiState,dispatchAppUiState ] = useContext(AppUiContext);
+  const [appUiState, dispatchAppUiState ] = useContext(AppUiContext);
 
   const position = appUiState?.currentSceneObject.objectVectors.position;
   const rotation = appUiState?.currentSceneObject.objectVectors.rotation;
@@ -29,9 +29,6 @@ export const ControlPanelSceneObject = () => {
     console.log(xyz);
     // setScalar(xyz);
   }
-  // useEffect(()=>{
-    
-  // },[position,rotation,scalar]);
 
   return(
     <Transition
@@ -50,8 +47,8 @@ export const ControlPanelSceneObject = () => {
           <p>Object Name</p>
         </div>
         <div className="flex items-center gap-2">
-          <FontAwesomeIcon icon={faArrowRightArrowLeft}/>
-          <p>Swap Object</p>
+          <FontAwesomeIcon icon={faArrowRightArrowLeft} size="xs" />
+          <H6>Swap Object</H6>
         </div>
       </div>
       <span className='h-1'/>

tailwind.config.ts

@@ -126,9 +126,16 @@ export default {
       "ui-controls-button": "#676781",
       "ui-divider": "#515168",
 
+      "axis-x" :"#D33242",
+      "axis-y" :"#308752",
+      "axis-z" :"#2E70FF",
+      red:  "#D33242",
+      green:"#308752",
+      blue: "#2E70FF",
+
+      white: colors.white,
       gray: colors.gray,
       black: colors.black,
-      white: colors.white,
     },
   },
   plugins: [],