fix: added missing & selector to all pseudo events

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);

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)'

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 {

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);
   }
 `;

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);
   }
 `;

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);
   }
 `;

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);
   }
 `;

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);
   }
 `;

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;

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);
   }
 `;

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);
   }
 `;