fix: repair placeholder selectors

required since upgrading styled-components

ts/components/SessionHeaderSearchInput.tsx

@@ -19,13 +19,13 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
   position: relative;
   border-radius: '4px';
 
-  ::placeholder {
+  &::placeholder {
     color: var(--search-bar-text-control-color);
   }
 
-  :focus {
+  &:focus {
     border: solid 1px
-      var(${props => (props.darkMode ? '--primary-color' : '--search-bar-text-user-color')});
+      ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--search-bar-text-user-color)')};
     color: var(--search-bar-text-user-color);
     outline: none;
   }

ts/components/inputs/SessionInput.tsx

@@ -27,7 +27,7 @@ const StyledInput = styled(motion.input)<{
   padding: var(--margins-lg);
   ${props => props.centerText && 'text-align: center;'}
 
-  ::placeholder {
+  &::placeholder {
     color: var(--input-text-placeholder-color);
     ${props => props.centerText && 'text-align: center;'}
   }
@@ -68,14 +68,14 @@ const StyledTextAreaContainer = styled(motion.div)<{
 
     ${props => props.centerText && 'text-align: center;'}
 
-    :placeholder-shown {
+    &:placeholder-shown {
       font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')};
       font-size: 12px;
       height: 48px;
       margin: var(--margins-md) 0;
     }
 
-    ::placeholder {
+    &::placeholder {
       color: var(--input-text-placeholder-color);
       ${props => props.centerText && 'text-align: center;'}
     }
@@ -121,7 +121,7 @@ const StyledInputContainer = styled(Flex)<{ error: boolean; biggerText?: boolean
     line-height: 18px;
 
     textarea {
-      :placeholder-shown {
+      &:placeholder-shown {
         font-size: var(--font-size-md);
         height: 56px;
       }