From de04e23c5102235003b776f77ee698f0c15ac2be Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 7 May 2025 12:50:50 +0200
Subject: [PATCH] ui: comb through components, add additional classes for
 tailwind basic styles, fix antd defaults

---
 .../Client/Projects/ProjectCodeSnippet.tsx    |  2 +-
 .../Users/components/UserForm/UserForm.tsx    |  2 +-
 .../Session_/EventsBlock/EventsBlock.tsx      |  1 +
 .../TimelineScale/TimelineScale.tsx           |  2 +-
 .../Controls/components/KeyboardHelp.tsx      |  2 +-
 .../Player/Controls/components/ReadNote.tsx   |  2 +-
 .../Session_/Player/player.module.css         |  2 +-
 .../components/SpotPlayerControls.tsx         |  2 +-
 .../Filters/FilterOperator/FilterOperator.tsx | 65 +------------------
 .../app/components/shared/Select/Select.tsx   |  2 +
 .../shared/SessionItem/MetaItem/MetaItem.tsx  |  4 +-
 .../LatestSessionsMessage.tsx                 |  3 +-
 .../components/Notes/NoteItem.tsx             |  2 +-
 frontend/app/initialize.tsx                   | 20 +++++-
 frontend/app/layout/SideMenu.tsx              | 16 ++---
 frontend/app/mstore/dashboardStore.ts         |  2 +-
 frontend/app/styles/colors-autogen.css        | 12 ++++
 frontend/app/styles/general.css               |  2 +-
 frontend/app/styles/main.css                  |  4 ++
 frontend/app/svg/icons/orspotOutline.svg      |  2 +-
 frontend/app/theme/colors.js                  | 52 ++++++++-------
 21 files changed, 89 insertions(+), 112 deletions(-)

