Skip to content

Commit 68316f4

Browse files
patil-pratik-87sharma-tapas
patil-pratik-87
and
sharma-tapas
authored
Fixed fonts inconsistency in vJailbreak UI (#898)
Co-authored-by: Tapas Sharma <tapas@platform9.com>
1 parent d11a7ca commit 68316f4

File tree

11 files changed

+112
-32
lines changed

11 files changed

+112
-32
lines changed

‎ui/src/components/forms/IPAddressField.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { styled } from '@mui/material/styles';
2+
import { TextField, TextFieldProps } from '@mui/material';
3+
import customTypography from '../../theme/typography';
4+
5+
export const IPAddressField = styled(TextField)<TextFieldProps>(() => ({
6+
'& .MuiInputBase-input': {
7+
...customTypography.monospace,
8+
}
9+
}));
10+
11+
export default IPAddressField;

‎ui/src/components/forms/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as IPAddressField } from "./IPAddressField"

‎ui/src/components/typography/CodeText.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { styled } from '@mui/material/styles';
2+
import { Typography, TypographyProps } from '@mui/material';
3+
import customTypography from '../../theme/typography';
4+
5+
export const CodeText = styled(Typography)<TypographyProps>(({ theme }) => ({
6+
...customTypography.code,
7+
backgroundColor: theme.palette.action.hover,
8+
padding: '2px 6px',
9+
borderRadius: '4px',
10+
display: 'inline-block',
11+
}));
12+
13+
export default CodeText;

‎ui/src/components/typography/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as CodeText } from "./CodeText"

‎ui/src/features/migration/MigrationOptions.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
styled,
77
TextField,
88
} from "@mui/material"
9+
import customTypography from "../../theme/typography"
910
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
1011
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker"
1112
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"
@@ -43,11 +44,12 @@ const Fields = styled("div")(({ theme }) => ({
4344
marginTop: theme.spacing(2),
4445
}))
4546

46-
const CustomTextField = styled(TextField)({
47+
const CustomTextField = styled(TextField)(() => ({
4748
"& .MuiOutlinedInput-root": {
48-
fontFamily: "Monospace",
49+
// Use monospace variant for input fields (larger, more readable)
50+
...customTypography.monospace,
4951
},
50-
})
52+
}))
5153

5254
// Intefaces
5355
interface MigrationOptionsPropsInterface {

‎ui/src/features/migration/MigrationOptionsAlt.tsx‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
TextField,
88
Typography,
99
} from "@mui/material"
10+
import customTypography from "../../theme/typography"
1011
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
1112
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker"
1213
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"
@@ -47,11 +48,11 @@ const Fields = styled("div")(() => ({
4748
gridGap: "12px",
4849
}))
4950

50-
const CustomTextField = styled(TextField)({
51+
const CustomTextField = styled(TextField)(() => ({
5152
"& .MuiOutlinedInput-root": {
52-
fontFamily: "Monospace",
53+
...customTypography.monospace,
5354
},
54-
})
55+
}))
5556

