Merge branch 'upgrade-styled-components'

mullvad · Dec 3, 2024 · 54302b4 · 54302b4
2 parents 2bf4038 + dc781b8
commit 54302b4
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 86 deletions.
diff --git a/desktop/package-lock.json b/desktop/package-lock.json
diff --git a/desktop/packages/mullvad-vpn/package.json b/desktop/packages/mullvad-vpn/package.json
@@ -25,7 +25,7 @@
     "redux": "^4.2.0",
     "simple-plist": "^1.3.1",
     "sprintf-js": "^1.1.2",
-    "styled-components": "^6.1.0",
+    "styled-components": "^6.1.13",
     "nseventforwarder": "0.0.0"
   },
   "optionalDependencies": {

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Accordion.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Accordion.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 interface IProps {
   expanded: boolean;
-  animationDuration: number;
+  animationDuration?: number;
   children?: React.ReactNode;
   onWillExpand?: (contentHeight: number) => void;
   onTransitionEnd?: () => void;
@@ -33,7 +33,6 @@ const Content = styled.div({
 export default class Accordion extends React.Component<IProps, IState> {
   public static defaultProps = {
     expanded: true,
-    animationDuration: 350,
   };
 
   public state: IState = {
@@ -58,7 +57,7 @@ export default class Accordion extends React.Component<IProps, IState> {
         ref={this.containerRef}
         className={this.props.className}
         $height={this.state.containerHeight}
-        $animationDuration={this.props.animationDuration}
+        $animationDuration={this.props.animationDuration ?? 350}
         onTransitionEnd={this.onTransitionEnd}>
         <Content ref={this.contentRef}>{this.state.mountChildren && this.props.children}</Content>
       </Container>

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
@@ -214,7 +214,7 @@ function useProviders(): Record<string, boolean> {
 
 const StyledSelector = styled(Selector)({
   marginBottom: 0,
-});
+}) as typeof Selector;
 
 interface IFilterByOwnershipProps {
   ownership: Ownership;

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SelectLanguage.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SelectLanguage.tsx
@@ -21,7 +21,7 @@ import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 const StyledSelector = styled(Selector)({
   marginBottom: 0,
-});
+}) as typeof Selector;
 
 export default function SelectLanguage() {
   const { pop } = useHistory();