Adjust codebase to breaking changes in styled components v6

7 files changed, 55 insertions, 46 deletions

diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index 0111574f70..b0079226f3 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -8,17 +8,17 @@ import { Row } from './Row';
 import { CellSectionContext } from './Section';
 
 interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  selected?: boolean;
-  containedInSection: boolean;
+  $selected?: boolean;
+  $containedInSection: boolean;
 }
 
-const StyledCellButton = styled(Row)({}, (props: IStyledCellButtonProps) => {
-  const backgroundColor = props.selected
+const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
+  const backgroundColor = props.$selected
     ? colors.green
-    : props.containedInSection
+    : props.$containedInSection
     ? colors.blue40
     : colors.blue;
-  const backgroundColorHover = props.selected ? colors.green : colors.blue80;
+  const backgroundColorHover = props.$selected ? colors.green : colors.blue80;
 
   return {
     paddingRight: '16px',
@@ -27,7 +27,7 @@ const StyledCellButton = styled(Row)({}, (props: IStyledCellButtonProps) => {
     cursor: 'default',
     border: 'none',
     backgroundColor,
-    ':not(:disabled):hover': {
+    '&&:not(:disabled):hover': {
       backgroundColor: props.onClick ? backgroundColorHover : backgroundColor,
     },
   };
@@ -39,14 +39,16 @@ interface ICellButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
 
 export const CellButton = styled(
   React.forwardRef(function Button(props: ICellButtonProps, ref: React.Ref<HTMLButtonElement>) {
+    const { selected, ...otherProps } = props;
     const containedInSection = useContext(CellSectionContext);
     return (
       <CellDisabledContext.Provider value={props.disabled ?? false}>
         <StyledCellButton
           as="button"
           ref={ref}
-          containedInSection={containedInSection}
-          {...props}
+          $selected={selected}
+          $containedInSection={containedInSection}
+          {...otherProps}
         />
       </CellDisabledContext.Provider>
     );
diff --git a/gui/src/renderer/components/cell/Group.tsx b/gui/src/renderer/components/cell/Group.tsx
index a3198cabb0..86d95f0a33 100644
--- a/gui/src/renderer/components/cell/Group.tsx
+++ b/gui/src/renderer/components/cell/Group.tsx
@@ -3,12 +3,12 @@ import styled from 'styled-components';
 import { measurements } from '../common-styles';
 
 interface IStyledGroupProps {
-  noMarginBottom?: boolean;
+  $noMarginBottom?: boolean;
 }
 
-export const Group = styled.div({}, (props: IStyledGroupProps) => ({
+export const Group = styled.div<IStyledGroupProps>((props) => ({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  marginBottom: props.noMarginBottom ? '0px' : measurements.rowVerticalMargin,
+  marginBottom: props.$noMarginBottom ? '0px' : measurements.rowVerticalMargin,
 }));
diff --git a/gui/src/renderer/components/cell/Input.tsx b/gui/src/renderer/components/cell/Input.tsx
index 55260f6703..97fe01a185 100644
--- a/gui/src/renderer/components/cell/Input.tsx
+++ b/gui/src/renderer/components/cell/Input.tsx
@@ -24,15 +24,15 @@ const inputTextStyles: React.CSSProperties = {
   padding: '0px',
 };
 
-const StyledInput = styled.input({}, (props: { focused: boolean; valid?: boolean }) => ({
+const StyledInput = styled.input<{ $focused: boolean; $valid?: boolean }>((props) => ({
   ...inputTextStyles,
   backgroundColor: 'transparent',
   border: 'none',
   width: '100%',
   height: '100%',
-  color: props.valid === false ? colors.red : props.focused ? colors.blue : colors.white,
-  '::placeholder': {
-    color: props.focused ? colors.blue60 : colors.white60,
+  color: props.$valid === false ? colors.red : props.$focused ? colors.blue : colors.white,
+  '&&::placeholder': {
+    color: props.$focused ? colors.blue60 : colors.white60,
   },
 }));
 
@@ -150,8 +150,8 @@ function InputWithRef(props: IInputProps, forwardedRef: React.Ref<HTMLInputEleme
           {...otherProps}
           ref={combinedRef}
           type="text"
-          valid={valid}
-          focused={isFocused}
+          $valid={valid}
+          $focused={isFocused}
           aria-invalid={!valid}
           onChange={onChange}
           onFocus={onFocus}
@@ -167,10 +167,10 @@ function InputWithRef(props: IInputProps, forwardedRef: React.Ref<HTMLInputEleme
 
 export const Input = React.memo(React.forwardRef(InputWithRef));
 
-const InputFrame = styled.div((props: { focused: boolean }) => ({
+const InputFrame = styled.div<{ $focused: boolean }>((props) => ({
   display: 'flex',
   flexGrow: 0,
-  backgroundColor: props.focused ? colors.white : 'rgba(255,255,255,0.1)',
+  backgroundColor: props.$focused ? colors.white : 'rgba(255,255,255,0.1)',
   borderRadius: '4px',
   padding: '6px 8px',
 }));
@@ -222,7 +222,7 @@ function AutoSizingTextInputWithRef(props: IInputProps, forwardedRef: React.Ref<
 
   return (
     <BackAction disabled={!focused} action={blur}>
-      <InputFrame focused={focused}>
+      <InputFrame $focused={focused}>
         <StyledAutoSizingTextInputContainer>
           <StyledAutoSizingTextInputWrapper>
             <Input
@@ -254,11 +254,11 @@ const StyledSubmitButton = styled.button({
   padding: '10px 0',
 });
 
-const StyledInputWrapper = styled.div(normalText, (props: { marginLeft: number }) => ({
+const StyledInputWrapper = styled.div<{ $marginLeft: number }>(normalText, (props) => ({
   position: 'relative',
   flex: 1,
   width: '171px',
-  marginLeft: props.marginLeft + 'px',
+  marginLeft: props.$marginLeft + 'px',
   lineHeight: '24px',
   minHeight: '24px',
   fontWeight: 400,
@@ -266,7 +266,7 @@ const StyledInputWrapper = styled.div(normalText, (props: { marginLeft: number }
   maxWidth: '100%',
 }));
 
-const StyledTextArea = styled.textarea(normalText, (props: { invalid?: boolean }) => ({
+const StyledTextArea = styled.textarea<{ $invalid?: boolean }>(normalText, (props) => ({
   position: 'absolute',
   top: 0,
   left: 0,
@@ -279,7 +279,7 @@ const StyledTextArea = styled.textarea(normalText, (props: { invalid?: boolean }
   fontWeight: 400,
   resize: 'none',
   padding: '10px 25px 10px 0',
-  color: props.invalid ? colors.red : 'auto',
+  color: props.$invalid ? colors.red : 'auto',
 }));
 
 const StyledInputFiller = styled.div({
@@ -366,7 +366,7 @@ export function RowInput(props: IRowInputProps) {
   return (
     <BackAction disabled={!focused} action={blur}>
       <StyledCellInputRowContainer>
-        <StyledInputWrapper marginLeft={props.paddingLeft ?? 0}>
+        <StyledInputWrapper $marginLeft={props.paddingLeft ?? 0}>
           <StyledInputFiller>{value}</StyledInputFiller>
           <StyledTextArea
             ref={textAreaRef}
@@ -374,7 +374,7 @@ export function RowInput(props: IRowInputProps) {
             onKeyDown={onKeyDown}
             rows={1}
             value={value}
-            invalid={props.invalid}
+            $invalid={props.invalid}
             onFocus={onFocus}
             onBlur={onBlur}
             placeholder={props.placeholder}
diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx
index f3d3624d45..5e9963ded9 100644
--- a/gui/src/renderer/components/cell/Label.tsx
+++ b/gui/src/renderer/components/cell/Label.tsx
@@ -7,14 +7,14 @@ import ImageView, { IImageViewProps } from '../ImageView';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
 
-const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({
+const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
   margin: '10px 0',
   flex: 1,
   color: props.disabled ? colors.white40 : colors.white,
   textAlign: 'left',
 }));
 
-const StyledSubText = styled.span(tinyText, (props: { disabled: boolean }) => ({
+const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({
   color: props.disabled ? colors.white20 : colors.white60,
   flex: -1,
   textAlign: 'right',
@@ -22,7 +22,7 @@ const StyledSubText = styled.span(tinyText, (props: { disabled: boolean }) => ({
   marginRight: '8px',
 }));
 
-const StyledIconContainer = styled.div((props: { disabled: boolean }) => ({
+const StyledIconContainer = styled.div<{ disabled: boolean }>((props) => ({
   opacity: props.disabled ? 0.4 : 1,
 }));
 
@@ -30,7 +30,7 @@ const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
   tintColor: props.tintColor ?? colors.white60,
   tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60,
 }))((props: IImageViewProps) => ({
-  ':hover': {
+  '&&:hover': {
     backgroundColor: props.tintColor,
   },
   [`${CellButton}:not(:disabled):hover &&`]: {
diff --git a/gui/src/renderer/components/cell/Row.tsx b/gui/src/renderer/components/cell/Row.tsx
index 08309d6843..9aca25d3a0 100644
--- a/gui/src/renderer/components/cell/Row.tsx
+++ b/gui/src/renderer/components/cell/Row.tsx
@@ -1,10 +1,17 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../../config.json';
 import { measurements } from '../common-styles';
 import { Group } from './Group';
 
-export const Row = styled.div((props: { includeMarginBottomOnLast?: boolean }) => ({
+interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  includeMarginBottomOnLast?: boolean;
+}
+
+export const Row = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'includeMarginBottomOnLast',
+})<RowProps>((props) => ({
   display: 'flex',
   alignItems: 'center',
   backgroundColor: colors.blue,
@@ -12,7 +19,7 @@ export const Row = styled.div((props: { includeMarginBottomOnLast?: boolean }) =
   paddingLeft: measurements.viewMargin,
   paddingRight: measurements.viewMargin,
   marginBottom: '1px',
-  [`${Group} > &:last-child`]: {
+  [`${Group} > &&:last-child`]: {
     marginBottom: props.includeMarginBottomOnLast ? '1px' : '0px',
   },
 }));
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
index 8ba5975476..056aa8ceac 100644
--- a/gui/src/renderer/components/cell/Section.tsx
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -18,15 +18,15 @@ const StyledSection = styled.div({
 
 interface SectionTitleProps {
   disabled?: boolean;
-  thin?: boolean;
+  $thin?: boolean;
 }
 
-export const SectionTitle = styled(Row)(buttonText, (props: SectionTitleProps) => ({
+export const SectionTitle = styled(Row)<SectionTitleProps>(buttonText, (props) => ({
   paddingRight: '16px',
   color: props.disabled ? colors.white20 : colors.white,
-  fontWeight: props.thin ? 400 : 600,
-  fontSize: props.thin ? '15px' : '18px',
-  ...(props.thin ? openSans : sourceSansPro),
+  fontWeight: props.$thin ? 400 : 600,
+  fontSize: props.$thin ? '15px' : '18px',
+  ...(props.$thin ? openSans : sourceSansPro),
 }));
 
 export const CellSectionContext = React.createContext<boolean>(false);
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index 0842ce2c0e..f1d9e14360 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -77,7 +77,7 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
   const title = props.title ? (
     <>
       <AriaLabel>
-        <StyledTitleLabel as="label" disabled={props.disabled} thin={props.thinTitle}>
+        <StyledTitleLabel as="label" disabled={props.disabled} $thin={props.thinTitle}>
           {props.title}
         </StyledTitleLabel>
       </AriaLabel>
@@ -91,7 +91,7 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
 
   // Add potential additional items to the list. Used for custom entry.
   const children = (
-    <Cell.Group noMarginBottom>
+    <Cell.Group $noMarginBottom>
       {items}
       {props.children}
     </Cell.Group>
@@ -121,8 +121,8 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
   }
 }
 
-const StyledCellIcon = styled(Cell.Icon)((props: { visible: boolean }) => ({
-  opacity: props.visible ? 1 : 0,
+const StyledCellIcon = styled(Cell.Icon)<{ $visible: boolean }>((props) => ({
+  opacity: props.$visible ? 1 : 0,
   marginRight: '8px',
 }));
 
@@ -156,7 +156,7 @@ function SelectorCell<T>(props: SelectorCellProps<T>) {
       aria-selected={props.isSelected}
       aria-disabled={props.disabled}>
       <StyledCellIcon
-        visible={props.isSelected}
+        $visible={props.isSelected}
         source="icon-tick"
         width={18}
         tintColor={colors.white}
@@ -170,9 +170,9 @@ interface StyledCustomContainerProps {
   selected: boolean;
 }
 
-const StyledCustomContainer = styled(Cell.Container)((props: StyledCustomContainerProps) => ({
+const StyledCustomContainer = styled(Cell.Container)<StyledCustomContainerProps>((props) => ({
   backgroundColor: props.selected ? colors.green : colors.blue40,
-  ':hover': {
+  '&&:hover': {
     backgroundColor: props.selected ? colors.green : colors.blue,
   },
 }));
@@ -286,7 +286,7 @@ export function SelectorWithCustomItem<T, U>(props: SelectorWithCustomItemProps<
           aria-selected={customIsSelected}
           aria-disabled={props.disabled}>
           <StyledCellIcon
-            visible={customIsSelected}
+            $visible={customIsSelected}
             source="icon-tick"
             width={18}
             tintColor={colors.white}