Move the components sources to desktop package

15 files changed, 0 insertions, 883 deletions

diff --git a/gui/packages/components/package.json b/gui/packages/components/package.json
deleted file mode 100644
index a173877573..0000000000
--- a/gui/packages/components/package.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-  "name": "@mullvad/components",
-  "version": "0.1.0",
-  "main": "build/index.js",
-  "license": "GPL-3.0",
-  "private": true,
-  "scripts": {
-    "postinstall": "yarn run build",
-    "lint": "tslint -t stylish -p .",
-    "test": "mocha -R spec --require ts-node/register --require \"test/setup.ts\" \"test/**/*.spec.tsx\"",
-    "build": "run-s private:build:clean private:build:compile",
-    "watch": "run-s private:build:clean private:build:watch",
-    "private:build:clean": "rimraf build",
-    "private:build:compile": "tsc",
-    "private:build:watch": "tsc -w"
-  },
-  "devDependencies": {
-    "@mullvad/config": "0.1.0",
-    "@types/chai": "^4.1.7",
-    "@types/enzyme": "^3.1.15",
-    "@types/enzyme-adapter-react-16": "^1.0.3",
-    "@types/jsdom": "^12.2.0",
-    "@types/mocha": "^5.2.5",
-    "@types/node": "^10.12.3",
-    "@types/react": "16.3.18",
-    "@types/react-dom": "16.0.7",
-    "chai": "^4.2.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "jsdom": "^13.0.0",
-    "mocha": "^5.2.0",
-    "npm-run-all": "^4.1.3",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
-    "reactxp": "^1.5.0",
-    "rimraf": "^2.6.2",
-    "ts-node": "^7.0.1",
-    "tslint": "^5.12.1",
-    "typescript": "^3.3.3"
-  },
-  "dependencies": {},
-  "peerDependencies": {
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
-    "reactxp": "^1.5.0"
-  }
-}
diff --git a/gui/packages/components/src/Accordion.tsx b/gui/packages/components/src/Accordion.tsx
deleted file mode 100644
index 19c9ddee56..0000000000
--- a/gui/packages/components/src/Accordion.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from 'react';
-import { Animated, Component, Styles, Types, UserInterface, View } from 'reactxp';
-
-interface IProps {
-  expanded: boolean;
-  animationDuration: number;
-  style?: Types.AnimatedViewStyleRuleSet;
-  children?: React.ReactNode;
-}
-
-interface IState {
-  applyAnimatedStyle: boolean;
-  mountChildren: boolean;
-}
-
-const containerOverflowStyle = Styles.createViewStyle({ overflow: 'hidden' });
-
-export default class Accordion extends Component<IProps, IState> {
-  public static defaultProps = {
-    expanded: true,
-    animationDuration: 350,
-  };
-
-  public state: IState = {
-    applyAnimatedStyle: false,
-    mountChildren: false,
-  };
-
-  private heightValue = Animated.createValue(0);
-  private animatedStyle = Styles.createAnimatedViewStyle({
-    height: this.heightValue,
-  });
-
-  private containerRef = React.createRef<Animated.View>();
-  private contentRef = React.createRef<View>();
-  private animation?: Types.Animated.CompositeAnimation = undefined;
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      applyAnimatedStyle: !props.expanded,
-      mountChildren: props.expanded,
-    };
-  }
-
-  public componentWillUnmount() {
-    if (this.animation) {
-      this.animation.stop();
-    }
-  }
-
-  public componentDidUpdate(oldProps: IProps, oldState: IState) {
-    if (this.props.expanded !== oldProps.expanded) {
-      // make sure the children are mounted first before expanding the accordion
-      if (this.props.expanded && !this.state.mountChildren) {
-        this.setState({ mountChildren: true });
-      } else {
-        this.animate(this.props.expanded);
-      }
-    } else if (this.state.mountChildren && !oldState.mountChildren) {
-      // run animations once the children are mounted
-      this.animate(this.props.expanded);
-    }
-  }
-
-  public render() {
-    const { style, children, expanded, animationDuration, ...otherProps } = this.props;
-    const containerStyles = this.state.applyAnimatedStyle
-      ? [style, containerOverflowStyle, this.animatedStyle]
-      : [style];
-
-    return (
-      <Animated.View {...otherProps} style={containerStyles} ref={this.containerRef}>
-        <View ref={this.contentRef}>{this.state.mountChildren && children}</View>
-      </Animated.View>
-    );
-  }
-
-  private async animate(expand: boolean) {
-    const containerView = this.containerRef.current;
-    const contentView = this.contentRef.current;
-    if (!containerView || !contentView) {
-      return;
-    }
-
-    if (this.animation) {
-      this.animation.stop();
-      this.animation = undefined;
-    }
-
-    const containerLayout = await UserInterface.measureLayoutRelativeToWindow(containerView);
-    const contentLayout = await UserInterface.measureLayoutRelativeToAncestor(
-      contentView,
-      containerView,
-    );
-
-    // the content is expanded when the animated style is not applied,
-    // so reset the initial animated value to the current layout's height.
-    if (!this.state.applyAnimatedStyle) {
-      this.heightValue.setValue(containerLayout.height);
-    }
-
-    const toValue = expand ? contentLayout.height : 0;
-
-    // calculate the animation duration based on travel distance
-    const multiplier =
-      Math.abs(toValue - containerLayout.height) / Math.max(1, contentLayout.height);
-    const duration = Math.ceil(this.props.animationDuration * multiplier);
-
-    const animation = Animated.timing(this.heightValue, {
-      toValue,
-      easing: Animated.Easing.InOut(),
-      duration,
-      useNativeDriver: true,
-    });
-
-    this.animation = animation;
-
-    const onAnimationEnd = ({ finished }: Types.Animated.EndResult) => {
-      if (finished) {
-        this.animation = undefined;
-
-        // reset the height after transition to let element layout naturally
-        // if animation finished without interruption
-        if (expand) {
-          this.setState({ applyAnimatedStyle: false });
-        }
-      }
-    };
-
-    this.setState({ applyAnimatedStyle: true }, () => {
-      animation.start(onAnimationEnd);
-    });
-  }
-}
diff --git a/gui/packages/components/src/ClipboardLabel.tsx b/gui/packages/components/src/ClipboardLabel.tsx
deleted file mode 100644
index 9cabe96ffd..0000000000
--- a/gui/packages/components/src/ClipboardLabel.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { Clipboard, Component, Text, Types } from 'reactxp';
-
-interface IProps {
-  value: string;
-  delay: number;
-  message: string;
-  style?: Types.TextStyleRuleSet;
-}
-
-interface IState {
-  showsMessage: boolean;
-}
-
-export default class ClipboardLabel extends Component<IProps, IState> {
-  public static defaultProps: Partial<IProps> = {
-    delay: 3000,
-    message: 'Copied!',
-  };
-
-  public state: IState = {
-    showsMessage: false,
-  };
-
-  private timer: NodeJS.Timer | null = null;
-
-  public componentWillUnmount() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  }
-
-  public render() {
-    return (
-      <Text style={this.props.style} onPress={this.handlePress}>
-        {this.state.showsMessage ? this.props.message : this.props.value}
-      </Text>
-    );
-  }
-
-  private handlePress = () => {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-
-    this.timer = setTimeout(() => this.setState({ showsMessage: false }), this.props.delay);
-    this.setState({ showsMessage: true });
-
-    Clipboard.setText(this.props.value);
-  };
-}
diff --git a/gui/packages/components/src/ConnectionInfo.tsx b/gui/packages/components/src/ConnectionInfo.tsx
deleted file mode 100644
index 5306ec97a3..0000000000
--- a/gui/packages/components/src/ConnectionInfo.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { Component, Styles, Text, Types, View } from 'reactxp';
-import { default as ConnectionInfoDisclosure } from './ConnectionInfoDisclosure';
-
-const styles = {
-  row: Styles.createViewStyle({
-    flexDirection: 'row',
-    marginTop: 3,
-  }),
-  caption: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    color: 'rgb(255, 255, 255)',
-    flex: 0,
-    flexBasis: 30,
-    marginRight: 8,
-  }),
-  value: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    color: 'rgb(255, 255, 255)',
-    letterSpacing: -0.2,
-  }),
-  header: Styles.createViewStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-  }),
-  hostname: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 16,
-    lineHeight: 20,
-    fontWeight: '600',
-    color: 'rgb(255, 255, 255)',
-    flex: 1,
-  }),
-};
-
-interface IInAddress {
-  ip: string;
-  port: number;
-  protocol: string;
-}
-
-interface IOutAddress {
-  ipv4?: string;
-  ipv6?: string;
-}
-
-interface IProps {
-  hostname?: string;
-  inAddress?: IInAddress;
-  outAddress?: IOutAddress;
-  defaultOpen?: boolean;
-  style?: Types.ViewStyleRuleSet | Types.ViewStyleRuleSet[];
-  onToggle?: (isOpen: boolean) => void;
-}
-
-interface IState {
-  isOpen: boolean;
-}
-
-export default class ConnectionInfo extends Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      isOpen: props.defaultOpen === true,
-    };
-  }
-
-  public render() {
-    const { inAddress, outAddress } = this.props;
-
-    return (
-      <View style={this.props.style}>
-        <View style={styles.header}>
-          <Text style={styles.hostname}>{this.props.hostname || ''}</Text>
-          <ConnectionInfoDisclosure defaultOpen={this.props.defaultOpen} onToggle={this.onToggle}>
-            {'Connection details'}
-          </ConnectionInfoDisclosure>
-        </View>
-
-        {this.state.isOpen && (
-          <React.Fragment>
-            {inAddress && (
-              <View style={styles.row}>
-                <Text style={styles.caption}>{'In'}</Text>
-                <Text style={styles.value}>
-                  {`${inAddress.ip}:${inAddress.port} ${inAddress.protocol.toUpperCase()}`}
-                </Text>
-              </View>
-            )}
-
-            {outAddress && (outAddress.ipv4 || outAddress.ipv6) && (
-              <View style={styles.row}>
-                <Text style={styles.caption}>{'Out'}</Text>
-                <View>
-                  {outAddress.ipv4 && <Text style={styles.value}>{outAddress.ipv4}</Text>}
-                  {outAddress.ipv6 && <Text style={styles.value}>{outAddress.ipv6}</Text>}
-                </View>
-              </View>
-            )}
-          </React.Fragment>
-        )}
-      </View>
-    );
-  }
-
-  private onToggle = (isOpen: boolean) => {
-    this.setState(
-      (state) => ({ ...state, isOpen }),
-      () => {
-        if (this.props.onToggle) {
-          this.props.onToggle(isOpen);
-        }
-      },
-    );
-  };
-}
diff --git a/gui/packages/components/src/ConnectionInfoDisclosure.tsx b/gui/packages/components/src/ConnectionInfoDisclosure.tsx
deleted file mode 100644
index 93cd17b1d0..0000000000
--- a/gui/packages/components/src/ConnectionInfoDisclosure.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { Component, Styles, Text, Types, View } from 'reactxp';
-import ImageView from './ImageView';
-
-const styles = {
-  container: Styles.createViewStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-  }),
-  caption: {
-    base: Styles.createTextStyle({
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      color: 'rgb(255, 255, 255, 0.4)',
-    }),
-    hovered: Styles.createTextStyle({
-      color: 'rgb(255, 255, 255)',
-    }),
-  },
-};
-
-interface IProps {
-  onToggle?: (isOpen: boolean) => void;
-  defaultOpen?: boolean;
-  children: string;
-  style?: Types.ViewStyleRuleSet | Types.ViewStyleRuleSet[];
-}
-
-interface IState {
-  isHovered: boolean;
-  isOpen: boolean;
-}
-
-export default class ConnectionInfoDisclosure extends Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      isHovered: false,
-      isOpen: props.defaultOpen === true,
-    };
-  }
-
-  public render() {
-    const tintColor = this.state.isHovered ? 'rgb(255, 255, 255)' : 'rgb(255, 255, 255, 0.4)';
-
-    return (
-      <View
-        style={[styles.container, this.props.style]}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-        onPress={this.onToggle}>
-        <Text
-          style={[styles.caption.base, this.state.isHovered ? styles.caption.hovered : undefined]}>
-          {this.props.children}
-        </Text>
-        <ImageView
-          source={this.state.isOpen ? 'icon-chevron-up' : 'icon-chevron-down'}
-          width={24}
-          height={24}
-          tintColor={tintColor}
-        />
-      </View>
-    );
-  }
-
-  private onMouseEnter = () => {
-    this.setState({ isHovered: true });
-  };
-
-  private onMouseLeave = () => {
-    this.setState({ isHovered: false });
-  };
-
-  private onToggle = () => {
-    this.setState(
-      (state) => ({
-        ...state,
-        isOpen: !state.isOpen,
-      }),
-      () => {
-        if (this.props.onToggle) {
-          this.props.onToggle(this.state.isOpen);
-        }
-      },
-    );
-  };
-}
diff --git a/gui/packages/components/src/HeaderBar.tsx b/gui/packages/components/src/HeaderBar.tsx
deleted file mode 100644
index 50a5aace31..0000000000
--- a/gui/packages/components/src/HeaderBar.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import * as React from 'react';
-import { Button, Component, Styles, Text, Types, View } from 'reactxp';
-import ImageView from './ImageView';
-
-export enum HeaderBarStyle {
-  default = 'default',
-  defaultDark = 'defaultDark',
-  error = 'error',
-  success = 'success',
-}
-
-export interface IHeaderBarProps {
-  barStyle: HeaderBarStyle;
-  style?: Types.ViewStyleRuleSet;
-}
-
-const headerBarStyles = {
-  container: {
-    base: Styles.createViewStyle({
-      paddingTop: 12,
-      paddingBottom: 12,
-      paddingLeft: 12,
-      paddingRight: 12,
-    }),
-    platformOverride: {
-      darwin: Styles.createViewStyle({
-        paddingTop: 24,
-      }),
-      linux: Styles.createViewStyle({
-        // WebKitAppRegion is not standard :/
-        // @ts-ignore
-        WebkitAppRegion: 'drag',
-      }),
-    },
-  },
-  content: Styles.createViewStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    // the size of "brand" logo
-    minHeight: 51,
-  }),
-  barStyle: {
-    default: Styles.createViewStyle({
-      backgroundColor: 'rgb(41, 77, 115)', // colors.blue
-    }),
-    defaultDark: Styles.createViewStyle({
-      backgroundColor: 'rgb(25, 46, 69)', // colors.darkBlue
-    }),
-    error: Styles.createViewStyle({
-      backgroundColor: 'rgb(208, 2, 27)', // colors.red
-    }),
-    success: Styles.createViewStyle({
-      backgroundColor: 'rgb(68, 173, 77)', // colors.green
-    }),
-  },
-};
-
-export default class HeaderBar extends Component<IHeaderBarProps> {
-  public static defaultProps: IHeaderBarProps = {
-    barStyle: HeaderBarStyle.default,
-  };
-
-  public render() {
-    const style = [
-      headerBarStyles.container.base,
-      // @ts-ignore
-      headerBarStyles.container.platformOverride[process.platform],
-      headerBarStyles.barStyle[this.props.barStyle],
-      this.props.style,
-    ];
-
-    return (
-      <View style={style}>
-        <View style={headerBarStyles.content}>{this.props.children}</View>
-      </View>
-    );
-  }
-}
-
-const brandStyles = {
-  container: Styles.createViewStyle({
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  }),
-  title: Styles.createTextStyle({
-    fontFamily: 'DINPro',
-    fontSize: 24,
-    fontWeight: '900',
-    lineHeight: 30,
-    letterSpacing: -0.5,
-    color: 'rgba(255, 255, 255, 0.6)', // colors.white60
-    marginLeft: 8,
-  }),
-};
-
-export class Brand extends Component {
-  public render() {
-    return (
-      <View style={brandStyles.container}>
-        <ImageView width={50} height={50} source="logo-icon" />
-        <Text style={brandStyles.title}>
-          {
-            // TODO: perhaps translate?
-            'MULLVAD VPN'
-          }
-        </Text>
-      </View>
-    );
-  }
-}
-
-interface ISettingsButtonProps {
-  onPress?: () => void;
-}
-
-const settingsBarButtonStyles = {
-  container: {
-    base: Styles.createViewStyle({
-      cursor: 'default',
-      padding: 0,
-      marginLeft: 8,
-    }),
-    platformOverride: {
-      linux: Styles.createViewStyle({
-        // WebKitAppRegion is not standard :/
-        // @ts-ignore
-        WebkitAppRegion: 'no-drag',
-      }),
-    },
-  },
-};
-
-export class SettingsBarButton extends Component<ISettingsButtonProps> {
-  public render() {
-    return (
-      <Button
-        style={[
-          settingsBarButtonStyles.container.base,
-          // @ts-ignore
-          settingsBarButtonStyles.container.platformOverride[process.platform],
-        ]}
-        onPress={this.props.onPress}>
-        <ImageView
-          height={24}
-          width={24}
-          source="icon-settings"
-          tintColor={'rgba(255, 255, 255, 0.6)'}
-          tintHoverColor={'rgba(255, 255, 255, 0.8)'}
-        />
-      </Button>
-    );
-  }
-}
diff --git a/gui/packages/components/src/ImageView.tsx b/gui/packages/components/src/ImageView.tsx
deleted file mode 100644
index 1f6a90493a..0000000000
--- a/gui/packages/components/src/ImageView.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { Component, Types, View } from 'reactxp';
-
-interface IProps {
-  source: string;
-  width?: number;
-  height?: number;
-  tintColor?: string;
-  tintHoverColor?: string;
-  disabled?: boolean;
-  onPress?: (event: Types.SyntheticEvent) => void;
-  style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
-}
-
-interface IState {
-  hovered: boolean;
-}
-
-export default class ImageView extends Component<IProps, IState> {
-  public state = { hovered: false };
-
-  public render() {
-    const { source, width, height, tintColor, tintHoverColor, ...otherProps } = this.props;
-    const url = `../../assets/images/${source}.svg`;
-    let image;
-
-    const activeTintColor = (this.state.hovered && tintHoverColor) || tintColor;
-
-    if (activeTintColor) {
-      const maskWidth = typeof width === 'number' ? `${width}px` : 'auto';
-      const maskHeight = typeof height === 'number' ? `${height}px` : 'auto';
-      image = (
-        <div
-          style={{
-            WebkitMaskImage: `url('${url}')`,
-            WebkitMaskRepeat: 'no-repeat',
-            WebkitMaskSize: `${maskWidth} ${maskHeight}`,
-            backgroundColor: activeTintColor,
-            lineHeight: 0,
-          }}>
-          <img
-            src={url}
-            width={width}
-            height={height}
-            style={{
-              visibility: 'hidden',
-            }}
-          />
-        </div>
-      );
-    } else {
-      image = <img src={url} width={width} height={height} />;
-    }
-
-    return (
-      <View {...otherProps} onMouseEnter={this.onHoverStart} onMouseLeave={this.onHoverEnd}>
-        {image}
-      </View>
-    );
-  }
-
-  private onHoverStart = () => {
-    if (!this.props.disabled) {
-      this.setState({ hovered: true });
-    }
-  };
-
-  private onHoverEnd = () => {
-    if (!this.props.disabled) {
-      this.setState({ hovered: false });
-    }
-  };
-}
diff --git a/gui/packages/components/src/Modal.tsx b/gui/packages/components/src/Modal.tsx
deleted file mode 100644
index 5742e68f2b..0000000000
--- a/gui/packages/components/src/Modal.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-
-export class ModalContent extends React.Component {
-  public render() {
-    return (
-      <div
-        style={{
-          position: 'absolute',
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-export class ModalAlert extends React.Component {
-  public render() {
-    return (
-      <div
-        style={{
-          backgroundColor: 'rgba(0,0,0,0.5)',
-          position: 'absolute',
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-interface IModalContainerProps {
-  children?: React.ReactNode;
-}
-
-export class ModalContainer extends React.Component<IModalContainerProps> {
-  public render() {
-    return <div style={{ position: 'relative', flex: 1 }}>{this.props.children}</div>;
-  }
-}
diff --git a/gui/packages/components/src/SecuredLabel.tsx b/gui/packages/components/src/SecuredLabel.tsx
deleted file mode 100644
index 1d33755d11..0000000000
--- a/gui/packages/components/src/SecuredLabel.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { Component, Styles, Text, Types } from 'reactxp';
-
-export enum SecuredDisplayStyle {
-  secured,
-  blocked,
-  securing,
-  unsecured,
-}
-
-interface IProps {
-  displayStyle: SecuredDisplayStyle;
-  style: Types.TextStyleRuleSet;
-}
-
-const styles = {
-  securing: Styles.createTextStyle({
-    color: 'rgb(255, 255, 255)', // white
-  }),
-  secured: Styles.createTextStyle({
-    color: 'rgb(68, 173, 77)', // green
-  }),
-  unsecured: Styles.createTextStyle({
-    color: 'rgb(208, 2, 27)', // red
-  }),
-};
-
-export default class SecuredLabel extends Component<IProps> {
-  public render() {
-    return <Text style={[this.props.style, this.getTextStyle()]}>{this.getText()}</Text>;
-  }
-
-  private getText() {
-    switch (this.props.displayStyle) {
-      case SecuredDisplayStyle.secured:
-        // TODO: translate
-        return 'SECURE CONNECTION';
-
-      case SecuredDisplayStyle.blocked:
-        // TODO: translate
-        return 'BLOCKED CONNECTION';
-
-      case SecuredDisplayStyle.securing:
-        // TODO: translate
-        return 'CREATING SECURE CONNECTION';
-
-      case SecuredDisplayStyle.unsecured:
-        // TODO: translate
-        return 'UNSECURED CONNECTION';
-    }
-  }
-
-  private getTextStyle() {
-    switch (this.props.displayStyle) {
-      case SecuredDisplayStyle.secured:
-      case SecuredDisplayStyle.blocked:
-        return styles.secured;
-
-      case SecuredDisplayStyle.securing:
-        return styles.securing;
-
-      case SecuredDisplayStyle.unsecured:
-        return styles.unsecured;
-    }
-  }
-}
diff --git a/gui/packages/components/src/SettingsHeader.tsx b/gui/packages/components/src/SettingsHeader.tsx
deleted file mode 100644
index e099d29a2d..0000000000
--- a/gui/packages/components/src/SettingsHeader.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Component, Styles, Text, Types, View } from 'reactxp';
-
-const styles = {
-  header: {
-    default: Styles.createViewStyle({
-      flex: 0,
-      paddingTop: 4,
-      paddingRight: 24,
-      paddingLeft: 24,
-      paddingBottom: 24,
-    }),
-  },
-  title: Styles.createTextStyle({
-    fontFamily: 'DINPro',
-    fontSize: 32,
-    fontWeight: '900',
-    lineHeight: 40,
-    color: 'rgb(255, 255, 255)',
-  }),
-  subtitle: Styles.createTextStyle({
-    marginTop: 4,
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    overflow: 'visible',
-    color: 'rgba(255, 255, 255, 0.8)', // colors.white80
-    lineHeight: 20,
-    letterSpacing: -0.2,
-  }),
-};
-
-interface ISettingsHeaderProps {
-  style?: Types.ViewStyleRuleSet;
-}
-
-export default class SettingsHeader extends Component<ISettingsHeaderProps> {
-  public render() {
-    return <View style={[styles.header.default, this.props.style]}>{this.props.children}</View>;
-  }
-}
-
-export class HeaderTitle extends Component {
-  public render() {
-    return <Text style={[styles.title]}>{this.props.children}</Text>;
-  }
-}
-
-export class HeaderSubTitle extends Component {
-  public render() {
-    return <Text style={[styles.subtitle]}>{this.props.children}</Text>;
-  }
-}
diff --git a/gui/packages/components/src/index.ts b/gui/packages/components/src/index.ts
deleted file mode 100644
index 31c5ee6fec..0000000000
--- a/gui/packages/components/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { default as Accordion } from './Accordion';
-export { default as ClipboardLabel } from './ClipboardLabel';
-export { default as ConnectionInfo } from './ConnectionInfo';
-export { default as SecuredLabel, SecuredDisplayStyle } from './SecuredLabel';
-export { default as HeaderBar, HeaderBarStyle, Brand, SettingsBarButton } from './HeaderBar';
-export { default as SettingsHeader, HeaderTitle, HeaderSubTitle } from './SettingsHeader';
-export { default as ImageView } from './ImageView';
-export { ModalContainer, ModalAlert, ModalContent } from './Modal';
diff --git a/gui/packages/components/test/setup.ts b/gui/packages/components/test/setup.ts
deleted file mode 100644
index 30495cbc89..0000000000
--- a/gui/packages/components/test/setup.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { JSDOM } from 'jsdom';
-import Enzyme from 'enzyme';
-import ReactSixteenAdapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({
-  adapter: new ReactSixteenAdapter(),
-});
-
-// @ts-ignore
-const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
diff --git a/gui/packages/components/test/test-stub.spec.tsx b/gui/packages/components/test/test-stub.spec.tsx
deleted file mode 100644
index 1e775314a0..0000000000
--- a/gui/packages/components/test/test-stub.spec.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { describe } from 'mocha';
-
-describe('No tests', () => {});
diff --git a/gui/packages/components/tsconfig.json b/gui/packages/components/tsconfig.json
deleted file mode 100644
index 5c5913a568..0000000000
--- a/gui/packages/components/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "jsx": "react",
-    "outDir": "build",
-    "typeRoots": [
-      "../../types",
-      "node_modules/@types"
-    ]
-  },
-  "extends": "@mullvad/config/tsconfig.json",
-  "include": [
-    "src/*.ts",
-    "src/*.tsx"
-  ]
-}
diff --git a/gui/packages/components/tslint.json b/gui/packages/components/tslint.json
deleted file mode 100644
index 6b68bf43d6..0000000000
--- a/gui/packages/components/tslint.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "@mullvad/config/tslint.json"
-}