Add footer under WireGuard port selector

2 files changed, 17 insertions, 4 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index b6cafc9781..341a6bed74 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -19,7 +19,7 @@ import {
   StyledNoWireguardKeyError,
   StyledNoWireguardKeyErrorContainer,
   StyledSelectorContainer,
-  StyledTunnelProtocolSelector,
+  StyledSelectorForFooter,
   StyledTunnelProtocolContainer,
   StyledCustomDnsSwitchContainer,
   StyledCustomDnsFotter,
@@ -246,7 +246,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
 
                 <AriaInputGroup>
                   <StyledTunnelProtocolContainer>
-                    <StyledTunnelProtocolSelector
+                    <StyledSelectorForFooter
                       title={messages.pgettext('advanced-settings-view', 'Tunnel protocol')}
                       values={this.tunnelProtocolItems(hasWireguardKey)}
                       value={this.props.tunnelProtocol}
@@ -306,7 +306,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                 {this.props.tunnelProtocol === 'wireguard' ? (
                   <AriaInputGroup>
                     <StyledSelectorContainer>
-                      <Selector
+                      <StyledSelectorForFooter
                         // TRANSLATORS: The title for the shadowsocks bridge selector section.
                         title={messages.pgettext('advanced-settings-view', 'WireGuard port')}
                         values={this.wireguardPortItems}
@@ -314,6 +314,19 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                         onSelect={this.onSelectWireguardPort}
                       />
                     </StyledSelectorContainer>
+                    <Cell.Footer>
+                      <AriaDescription>
+                        <Cell.FooterText>
+                          {
+                            // TRANSLATORS: The hint displayed below the WireGuard port selector.
+                            messages.pgettext(
+                              'advanced-settings-view',
+                              'The automatic setting will randomly choose from a wide range of ports.',
+                            )
+                          }
+                        </Cell.FooterText>
+                      </AriaDescription>
+                    </Cell.Footer>
                   </AriaInputGroup>
                 ) : undefined}
 
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index d26972ed1c..b618db0844 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -17,7 +17,7 @@ export const StyledSelectorContainer = styled.div({
   flex: 0,
 });
 
-export const StyledTunnelProtocolSelector = (styled(Selector)({
+export const StyledSelectorForFooter = (styled(Selector)({
   marginBottom: 0,
 }) as unknown) as new <T>() => Selector<T>;