Rename interface settings to user interface settings

6 files changed, 27 insertions, 23 deletions

diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index 0457287744..05f3658605 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -19,7 +19,6 @@ import {
 } from './ExpiredAccountAddTime';
 import Filter from './Filter';
 import Focus, { IFocusHandle } from './Focus';
-import InterfaceSettings from './InterfaceSettings';
 import Launch from './Launch';
 import MainView from './MainView';
 import OpenVpnSettings from './OpenVpnSettings';
@@ -28,6 +27,7 @@ import SplitTunnelingSettings from './SplitTunnelingSettings';
 import Support from './Support';
 import TooManyDevices from './TooManyDevices';
 import TransitionContainer, { TransitionView } from './TransitionContainer';
+import UserInterfaceSettings from './UserInterfaceSettings';
 import VpnSettings from './VpnSettings';
 import WireguardSettings from './WireguardSettings';
 
@@ -90,7 +90,11 @@ class AppRouter extends React.Component<IHistoryProps & IAppContext, IAppRoutesS
               <Route exact path={RoutePath.settings} component={Settings} />
               <Route exact path={RoutePath.selectLanguage} component={SelectLanguagePage} />
               <Route exact path={RoutePath.accountSettings} component={AccountPage} />
-              <Route exact path={RoutePath.interfaceSettings} component={InterfaceSettings} />
+              <Route
+                exact
+                path={RoutePath.userInterfaceSettings}
+                component={UserInterfaceSettings}
+              />
               <Route exact path={RoutePath.vpnSettings} component={VpnSettings} />
               <Route exact path={RoutePath.wireguardSettings} component={WireguardSettings} />
               <Route exact path={RoutePath.openVpnSettings} component={OpenVpnSettings} />
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 96080ecfe6..985c013a48 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -64,7 +64,7 @@ export default function Support() {
                     <>
                       <Cell.Group>
                         <AccountButton />
-                        <InterfaceSettingsButton />
+                        <UserInterfaceSettingsButton />
                         <VpnSettingsButton />
                       </Cell.Group>
 
@@ -76,7 +76,7 @@ export default function Support() {
                     </>
                   ) : (
                     <Cell.Group>
-                      <InterfaceSettingsButton />
+                      <UserInterfaceSettingsButton />
                     </Cell.Group>
                   )}
 
@@ -120,16 +120,16 @@ function AccountButton() {
   );
 }
 
