Merge branch 'add-global-button-css-reset-des-2205'

14 files changed, 34 insertions, 76 deletions

diff --git a/desktop/packages/mullvad-vpn/assets/css/global.css b/desktop/packages/mullvad-vpn/assets/css/global.css
index e8d4d1619c..b977cf64dc 100644
--- a/desktop/packages/mullvad-vpn/assets/css/global.css
+++ b/desktop/packages/mullvad-vpn/assets/css/global.css
@@ -25,6 +25,18 @@ body {
   display: flex;
 }
 
+button {
+  border-radius: 0;
+  text-align: inherit;
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  cursor: default;
+  border: none;
+  color: inherit;
+  font: inherit;
+}
+
 #app {
   height: 100%;
   width: 100%;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
index 883260d474..68824f564c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -2,8 +2,6 @@ import styled from 'styled-components';
 
 import { Icon } from '../lib/components';
 import { colors, spacings } from '../lib/foundations';
-import { buttonReset } from '../lib/styles';
-import * as Cell from './cell';
 import { hugeText, largeText, measurements, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 import { Footer } from './Layout';
@@ -23,7 +21,6 @@ export const StyledAccountDropdownItem = styled.li({
 });
 
 const baseButtonStyles = {
-  ...buttonReset,
   width: '100%',
   height: '100%',
   backgroundColor: colors.whiteAlpha60,
@@ -49,25 +46,6 @@ export const StyledAccountDropdownItemIconButton = styled.button({
   justifyContent: 'center',
 });
 
-export const StyledAccountDropdownTrailingButton = styled.button({
-  ...buttonReset,
-  backgroundColor: colors.transparent,
-  cursor: 'pointer',
-  '&:focus-visible': {
-    outline: `2px solid ${colors.white}`,
-    outlineOffset: '2px',
-  },
-});
-
-export const StyledAccountDropdownItemButtonLabel = styled(Cell.Label)(largeText, {
-  margin: '0',
-  color: colors.blue80,
-  borderWidth: 0,
-  textAlign: 'left',
-  marginLeft: 0,
-  cursor: 'default',
-});
-
 export const StyledTopInfo = styled.div({
   display: 'flex',
   justifyContent: 'center',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index 736c3d6ad3..204da6fabc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { InAppNotificationSubtitle } from '../../shared/notifications';
 import { LabelTiny, Link } from '../lib/components';
 import { formatHtml } from '../lib/html-formatter';
-import { buttonReset } from '../lib/styles';
 import { ExternalLink } from './ExternalLink';
 import { InternalLink } from './InternalLink';
 
@@ -12,12 +11,7 @@ export type NotificationSubtitleProps = {
   subtitle?: string | InAppNotificationSubtitle[];
 };
 
-const StyledLink = styled(Link)(() => {
-  const { color: _, ...reset } = buttonReset;
-  return {
-    ...reset,
-  };
-});
+const StyledLink = styled(Link)``;
 
 const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
   const content = formatHtml(subtitle.content);
@@ -38,7 +32,11 @@ const formatSubtitle = (subtitle: InAppNotificationSubtitle) => {
         );
       case 'run-function':
         return (
-          <StyledLink color="white" forwardedAs="button" {...subtitle.action.button}>
+          <StyledLink
+            forwardedAs="button"
+            color="white"
+            variant="labelTiny"
+            {...subtitle.action.button}>
             <StyledLink.Text>{content}</StyledLink.Text>
           </StyledLink>
         );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index 7ee3277335..26fe69ab7c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -189,14 +189,16 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
           <ApplicationList applications={filteredApplications} rowRenderer={rowRenderer} />
         )}
 
-        <Button onClick={launchWithFilePicker}>
-          <Button.Text>
-            {
-              // TRANSLATORS: Button label for browsing applications with split tunneling.
-              messages.pgettext('split-tunneling-view', 'Find another app')
-            }
-          </Button.Text>
-        </Button>
+        <Flex $margin={{ horizontal: 'medium', bottom: 'large' }}>
+          <Button onClick={launchWithFilePicker}>
+            <Button.Text>
+              {
+                // TRANSLATORS: Button label for browsing applications with split tunneling.
+                messages.pgettext('split-tunneling-view', 'Find another app')
+              }
+            </Button.Text>
+          </Button>
+        </Flex>
       </FlexColumn>
 
       <ModalAlert
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTrigger.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTrigger.tsx
index 30ba2092c0..ff852e4ea1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTrigger.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionTrigger.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../../foundations';
-import { ButtonBase } from '../../button';
 import { useAccordionContext } from '../AccordionContext';
 import { StyledAccordionHeader } from './AccordionHeader';
 
@@ -10,7 +9,7 @@ export type AccordionTriggerProps = {
   children?: React.ReactNode;
 };
 
-const StyledAccordionTrigger = styled(ButtonBase)`
+const StyledAccordionTrigger = styled.button`
   background-color: transparent;
   &&:hover > ${StyledAccordionHeader} {
     background-color: ${colors.blue60};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
index f526800c2a..7c10b08a53 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
@@ -2,7 +2,6 @@ import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { colors, Radius, spacings } from '../../foundations';
-import { ButtonBase } from './ButtonBase';
 import { ButtonProvider } from './ButtonContext';
 import { ButtonIcon, ButtonText, StyledButtonIcon, StyledButtonText } from './components';
 
@@ -40,7 +39,7 @@ const styles = {
   },
 };
 
-export const StyledButton = styled(ButtonBase)<ButtonProps>`
+export const StyledButton = styled.button<ButtonProps>`
   ${({ width: sizeProp = 'fill', variant: variantProp = 'primary' }) => {
     const variant = styles.variants[variantProp];
     const size = styles.flex[sizeProp];
@@ -109,7 +108,7 @@ export const StyledButton = styled(ButtonBase)<ButtonProps>`
   }}
 `;
 
-const ForwardedButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   { children, disabled = false, style, ...props },
   ref,
 ) {
@@ -122,7 +121,7 @@ const ForwardedButton = forwardRef<HTMLButtonElement, ButtonProps>(function Butt
   );
 });
 
-const ButtonNamespace = Object.assign(ForwardedButton, {
+const ButtonNamespace = Object.assign(Button, {
   Text: ButtonText,
   Icon: ButtonIcon,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/ButtonBase.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/ButtonBase.tsx
deleted file mode 100644
index 239a73196d..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/ButtonBase.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const ButtonBase = styled.button({
-  border: 'none',
-  padding: 0,
-  margin: 0,
-  font: 'inherit',
-  color: 'inherit',
-  textAlign: 'inherit',
-  lineHeight: 'inherit',
-  cursor: 'default',
-});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/index.ts
index 8a5e64742d..886fa8fe20 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/index.ts
@@ -1,3 +1,2 @@
 export * from './Button';
 export * from './ButtonContext';
-export * from './ButtonBase';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
index e728abb986..edf0fb0cc8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
@@ -2,7 +2,6 @@ import { forwardRef } from 'react';
 import styled, { WebTarget } from 'styled-components';
 
 import { colors, Radius } from '../../foundations';
-import { buttonReset } from '../../styles';
 import { Flex } from '../flex';
 import { FilterChipIcon, FilterChipText } from './components';
 import { FilterChipProvider } from './FilterChipContext';
@@ -18,8 +17,6 @@ const variables = {
 } as const;
 
 const StyledButton = styled.button({
-  ...buttonReset,
-
   display: 'flex',
   alignItems: 'center',
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
index 1ae5688be4..b349c34f2e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
@@ -2,7 +2,6 @@ import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { colors } from '../../foundations';
-import { ButtonBase } from '../button';
 import { IconProps, iconSizes } from '../icon/Icon';
 import { IconButtonIcon } from './components/IconButtonIcon';
 import { IconButtonProvider } from './IconButtonContext';
@@ -12,7 +11,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   size?: IconProps['size'];
 }
 
-const StyledButton = styled(ButtonBase)<{ $size: IconButtonProps['size'] }>`
+const StyledButton = styled.button<{ $size: IconButtonProps['size'] }>`
   ${({ $size = 'medium' }) => {
     const size = iconSizes[$size];
     return css`
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx
index 13aaa74a8f..7cd7b85859 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-trigger/ListItemTrigger.tsx
@@ -1,11 +1,10 @@
 import styled, { css } from 'styled-components';
 
 import { colors } from '../../../../foundations';
-import { ButtonBase } from '../../../button';
 import { ListItemProps } from '../../ListItem';
 import { useListItem } from '../../ListItemContext';
 
-const StyledButton = styled(ButtonBase)<Pick<ListItemProps, 'disabled'>>`
+const StyledButton = styled.button<Pick<ListItemProps, 'disabled'>>`
   display: flex;
   width: 100%;
   --background: transparent;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/styles/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/styles/index.ts
deleted file mode 100644
index 2b3d8cffd6..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/styles/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './mixins';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/styles/mixins/button-reset.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/styles/mixins/button-reset.ts
deleted file mode 100644
index 4ef5844150..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/styles/mixins/button-reset.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const buttonReset = {
-  border: 'none',
-  padding: 0,
-  margin: 0,
-  font: 'inherit',
-  color: 'inherit',
-  textAlign: 'inherit',
-  lineHeight: 'inherit',
-  cursor: 'default',
-} as React.CSSProperties;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/styles/mixins/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/styles/mixins/index.ts
deleted file mode 100644
index c546f737b6..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/styles/mixins/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './button-reset';