configurably round

PostHog · Feb 21, 2025 · 560010c · 560010c
1 parent b96f03c
commit 560010c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/frontend/src/scenes/session-recordings/components/PanelSettings.tsx b/frontend/src/scenes/session-recordings/components/PanelSettings.tsx
@@ -23,6 +23,10 @@ interface SettingsMenuProps extends Omit<LemonMenuProps, 'items' | 'children'> {
     whenUnavailable?: LemonMenuItem
     highlightWhenActive?: boolean
     closeOnClickInside?: boolean
+    /**
+     * Whether the button should be rounded or not
+     */
+    rounded?: boolean
 }
 
 export function SettingsBar({
@@ -57,6 +61,7 @@ export function SettingsMenu({
     closeOnClickInside = true,
     highlightWhenActive = true,
     whenUnavailable,
+    rounded = false,
     ...props
 }: SettingsMenuProps): JSX.Element {
     const active = items.some((cf) => !!cf.active)
@@ -68,7 +73,7 @@ export function SettingsMenu({
             {...props}
         >
             <LemonButton
-                className="rounded"
+                className={clsx(rounded ? 'rounded' : 'rounded-[0px]')}
                 status={highlightWhenActive && active ? 'danger' : 'default'}
                 size="xsmall"
                 icon={icon}
@@ -90,15 +95,22 @@ type SettingsButtonProps = (
 
 type SettingsToggleProps = SettingsButtonProps & {
     active: boolean
+    rounded?: boolean
 }
 
 export function SettingsButton(props: SettingsButtonProps): JSX.Element {
     return <SettingsToggle active={false} {...props} />
 }
 
-export function SettingsToggle({ title, icon, label, active, ...props }: SettingsToggleProps): JSX.Element {
+export function SettingsToggle({ title, icon, label, active, rounded, ...props }: SettingsToggleProps): JSX.Element {
     const button = (
-        <LemonButton className="rounded" icon={icon} size="xsmall" status={active ? 'danger' : 'default'} {...props}>
+        <LemonButton
+            className={clsx(rounded ? 'rounded' : 'rounded-[0px]')}
+            icon={icon}
+            size="xsmall"
+            status={active ? 'danger' : 'default'}
+            {...props}
+        >
             {label}
         </LemonButton>
     )

diff --git a/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx b/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx
@@ -218,6 +218,7 @@ export const RecordingsUniversalFilters = ({
                     title="Hide viewed recordings"
                     label="Hide viewed recordings"
                     onClick={() => setHideViewedRecordings(!hideViewedRecordings)}
+                    rounded={true}
                 />
                 <SettingsMenu
                     highlightWhenActive={false}
@@ -240,6 +241,7 @@ export const RecordingsUniversalFilters = ({
                     ]}
                     icon={<IconClock />}
                     label={TimestampFormatToLabel[playlistTimestampFormat]}
+                    rounded={true}
                 />
             </div>
         </>