Clean up colors and Selects

src/app/(main)/admin/AdminLayout.tsx

@@ -19,7 +19,6 @@ export function AdminLayout({ children }: { children: ReactNode }) {
         width="240px"
         height="100%"
         border="right"
-        backgroundColor
         marginRight="2"
         padding="3"
       >

src/app/(main)/settings/SettingsLayout.tsx

@@ -12,7 +12,6 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
         width="240px"
         height="100%"
         border="right"
-        backgroundColor={'surface-raised'}
         marginRight="2"
         padding="3"
       >

src/app/(main)/websites/[websiteId]/(reports)/journeys/Journey.tsx

@@ -236,7 +236,7 @@ export function Journey({ websiteId, steps, startStep, endStep, view }: JourneyP
                                   <div>{formatLongNumber(nodeCount)}</div>
                                 </Focusable>
                                 <Tooltip placement="top" offset={20} showArrow>
-                                  <Text transform="lowercase" color="ruby">
+                                  <Text transform="lowercase" color="red-700">
                                     {`${dropped}% ${formatMessage(labels.dropoff)}`}
                                   </Text>
                                   <Column>

src/components/common/FilterRecord.tsx

@@ -57,10 +57,6 @@ export function FilterRecord({
     onChange?.(name, value);
   };
 
-  const renderValue = () => {
-    return formatValue(selected, type);
-  };
-
   return (
     <Column>
       <Label>{fields.find(f => f.name === name)?.label}</Label>
@@ -83,7 +79,6 @@ export function FilterRecord({
               value={selected}
               onChange={handleSelectValue}
               searchValue={search}
-              renderValue={renderValue}
               onSearch={handleSearch}
               isLoading={isLoading}
               listProps={{ renderEmptyState: () => <Empty /> }}

src/components/common/NavMenu.tsx

@@ -62,7 +62,7 @@ export function NavMenu({
         {items?.map(({ label, items }, index) => {
           if (label) {
             return (
-              <Column key={`${label}${index}`} gap="1" marginBottom="3" minHeight="40px">
+              <Column key={`${label}${index}`} gap="2" marginBottom="3" minHeight="40px">
                 <Row padding>
                   <Text weight="bold">{label}</Text>
                 </Row>

src/components/input/UserSelect.tsx

@@ -1,4 +1,4 @@
-import { ListItem, Row, Select, type SelectProps, Text } from '@umami/react-zen';
+import { ListItem, Select, type SelectProps } from '@umami/react-zen';
 import { useMemo, useState } from 'react';
 import { Empty } from '@/components/common/Empty';
 import { useMessages, useTeamMembersQuery, useUsersQuery } from '@/components/hooks';
@@ -40,14 +40,6 @@ export function UserSelect({
     onChange(id);
   };
 
-  const renderValue = () => {
-    return (
-      <Row maxWidth="160px">
-        <Text truncate>{username}</Text>
-      </Row>
-    );
-  };
-
   return (
     <Select
       {...props}
@@ -58,7 +50,6 @@ export function UserSelect({
       onSearch={handleSearch}
       onChange={handleChange}
       onOpenChange={handleOpenChange}
-      renderValue={renderValue}
       listProps={{
         renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
         style: { maxHeight: 'calc(42vh - 65px)' },

src/components/metrics/ChangeLabel.tsx

@@ -4,11 +4,11 @@ import { ArrowRight } from '@/components/icons';
 
 const STYLES = {
   positive: {
-    color: `var(--status-success-text)`,
+    color: `var(--status-success)`,
     background: `var(--status-success-bg)`,
   },
   negative: {
-    color: `var(--status-error-text)`,
+    color: `var(--status-error)`,
     background: `var(--status-error-bg)`,
   },
   neutral: {