more ui fixes

linode · Dec 11, 2024 · 61aad9a · 61aad9a
1 parent 30ee56b
commit 61aad9a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 55 deletions.
diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
@@ -63,10 +63,7 @@ export const SelectFirewallPanel = (props: Props) => {
       : null;
 
   return (
-    <Paper
-      data-testid="select-firewall-panel"
-      sx={(theme) => ({ marginTop: theme.spacing(3) })}
-    >
+    <Paper data-testid="select-firewall-panel">
       <Typography
         sx={(theme) => ({ marginBottom: theme.spacing(2) })}
         variant="h2"

diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
@@ -37,10 +37,6 @@ import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperT
 import { TagsInput } from 'src/components/TagsInput/TagsInput';
 import { FIREWALL_GET_STARTED_LINK } from 'src/constants';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
-import {
-  StyledDocsLinkContainer,
-  StyledFieldWithDocsStack,
-} from 'src/features/Kubernetes/CreateCluster/CreateCluster.styles';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import {
   reportAgreementSigningError,
@@ -508,30 +504,38 @@ const NodeBalancerCreate = () => {
           variant="error"
         />
       )}
-      <Paper>
-        <TextField
-          disabled={isRestricted}
-          errorText={hasErrorFor('label')}
-          label={'NodeBalancer Label'}
-          noMarginTop
-          onChange={labelChange}
-          value={nodeBalancerFields.label || ''}
-        />
-        <TagsInput
-          value={
-            nodeBalancerFields.tags
-              ? nodeBalancerFields.tags.map((tag) => ({
-                  label: tag,
-                  value: tag,
-                }))
-              : []
-          }
-          disabled={isRestricted}
-          onChange={tagsChange}
-          tagError={hasErrorFor('tags')}
-        />
-        <StyledFieldWithDocsStack sx={{ marginTop: 1 }}>
-          <Stack>
+      <Stack spacing={2}>
+        <Paper>
+          <TextField
+            disabled={isRestricted}
+            errorText={hasErrorFor('label')}
+            label={'NodeBalancer Label'}
+            noMarginTop
+            onChange={labelChange}
+            value={nodeBalancerFields.label || ''}
+          />
+          <TagsInput
+            value={
+              nodeBalancerFields.tags
+                ? nodeBalancerFields.tags.map((tag) => ({
+                    label: tag,
+                    value: tag,
+                  }))
+                : []
+            }
+            disabled={isRestricted}
+            onChange={tagsChange}
+            tagError={hasErrorFor('tags')}
+          />
+        </Paper>
+        <Paper>
+          <Stack
+            alignItems="flex-start"
+            direction="row"
+            flexWrap="wrap"
+            gap={2}
+            justifyContent="space-between"
+          >
             <RegionSelect
               textFieldProps={{
                 helperText: <RegionHelperText mb={2} />,
@@ -540,37 +544,36 @@ const NodeBalancerCreate = () => {
               currentCapability="NodeBalancers"
               disableClearable
               errorText={hasErrorFor('region')}
+              noMarginTop
               onChange={(e, region) => regionChange(region?.id ?? '')}
               regions={regions ?? []}
               value={nodeBalancerFields.region ?? ''}
             />
-          </Stack>
-          <StyledDocsLinkContainer>
             <DocsLink
               href="https://www.linode.com/pricing"
               label={DOCS_LINK_LABEL_DC_PRICING}
             />
-          </StyledDocsLinkContainer>
-        </StyledFieldWithDocsStack>
-      </Paper>
-      <SelectFirewallPanel
-        handleFirewallChange={(firewallId: number) => {
-          setNodeBalancerFields((prev) => ({
-            ...prev,
-            firewall_id: firewallId > 0 ? firewallId : undefined,
-          }));
-        }}
-        helperText={
-          <Typography>
-            Assign an existing Firewall to this NodeBalancer to control inbound
-            network traffic.{' '}
-            <Link to={FIREWALL_GET_STARTED_LINK}>Learn more</Link>.
-          </Typography>
-        }
-        disabled={isRestricted}
-        entityType="nodebalancer"
-        selectedFirewallId={nodeBalancerFields.firewall_id ?? -1}
-      />
+          </Stack>
+        </Paper>
+        <SelectFirewallPanel
+          handleFirewallChange={(firewallId: number) => {
+            setNodeBalancerFields((prev) => ({
+              ...prev,
+              firewall_id: firewallId > 0 ? firewallId : undefined,
+            }));
+          }}
+          helperText={
+            <Typography>
+              Assign an existing Firewall to this NodeBalancer to control
+              inbound network traffic.{' '}
+              <Link to={FIREWALL_GET_STARTED_LINK}>Learn more</Link>.
+            </Typography>
+          }
+          disabled={isRestricted}
+          entityType="nodebalancer"
+          selectedFirewallId={nodeBalancerFields.firewall_id ?? -1}
+        />
+      </Stack>
       <Box marginBottom={2} marginTop={2}>
         {nodeBalancerFields.configs.map((nodeBalancerConfig, idx) => {
           const onChange = (key: keyof NodeBalancerConfigFieldsWithStatus) => (