From ed0d69b93d7a45d8ca99dec4c97ebbe91e59dbdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Wed, 8 Nov 2023 14:40:46 +0000
Subject: [PATCH] use css for conditional styling

---
 frontend/src/lib/components/CommandBar/SearchBarTab.tsx | 8 ++------
 frontend/src/lib/components/CommandBar/SearchTabs.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/CommandBar/SearchBarTab.tsx b/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
index d4e3fdead96ec..af878016e9bf8 100644
--- a/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
@@ -6,18 +6,14 @@ import { ResultTypeWithAll } from './types'
 
 type SearchBarTabProps = {
     type: ResultTypeWithAll
-    isFirst?: boolean
     active: boolean
     count?: number | null
 }
 
-const SearchBarTab = ({ type, isFirst = false, active, count }: SearchBarTabProps): JSX.Element => {
+const SearchBarTab = ({ type, active, count }: SearchBarTabProps): JSX.Element => {
     const { setActiveTab } = useActions(searchBarLogic)
     return (
-        <div
-            className={`${isFirst ? 'px-5' : 'px-3'} py-2 cursor-pointer text-xs ${active && 'font-bold'}`}
-            onClick={() => setActiveTab(type)}
-        >
+        <div className={`px-3 py-2 cursor-pointer text-xs ${active && 'font-bold'}`} onClick={() => setActiveTab(type)}>
             {resultTypeToName[type]}
             {count != null && <span className="ml-1 text-xxs text-muted-3000">{count}</span>}
         </div>
diff --git a/frontend/src/lib/components/CommandBar/SearchTabs.tsx b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
index f8bd8d26ec97a..e72700be4f1b1 100644
--- a/frontend/src/lib/components/CommandBar/SearchTabs.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
@@ -12,8 +12,8 @@ const SearchTabs = (): JSX.Element | null => {
     }
 
     return (
-        <div className="flex items-center border-t">
-            <SearchBarTab type="all" isFirst active={activeTab === 'all'} />
+        <div className="flex items-center border-t space-x-3 px-2">
+            <SearchBarTab type="all" active={activeTab === 'all'} />
             {Object.entries(searchResponse.counts).map(([type, count]) => (
                 <SearchBarTab key={type} type={type as ResultType} count={count} active={activeTab === type} />
             ))}