Realtime inspector icons colors (#19402)

* colors

* Fix leftover issues from merging from master.

* Fix the schema/table selectors loading states to eliminate layout shifts.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx

@@ -2,7 +2,6 @@ import { useParams } from 'common'
 import { isEqual } from 'lodash'
 import { Loader2 } from 'lucide-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import { Key, useEffect, useState } from 'react'
 import DataGrid, { RenderRowProps, Row } from 'react-data-grid'
 import { Button, IconBroadcast, IconDatabaseChanges, IconExternalLink, IconPresence, cn } from 'ui'
@@ -10,8 +9,8 @@ import { Button, IconBroadcast, IconDatabaseChanges, IconExternalLink, IconPrese
 import ShimmerLine from 'components/ui/ShimmerLine'
 import MessageSelection from './MessageSelection'
 import { LogData } from './Messages.types'
-import { ColumnRenderer } from './RealtimeMessageColumnRenderer'
 import NoChannelEmptyState from './NoChannelEmptyState'
+import { ColumnRenderer } from './RealtimeMessageColumnRenderer'
 
 export const isErrorLog = (l: LogData) => {
   return l.message === 'SYSTEM' && l.metadata?.status === 'error'
@@ -39,7 +38,7 @@ const NoResultAlert = ({
 
           <div className="mt-4 border bg-surface-100 border-border rounded-md justify-start items-center flex flex-col w-full">
             <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
-              <IconBroadcast size="xlarge" className="bg-brand-400 rounded w-6 text-brand-600" />
+              <IconBroadcast size="xlarge" className="text-background bg-foreground rounded w-6" />
               <div className="grow flex-col flex">
                 <p className="text-foreground">Create a Broadcast message</p>
                 <p className="text-foreground-lighter text-xs">Send a message in the channel</p>
@@ -49,7 +48,7 @@ const NoResultAlert = ({
               </Button>
             </div>
             <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
-              <IconPresence size="xlarge" className="bg-brand-400 rounded w-6 text-brand-600" />
+              <IconPresence size="xlarge" className="text-background bg-foreground rounded w-6" />
               <div className="grow flex-col flex">
                 <p className="text-foreground">Join from another browser tab</p>
                 <p className="text-foreground-lighter text-xs">
@@ -66,7 +65,7 @@ const NoResultAlert = ({
             <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
               <IconDatabaseChanges
                 size="xlarge"
-                className="bg-brand-400 rounded w-6 text-brand-600"
+                className="text-background bg-foreground rounded w-6"
               />
               <div className="grow flex-col flex">
                 <p className="text-foreground">Listen to a table for changes</p>

apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx

@@ -57,10 +57,11 @@ const TableSelector = ({
       {isLoading && (
         <Button
           type="outline"
-          className="w-full [&>span]:w-full text-xs text-light"
+          size={size}
+          className={`w-full [&>span]:w-full ${size === 'small' ? 'py-1.5' : ''}`}
           icon={<IconLoader className="animate-spin" size={12} />}
         >
-          <p className="flex">Loading tables...</p>
+          <p className="flex text-xs text-light">Loading tables...</p>
         </Button>
       )}
 

apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx

@@ -78,7 +78,10 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
           <div className="py-3 px-4 border-b border-overlay">
             <div className="flex items-center justify-between gap-2">
               <div className="flex gap-2.5 items-center">
-                <IconPresence size="xlarge" className="bg-brand-400 rounded text-brand-600" />
+                <IconPresence
+                  size="xlarge"
+                  className="bg-foreground rounded text-background-muted"
+                />
                 <label htmlFor="toggle-presence" className="text-sm">
                   Presence
                 </label>
@@ -99,7 +102,10 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
           <div className="py-3 px-4 border-b border-overlay">
             <div className="flex items-center justify-between">
               <div className="flex gap-2.5 items-center">
-                <IconBroadcast size="xlarge" className="bg-brand-400 rounded text-brand-600" />
+                <IconBroadcast
+                  size="xlarge"
+                  className="bg-foreground rounded text-background-muted"
+                />
                 <label htmlFor="toggle-broadcast" className="text-sm">
                   Broadcast
                 </label>
@@ -122,7 +128,7 @@ export const RealtimeFilterPopover = ({ config, onChangeConfig }: RealtimeFilter
               <div className="flex gap-2.5 items-center">
                 <IconDatabaseChanges
                   size="xlarge"
-                  className="bg-brand-400 rounded text-brand-600"
+                  className="bg-foreground rounded text-background-muted"
                 />
                 <label htmlFor="toggle-db-changes" className="text-sm">
                   Database changes

apps/studio/components/ui/SchemaSelector.tsx

@@ -66,7 +66,8 @@ const SchemaSelector = ({
       {isSchemasLoading && (
         <Button
           type="outline"
-          className="w-full [&>span]:w-full"
+          className={`w-full [&>span]:w-full ${size === 'small' ? 'py-1.5' : ''}`}
+          size={size}
           icon={<IconLoader className="animate-spin" size={12} />}
           disabled={!!disabled}
         >

packages/ui/src/components/Icon/icons/IconBroadcast/IconBroadcast.tsx

@@ -5,9 +5,10 @@ const SvgComponent = () => (
     <path
       id="Ellipse 146"
       d="M17.3154 6.70312C18.6968 8.06227 19.5532 9.95249 19.5532 12.0426C19.5532 14.1326 18.6968 16.0229 17.3154 17.382M6.79102 6.70312C5.40966 8.06227 4.55322 9.95249 4.55322 12.0426C4.55322 14.1326 5.40966 16.0229 6.79102 17.382"
-      stroke="currentCollor"
+      stroke="currentColor"
       strokeMiterlimit="10"
       strokeLinejoin="bevel"
+      opacity={0.45}
     />
     <ellipse
       id="Ellipse 144"
@@ -15,14 +16,14 @@ const SvgComponent = () => (
       cy="12.0428"
       rx="3.00928"
       ry="3.00666"
-      stroke="currentCollor"
+      stroke="currentColor"
       strokeMiterlimit="10"
       strokeLinejoin="bevel"
     />
     <path
       id="Vector 96"
       d="M12.0747 15.0488L12.0747 23.9996"
-      stroke="currentCollor"
+      stroke="currentColor"
       strokeMiterlimit="10"
       strokeLinejoin="bevel"
     />

packages/ui/src/components/Icon/icons/IconDatabaseChanges/IconDatabaseChanges.tsx

@@ -10,19 +10,17 @@ const SvgComponent = () => (
       strokeLinejoin="bevel"
       strokeMiterlimit={10}
       d="M20.307 12a7.807 7.807 0 0 1-7.807 7.808M4.693 12A7.807 7.807 0 0 1 12.5 4.193"
-      opacity={0.33}
+      opacity={0.45}
     />
     <circle
       cx={17.512}
       cy={6.971}
       r={3.723}
-      fill="currentColor"
       stroke="currentColor"
       strokeLinejoin="bevel"
       strokeMiterlimit={10}
     />
     <path
-      fill="currentColor"
       stroke="currentColor"
       strokeLinejoin="bevel"
       strokeMiterlimit={10}

packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx

@@ -14,7 +14,7 @@ const SvgComponent = () => (
       strokeLinejoin="round"
       strokeMiterlimit={10}
       d="M24.544 32.746h-5.623a3 3 0 0 1-3-3V18.5a3 3 0 0 1 3-3h11.247a3 3 0 0 1 3 3v5.623"
-      opacity={0.33}
+      opacity={0.45}
     />
   </>
 )