Adjust codebase to breaking changes in styled components v6

5 files changed, 35 insertions, 35 deletions

diff --git a/gui/src/renderer/components/select-location/CustomLists.tsx b/gui/src/renderer/components/select-location/CustomLists.tsx
index 358070ae46..7fb66f630e 100644
--- a/gui/src/renderer/components/select-location/CustomLists.tsx
+++ b/gui/src/renderer/components/select-location/CustomLists.tsx
@@ -57,8 +57,8 @@ const StyledSideButtonIcon = styled(Cell.Icon)({
   },
 });
 
-const StyledInput = styled(SimpleInput)((props: { error: boolean }) => ({
-  color: props.error ? colors.red : 'auto',
+const StyledInput = styled(SimpleInput)<{ $error: boolean }>((props) => ({
+  color: props.$error ? colors.red : 'auto',
 }));
 
 interface CustomListsProps {
@@ -93,8 +93,8 @@ export default function CustomLists(props: CustomListsProps) {
           {messages.pgettext('select-location-view', 'Custom lists')}
         </StyledHeaderLabel>
         <StyledCellButton
-          backgroundColor={colors.blue}
-          backgroundColorHover={colors.blue80}
+          $backgroundColor={colors.blue}
+          $backgroundColorHover={colors.blue80}
           onClick={showAddList}>
           <StyledSideButtonIcon source="icon-add" tintColor={colors.white60} width={18} />
         </StyledCellButton>
@@ -172,14 +172,14 @@ function AddListForm(props: AddListFormProps) {
             onSubmitValue={createList}
             onBlur={onBlur}
             maxLength={30}
-            error={error}
+            $error={error}
             autoFocus
           />
         </StyledInputContainer>
 
         <StyledAddListCellButton
-          backgroundColor={colors.blue}
-          backgroundColorHover={colors.blue80}
+          $backgroundColor={colors.blue}
+          $backgroundColorHover={colors.blue80}
           onClick={createList}>
           <StyledSideButtonIcon source="icon-check" tintColor={colors.white60} width={18} />
         </StyledAddListCellButton>
diff --git a/gui/src/renderer/components/select-location/LocationRow.tsx b/gui/src/renderer/components/select-location/LocationRow.tsx
index 7ebae688a6..97c8528fa9 100644
--- a/gui/src/renderer/components/select-location/LocationRow.tsx
+++ b/gui/src/renderer/components/select-location/LocationRow.tsx
@@ -29,15 +29,15 @@ import {
 } from './select-location-types';
 
 interface IButtonColorProps {
-  backgroundColor: string;
-  backgroundColorHover: string;
+  $backgroundColor: string;
+  $backgroundColorHover: string;
 }
 
 const buttonColor = (props: IButtonColorProps) => {
   return {
-    backgroundColor: props.backgroundColor,
-    ':not(:disabled):hover': {
-      backgroundColor: props.backgroundColorHover,
+    backgroundColor: props.$backgroundColor,
+    '&&:not(:disabled):hover': {
+      backgroundColor: props.$backgroundColorHover,
     },
   };
 };
@@ -48,10 +48,10 @@ export const StyledLocationRowContainer = styled(Cell.Container)({
   background: 'none',
 });
 
-export const StyledLocationRowButton = styled(Cell.Row)(
+export const StyledLocationRowButton = styled(Cell.Row)<IButtonColorProps & { $level: number }>(
   buttonColor,
-  (props: IButtonColorProps & { level: number }) => {
-    const paddingLeft = (props.level + 1) * 16 + 2;
+  (props) => {
+    const paddingLeft = (props.$level + 1) * 16 + 2;
 
     return {
       display: 'flex',
@@ -64,13 +64,13 @@ export const StyledLocationRowButton = styled(Cell.Row)(
   },
 );
 
-export const StyledLocationRowIcon = styled.button(buttonColor, {
+export const StyledLocationRowIcon = styled.button<IButtonColorProps>(buttonColor, {
   position: 'relative',
   alignSelf: 'stretch',
   paddingLeft: measurements.viewMargin,
   paddingRight: measurements.viewMargin,
 
-  '&::before': {
+  '&&::before': {
     content: '""',
     position: 'absolute',
     margin: 'auto',
@@ -93,26 +93,26 @@ export const StyledLocationRowLabel = styled(Cell.Label)(normalText, {
   whiteSpace: 'nowrap',
 });
 
-const StyledHoverIconButton = styled.button(
+const StyledHoverIconButton = styled.button<IButtonColorProps & { $isLast?: boolean }>(
   buttonColor,
-  (props: { isLast?: boolean } & IButtonColorProps) => ({
+  (props) => ({
     flex: 0,
     display: 'none',
     padding: '0 10px',
-    paddingRight: props.isLast ? '17px' : '10px',
+    paddingRight: props.$isLast ? '17px' : '10px',
     margin: 0,
     border: 0,
     height: measurements.rowMinHeight,
     appearance: 'none',
 
-    ':not(:disabled):hover': {
-      backgroundColor: props.backgroundColor,
+    '&&:not(:disabled):hover': {
+      backgroundColor: props.$backgroundColor,
     },
     [`${StyledLocationRowContainer}:hover &&`]: {
       display: 'block',
     },
     [`${StyledLocationRowButton}:hover ~ &&`]: {
-      backgroundColor: props.backgroundColorHover,
+      backgroundColor: props.$backgroundColorHover,
     },
   }),
 );
@@ -240,7 +240,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
           as="button"
           ref={buttonRef}
           onClick={handleClick}
-          level={props.level}
+          $level={props.level}
           disabled={props.source.disabled}
           includeMarginBottomOnLast
           {...background}>
@@ -249,7 +249,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
         </StyledLocationRowButton>
 
         {props.allowAddToCustomList ? (
-          <StyledHoverIconButton onClick={showAddToListDialog} isLast {...background}>
+          <StyledHoverIconButton onClick={showAddToListDialog} $isLast {...background}>
             <StyledHoverIcon source="icon-add" />
           </StyledHoverIconButton>
         ) : null}
@@ -258,7 +258,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
         {'customList' in props.source.location &&
         'country' in props.source.location &&
         props.level === 1 ? (
-          <StyledHoverIconButton onClick={onRemoveFromList} isLast {...background}>
+          <StyledHoverIconButton onClick={onRemoveFromList} $isLast {...background}>
             <StyledHoverIcon source="icon-remove" />
           </StyledHoverIconButton>
         ) : null}
@@ -269,7 +269,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
             <StyledHoverIconButton onClick={showEditDialog} {...background}>
               <StyledHoverIcon source="icon-edit" />
             </StyledHoverIconButton>
-            <StyledHoverIconButton onClick={onRemoveCustomList} isLast {...background}>
+            <StyledHoverIconButton onClick={onRemoveCustomList} $isLast {...background}>
               <StyledHoverIcon source="icon-close" />
             </StyledHoverIconButton>
           </>
@@ -297,7 +297,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
           onWillExpand={onWillExpand}
           onTransitionEnd={props.onTransitionEnd}
           animationDuration={150}>
-          <Cell.Group noMarginBottom>{props.children}</Cell.Group>
+          <Cell.Group $noMarginBottom>{props.children}</Cell.Group>
         </Accordion>
       )}
 
@@ -333,8 +333,8 @@ export function getButtonColor(selected: boolean, level: number, disabled?: bool
   }
 
   return {
-    backgroundColor,
-    backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
+    $backgroundColor: backgroundColor,
+    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
   };
 }
 
diff --git a/gui/src/renderer/components/select-location/RelayLocationList.tsx b/gui/src/renderer/components/select-location/RelayLocationList.tsx
index 27fe75ea50..49e1f2a38c 100644
--- a/gui/src/renderer/components/select-location/RelayLocationList.tsx
+++ b/gui/src/renderer/components/select-location/RelayLocationList.tsx
@@ -25,7 +25,7 @@ interface RelayLocationsProps extends CommonProps {
 
 export default function RelayLocationList({ source, ...props }: RelayLocationsProps) {
   return (
-    <Cell.Group noMarginBottom>
+    <Cell.Group $noMarginBottom>
       {source.map((country) => (
         <RelayLocation
           key={getLocationKey(country.location)}
diff --git a/gui/src/renderer/components/select-location/ScopeBar.tsx b/gui/src/renderer/components/select-location/ScopeBar.tsx
index 94c80dea7c..bbe4935993 100644
--- a/gui/src/renderer/components/select-location/ScopeBar.tsx
+++ b/gui/src/renderer/components/select-location/ScopeBar.tsx
@@ -35,7 +35,7 @@ export function ScopeBar(props: IScopeBarProps) {
   return <StyledScopeBar className={props.className}>{children}</StyledScopeBar>;
 }
 
-const StyledScopeBarItem = styled.button(smallText, (props: { selected?: boolean }) => ({
+const StyledScopeBarItem = styled.button<{ selected?: boolean }>(smallText, (props) => ({
   cursor: 'default',
   flex: 1,
   flexBasis: 0,
@@ -44,7 +44,7 @@ const StyledScopeBarItem = styled.button(smallText, (props: { selected?: boolean
   textAlign: 'center',
   border: 'none',
   backgroundColor: props.selected ? colors.green : 'transparent',
-  ':hover': {
+  '&&:hover': {
     backgroundColor: props.selected ? colors.green : colors.blue40,
   },
 }));
diff --git a/gui/src/renderer/components/select-location/SpecialLocationList.tsx b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
index c8c0c8e787..030520fc73 100644
--- a/gui/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -64,7 +64,7 @@ function SpecialLocationRow<T>(props: SpecialLocationRowProps<T>) {
   const background = getButtonColor(props.source.selected, 0, props.source.disabled);
   return (
     <StyledLocationRowContainerWithMargin ref={selectedRef}>
-      <StyledLocationRowButton onClick={onSelect} level={0} {...background}>
+      <StyledLocationRowButton onClick={onSelect} $level={0} {...background}>
         {icon && (
           <StyledSpecialLocationIcon
             source={icon}
@@ -79,8 +79,8 @@ function SpecialLocationRow<T>(props: SpecialLocationRowProps<T>) {
         <StyledLocationRowIcon
           as={StyledSpecialLocationInfoButton}
           message={props.source.info}
-          selected={props.source.selected}
           aria-label={messages.pgettext('accessibility', 'info')}
+          {...background}
         />
       )}
     </StyledLocationRowContainerWithMargin>