chore: make skip inactivity more subtle (#21660)

PostHog · Apr 19, 2024 · 479cd88 · 479cd88
1 parent b7add1d
commit 479cd88
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 50 deletions.
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-p--dark.png b/frontend/__snapshots__/lemon-ui-icons--shelf-p--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-p--light.png b/frontend/__snapshots__/lemon-ui-icons--shelf-p--light.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-s--dark.png b/frontend/__snapshots__/lemon-ui-icons--shelf-s--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-icons--shelf-s--light.png b/frontend/__snapshots__/lemon-ui-icons--shelf-s--light.png
diff --git a/frontend/src/lib/lemon-ui/icons/categories.ts b/frontend/src/lib/lemon-ui/icons/categories.ts
@@ -23,6 +23,7 @@ export const OBJECTS = {
         'IconMap',
         'IconTie',
         'IconCoffee',
+        'IconCake',
         'IconFlag',
         'IconCreditCard',
         'IconCrown',
@@ -47,8 +48,8 @@ export const OBJECTS = {
         'IconGearFilled',
         'IconStack',
     ],
-    People: ['IconPeople', 'IconPeopleFilled', 'IconPerson', 'IconProfile', 'IconUser'],
-    'Business & Finance': ['IconStore', 'IconCart', 'IconReceipt', 'IconPiggyBank'],
+    People: ['IconPeople', 'IconPeopleFilled', 'IconPerson', 'IconProfile', 'IconUser', 'IconGroups'],
+    'Business & Finance': ['IconStore', 'IconCart', 'IconReceipt', 'IconPiggyBank', 'IconHandMoney'],
     Time: ['IconHourglass', 'IconCalendar', 'IconClock'],
     Nature: ['IconDay', 'IconNight', 'IconGlobe', 'IconCloud', 'IconBug'],
     Text: ['IconDocument', 'IconBrackets', 'IconTextWidth', 'IconQuote', 'IconLetter', 'IconNewspaper'],
@@ -65,6 +66,7 @@ export const TECHNOLOGY = {
         'IconServer',
         'IconDatabase',
         'IconHardDrive',
+        'IconMouse',
     ],
     Software: ['IconBrowser', 'IconCode', 'IconCodeInsert', 'IconTerminal', 'IconApp'],
     UI: [
@@ -81,6 +83,9 @@ export const TECHNOLOGY = {
         'IconCheckbox',
         'IconList',
         'IconColumns',
+        'IconBottomPanel',
+        'IconSidePanel',
+        'IconMouseScrollDown',
     ],
 }
 
@@ -117,6 +122,7 @@ export const ELEMENTS = {
         'IconCheck',
         'IconX',
         'IconEllipsis',
+        'IconHide',
     ],
     'Arrows & Shapes': [
         'IconArrowLeft',
@@ -125,6 +131,7 @@ export const ELEMENTS = {
         'IconArrowCircleRight',
         'IconArrowRightDown',
         'IconArrowUpRight',
+        'IconArrowUpLeftDiagonal',
         'IconCollapse',
         'IconExpand',
         'IconCollapse45',
@@ -176,6 +183,7 @@ export const TEAMS_AND_COMPANIES = {
         'IconPlayFilled',
         'IconPlaylist',
         'IconPause',
+        'IconFastForward',
         'IconPauseFilled',
         'IconRewind',
         'IconRecord',

diff --git a/frontend/src/lib/lemon-ui/icons/icons.tsx b/frontend/src/lib/lemon-ui/icons/icons.tsx
@@ -1229,23 +1229,6 @@ export function IconFullScreen(props: LemonIconProps): JSX.Element {
     )
 }
 
-export function IconSkipInactivity({ enabled, ...props }: LemonIconProps & { enabled?: boolean }): JSX.Element {
-    return (
-        <LemonIconBase {...props}>
-            <path
-                d="M10.025 17.5L5.75 13.225L4.5 17L1.5 7L11.5 10L7.725 11.25L12 15.525L10.025 17.5Z"
-                fill="currentColor"
-            />
-            <path
-                d="M14 12.375L22.25 12.375M14 15.625L17.5 15.625M14 8.875L17.5 8.875"
-                stroke="currentColor"
-                strokeOpacity={enabled ? '1' : '0.3'}
-                strokeWidth="1.25"
-            />
-        </LemonIconBase>
-    )
-}
-
 export function IconPlayCircle(props: LemonIconProps): JSX.Element {
     return (
         <LemonIconBase {...props}>
@@ -1257,14 +1240,6 @@ export function IconPlayCircle(props: LemonIconProps): JSX.Element {
     )
 }
 
-export function IconPause(props: LemonIconProps): JSX.Element {
-    return (
-        <LemonIconBase {...props}>
-            <path d="M6 19H10V5H6V19ZM14 5V19H18V5H14Z" fill="currentColor" />
-        </LemonIconBase>
-    )
-}
-
 export function IconSkipBackward(props: LemonIconProps): JSX.Element {
     return (
         <LemonIconBase {...props}>

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
@@ -1,8 +1,8 @@
-import { IconPlay } from '@posthog/icons'
-import { LemonMenu } from '@posthog/lemon-ui'
+import { IconFastForward, IconPause, IconPlay } from '@posthog/icons'
+import { LemonMenu, LemonSwitch } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
-import { IconFullScreen, IconPause, IconSkipInactivity } from 'lib/lemon-ui/icons'
+import { IconFullScreen } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import {
@@ -60,26 +60,20 @@ export function PlayerController(): JSX.Element {
                         </LemonMenu>
                     </div>
                     <div className="flex pl-2">
-                        <LemonButton
+                        <LemonSwitch
                             data-attr="skip-inactivity"
-                            size="small"
-                            onClick={() => {
-                                setSkipInactivitySetting(!skipInactivitySetting)
-                            }}
-                            icon={
-                                <IconSkipInactivity
+                            checked={skipInactivitySetting}
+                            onChange={setSkipInactivitySetting}
+                            tooltip={skipInactivitySetting ? 'Skipping inactivity' : 'Skip inactivity'}
+                            handleContent={
+                                <IconFastForward
                                     className={clsx(
-                                        'text-2xl',
-                                        skipInactivitySetting ? 'text-primary-3000' : 'text-primary-alt'
+                                        'p-0.5',
+                                        skipInactivitySetting ? 'text-primary-3000' : 'text-border-bold'
                                     )}
-                                    enabled={skipInactivitySetting}
                                 />
                             }
-                        >
-                            <span className={skipInactivitySetting ? 'text-primary-3000' : 'text-primary-alt'}>
-                                {skipInactivitySetting ? 'Skipping inactivity' : 'Skip inactivity'}
-                            </span>
-                        </LemonButton>
+                        />
                     </div>
                 </div>
 

diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
         "@medv/finder": "^3.1.0",
         "@microlink/react-json-view": "^1.21.3",
         "@monaco-editor/react": "4.4.6",
-        "@posthog/icons": "0.6.7",
+        "@posthog/icons": "0.7.0",
         "@posthog/plugin-scaffold": "^1.4.4",
         "@react-hook/size": "^2.1.2",
         "@rrweb/types": "2.0.0-alpha.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml