Add beta label to Windows split tunneling navigation

5 files changed, 45 insertions, 1 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index eb906d3747..2614379781 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -25,6 +25,7 @@ import {
   StyledCustomDnsFotter,
   StyledAddCustomDnsLabel,
   StyledAddCustomDnsButton,
+  StyledBetaLabel,
 } from './AdvancedSettingsStyles';
 import * as AppButton from './AppButton';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
@@ -444,6 +445,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                   {(window.platform === 'linux' || window.platform === 'win32') && (
                     <Cell.CellButton onClick={this.props.onViewSplitTunneling}>
                       <Cell.Label>
+                        {window.platform === 'win32' && <StyledBetaLabel />}
                         {messages.pgettext('advanced-settings-view', 'Split tunneling')}
                       </Cell.Label>
                       <Cell.Icon height={12} width={7} source="icon-chevron" />
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index 78b5049f4b..56c8b99a9c 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import BetaLabel from './BetaLabel';
 import * as Cell from './cell';
 import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
@@ -70,3 +71,8 @@ export const StyledAddCustomDnsLabel = styled(Cell.Label)(
     marginRight: '25px',
   }),
 );
+
+export const StyledBetaLabel = styled(BetaLabel)({
+  marginRight: '8px',
+  verticalAlign: 'bottom',
+});
diff --git a/gui/src/renderer/components/BetaLabel.tsx b/gui/src/renderer/components/BetaLabel.tsx
new file mode 100644
index 0000000000..eded2eea55
--- /dev/null
+++ b/gui/src/renderer/components/BetaLabel.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { colors } from '../../config.json';
+import { messages } from '../../shared/gettext';
+
+const StyledBetaLabel = styled.span({
+  display: 'inline-block',
+  fontFamily: 'Open Sans',
+  color: colors.blue,
+  fontSize: '13px',
+  fontWeight: 800,
+  lineHeight: '20px',
+  padding: '2px 0',
+  background: colors.yellow,
+  borderRadius: '5px',
+  width: '50px',
+  textAlign: 'center',
+});
+
+interface IBetaLabelProps {
+  className?: string;
+}
+
+export default function BetaLabel(props: IBetaLabelProps) {
+  return <StyledBetaLabel {...props}>{messages.gettext('BETA')}</StyledBetaLabel>;
+}
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index ca2c7abdae..d6f2bbbdcf 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -46,6 +46,7 @@ import {
   StyledNoResult,
   StyledNoResultSearchTerm,
   StyledDisabledWarning,
+  StyledBetaLabel,
 } from './SplitTunnelingSettingsStyles';
 
 export default function SplitTunneling() {
@@ -398,7 +399,10 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
   return (
     <>
       <SettingsHeader>
-        <HeaderTitle>{messages.pgettext('split-tunneling-view', 'Split tunneling')}</HeaderTitle>
+        <HeaderTitle>
+          {messages.pgettext('split-tunneling-view', 'Split tunneling')}
+          <StyledBetaLabel />
+        </HeaderTitle>
         <HeaderSubTitle>
           {messages.pgettext(
             'split-tunneling-view',
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index ca7b7954ec..45079090f9 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
+import BetaLabel from './BetaLabel';
 import * as Cell from './cell';
 import { mediumText, smallText } from './common-styles';
 import ImageView from './ImageView';
@@ -162,3 +163,8 @@ export const StyledDisabledWarning = styled.span(smallText, {
   margin: '0 22px 18px',
   color: colors.red,
 });
+
+export const StyledBetaLabel = styled(BetaLabel)({
+  marginLeft: '8px',
+  verticalAlign: 'middle',
+});