From f245f6d1d92dc4497c19cb095bdedb5ec0ca190a Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 15 May 2024 15:23:32 +1000 Subject: [PATCH] fix: added missing & selector to all pseudo events --- ts/components/SessionHeaderSearchInput.tsx | 2 +- ts/components/basic/SessionRadio.tsx | 9 +++++---- ts/components/buttons/MenuButton.tsx | 2 +- .../message/message-content/MessageReactBar.tsx | 2 +- ts/components/leftpane/LeftPaneSettingSection.tsx | 2 +- .../leftpane/conversation-list-item/HeaderItem.tsx | 2 +- .../leftpane/overlay/choose-action/ActionRow.tsx | 2 +- .../leftpane/overlay/choose-action/ContactRow.tsx | 2 +- ts/components/loading/spinner/Spinner.tsx | 2 +- ts/components/settings/SessionSettingListItem.tsx | 4 ++-- ts/components/settings/SettingsThemeSwitcher.tsx | 2 +- 11 files changed, 16 insertions(+), 15 deletions(-) diff --git a/ts/components/SessionHeaderSearchInput.tsx b/ts/components/SessionHeaderSearchInput.tsx index 9fbbd2ade..5df208b17 100644 --- a/ts/components/SessionHeaderSearchInput.tsx +++ b/ts/components/SessionHeaderSearchInput.tsx @@ -23,7 +23,7 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>` color: var(--search-bar-text-control-color); } - :focus { + &:focus { border: solid 1px var(${props => (props.darkMode ? '--primary-color' : '--search-bar-text-user-color')}); color: var(--search-bar-text-user-color); diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx index a93243505..877bd4720 100644 --- a/ts/components/basic/SessionRadio.tsx +++ b/ts/components/basic/SessionRadio.tsx @@ -17,7 +17,7 @@ const StyledInput = styled.input<{ width: ${props => props.filledSize + props.outlineOffset}px; height: ${props => props.filledSize + props.outlineOffset}px; - :checked + label:before { + &:checked + label:before { background: ${props => props.disabled ? 'var(--disabled-color)' @@ -37,7 +37,7 @@ const StyledLabel = styled.label<{ cursor: pointer; color: ${props => (props.disabled ? 'var(--disabled-color)' : 'var(--text-primary-color)')}; - :before { + &:before { content: ''; display: inline-block; border-radius: 100%; @@ -138,12 +138,13 @@ const StyledInputOutlineSelected = styled(StyledInput)` label:before { outline: none; } - :checked + label:before { + + &:checked + label:before { outline: 1px solid currentColor; } `; const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>` - :before { + &:before { background: ${props => props.disabled ? 'var(--disabled-color)' diff --git a/ts/components/buttons/MenuButton.tsx b/ts/components/buttons/MenuButton.tsx index a2fe56d35..d12c0eace 100644 --- a/ts/components/buttons/MenuButton.tsx +++ b/ts/components/buttons/MenuButton.tsx @@ -21,7 +21,7 @@ const StyledMenuButton = styled.button` transition: var(--default-duration); - :hover { + &:hover { background: var(--menu-button-background-hover-color); border-color: var(--menu-button-border-hover-color); svg path { diff --git a/ts/components/conversation/message/message-content/MessageReactBar.tsx b/ts/components/conversation/message/message-content/MessageReactBar.tsx index bf9ec25ee..7215695a3 100644 --- a/ts/components/conversation/message/message-content/MessageReactBar.tsx +++ b/ts/components/conversation/message/message-content/MessageReactBar.tsx @@ -50,7 +50,7 @@ const ReactButton = styled.span` cursor: pointer; font-size: 24px; - :hover { + &:hover { background-color: var(--chat-buttons-background-hover-color); } `; diff --git a/ts/components/leftpane/LeftPaneSettingSection.tsx b/ts/components/leftpane/LeftPaneSettingSection.tsx index 285806080..903848636 100644 --- a/ts/components/leftpane/LeftPaneSettingSection.tsx +++ b/ts/components/leftpane/LeftPaneSettingSection.tsx @@ -33,7 +33,7 @@ const StyledSettingsListItem = styled(Flex)<{ active: boolean }>` cursor: pointer; transition: var(--default-duration) !important; - :hover { + &:hover { background: var(--settings-tab-background-hover-color); } `; diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 344abb063..f7bdb0f45 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -108,7 +108,7 @@ const MentionAtSymbol = styled.span` border-radius: 8px; cursor: pointer; - :hover { + &:hover { filter: grayscale(0.7); } `; diff --git a/ts/components/leftpane/overlay/choose-action/ActionRow.tsx b/ts/components/leftpane/overlay/choose-action/ActionRow.tsx index 1cbccbd9a..ca8986153 100644 --- a/ts/components/leftpane/overlay/choose-action/ActionRow.tsx +++ b/ts/components/leftpane/overlay/choose-action/ActionRow.tsx @@ -10,7 +10,7 @@ const StyledActionRow = styled.button` transition-duration: var(--default-duration); width: 100%; - :hover { + &:hover { background: var(--conversation-tab-background-hover-color); } `; diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx index 3bf2e95cc..02bcf50ab 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx @@ -53,7 +53,7 @@ const StyledRowContainer = styled.button` border-top: 1px var(--border-color) solid; } - :hover { + &:hover { background-color: var(--conversation-tab-background-hover-color); } `; diff --git a/ts/components/loading/spinner/Spinner.tsx b/ts/components/loading/spinner/Spinner.tsx index 915dfb182..d67b9153f 100644 --- a/ts/components/loading/spinner/Spinner.tsx +++ b/ts/components/loading/spinner/Spinner.tsx @@ -46,7 +46,7 @@ const SpinnerContainer = styled.div` height: 56px; width: 56px; - /* :hover { + /* &:hover { animation-play-state: running; } animation-play-state: paused; diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index e6d6ed750..d8639e90f 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/ts/components/settings/SessionSettingListItem.tsx @@ -66,10 +66,10 @@ const StyledSettingItemInline = styled(StyledSettingItem)` const StyledSettingItemClickable = styled(StyledSettingItemInline)` cursor: pointer; - :hover { + &:hover { background: var(--settings-tab-background-hover-color); } - :active { + &:active { background: var(--settings-tab-background-selected-color); } `; diff --git a/ts/components/settings/SettingsThemeSwitcher.tsx b/ts/components/settings/SettingsThemeSwitcher.tsx index fb1e7d0bc..27e82705d 100644 --- a/ts/components/settings/SettingsThemeSwitcher.tsx +++ b/ts/components/settings/SettingsThemeSwitcher.tsx @@ -37,7 +37,7 @@ const ThemeContainer = styled.button` transition: var(--default-duration); - :hover { + &:hover { background: var(--settings-tab-background-hover-color); } `;