-function InterfaceSettingsButton() {
+function UserInterfaceSettingsButton() {
   const history = useHistory();
-  const navigate = useCallback(() => history.push(RoutePath.interfaceSettings), [history]);
+  const navigate = useCallback(() => history.push(RoutePath.userInterfaceSettings), [history]);
 
   return (
     <Cell.CellNavigationButton onClick={navigate}>
       <Cell.Label>
         {
-          // TRANSLATORS: Navigation button to the 'Interface settings' view
-          messages.pgettext('settings-view', 'Interface settings')
+          // TRANSLATORS: Navigation button to the 'User interface settings' view
+          messages.pgettext('settings-view', 'User interface settings')
         }
       </Cell.Label>
     </Cell.CellNavigationButton>
diff --git a/gui/src/renderer/components/InterfaceSettings.tsx b/gui/src/renderer/components/UserInterfaceSettings.tsx
index 4598c1058e..745ac715fb 100644
--- a/gui/src/renderer/components/InterfaceSettings.tsx
+++ b/gui/src/renderer/components/UserInterfaceSettings.tsx
@@ -30,7 +30,7 @@ const StyledCellIcon = styled(Cell.UntintedIcon)({
   marginRight: '8px',
 });
 
-export default function InterfaceSettings() {
+export default function UserInterfaceSettings() {
   const { pop } = useHistory();
   const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
 
@@ -44,7 +44,7 @@ export default function InterfaceSettings() {
                 <TitleBarItem>
                   {
                     // TRANSLATORS: Title label in navigation bar
-                    messages.pgettext('interface-settings-view', 'Interface settings')
+                    messages.pgettext('user-interface-settings-view', 'User interface settings')
                   }
                 </TitleBarItem>
               </NavigationItems>
@@ -53,7 +53,7 @@ export default function InterfaceSettings() {
             <NavigationScrollbars>
               <SettingsHeader>
                 <HeaderTitle>
-                  {messages.pgettext('interface-settings-view', 'Interface settings')}
+                  {messages.pgettext('user-interface-settings-view', 'User interface settings')}
                 </HeaderTitle>
               </SettingsHeader>
 
@@ -101,7 +101,7 @@ function NotificationsSetting() {
       <Cell.Container>
         <AriaLabel>
           <Cell.InputLabel>
-            {messages.pgettext('interface-settings-view', 'Notifications')}
+            {messages.pgettext('user-interface-settings-view', 'Notifications')}
           </Cell.InputLabel>
         </AriaLabel>
         <AriaInput>
@@ -112,7 +112,7 @@ function NotificationsSetting() {
         <AriaDescription>
           <Cell.FooterText>
             {messages.pgettext(
-              'interface-settings-view',
+              'user-interface-settings-view',
               'Enable or disable system notifications. The critical notifications will always be displayed.',
             )}
           </Cell.FooterText>
@@ -131,7 +131,7 @@ function MonochromaticTrayIconSetting() {
       <Cell.Container>
         <AriaLabel>
           <Cell.InputLabel>
-            {messages.pgettext('interface-settings-view', 'Monochromatic tray icon')}
+            {messages.pgettext('user-interface-settings-view', 'Monochromatic tray icon')}
           </Cell.InputLabel>
         </AriaLabel>
         <AriaInput>
@@ -142,7 +142,7 @@ function MonochromaticTrayIconSetting() {
         <AriaDescription>
           <Cell.FooterText>
             {messages.pgettext(
-              'interface-settings-view',
+              'user-interface-settings-view',
               'Use a monochromatic tray icon instead of a colored one.',
             )}
           </Cell.FooterText>
@@ -161,7 +161,7 @@ function UnpinnedWindowSetting() {
       <Cell.Container>
         <AriaLabel>
           <Cell.InputLabel>
-            {messages.pgettext('interface-settings-view', 'Unpin app from taskbar')}
+            {messages.pgettext('user-interface-settings-view', 'Unpin app from taskbar')}
           </Cell.InputLabel>
         </AriaLabel>
         <AriaInput>
@@ -172,7 +172,7 @@ function UnpinnedWindowSetting() {
         <AriaDescription>
           <Cell.FooterText>
             {messages.pgettext(
-              'interface-settings-view',
+              'user-interface-settings-view',
               'Enable to move the app around as a free-standing window.',
             )}
           </Cell.FooterText>
@@ -191,7 +191,7 @@ function StartMinimizedSetting() {
       <Cell.Container>
         <AriaLabel>
           <Cell.InputLabel>
-            {messages.pgettext('interface-settings-view', 'Start minimized')}
+            {messages.pgettext('user-interface-settings-view', 'Start minimized')}
           </Cell.InputLabel>
         </AriaLabel>
         <AriaInput>
@@ -202,7 +202,7 @@ function StartMinimizedSetting() {
         <AriaDescription>
           <Cell.FooterText>
             {messages.pgettext(
-              'interface-settings-view',
+              'user-interface-settings-view',
               'Show only the tray icon when the app starts.',
             )}
           </Cell.FooterText>
@@ -226,7 +226,7 @@ function LanguageButton() {
       <Cell.Label>
         {
           // TRANSLATORS: Navigation button to the 'Language' settings view
-          messages.pgettext('interface-settings-view', 'Language')
+          messages.pgettext('user-interface-settings-view', 'Language')
         }
       </Cell.Label>
       <Cell.SubText>{localeDisplayName}</Cell.SubText>
diff --git a/gui/src/renderer/lib/routes.ts b/gui/src/renderer/lib/routes.ts
index 9c8eb4c493..3a82175d3e 100644
--- a/gui/src/renderer/lib/routes.ts
+++ b/gui/src/renderer/lib/routes.ts
@@ -15,7 +15,7 @@ export enum RoutePath {
   settings = '/settings',
   selectLanguage = '/settings/language',
   accountSettings = '/settings/account',
-  interfaceSettings = '/settings/interface',
+  userInterfaceSettings = '/settings/interface',
   vpnSettings = '/settings/vpn',
   wireguardSettings = '/settings/advanced/wireguard',
   openVpnSettings = '/settings/advanced/openvpn',
diff --git a/gui/src/shared/localization-contexts.ts b/gui/src/shared/localization-contexts.ts
index 980e79917a..8e8c3930be 100644
--- a/gui/src/shared/localization-contexts.ts
+++ b/gui/src/shared/localization-contexts.ts
@@ -22,7 +22,7 @@ export type LocalizationContexts =
   | 'account-view'
   | 'redeem-voucher-view'
   | 'redeem-voucher-alert'
-  | 'interface-settings-view'
+  | 'user-interface-settings-view'
   | 'vpn-settings-view'
   | 'wireguard-settings-view'
   | 'wireguard-settings-nav'
diff --git a/gui/test/unit/history.spec.ts b/gui/test/unit/history.spec.ts
index caec918724..e59a2bee45 100644
--- a/gui/test/unit/history.spec.ts
+++ b/gui/test/unit/history.spec.ts
@@ -7,7 +7,7 @@ const BASE_PATH = RoutePath.launch;
 const FIRST_PATH = RoutePath.main;
 const SECOND_PATH = RoutePath.settings;
 const THIRD_PATH = RoutePath.vpnSettings;
-const FOURTH_PATH = RoutePath.interfaceSettings;
+const FOURTH_PATH = RoutePath.userInterfaceSettings;
 const FIFTH_PATH = RoutePath.splitTunneling;
 
 describe('History', () => {