diff --git a/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx b/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
index cbe27d481..6e040bba0 100644
--- a/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
+++ b/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
@@ -114,7 +114,7 @@ const ProjectCodeSnippet: React.FC<Props> = (props) => {
         <div
           className={cn(
             stl.info,
-            'rounded-lg bg-gray mb-4 ml-8 bg-amber-50 w-fit text-sm mt-2',
+            'rounded-lg bg-gray mb-4 ml-8 bg-amber w-fit text-sm mt-2',
             { hidden: !changed },
           )}
         >
diff --git a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
index 3fca31f02..71457d22f 100644
--- a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
+++ b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
@@ -87,7 +87,7 @@ function UserForm() {
           />
         </div>
         {!isSmtp && (
-          <div className={cn('mb-4 p-2 bg-yellow rounded')}>
+          <div className={cn('mb-4 p-2 bg-amber rounded')}>
             {t('SMTP is not configured (see')}&nbsp;
             <a
               className="link"
diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
index 230b75057..b9240c12b 100644
--- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
+++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
@@ -105,6 +105,7 @@ function EventsBlock(props: IProps) {
         : true
       ).filter((e: any) => !e.noteId && e.type !== 'TABCHANGE' && uiPlayerStore.showOnlySearchEvents ? e.isHighlighted : true);
     }
+    return list;
   }, [
     filteredLength,
     query,
diff --git a/frontend/app/components/Session_/OverviewPanel/components/TimelineScale/TimelineScale.tsx b/frontend/app/components/Session_/OverviewPanel/components/TimelineScale/TimelineScale.tsx
index 8788ec9d8..6484dd1de 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/TimelineScale/TimelineScale.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelineScale/TimelineScale.tsx
@@ -22,7 +22,7 @@ function TimelineScale(props: Props) {
       el.style.opacity = '0.8';
       el.innerHTML = `${txt}`;
       el.style.fontSize = '12px';
-      el.style.color = 'white';
+      el.classList.add('text-white')
 
       container.appendChild(el);
     }
diff --git a/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx b/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
index 8dcfb77c4..16b8a4ad1 100644
--- a/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
@@ -7,7 +7,7 @@ function Key({ label }: { label: string }) {
   return (
     <div
       style={{ minWidth: 52 }}
-      className="whitespace-nowrap font-normal bg-indigo-50 rounded-lg px-2 py-1 text-figmaColors-text-primary text-center font-mono"
+      className="whitespace-nowrap font-normal bg-active-blue rounded-lg px-2 py-1 text-black text-center font-mono"
     >
       {label}
     </div>
diff --git a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
index dffd0c3e7..1a2095361 100644
--- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
@@ -66,7 +66,7 @@ function ReadNote(props: Props) {
       className="flex items-center justify-center"
     >
       <div
-        className="flex items-start !text-lg flex-col p-4 border gap-2 rounded-lg bg-amber-50"
+        className="flex items-start !text-lg flex-col p-4 border gap-2 rounded-lg bg-amber"
         style={{ width: 500 }}
       >
         <div className="flex items-center w-full">
diff --git a/frontend/app/components/Session_/Player/player.module.css b/frontend/app/components/Session_/Player/player.module.css
index 44a519050..f5b86143c 100644
--- a/frontend/app/components/Session_/Player/player.module.css
+++ b/frontend/app/components/Session_/Player/player.module.css
@@ -13,7 +13,7 @@
 }
 
 .checkers {
-  background: repeating-linear-gradient(135deg, #f3f3f3, #f3f3f3 1px, #f6f6f6 1px, #FFF 4px);
+  background: repeating-linear-gradient(135deg, var(--color-gray-lighter), var(--color-gray-lighter) 1px, var(--color-gray-lightest) 1px, var(--color-white) 4px);
 }
 .solidBg {
   background: $gray-lightest;
diff --git a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerControls.tsx b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerControls.tsx
index e18adacb8..4010ea751 100644
--- a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerControls.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerControls.tsx
@@ -57,7 +57,7 @@ function SpotPlayerControls() {
     <div className="w-full p-4 flex items-center gap-4 bg-white">
       <PlayButton togglePlay={togglePlay} state={playState} iconSize={36} />
 
-      <div className="px-2 py-1 bg-white rounded font-semibold text-black flex items-center gap-2">
+      <div className="px-2 py-1 bg-white rounded font-semibold flex items-center gap-2">
         <PlayTime isCustom time={spotPlayerStore.time * 1000} format="mm:ss" />
         <span>/</span>
         <div>{spotPlayerStore.durationString}</div>
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
index 37395896e..86aa80e6b 100644
--- a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@@ -1,68 +1,6 @@
 import React from 'react';
 import Select from 'Shared/Select';
 
-const dropdownStyles = {
-  control: (provided: any) => {
-    const obj = {
-      ...provided,
-      border: 'solid thin #ddd',
-      boxShadow: 'none !important',
-      cursor: 'pointer',
-      height: '26px',
-      minHeight: '26px',
-      backgroundColor: 'white',
-      borderRadius: '.5rem',
-      '&:hover': {
-        borderColor: 'rgb(115 115 115 / 0.9)',
-      },
-    };
-
-    return obj;
-  },
-  valueContainer: (provided: any) => ({
-    ...provided,
-    width: 'fit-content',
-    height: 26,
-    '& input': {
-      marginTop: '-3px',
-    },
-  }),
-  placeholder: (provided: any) => ({
-    ...provided,
-  }),
-  indicatorsContainer: (provided: any) => ({
-    display: 'none',
-  }),
-  // option: (provided: any, state: any) => ({
-  //   ...provided,
-  //   whiteSpace: 'nowrap',
-  // }),
-  menu: (provided: any, state: any) => ({
-    ...provided,
-    marginTop: '0.5rem',
-    left: 0,
-    minWidth: 'fit-content',
-    overflow: 'hidden',
-    zIndex: 100,
-    border: 'none',
-    boxShadow: '0px 4px 10px rgba(0,0,0, 0.15)',
-  }),
-  container: (provided: any) => ({
-    ...provided,
-    minWidth: 'max-content',
-  }),
-  singleValue: (provided: any, state: { isDisabled: any }) => {
-    const opacity = state.isDisabled ? 0.5 : 1;
-    const transition = 'opacity 300ms';
-
-    return {
-      ...provided,
-      opacity,
-      transition,
-      marginTop: '-3px',
-    };
-  },
-};
 interface Props {
   onChange: (e: any, { name, value }: any) => void;
   className?: string;
@@ -84,7 +22,8 @@ function FilterOperator(props: Props) {
       <Select
         name="operator"
         options={options || []}
-        styles={dropdownStyles}
+        styles={{ height: 26 }}
+        popupMatchSelectWidth={false}
         placeholder="Select"
         isDisabled={isDisabled}
         value={value ? options?.find((i: any) => i.value === value) : null}
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index c932c1bf4..d0e0f6580 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -27,6 +27,7 @@ export default function CustomSelect<Value extends ValueObject>({
   defaultValue = '',
   className = '',
   mode,
+  styles,
   ...rest
 }: Props<Value>) {
   // Handle onChange to maintain compatibility with the original component
@@ -43,6 +44,7 @@ export default function CustomSelect<Value extends ValueObject>({
       onChange={handleChange}
       placeholder={placeholder}
       mode={mode}
+      style={styles}
       {...rest}
     />
   );
diff --git a/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx b/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
index f661d8a77..978914481 100644
--- a/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
@@ -12,7 +12,7 @@ export default function MetaItem(props: Props) {
   return (
     <div
       className={cn(
-        'text-sm flex flex-row items-center px-2 py-0 gap-1 rounded-lg bg-white border border-neutral-100 overflow-hidden',
+        'text-sm flex flex-row items-center px-2 py-0 gap-1 rounded-lg bg-white border border-gray-light overflow-hidden',
         className,
       )}
     >
@@ -22,7 +22,7 @@ export default function MetaItem(props: Props) {
         maxWidth={'300px'}
         popupProps={{ size: 'small', disabled: true }}
       />
-      <span className="bg-neutral-200 inline-block w-[1px] min-h-[17px]"></span>
+      <span className="bg-gray-light inline-block w-[1px] min-h-[17px]"></span>
       <TextEllipsis
         text={value}
         maxWidth={'350px'}
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx b/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
index 66cf7be5a..d59b76491 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
@@ -16,8 +16,7 @@ function LatestSessionsMessage() {
 
   return count > 0 ? (
     <div
-      className="bg-amber-50 p-1 flex w-full border-b text-center justify-center link"
-      style={{ backgroundColor: 'rgb(255 251 235)' }}
+      className="bg-amber p-1 flex w-full border-b text-center justify-center link"
       onClick={onShowNewSessions}
     >
       {t('Show')} {numberWithCommas(count)} {t('New')}{' '}
diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
index 27778c553..556fe2779 100644
--- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
@@ -52,7 +52,7 @@ function NoteItem(props: Props) {
       ? `${props.note.message.slice(0, 150)}...`
       : props.note.message;
   return (
-    <div className="flex items-center px-2 border-b hover:bg-amber-50 justify-between py-2">
+    <div className="flex items-center px-2 border-b hover:bg-amber justify-between py-2">
       <Link
         style={{ width: '90%' }}
         to={
diff --git a/frontend/app/initialize.tsx b/frontend/app/initialize.tsx
index 3f8aec47d..d569a2f34 100644
--- a/frontend/app/initialize.tsx
+++ b/frontend/app/initialize.tsx
@@ -96,7 +96,10 @@ const ThemedApp: React.FC = () => {
         colorText: cssVar('gray-darkest'),
         colorTextHeading: cssVar('gray-darkest'),
         colorBorderSecondary: cssVar('gray-light'),
-        headerBg: cssVar('gray-lighter'),
+        headerBg: cssVar('gray-lightest'),
+        rowHoverBg: cssVar('gray-lightest'),
+        headerSortHoverBg: cssVar('gray-lighter'),
+        headerSortActiveBg: cssVar('gray-lighter')
       },
       Modal: {
         colorBgElevated: cssVar('white'),
@@ -110,15 +113,27 @@ const ThemedApp: React.FC = () => {
         colorBgSpotlight: cssVar('white'),
         colorTextLightSolid: cssVar('gray-darkest'),
       },
+      Tabs: {
+        itemActiveColor: cssVar('main'),
+        inkBarColor: cssVar('main'),
+        itemSelectedColor: cssVar('main')
+      },
+      Tag: {
+        defaultBg: cssVar('gray-lightest'),
+        defaultColor: cssVar('gray-darkest')
+      }
     },
     token: {
       colorPrimary: cssVar('main'),
       colorPrimaryActive: cssVar('teal-dark'),
       colorPrimaryHover: cssVar('main'),
       colorPrimaryBorder: cssVar('main'),
-      colorBorder: cssVar('gray-lightest'),
+      colorBorder: cssVar('gray-light'),
       colorBgLayout: cssVar('gray-lightest'),
       colorBgContainer: cssVar('white'),
+      controlItemBgActive: cssVar('active-blue'),
+      controlItemBgActiveHover: cssVar('active-blue'),
+      controlItemBgHover: cssVar('active-blue'),
       colorLink: cssVar('teal'),
       colorLinkHover: cssVar('teal-dark'),
       colorText: cssVar('gray-darkest'),
@@ -128,6 +143,7 @@ const ThemedApp: React.FC = () => {
       fontSize: 14,
       fontFamily: "'Roboto', 'ArialMT', 'Arial'",
       fontWeightStrong: 400,
+      colorSplit: cssVar('gray-light')
     },
   };
 
diff --git a/frontend/app/layout/SideMenu.tsx b/frontend/app/layout/SideMenu.tsx
index c57b8561f..d651e7b28 100644
--- a/frontend/app/layout/SideMenu.tsx
+++ b/frontend/app/layout/SideMenu.tsx
@@ -210,10 +210,10 @@ function SideMenu(props: Props) {
                             <Icon
                               name={item.icon}
                               size={16}
-                              color={isActive ? 'teal' : ''}
+                              color={isActive ? 'teal' : 'black'}
                             />
                           }
-                          className={cn('!rounded-lg hover-fill-teal')}
+                          className={cn('!rounded-lg hover-fill-teal', isActive ? 'color-main' : 'color-black')}
                         >
                           {item.label}
                         </Menu.Item>
@@ -228,17 +228,17 @@ function SideMenu(props: Props) {
                             <Icon
                               name={item.icon}
                               size={16}
-                              color={isActive ? 'teal' : ''}
+                              color={isActive ? 'teal' : 'black'}
                             />
                           }
                           style={{ paddingLeft: '20px' }}
-                          className={cn('!rounded-lg !pe-0')}
+                          className={cn('!rounded-lg !pe-0', isActive ? 'color-main' : 'color-black')}
                           itemIcon={
                             item.leading ? (
                               <Icon
                                 name={item.leading}
                                 size={16}
-                                color={isActive ? 'teal' : ''}
+                                color={isActive ? 'teal' : 'black'}
                               />
                             ) : null
                           }
@@ -293,18 +293,18 @@ function SideMenu(props: Props) {
                           <Icon
                             name={item.icon}
                             size={16}
-                            color={isActive ? 'teal' : ''}
+                            color={isActive ? 'teal' : 'black'}
                             className="hover-fill-teal"
                           />
                         }
                         style={{ paddingLeft: '20px' }}
-                        className={cn('!rounded-lg hover-fill-teal')}
+                        className={cn('!rounded-lg hover-fill-teal', isActive ? 'color-main' : 'color-black')}
                         itemIcon={
                           item.leading ? (
                             <Icon
                               name={item.leading}
                               size={16}
-                              color={isActive ? 'teal' : ''}
+                              color={isActive ? 'teal' : 'black'}
                             />
                           ) : null
                         }
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index f985b97ca..ebf8b118b 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -57,7 +57,7 @@ export default class DashboardStore {
   metricsSearch: string = '';
 
   // Loading states
-  isLoading: boolean = true;
+  isLoading: boolean = false;
 
   isSaving: boolean = false;
 
diff --git a/frontend/app/styles/colors-autogen.css b/frontend/app/styles/colors-autogen.css
index f13dd72a2..59cd4fd44 100644
--- a/frontend/app/styles/colors-autogen.css
+++ b/frontend/app/styles/colors-autogen.css
@@ -38,6 +38,7 @@
 .fill-pink { fill: var(--color-pink) }
 .fill-light-blue-bg { fill: var(--color-light-blue-bg) }
 .fill-white { fill: var(--color-white) }
+.fill-black { fill: var(--color-black) }
 .fill-gray-border { fill: var(--color-gray-border) }
 .fill-borderColor-default { fill: var(--color-borderColor-default) }
 .fill-borderColor-gray-light-shade { fill: var(--color-borderColor-gray-light-shade) }
@@ -45,6 +46,7 @@
 .fill-borderColor-transparent { fill: var(--color-borderColor-transparent) }
 .fill-transparent { fill: var(--color-transparent) }
 .fill-cyan { fill: var(--color-cyan) }
+.fill-amber { fill: var(--color-amber) }
 .fill-figmaColors-accent-secondary { fill: var(--color-figmaColors-accent-secondary) }
 .fill-figmaColors-main { fill: var(--color-figmaColors-main) }
 .fill-figmaColors-primary-outlined-hover-background { fill: var(--color-figmaColors-primary-outlined-hover-background) }
@@ -91,6 +93,7 @@
 .hover-fill-pink:hover svg { fill: var(--color-pink) }
 .hover-fill-light-blue-bg:hover svg { fill: var(--color-light-blue-bg) }
 .hover-fill-white:hover svg { fill: var(--color-white) }
+.hover-fill-black:hover svg { fill: var(--color-black) }
 .hover-fill-gray-border:hover svg { fill: var(--color-gray-border) }
 .hover-fill-borderColor-default:hover svg { fill: var(--color-borderColor-default) }
 .hover-fill-borderColor-gray-light-shade:hover svg { fill: var(--color-borderColor-gray-light-shade) }
@@ -98,6 +101,7 @@
 .hover-fill-borderColor-transparent:hover svg { fill: var(--color-borderColor-transparent) }
 .hover-fill-transparent:hover svg { fill: var(--color-transparent) }
 .hover-fill-cyan:hover svg { fill: var(--color-cyan) }
+.hover-fill-amber:hover svg { fill: var(--color-amber) }
 .hover-fill-figmaColors-accent-secondary:hover svg { fill: var(--color-figmaColors-accent-secondary) }
 .hover-fill-figmaColors-main:hover svg { fill: var(--color-figmaColors-main) }
 .hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: var(--color-figmaColors-primary-outlined-hover-background) }
@@ -146,6 +150,7 @@
 .color-pink { color: var(--color-pink) }
 .color-light-blue-bg { color: var(--color-light-blue-bg) }
 .color-white { color: var(--color-white) }
+.color-black { color: var(--color-black) }
 .color-gray-border { color: var(--color-gray-border) }
 .color-borderColor-default { color: var(--color-borderColor-default) }
 .color-borderColor-gray-light-shade { color: var(--color-borderColor-gray-light-shade) }
@@ -153,6 +158,7 @@
 .color-borderColor-transparent { color: var(--color-borderColor-transparent) }
 .color-transparent { color: var(--color-transparent) }
 .color-cyan { color: var(--color-cyan) }
+.color-amber { color: var(--color-amber) }
 .color-figmaColors-accent-secondary { color: var(--color-figmaColors-accent-secondary) }
 .color-figmaColors-main { color: var(--color-figmaColors-main) }
 .color-figmaColors-primary-outlined-hover-background { color: var(--color-figmaColors-primary-outlined-hover-background) }
@@ -201,6 +207,7 @@
 .hover-pink:hover { color: var(--color-pink) }
 .hover-light-blue-bg:hover { color: var(--color-light-blue-bg) }
 .hover-white:hover { color: var(--color-white) }
+.hover-black:hover { color: var(--color-black) }
 .hover-gray-border:hover { color: var(--color-gray-border) }
 .hover-borderColor-default:hover { color: var(--color-borderColor-default) }
 .hover-borderColor-gray-light-shade:hover { color: var(--color-borderColor-gray-light-shade) }
@@ -208,6 +215,7 @@
 .hover-borderColor-transparent:hover { color: var(--color-borderColor-transparent) }
 .hover-transparent:hover { color: var(--color-transparent) }
 .hover-cyan:hover { color: var(--color-cyan) }
+.hover-amber:hover { color: var(--color-amber) }
 .hover-figmaColors-accent-secondary:hover { color: var(--color-figmaColors-accent-secondary) }
 .hover-figmaColors-main:hover { color: var(--color-figmaColors-main) }
 .hover-figmaColors-primary-outlined-hover-background:hover { color: var(--color-figmaColors-primary-outlined-hover-background) }
@@ -256,6 +264,7 @@
 .border-pink { border-color: var(--color-pink) }
 .border-light-blue-bg { border-color: var(--color-light-blue-bg) }
 .border-white { border-color: var(--color-white) }
+.border-black { border-color: var(--color-black) }
 .border-gray-border { border-color: var(--color-gray-border) }
 .border-borderColor-default { border-color: var(--color-borderColor-default) }
 .border-borderColor-gray-light-shade { border-color: var(--color-borderColor-gray-light-shade) }
@@ -263,6 +272,7 @@
 .border-borderColor-transparent { border-color: var(--color-borderColor-transparent) }
 .border-transparent { border-color: var(--color-transparent) }
 .border-cyan { border-color: var(--color-cyan) }
+.border-amber { border-color: var(--color-amber) }
 .border-figmaColors-accent-secondary { border-color: var(--color-figmaColors-accent-secondary) }
 .border-figmaColors-main { border-color: var(--color-figmaColors-main) }
 .border-figmaColors-primary-outlined-hover-background { border-color: var(--color-figmaColors-primary-outlined-hover-background) }
@@ -311,6 +321,7 @@
 .bg-pink { background-color: var(--color-pink) }
 .bg-light-blue-bg { background-color: var(--color-light-blue-bg) }
 .bg-white { background-color: var(--color-white) }
+.bg-black { background-color: var(--color-black) }
 .bg-gray-border { background-color: var(--color-gray-border) }
 .bg-borderColor-default { background-color: var(--color-borderColor-default) }
 .bg-borderColor-gray-light-shade { background-color: var(--color-borderColor-gray-light-shade) }
@@ -318,6 +329,7 @@
 .bg-borderColor-transparent { background-color: var(--color-borderColor-transparent) }
 .bg-transparent { background-color: var(--color-transparent) }
 .bg-cyan { background-color: var(--color-cyan) }
+.bg-amber { background-color: var(--color-amber) }
 .bg-figmaColors-accent-secondary { background-color: var(--color-figmaColors-accent-secondary) }
 .bg-figmaColors-main { background-color: var(--color-figmaColors-main) }
 .bg-figmaColors-primary-outlined-hover-background { background-color: var(--color-figmaColors-primary-outlined-hover-background) }
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index b28ec3f38..0d1c41aa9 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -173,7 +173,7 @@
 }
 
 .border-gray-light {
-  border: solid thin rgb(229 231 235  / var(--tw-text-opacity, 1))
+  border: solid thin var(--color-gray-light)
 }
 
 .btn-disabled {
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 0875e208a..1c685f57b 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -283,3 +283,7 @@ svg {
     border-radius: 4px;
     cursor: grab;
 }
+
+.text-black {
+    color: $black;
+}
diff --git a/frontend/app/svg/icons/orspotOutline.svg b/frontend/app/svg/icons/orspotOutline.svg
index 5d78fd69e..770178666 100644
--- a/frontend/app/svg/icons/orspotOutline.svg
+++ b/frontend/app/svg/icons/orspotOutline.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
diff --git a/frontend/app/theme/colors.js b/frontend/app/theme/colors.js
index 1b94a50ee..2808bc1a8 100644
--- a/frontend/app/theme/colors.js
+++ b/frontend/app/theme/colors.js
@@ -1,5 +1,5 @@
 module.exports = {
-  main: '#394EFF',
+  main: 'oklch(54.6% 0.245 262.881)',
   'gray-light-shade': '#EEEEEE',
   'gray-lightest': '#f6f6f6',
   'gray-lighter': '#f1f1f1',
@@ -35,6 +35,7 @@ module.exports = {
   pink: '#ffb9b9',
   'light-blue-bg': '#E5F7F7',
   white: '#fff',
+  black: 'black',
   'gray-border': '#999', // Added for border-gray shadow
   borderColor: {
     default: '#DDDDDD',
@@ -44,7 +45,8 @@ module.exports = {
   },
   transparent: 'transparent',
   cyan: '#EBF4F5',
-  // actual theme colors - use this for new components
+  amber: 'oklch(98.7% 0.022 95.277)',
+
   figmaColors: {
     'accent-secondary': 'rgba(62, 170, 175, 1)',
     main: 'rgba(57, 78, 255, 1)',
@@ -60,36 +62,38 @@ module.exports = {
 
   dark: {
     // used as background in multiple places
-    white: '#0d0d0d',
-    teal: '#394EFF',
-    main: '#394EFF',
-    'text-primary': 'rgba(255, 255, 255, 0.87)',
+    white: 'oklch(20.5% 0 0)',
+    black: '#fff',
+    teal: 'oklch(70.7% 0.165 254.624)',
+    main: 'oklch(70.7% 0.165 254.624)',
+    'text-primary': 'oklch(97% 0 0)',
     'text-disabled': 'rgba(255, 255, 255, 0.38)',
     'outlined-border': 'rgba(255, 255, 255, 0.23)',
     divider: 'rgba(255, 255, 255, 0.12)',
-    'background': '#f1f1f1',
+    'background': 'oklch(20.5% 0 0)',
     'surface': '#1E1E1E',
+    amber: 'oklch(41.4% 0.112 45.904)',
 
-    'gray-light-shade': '#333333',
-    'gray-lightest': '#2A2A2A',
-    'gray-lighter': '#262626',
-    'gray-light': '#444',
-    'gray-bg': '#555',
-    'gray-medium': '#999',
-    'gray-dark': '#AAA',
-    'gray-darkest': '#EEE',
-    'gray-light-blue': '#1A1A2A',
+    'gray-light-shade': 'oklch(37.1% 0 0)',
+    'gray-lightest': 'oklch(26.9% 0 0)',
+    'gray-lighter': 'oklch(29.9% 0 0)',
+    'gray-light': 'oklch(37.1% 0 0)',
+    'gray-bg': 'oklch(37.1% 0 0)',
+    'gray-medium': 'oklch(70.7% 0.022 261.325)',
+    'gray-dark': 'oklch(87% 0 0)',
+    'gray-darkest': 'oklch(97% 0 0)',
+    'gray-light-blue': 'oklch(55.4% 0.046 257.417)',
     'gray-border': '#888',
 
-    'active-blue': '#1A1B32',
-    'active-dark-blue': '#1D1F3A',
-    'bg-blue': '#161A4D',
-    'active-blue-border': '#2F337D',
+    'active-blue': 'oklch(43.2% 0.232 292.759)',
+    'active-dark-blue': 'oklch(43.2% 0.232 292.759)',
+    'bg-blue': 'oklch(35.9% 0.144 278.697)',
+    'active-blue-border': 'oklch(45.7% 0.24 277.023)',
+    'tealx': 'oklch(77.7% 0.152 181.912)',
+    'tealx-light': 'oklch(38.6% 0.063 188.416)',
+    'tealx-light-border': 'oklch(43.7% 0.078 188.216)',
 
-    'tealx-light': '#1A2A2A',
-    'tealx-light-border': '#2A3F3F',
-
-    'light-blue-bg': '#15292C',
+    'light-blue-bg': 'oklch(39.8% 0.07 227.392)',
     'disabled-text': 'rgba(255, 255, 255, 0.38)',
 
     figmaColors: {