Set minion's name to be smaller

casanet · Aug 20, 2022 · e1c1a95 · e1c1a95
1 parent e307d1f
commit e1c1a95
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/minions/MinionEditableName.tsx b/src/components/minions/MinionEditableName.tsx
@@ -50,7 +50,7 @@ export function MinionEditableName(props: MinionMinionEditableNameProps) {
 			alignItems="center"
 		>
 			{!editNameMode && <div style={{ maxWidth: `calc(100% - ${fontRatio * 0.5}px)` }}>
-				<Typography className="minion-name" style={{ fontSize: fontRatio * 0.7 }}>{minion.name}</Typography>
+				<Typography className="minion-name" style={{ fontSize: fontRatio * 0.55 }}>{minion.name}</Typography>
 			</div>}
 			{editNameMode && <div style={{ width: `calc(100% - ${fontRatio * 1.6}px)` }}>
 				<TextField

diff --git a/src/components/minions/MinionOverview.tsx b/src/components/minions/MinionOverview.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import { MinionTimeoutOverview } from "./MinionTimeoutOverview";
 import { Minion } from "../../infrastructure/generated/api/swagger/api";
 import { MinionBatteryOverview } from "./MinionBatteryOverview";
+import { marginLeft } from "../../logic/common/themeUtils";
 
 interface MinionOverviewProps {
 	minion: Minion;
@@ -39,7 +40,6 @@ export function MinionOverview(props: MinionOverviewProps) {
 	const smallFontRatio = ratio / 4;
 	const verySmallFontRatio = ratio / 8;
 	const fontSize: string = `${fontRatio}px`;
-	const smallFontSize: string = `${smallFontRatio}px`;
 
 	const subTitleColor = theme.palette.grey.A200;
 
@@ -53,16 +53,16 @@ export function MinionOverview(props: MinionOverviewProps) {
 				alignItems="flex-start"
 			>
 				{/* Set the name size as all card width, expect a place for the power icon. */}
-				<div className="minion-name-container" style={{ width: `calc(100% - ${fontRatio + 30}px` }} >
+				<div className="minion-name-container" style={{ width: `calc(100% - ${fontRatio + 30}px`, marginTop: fontRatio * 0.1, [marginLeft(theme)]: fontRatio * 0.1  }} >
 					<Grid
 						className="minion-name-container"
 						container
 						direction="column"
 						justifyContent="flex-start"
 						alignItems="flex-start"
 					>
-						<Typography className="minion-name" style={{ fontSize }}>{minion.name}</Typography>
-						<Typography className="minion-name" style={{ fontSize: smallFontSize, color: subTitleColor }}>{t(mapMinionTypeToDisplay[minion.minionType])}</Typography>
+						<Typography className="minion-name" style={{ fontSize: fontRatio * 0.6 }}>{minion.name}</Typography>
+						<Typography className="minion-name" style={{ fontSize: smallFontRatio * 0.8, color: subTitleColor }}>{t(mapMinionTypeToDisplay[minion.minionType])}</Typography>
 					</Grid>
 				</div>
 				<div className="quick-action-container">