use css for conditional styling

PostHog · Nov 8, 2023 · ed0d69b · ed0d69b
1 parent 5537b38
commit ed0d69b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git 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
@@ -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} />
             ))}