5657
// Interfaces
5758
export interface MigrationOptionsPropsInterface {
@@ -412,24 +413,24 @@ export default function MigrationOptionsAlt({
412413
<Typography variant="caption">
413414
This folder name will be used to organize the migrated VMs in vCenter.
414415
</Typography>
415-
</Fields>
416-
417-
<Fields sx={{ gridGap: "0" }}>
418-
<FormControlLabel
419-
label="Disconnect Source VM Network"
420-
control={
421-
<Checkbox
422-
checked={params?.disconnectSourceNetwork || false}
423-
onChange={(e) => {
424-
onChange("disconnectSourceNetwork")(e.target.checked);
425-
}}
426-
/>
427-
}
428-
/>
429-
<Typography variant="caption" sx={{ marginLeft: "32px" }}>
430-
Disconnect NICs on the source VM to prevent IP conflicts.
431-
</Typography>
432-
</Fields>
416+
</Fields>
417+
418+
<Fields sx={{ gridGap: "0" }}>
419+
<FormControlLabel
420+
label="Disconnect Source VM Network"
421+
control={
422+
<Checkbox
423+
checked={params?.disconnectSourceNetwork || false}
424+
onChange={(e) => {
425+
onChange("disconnectSourceNetwork")(e.target.checked);
426+
}}
427+
/>
428+
}
429+
/>
430+
<Typography variant="caption" sx={{ marginLeft: "32px" }}>
431+
Disconnect NICs on the source VM to prevent IP conflicts.
432+
</Typography>
433+
</Fields>
433434

434435
<Fields sx={{ gridGap: "0" }}>
435436
<FormControlLabel

‎ui/src/features/migration/RollingMigrationForm.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Box, Typography, Drawer, styled, Paper, Tooltip, Button, Dialog, DialogTitle, DialogContent, DialogActions, Alert, Select, MenuItem, GlobalStyles, FormLabel, Snackbar } from "@mui/material"
22
import ClusterIcon from "@mui/icons-material/Hub"
33
import React, { useState, useMemo, useEffect, useCallback } from "react"
4+
import { getTypographyStyles } from "../../theme/typography-utils"
45
import { DataGrid, GridColDef, GridRowSelectionModel, GridToolbarColumnsButton } from "@mui/x-data-grid"
56
import { useNavigate } from "react-router-dom"
67
import Footer from "../../components/forms/Footer"
@@ -2533,12 +2534,12 @@ export default function RollingMigrationFormDrawer({
25332534
/>
25342535
</Paper>
25352536
{vmIpValidationError && (
2536-
<Alert severity="warning" >
2537+
<Alert severity="warning" sx={{ mt: 2 }}>
25372538
{vmIpValidationError}
25382539
</Alert>
25392540
)}
25402541
{osValidationError && (
2541-
<Alert severity="warning" >
2542+
<Alert severity="warning" sx={{ mt: 2 }}>
25422543
{osValidationError}
25432544
</Alert>
25442545
)}
@@ -2976,7 +2977,8 @@ export default function RollingMigrationFormDrawer({
29762977
sx={{
29772978
width: '200px',
29782979
'& .MuiInputBase-input': {
2979-
fontFamily: 'monospace'
2980+
// Use monospace variant for IP input fields (larger, more readable)
2981+
...getTypographyStyles.monospace,
29802982
}
29812983
}}
29822984
error={validationStatus === 'invalid'}

‎ui/src/features/migration/VmsSelectionStep.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import CustomLoadingOverlay from "src/components/grid/CustomLoadingOverlay";
2929
import CustomSearchToolbar from "src/components/grid/CustomSearchToolbar";
3030
import Step from "../../components/forms/Step";
3131
import { useEffect, useState, useCallback } from "react";
32+
import { getTypographyStyles } from "../../theme/typography-utils";
3233
import * as React from "react";
3334
import { getMigrationPlans } from "src/api/migration-plans/migrationPlans";
3435
import { useVMwareMachinesQuery } from "src/hooks/api/useVMwareMachinesQuery";
@@ -1707,7 +1708,7 @@ export default function VmsSelectionStep({
17071708
sx={{
17081709
width: '200px',
17091710
'& .MuiInputBase-input': {
1710-
fontFamily: 'monospace'
1711+
...getTypographyStyles.monospace,
17111712
}
17121713
}}
17131714
error={validationStatus === 'invalid'}

‎ui/src/main.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
import "@fontsource/roboto/300.css"
2-
import "@fontsource/roboto/400.css"
3-
import "@fontsource/roboto/500.css"
4-
import "@fontsource/roboto/700.css"
51
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
62
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
73
import { StrictMode } from "react"

‎ui/src/theme/typography-utils.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import customTypography from "./typography"
2+
3+
// Utility to safely access custom typography variants
4+
export const getTypographyStyles = {
5+
monospace: customTypography.monospace,
6+
code: customTypography.code,
7+
}
8+
9+
export default getTypographyStyles

0 commit comments

Comments
 (0)