darker ui styling updates (#674)

app/components/reusable/Button/Button.tsx

@@ -45,7 +45,7 @@ export const Button = ({
   );
 
   const className = twMerge(
-    "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",
+    "text-sm font-medium rounded-lg px-3 py-2 border border-[#363636] 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,

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 border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#363636] 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 border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
+    <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
       <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
       <div className="flex grow flex-col gap-0">
         <P className="font-medium">

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 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",
+              "h-10 w-full rounded-lg bg-brand-secondary/80 px-3 py-2.5 text-white placeholder-white/50 outline-none",
+              "border border-[#363636] 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,

app/components/reusable/InputVector/InputVector.tsx

@@ -39,7 +39,7 @@ export const InputVector = ({
   oldZ.current = z;
 
   const inputCommonClasses =
-    "relative h-6 rounded-r-lg bg-brand-secondary p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-brand-secondary-900";
+    "relative h-6 rounded-r-lg bg-brand-secondary-900/35 p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-brand-secondary-900";
 
   const wrapperCommonClasses =
     "relative flex items-center before:inline-block before:h-6 before:bg-brand-primary before:text-white before:rounded-l-lg before:w-1.5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";

app/components/reusable/Textarea/Textarea.tsx

@@ -34,7 +34,7 @@ export const Textarea = ({
       <textarea
         id={id ? id : label ? kebabCase(label) : undefined}
         className={twMerge(
-          "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",
+          "rounded-lg border border-[#363636] 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={{

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 border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#363636] 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 border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
         <div className="flex grow flex-col gap-0">
           <P className="font-medium">

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 border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#363636] 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 border-dashed border-[#3F3F3F] bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
         <FontAwesomeIcon icon={faFileAudio} className="text-4xl" />
         <div className="flex flex-col gap-0">
           <P className="font-medium">

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 border border-[#3F3F3F] bg-ui-controls p-1.5 text-white shadow-md">
+        <div className="rounded-b-lg border border-[#363636] bg-ui-controls p-1.5 text-white shadow-md">
           <div className="flex items-center justify-center gap-3">
             <ButtonIconSelect
               options={modes}

app/pages/PageEnigma/comps/LowerPanel/LowerPanel.tsx

@@ -23,7 +23,7 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => {
     <>
       {currentPage.value === Pages.EDIT && (
         <div
-          className="absolute z-10 h-1 w-full cursor-ns-resize bg-ui-panel-border"
+          className="absolute z-10 h-[3px] w-full cursor-ns-resize bg-ui-panel-border"
           style={{ bottom: displayHeight }}
           onPointerDown={onPointerDown}
         />

app/pages/PageEnigma/comps/Outliner/Outliner.tsx

@@ -52,7 +52,7 @@ const OutlinerItem = ({ item }: { item: SceneObject }) => {
     <div
       role="button"
       className={twMerge(
-        "flex cursor-pointer justify-between px-4 py-[7px] text-[13px] font-normal text-white/80 outline-none transition-all duration-100 hover:bg-action/50 focus:outline-none",
+        "flex cursor-pointer justify-between px-4 py-[7px] text-[13px] font-normal text-white/80 outline-none transition-all duration-100 hover:bg-action-900/35 focus:outline-none",
         isSelected &&
           "bg-brand-primary/80 font-medium text-white hover:bg-brand-primary/80",
       )}

app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx

@@ -30,7 +30,7 @@ export const SidePanel = () => {
     <>
       <div
         className={[
-          "fixed z-20 flex border-l border-[#3F3F3F] bg-ui-panel transition-all duration-100",
+          "fixed z-20 flex border-l border-[#363636] bg-ui-panel transition-all duration-100",
         ].join(" ")}
         style={{
           top: 64,

app/pages/PageEnigma/comps/SidePanelMenu/SidePanelMenu.tsx

@@ -37,7 +37,7 @@ export const SidePanelMenu = ({
       className={twMerge(
         "fixed z-[25] bg-assets-background",
         "right-0 top-[64px] w-[84px] overflow-auto border-l px-2 py-2",
-        sidePanelVisible.value ? "border-transparent" : "border-[#3F3F3F]",
+        sidePanelVisible.value ? "border-transparent" : "border-[#363636]",
       )}
       style={{
         height: pageHeight.value - 64,
@@ -63,7 +63,7 @@ export const SidePanelMenu = ({
               className={twMerge([
                 "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"
+                  ? "border-[#363636] 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",

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-[#3F3F3F] bg-ui-controls/60 p-4 shadow-lg"
+      className="absolute bottom-0 border-t border-[#363636] bg-ui-controls/60 p-4 shadow-lg"
     >
       <Label>
         <div className="mb-2 leading-tight">

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 border-dashed border-[#3F3F3F] 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-[#363636] 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">

app/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/ItemPicker.tsx

@@ -43,7 +43,7 @@ export const ItemPicker = ({
         "relative cursor-pointer overflow-hidden rounded-lg border transition-colors ease-in-out",
         selected
           ? "border-brand-primary"
-          : "border-[#3F3F3F] hover:border-brand-primary",
+          : "border-[#363636] hover:border-brand-primary",
         className,
       )}
       style={{

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 border-[#3F3F3F] bg-brand-secondary p-2 pr-3 text-start transition-all hover:border-brand-primary hover:bg-brand-primary/20"
+        className="flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border border-[#363636] 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">

app/pages/PageEnigma/comps/StyleSelection/ItemPicker.tsx

@@ -26,7 +26,7 @@ export const ItemPicker = ({
         "relative aspect-video cursor-pointer overflow-hidden rounded-lg border transition-colors ease-in-out",
         selected
           ? "border-brand-primary"
-          : "border-[#3F3F3F] hover:border-brand-primary",
+          : "border-[#363636] hover:border-brand-primary",
       )}
       onClick={handleSelected}
     >

app/styles/base.css

@@ -1,21 +1,21 @@
 * {
   scrollbar-width: thin;
-  scrollbar-color: #3f3f3f #39394d79;
+  scrollbar-color: #363636 #171717;
 }
 
 /* Works on Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
-  width: 12px;
+  width: 8px;
 }
 
 *::-webkit-scrollbar-track {
-  background: #2e2e2e;
+  background: #171717;
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: #39394d;
-  border-radius: 30px;
-  border: 3px solid gray;
+  background-color: #363636;
+  border-radius: 4px;
+  border: 2px solid #171717;
 }
 
 /* Chrome, Safari, Edge, Opera */

app/styles/tailwind.css

@@ -4,7 +4,7 @@
 
 @layer components {
   .filter-tab {
-    @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;
+    @apply text-nowrap rounded-lg border border-[#363636] 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 {

tailwind.config.ts

@@ -43,7 +43,7 @@ export default {
       },
       "brand-secondary": {
         //gunpowder
-        DEFAULT: "#2E2E2E",
+        DEFAULT: "#242424",
         "50": "#f6f6f6",
         "100": "#e7e7e7",
         "200": "#d1d1d1",
@@ -54,7 +54,7 @@ export default {
         "700": "#4f4f4f",
         "800": "#454545",
         "900": "#3d3d3d",
-        "950": "#2e2e2e",
+        "950": "#242424",
       },
       "brand-tertiary": {
         //Aquamarine Blue
@@ -105,7 +105,7 @@ export default {
 
       action: {
         //comet
-        DEFAULT: "#2E2E2E",
+        DEFAULT: "#242424",
         "50": "#f6f6f6",
         "100": "#e7e7e7",
         "200": "#d1d1d1",
@@ -116,7 +116,7 @@ export default {
         "700": "#4f4f4f",
         "800": "#454545",
         "900": "#3d3d3d",
-        "950": "#2e2e2e",
+        "950": "#242424",
       },
 
       character: {
@@ -172,11 +172,11 @@ export default {
       },
 
       ui: {
-        background: "#242424",
-        panel: "#1F1F1F",
-        "panel-border": "#3F3F3F",
-        controls: "#2E2E2E",
-        "controls-button": "#2E2E2E",
+        background: "#121212",
+        panel: "#171717",
+        "panel-border": "#363636",
+        controls: "#1C1C1C",
+        "controls-button": "#1C1C1C",
         divider: "#515168",
       },