styling

linode · Dec 12, 2024 · 9c07d53 · 9c07d53
1 parent 097fbff
commit 9c07d53
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/...ager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/...ager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts
@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 
 import VerticalDivider from 'src/assets/icons/divider-vertical.svg';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import { TagCell } from 'src/components/TagCell/TagCell';
 
 export const StyledCopyTooltip = styled(CopyTooltip, {
   label: 'CopyTooltip',
@@ -26,23 +25,25 @@ export const StyledVerticalDivider = styled(VerticalDivider, {
 export const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
 })(({ theme }) => ({
-  margin: `0 0 0 ${theme.spacing()}`,
+  margin: `0 ${theme.spacing(2)} 0 ${theme.spacing()}`,
+  [theme.breakpoints.down('md')]: {
+    padding: theme.spacing(),
+  },
 }));
 
-export const StyledPoolInfoBox = styled(Box, {
-  label: 'StyledPoolInfoBox',
+export const StyledNotEncryptedBox = styled(Box, {
+  label: 'StyledNotEncryptedBox',
 })(({ theme }) => ({
+  alignItems: 'center',
   display: 'flex',
-  [theme.breakpoints.down('md')]: {
-    padding: `${theme.spacing()} 0`,
-  },
-  width: '100%',
+  margin: `0 ${theme.spacing(2)} 0 ${theme.spacing()}`,
 }));
 
-export const StyledTagCell = styled(TagCell, {
-  label: 'StyledTagCell',
+export const StyledPoolInfoBox = styled(Box, {
+  label: 'StyledPoolInfoBox',
 })(() => ({
-  width: '100%',
+  display: 'flex',
+  width: '50%',
 }));
 
 export const StyledTableFooter = styled(Box, {
@@ -56,5 +57,6 @@ export const StyledTableFooter = styled(Box, {
   [theme.breakpoints.down('md')]: {
     display: 'block',
     flexDirection: 'column',
+    paddingBottom: theme.spacing(),
   },
 }));
diff --git a/...es/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/...es/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx
@@ -16,15 +16,16 @@ import { TableContentWrapper } from 'src/components/TableContentWrapper/TableCon
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
+import { TagCell } from 'src/components/TagCell/TagCell';
 import { useUpdateNodePoolMutation } from 'src/queries/kubernetes';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { NodeRow as _NodeRow } from './NodeRow';
 import {
+  StyledNotEncryptedBox,
   StyledPoolInfoBox,
   StyledTableFooter,
-  StyledTagCell,
   StyledTypography,
   StyledVerticalDivider,
 } from './NodeTable.styles';
@@ -172,7 +173,9 @@ export const NodeTable = React.memo((props: Props) => {
                       data-testid={encryptionStatusTestId}
                       display="flex"
                     >
-                      <Typography>Pool ID {poolId}</Typography>
+                      <Typography sx={{ textWrap: 'nowrap' }}>
+                        Pool ID {poolId}
+                      </Typography>
                       <StyledVerticalDivider />
                       <EncryptedStatus
                         encryptionStatus={encryptionStatus}
@@ -183,11 +186,7 @@ export const NodeTable = React.memo((props: Props) => {
                     <Typography>Pool ID {poolId}</Typography>
                   )}
                 </StyledPoolInfoBox>
-                <StyledTagCell
-                  tags={tags}
-                  updateTags={updateTags}
-                  view="inline"
-                />
+                <TagCell tags={tags} updateTags={updateTags} view="inline" />
               </StyledTableFooter>
               <PaginationFooter
                 count={count}
@@ -241,10 +240,10 @@ export const EncryptedStatus = ({
   ) : encryptionStatus === 'disabled' ? (
     <>
       <Unlock />
-      <StyledTypography sx={{ whiteSpace: 'nowrap' }}>
-        Not Encrypted
-      </StyledTypography>
-      {tooltipText ? <TooltipIcon status="help" text={tooltipText} /> : null}
+      <StyledNotEncryptedBox>
+        <Typography sx={{ whiteSpace: 'nowrap' }}>Not Encrypted</Typography>
+        {tooltipText ? <TooltipIcon status="help" text={tooltipText} /> : null}
+      </StyledNotEncryptedBox>
     </>
   ) : null;
 };