Merge branch 'update-styled-components'

mullvad · Oct 30, 2023 · fc82934 · fc82934
2 parents 87ce1ee + db89a8d
commit fc82934
Show file tree

Hide file tree

Showing 49 changed files with 625 additions and 813 deletions.
diff --git a/gui/package-lock.json b/gui/package-lock.json
diff --git a/gui/package.json b/gui/package.json
@@ -26,7 +26,7 @@
     "react-simple-maps": "^3.0.0",
     "redux": "^4.2.0",
     "sprintf-js": "^1.1.2",
-    "styled-components": "^5.1.1"
+    "styled-components": "^6.1.0"
   },
   "optionalDependencies": {
     "grpc-tools": "^1.12.4",
@@ -52,7 +52,6 @@
     "@types/react-simple-maps": "^1.0.8",
     "@types/sinon": "^10.0.13",
     "@types/sprintf-js": "^1.1.2",
-    "@types/styled-components": "^5.1.26",
     "@types/topojson-specification": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
@@ -1,6 +1,7 @@
 import { batch, Provider } from 'react-redux';
 import { Router } from 'react-router';
 import { bindActionCreators } from 'redux';
+import { StyleSheetManager } from 'styled-components';
 
 import { hasExpired } from '../shared/account-expiry';
 import { ILinuxSplitTunnelingApplication, IWindowsApplication } from '../shared/application-types';
@@ -276,19 +277,21 @@ export default class AppRenderer {
     return (
       <AppContext.Provider value={{ app: this }}>
         <Provider store={this.reduxStore}>
-          <Lang>
-            <Router history={this.history.asHistory}>
-              <ErrorBoundary>
-                <ModalContainer>
-                  <KeyboardNavigation>
-                    <AppRouter />
-                    <Changelog />
-                  </KeyboardNavigation>
-                  {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
-                </ModalContainer>
-              </ErrorBoundary>
-            </Router>
-          </Lang>
+          <StyleSheetManager enableVendorPrefixes>
+            <Lang>
+              <Router history={this.history.asHistory}>
+                <ErrorBoundary>
+                  <ModalContainer>
+                    <KeyboardNavigation>
+                      <AppRouter />
+                      <Changelog />
+                    </KeyboardNavigation>
+                    {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
+                  </ModalContainer>
+                </ErrorBoundary>
+              </Router>
+            </Lang>
+          </StyleSheetManager>
         </Provider>
       </AppContext.Provider>
     );

diff --git a/gui/src/renderer/components/Accordion.tsx b/gui/src/renderer/components/Accordion.tsx
@@ -14,11 +14,11 @@ interface IState {
   containerHeight: string;
 }
 
-const Container = styled.div((props: { height: string; animationDuration: number }) => ({
+const Container = styled.div<{ $height: string; $animationDuration: number }>((props) => ({
   display: 'flex',
-  height: props.height,
+  height: props.$height,
   overflow: 'hidden',
-  transition: `height ${props.animationDuration}ms ease-in-out`,
+  transition: `height ${props.$animationDuration}ms ease-in-out`,
 }));
 
 const Content = styled.div({
@@ -55,8 +55,8 @@ export default class Accordion extends React.Component<IProps, IState> {
     return (
       <Container
         ref={this.containerRef}
-        height={this.state.containerHeight}
-        animationDuration={this.props.animationDuration}
+        $height={this.state.containerHeight}
+        $animationDuration={this.props.animationDuration}
         onTransitionEnd={this.onTransitionEnd}>
         <Content ref={this.contentRef}>{this.state.mountChildren && this.props.children}</Content>
       </Container>

diff --git a/gui/src/renderer/components/AppButton.tsx b/gui/src/renderer/components/AppButton.tsx
@@ -22,7 +22,7 @@ interface ILabelProps {
 }
 
 export function Label(props: ILabelProps) {
-  return <StyledLabel textOffset={props.textOffset ?? 0}>{props.children}</StyledLabel>;
+  return <StyledLabel $textOffset={props.textOffset ?? 0}>{props.children}</StyledLabel>;
 }
 
 interface IIconProps {
@@ -108,7 +108,7 @@ const StyledSimpleButton = styled(SimpleButton)({
   borderRadius: 4,
   border: 'none',
   padding: 0,
-  ':disabled': {
+  '&&:disabled': {
     opacity: 0.5,
   },
 });
@@ -156,35 +156,35 @@ export function BlockingButton(props: IBlockingProps) {
 
 export const RedButton = styled(BaseButton)({
   backgroundColor: colors.red,
-  ':not(:disabled):hover': {
+  '&&:not(:disabled):hover': {
     backgroundColor: colors.red95,
   },
 });
 
 export const GreenButton = styled(BaseButton)({
   backgroundColor: colors.green,
-  ':not(:disabled):hover': {
+  '&&:not(:disabled):hover': {
     backgroundColor: colors.green90,
   },
 });
 
 export const BlueButton = styled(BaseButton)({
   backgroundColor: colors.blue80,
-  ':not(:disabled):hover': {
+  '&&:not(:disabled):hover': {
     backgroundColor: colors.blue60,
   },
 });
 
 export const TransparentButton = styled(BaseButton)(transparentButton, {
   backgroundColor: colors.white20,
-  ':not(:disabled):hover': {
+  '&&:not(:disabled):hover': {
     backgroundColor: colors.white40,
   },
 });
 
 export const RedTransparentButton = styled(BaseButton)(transparentButton, {
   backgroundColor: colors.red60,
-  ':not(:disabled):hover': {
+  '&&:not(:disabled):hover': {
     backgroundColor: colors.red80,
   },
 });
@@ -193,7 +193,7 @@ const StyledButtonWrapper = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  ':not(:last-child)': {
+  '&&:not(:last-child)': {
     marginBottom: measurements.buttonVerticalMargin,
   },
 });

diff --git a/gui/src/renderer/components/AppButtonStyles.tsx b/gui/src/renderer/components/AppButtonStyles.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 import { buttonText } from './common-styles';
 
-export const StyledLabel = styled.span(buttonText, (props: { textOffset: number }) => ({
-  paddingLeft: props.textOffset > 0 ? `${props.textOffset}px` : 0,
-  paddingRight: props.textOffset < 0 ? `${-props.textOffset}px` : 0,
+export const StyledLabel = styled.span<{ $textOffset: number }>(buttonText, (props) => ({
+  paddingLeft: props.$textOffset > 0 ? `${props.$textOffset}px` : 0,
+  paddingRight: props.$textOffset < 0 ? `${-props.$textOffset}px` : 0,
   textAlign: 'center',
   wordBreak: 'break-word',
 }));

diff --git a/gui/src/renderer/components/ConnectionPanelDisclosure.tsx b/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
@@ -11,18 +11,18 @@ const Container = styled.div({
   width: '100%',
 });
 
-const Caption = styled.span(normalText, (props: { open: boolean }) => ({
+const Caption = styled.span<{ $open: boolean }>(normalText, (props) => ({
   fontWeight: 600,
   lineHeight: '20px',
   minWidth: '0px',
-  color: props.open ? colors.white : colors.white40,
-  [Container + ':hover &']: {
+  color: props.$open ? colors.white : colors.white40,
+  [Container + ':hover &&']: {
     color: colors.white,
   },
 }));
 
 const Chevron = styled(ImageView)({
-  [Container + ':hover &']: {
+  [Container + ':hover &&']: {
     backgroundColor: colors.white,
   },
 });
@@ -37,7 +37,7 @@ interface IProps {
 export default function ConnectionPanelDisclosure(props: IProps) {
   return (
     <Container className={props.className} onClick={props.onToggle}>
-      <Caption open={props.pointsUp}>{props.children}</Caption>
+      <Caption $open={props.pointsUp}>{props.children}</Caption>
       <Chevron
         source={props.pointsUp ? 'icon-chevron-up' : 'icon-chevron-down'}
         width={22}

diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -6,7 +6,7 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { formatHtml } from '../lib/html-formatter';
 import { IpAddress } from '../lib/ip';
-import { useBoolean, useMounted } from '../lib/utilityHooks';
+import { useBoolean, useMounted, useStyledRef } from '../lib/utilityHooks';
 import { useSelector } from '../redux/store';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
@@ -57,9 +57,9 @@ export default function CustomDnsSettings() {
     [dns],
   );
 
-  const switchRef = useRef() as React.RefObject<HTMLDivElement>;
-  const addButtonRef = useRef() as React.RefObject<HTMLButtonElement>;
-  const inputContainerRef = useRef() as React.RefObject<HTMLDivElement>;
+  const switchRef = useStyledRef<HTMLDivElement>();
+  const addButtonRef = useStyledRef<HTMLButtonElement>();
+  const inputContainerRef = useStyledRef<HTMLDivElement>();
 
   const confirm = useCallback(() => {
     void confirmAction?.();
@@ -323,7 +323,7 @@ function CellListItem(props: ICellListItemProps) {
   const [invalid, setInvalid, setValid] = useBoolean(false);
   const isMounted = useMounted();
 
-  const inputContainerRef = useRef() as React.RefObject<HTMLDivElement>;
+  const inputContainerRef = useStyledRef<HTMLDivElement>();
 
   const onRemove = useCallback(() => props.onRemove(props.children), [
     props.onRemove,

diff --git a/gui/src/renderer/components/CustomDnsSettingsStyles.tsx b/gui/src/renderer/components/CustomDnsSettingsStyles.tsx
@@ -12,19 +12,16 @@ export const StyledAddCustomDnsButton = styled(Cell.CellButton)({
   backgroundColor: colors.blue40,
 });
 
-export const StyledAddCustomDnsLabel = styled(Cell.Label)(
-  {},
-  (props: { paddingLeft?: number }) => ({
-    fontFamily: 'Open Sans',
-    fontWeight: 400,
-    fontSize: '16px',
-    paddingLeft: (props.paddingLeft ?? 32) + 'px',
-    whiteSpace: 'pre-wrap',
-    overflowWrap: 'break-word',
-    width: '171px',
-    marginRight: '25px',
-  }),
-);
+export const StyledAddCustomDnsLabel = styled(Cell.Label)<{ $paddingLeft?: number }>((props) => ({
+  fontFamily: 'Open Sans',
+  fontWeight: 400,
+  fontSize: '16px',
+  paddingLeft: (props.$paddingLeft ?? 32) + 'px',
+  whiteSpace: 'pre-wrap',
+  overflowWrap: 'break-word',
+  width: '171px',
+  marginRight: '25px',
+}));
 
 export const StyledContainer = styled(Cell.Container)({
   display: 'flex',
@@ -59,7 +56,7 @@ export const StyledRemoveButton = styled.button({
 });
 
 export const StyledRemoveIcon = styled(ImageView)({
-  [StyledRemoveButton + ':hover &']: {
+  [StyledRemoveButton + ':hover &&']: {
     backgroundColor: colors.white80,
   },
 });
diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -19,44 +19,44 @@ const StyledCustomScrollbars = styled.div({
   overflow: 'hidden',
 });
 
-const StyledScrollable = styled.div((props: { fillContainer?: boolean }) => ({
-  flex: props.fillContainer ? '1' : undefined,
+const StyledScrollable = styled.div<{ $fillContainer?: boolean }>((props) => ({
+  flex: props.$fillContainer ? '1' : undefined,
   width: '100%',
   overflow: 'auto',
-  '::-webkit-scrollbar': {
+  '&&::-webkit-scrollbar': {
     display: 'none',
   },
 }));
 
-const StyledTrack = styled.div({}, (props: { canScroll: boolean; show: boolean }) => ({
+const StyledTrack = styled.div<{ $canScroll: boolean; $show: boolean }>((props) => ({
   position: 'absolute',
   top: 0,
   right: 0,
   bottom: 0,
   width: '16px',
-  backgroundColor: props.show ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0)',
+  backgroundColor: props.$show ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0)',
   borderRadius: '8px',
   transition: 'width 0.1s ease-in-out, background-color 0.25s ease-in-out',
   zIndex: 99,
-  pointerEvents: props.canScroll ? 'auto' : 'none',
-  // Thumb should be less transparent when track is hovered.
-  [`&:hover ${StyledThumb}`]: {
-    backgroundColor: 'rgba(255, 255, 255, 0.65)',
-  },
+  pointerEvents: props.$canScroll ? 'auto' : 'none',
 }));
 
-const StyledThumb = styled.div(
-  {},
-  (props: { show: boolean; isDragging: boolean; wide: boolean }) => ({
+const StyledThumb = styled.div<{ $show: boolean; $isDragging: boolean; $wide: boolean }>(
+  (props) => ({
     position: 'absolute',
     top: 0,
     right: 0,
-    borderRadius: props.wide ? '6px' : '4px',
-    width: props.wide ? '12px' : '8px',
+    borderRadius: props.$wide ? '6px' : '4px',
+    width: props.$wide ? '12px' : '8px',
     transition:
       'width 0.25s ease-in-out, border-radius 0.25s ease-in-out, height 0.25s ease-in-out, opacity 0.25s ease-in-out, background-color 0.1s ease-in-out',
-    opacity: props.show ? 1 : 0,
-    backgroundColor: props.isDragging ? 'rgba(255, 255, 255, 0.65)' : 'rgba(255, 255, 255, 0.4)',
+    opacity: props.$show ? 1 : 0,
+    backgroundColor: props.$isDragging ? 'rgba(255, 255, 255, 0.65)' : 'rgba(255, 255, 255, 0.4)',
+
+    // Thumb should be less transparent when track is hovered.
+    [`${StyledTrack}:hover &&`]: {
+      backgroundColor: 'rgba(255, 255, 255, 0.65)',
+    },
   }),
 );
 
@@ -260,20 +260,20 @@ class CustomScrollbars extends React.Component<IProps, IState> {
       <StyledCustomScrollbars {...otherProps}>
         <StyledTrack
           ref={this.trackRef}
-          show={showScrollbars && this.state.active}
-          canScroll={this.state.canScroll}
+          $show={showScrollbars && this.state.active}
+          $canScroll={this.state.canScroll}
           onMouseEnter={this.handleMouseEnter}
           onMouseLeave={this.handleMouseLeave}>
           <StyledThumb
             ref={this.thumbRef}
-            show={showScrollbars}
-            isDragging={this.state.isDragging}
-            wide={this.state.active}
+            $show={showScrollbars}
+            $isDragging={this.state.isDragging}
+            $wide={this.state.active}
             onMouseDown={this.handleMouseDown}
           />
         </StyledTrack>
         <StyledScrollable
-          fillContainer={fillContainer}
+          $fillContainer={fillContainer}
           onScroll={this.onScroll}
           ref={this.scrollableRef}>
           <StyledScrollableContent ref={this.scrollableContentRef}>