From 05c674e2a7801a1f61c66d1d6aa0a58b06f5983f Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 7 Dec 2023 21:51:16 +0800
Subject: [PATCH] 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>
---
 .../interfaces/Realtime/Inspector/MessagesTable.tsx  |  9 ++++-----
 .../RealtimeFilterPopover/TableSelector.tsx          |  5 +++--
 .../Inspector/RealtimeFilterPopover/index.tsx        | 12 +++++++++---
 apps/studio/components/ui/SchemaSelector.tsx         |  3 ++-
 .../Icon/icons/IconBroadcast/IconBroadcast.tsx       |  7 ++++---
 .../IconDatabaseChanges/IconDatabaseChanges.tsx      |  4 +---
 .../Icon/icons/IconPresence/IconPresence.tsx         |  2 +-
 7 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
index 98e6f72dd6..402b122a49 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
+++ b/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>
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
index fced5f29c1..2d5eba68ac 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx
+++ b/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>
       )}
 
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx
index 3fab367044..1bd776fb26 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/index.tsx
+++ b/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
diff --git a/apps/studio/components/ui/SchemaSelector.tsx b/apps/studio/components/ui/SchemaSelector.tsx
index 459bb68493..b4a9810507 100644
--- a/apps/studio/components/ui/SchemaSelector.tsx
+++ b/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}
         >
diff --git a/packages/ui/src/components/Icon/icons/IconBroadcast/IconBroadcast.tsx b/packages/ui/src/components/Icon/icons/IconBroadcast/IconBroadcast.tsx
index 34abc131fa..9c017ea579 100644
--- a/packages/ui/src/components/Icon/icons/IconBroadcast/IconBroadcast.tsx
+++ b/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"
     />
diff --git a/packages/ui/src/components/Icon/icons/IconDatabaseChanges/IconDatabaseChanges.tsx b/packages/ui/src/components/Icon/icons/IconDatabaseChanges/IconDatabaseChanges.tsx
index 7befddda31..2f7f50e79b 100644
--- a/packages/ui/src/components/Icon/icons/IconDatabaseChanges/IconDatabaseChanges.tsx
+++ b/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}
diff --git a/packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx b/packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx
index b774c034cb..e137894daf 100644
--- a/packages/ui/src/components/Icon/icons/IconPresence/IconPresence.tsx
+++ b/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}
     />
   </>
 )