fix(striker-ui): split text variants

striker-ui/components/ProvisionServerDialog.tsx

@@ -36,7 +36,7 @@ import {
   InputTestBatches,
   TestInputFunction,
 } from '../types/TestInputFunction';
-import { BodyText, HeaderText, Monospace } from './Text';
+import { BodyText, HeaderText, InlineMonoText } from './Text';
 
 type InputMessage = Partial<Pick<MessageBoxProps, 'type' | 'text'>>;
 
@@ -1355,9 +1355,11 @@ const ProvisionServerDialog = ({
       <Grid container columns={gridColumns} direction="column">
         <Grid direction="row" item xs={gridColumns}>
           <BodyText>
-            Server <Monospace text={inputServerNameValue} /> will be created on
+            Server <InlineMonoText text={inputServerNameValue} /> will be
-            anvil node pair{' '}
+            created on anvil node pair{' '}
-            <Monospace text={anvilUUIDMapToData[inputAnvilValue].anvilName} />{' '}
+            <InlineMonoText
+              text={anvilUUIDMapToData[inputAnvilValue].anvilName}
+            />{' '}
             with the following properties:
           </BodyText>
         </Grid>
@@ -1367,12 +1369,12 @@ const ProvisionServerDialog = ({
           </Grid>
           <Grid item xs={c2}>
             <BodyText>
-              <Monospace text={inputCPUCoresValue} /> core(s)
+              <InlineMonoText text={inputCPUCoresValue} /> core(s)
             </BodyText>
           </Grid>
           <Grid item xs={c3}>
             <BodyText>
-              <Monospace text={inputCPUCoresMax} /> core(s) available
+              <InlineMonoText text={inputCPUCoresMax} /> core(s) available
             </BodyText>
           </Grid>
         </Grid>
@@ -1381,11 +1383,11 @@ const ProvisionServerDialog = ({
             <BodyText text="Memory" />
           </Grid>
           <Grid item xs={c2}>
-            <Monospace text={`${inputMemoryValue} ${inputMemoryUnit}`} />
+            <InlineMonoText text={`${inputMemoryValue} ${inputMemoryUnit}`} />
           </Grid>
           <Grid item xs={c3}>
             <BodyText>
-              <Monospace text={`${inputMemoryMax} ${inputMemoryUnit}`} />{' '}
+              <InlineMonoText text={`${inputMemoryMax} ${inputMemoryUnit}`} />{' '}
               available
             </BodyText>
           </Grid>
@@ -1409,18 +1411,19 @@ const ProvisionServerDialog = ({
             >
               <Grid item xs={c1}>
                 <BodyText>
-                  Virtual disk <Monospace text={vdIndex} />
+                  Virtual disk <InlineMonoText text={vdIndex} />
                 </BodyText>
               </Grid>
               <Grid item xs={c2}>
                 <BodyText>
-                  <Monospace text={`${vdInputSize} ${vdInputUnit}`} /> on{' '}
+                  <InlineMonoText text={`${vdInputSize} ${vdInputUnit}`} /> on{' '}
                   {vdStorageGroupName}
                 </BodyText>
               </Grid>
               <Grid item xs={c3}>
                 <BodyText>
-                  <Monospace text={`${vdInputMax} ${vdInputUnit}`} /> available
+                  <InlineMonoText text={`${vdInputMax} ${vdInputUnit}`} />{' '}
+                  available
                 </BodyText>
               </Grid>
             </Grid>
@@ -1431,7 +1434,7 @@ const ProvisionServerDialog = ({
             <BodyText text="Install ISO" />
           </Grid>
           <Grid item xs={c2n3}>
-            <Monospace
+            <InlineMonoText
               text={fileUUIDMapToData[inputInstallISOFileUUID].fileName}
             />
           </Grid>
@@ -1442,7 +1445,7 @@ const ProvisionServerDialog = ({
           </Grid>
           <Grid item xs={c2n3}>
             {fileUUIDMapToData[inputDriverISOFileUUID] ? (
-              <Monospace
+              <InlineMonoText
                 text={fileUUIDMapToData[inputDriverISOFileUUID].fileName}
               />
             ) : (

striker-ui/components/Text/DataGridCellText.tsx

@@ -1,16 +0,0 @@
-import { FC } from 'react';
-
-import BodyText, { BodyTextProps } from './BodyText';
-
-const DataGridCellText: FC<BodyTextProps> = ({
-  ...dataGridCellTextRestProps
-}) => (
-  <BodyText
-    {...{
-      variant: 'body2',
-      ...dataGridCellTextRestProps,
-    }}
-  />
-);
-
-export default DataGridCellText;

striker-ui/components/Text/InlineMonoText.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+
+import { BodyTextProps } from './BodyText';
+import SmallText from './SmallText';
+
+type InlineMonoTextProps = BodyTextProps;
+
+const InlineMonoText: FC<InlineMonoTextProps> = ({
+  sx,
+  ...bodyTextRestProps
+}) => (
+  <SmallText
+    {...{
+      ...bodyTextRestProps,
+      monospaced: true,
+      sx: {
+        display: 'inline',
+        padding: '.1rem .3rem',
+
+        ...sx,
+      },
+    }}
+  />
+);
+
+export type { InlineMonoTextProps };
+
+export default InlineMonoText;

striker-ui/components/Text/MonoText.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+
+import { BodyTextProps } from './BodyText';
+import SmallText from './SmallText';
+
+type MonoTextProps = BodyTextProps;
+
+const MonoText: FC<MonoTextProps> = ({ sx, ...bodyTextRestProps }) => (
+  <SmallText
+    monospaced
+    sx={{ alignItems: 'center', display: 'flex', height: '100%', ...sx }}
+    {...bodyTextRestProps}
+  />
+);
+
+export type { MonoTextProps };
+
+export default MonoText;

striker-ui/components/Text/Monospace.tsx

@@ -1,20 +0,0 @@
-import { FC } from 'react';
-
-import BodyText, { BodyTextProps } from './BodyText';
-
-const Monospace: FC<BodyTextProps> = ({ sx, ...bodyTextRestProps }) => (
-  <BodyText
-    {...{
-      ...bodyTextRestProps,
-      monospaced: true,
-      sx: {
-        display: 'inline',
-        padding: '.1rem .3rem',
-
-        ...sx,
-      },
-    }}
-  />
-);
-
-export default Monospace;

striker-ui/components/Text/SmallText.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+import BodyText, { BodyTextProps } from './BodyText';
+
+type SmallTextProps = BodyTextProps;
+
+const SmallText: FC<SmallTextProps> = ({ ...bodyTextRestProps }) => (
+  <BodyText {...{ variant: 'body2', ...bodyTextRestProps }} />
+);
+
+export type { SmallTextProps };
+
+export default SmallText;

striker-ui/components/Text/index.tsx

@@ -1,7 +1,9 @@
 import BodyText, { BodyTextProps } from './BodyText';
-import DataGridCellText from './DataGridCellText';
 import HeaderText from './HeaderText';
-import Monospace from './Monospace';
+import InlineMonoText from './InlineMonoText';
+import MonoText from './MonoText';
+import SmallText from './SmallText';
 
 export type { BodyTextProps };
-export { BodyText, DataGridCellText, HeaderText, Monospace };
+
+export { BodyText, HeaderText, InlineMonoText, MonoText, SmallText };