Fix license upsell sections spacing

web/messages/en/gateway_wizard.json

@@ -22,7 +22,9 @@
   "gateway_setup_step_confirmation_label": "Configuration confirmation",
   "gateway_setup_step_confirmation_description": "Your configuration was successful. You're all set.",
   "gateway_setup_component_label_common_name": "Common Name",
+  "gateway_setup_component_label_common_name_help": "This name will be visible in the Gateways list and is used to identify a deployed instance, as there may be multiple instances for High Availability (HA).",
   "gateway_setup_component_label_ip_or_domain": "IP or Domain",
+  "gateway_setup_component_label_ip_or_domain_help": "Enter the IP or domain name of the server where the Gateway component is deployed. Core will then connect to it and perform the adoption automatically.",
   "gateway_setup_component_label_grpc_port": "gRPC Port",
   "gateway_setup_component_label_grpc_port_help": "If you have changed the default Gateway gRPC port, please change it here.",
   "gateway_setup_component_error_common_name_required": "Common Name is required",

web/src/pages/GatewaySetupPage/steps/SetupGatewayComponentStep.tsx

@@ -99,6 +99,7 @@ export const SetupGatewayComponentStep = () => {
               <field.FormInput
                 required
                 label={m.gateway_setup_component_label_common_name()}
+                helper={m.gateway_setup_component_label_common_name_help()}
                 type="text"
               />
             )}
@@ -109,6 +110,7 @@ export const SetupGatewayComponentStep = () => {
               <field.FormInput
                 required
                 label={m.gateway_setup_component_label_ip_or_domain()}
+                helper={m.gateway_setup_component_label_ip_or_domain_help()}
                 type="text"
               />
             )}

web/src/pages/settings/SettingsIndexPage/tabs/SettingsLicenseTab/SettingsLicenseTab.tsx

@@ -45,7 +45,7 @@ export const SettingsLicenseTab = () => {
         subtitle={m.settings_license_subtitle()}
       />
       {isPresent(settings) && (
-        <SettingsCard>
+        <SettingsCard id="license-main-card">
           {isPresent(licenseInfo) &&
             isPresent(licenseState) &&
             licenseState !== 'noLicense' && (

web/src/pages/settings/SettingsIndexPage/tabs/SettingsLicenseTab/components/SettingsLicenseBusinessUpsellSection/SettingsLicenseBusinessUpsellSection.tsx

@@ -30,6 +30,7 @@ export const SettingsLicenseBusinessUpsellSection = () => {
             <div className="top">
               <p className="title">{m.settings_license_plan_enterprise_title()}</p>
             </div>
+            <SizedBox height={ThemeSpacing.Xs} />
             <p className="description">
               {m.settings_license_plan_enterprise_description()}
             </p>

web/src/pages/settings/SettingsIndexPage/tabs/SettingsLicenseTab/components/SettingsLicenseExpiredNotice/SettingsLicenseExpiredNotice.tsx

@@ -7,6 +7,8 @@ import {
   licenseGracePeriodDays,
 } from '../../../../../../../shared/constants';
 import { Button } from '../../../../../../../shared/defguard-ui/components/Button/Button';
+import { SizedBox } from '../../../../../../../shared/defguard-ui/components/SizedBox/SizedBox';
+import { ThemeSpacing } from '../../../../../../../shared/defguard-ui/types';
 import expiredImage from '../../assets/expired.png';
 
 type Props = {
@@ -34,7 +36,9 @@ export const SettingsLicenseExpiredNotice = ({ licenseInfo, state }: Props) => {
         </div>
         <div className="content-track">
           <p className="title">{m.settings_license_expired_notice_title()}</p>
+          <SizedBox height={ThemeSpacing.Xs} />
           <p className="description">{description}</p>
+          <SizedBox height={ThemeSpacing.Md} />
           <a
             href={externalLink.defguard.pricing}
             rel="noreferrer noopener"

web/src/pages/settings/SettingsIndexPage/tabs/SettingsLicenseTab/components/SettingsLicenseNoLicenseSection/SettingsLicenseNoLicenseSection.tsx

@@ -38,10 +38,13 @@ export const SettingsLicenseNoLicenseSection = () => {
                 variant={BadgeVariant.Plan}
               />
             </div>
+            <SizedBox height={ThemeSpacing.Xs} />
             <p className="description">
               {m.settings_license_plan_business_description()}
             </p>
-            <Divider spacing={ThemeSpacing.Md} />
+            <SizedBox height={ThemeSpacing.Md} />
+            <Divider />
+            <SizedBox height={ThemeSpacing.Md} />
             <p className="promotional-copy">
               {m.settings_license_plan_business_promotional_copy()}
             </p>
@@ -71,6 +74,7 @@ export const SettingsLicenseNoLicenseSection = () => {
             <div className="top">
               <p className="title">{m.settings_license_plan_enterprise_title()}</p>
             </div>
+            <SizedBox height={ThemeSpacing.Xs} />
             <p className="description">
               {m.settings_license_plan_enterprise_description()}
             </p>

web/src/pages/settings/SettingsIndexPage/tabs/SettingsLicenseTab/style.scss

@@ -1,4 +1,12 @@
+#settings-license-tab {
+  #license-main-card {
+    padding: var(--spacing-lg);
+  }
+}
+
 #license-plans {
+  padding: var(--spacing-lg) var(--spacing-xl);
+
   header {
     display: flex;
     flex-flow: row;
@@ -32,7 +40,6 @@
       & > .content {
         display: flex;
         flex-flow: column;
-        row-gap: var(--spacing-xs);
 
         .top {
           width: 100%;
@@ -69,6 +76,8 @@
 }
 
 #license-expired-notice {
+  padding: var(--spacing-lg) var(--spacing-xl);
+
   .notice-track {
     display: grid;
     grid-template-columns: 68px 1fr;
@@ -85,7 +94,6 @@
       display: flex;
       flex-flow: column;
       align-items: flex-start;
-      gap: var(--spacing-md);
 
       .title {
         color: var(--fg-critical);