Move and add button reset to Theme

4 files changed, 23 insertions, 8 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
index bc65354bcc..90af0cf22f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx
@@ -45,7 +45,7 @@ import Lang from './components/Lang';
 import MacOsScrollbarDetection from './components/MacOsScrollbarDetection';
 import { ModalContainer } from './components/Modal';
 import { AppContext } from './context';
-import { VariablesGlobalStyle } from './lib/foundations';
+import { Theme } from './lib/components';
 import History, { ITransitionSpecification, transitions } from './lib/history';
 import { loadTranslations } from './lib/load-translations';
 import IpcOutput from './lib/logging';
@@ -296,9 +296,9 @@ export default class AppRenderer {
                   <ErrorBoundary>
                     <ModalContainer>
                       <KeyboardNavigation>
-                        <VariablesGlobalStyle>
+                        <Theme>
                           <AppRouter />
-                        </VariablesGlobalStyle>
+                        </Theme>
                       </KeyboardNavigation>
                       {window.env.platform === 'darwin' && <MacOsScrollbarDetection />}
                     </ModalContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/VariablesGlobalStyle.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Theme.tsx
index 2f06e920b0..5d0e86f30e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/VariablesGlobalStyle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Theme.tsx
@@ -1,11 +1,25 @@
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import { colors, fontFamilies, fontSizes, fontWeights, lineHeights, radius, spacings } from '.';
+import {
+  colors,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radius,
+  spacings,
+} from '../../foundations/variables';
 
 type VariablesProps = React.PropsWithChildren<object>;
 
-const GlobalStyle = createGlobalStyle`
+const Reset = createGlobalStyle`
+  button {
+    all: unset;
+  }
+`;
+
+const VariablesGlobalStyle = createGlobalStyle`
   :root {
     ${Object.entries({
       ...colors,
@@ -19,10 +33,11 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export const VariablesGlobalStyle = ({ children }: VariablesProps) => {
+export const Theme = ({ children }: VariablesProps) => {
   return (
     <>
-      <GlobalStyle />
+      <Reset />
+      <VariablesGlobalStyle />
       {children}
     </>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts
index 33a15d4c26..654de0780d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts
@@ -2,3 +2,4 @@ export * from './Center';
 export * from './Container';
 export * from './Flex';
 export * from './Layout';
+export * from './Theme';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts
index 3cabd68ee7..177588fbbd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts
@@ -2,4 +2,3 @@ export * from './color-variables';
 export * from './radius-variables';
 export * from './typography-variables';
 export * from './spacing-variables';
-export * from './VariablesGlobalStyle';