Merge pull request #3274 from bluewave-labs/fix/css-cleanup

fix: clean up index.css

Author: ajhollid

client/src/Components/WalletProvider/index.css

@@ -6,7 +6,6 @@
 	min-height: 16px;
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
-	font-size: var(--env-var-font-size-medium);
 	font-weight: 400;
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) {

client/src/Components/WalletProvider/index.jsx

@@ -64,7 +64,6 @@ const Select = ({
 	const theme = useTheme();
 	const getItemValue = (item) => item?._id ?? item?.id;
 	const itemStyles = {
-		fontSize: "var(--env-var-font-size-medium)",
 		color: theme.palette.primary.contrastTextTertiary,
 		borderRadius: theme.shape.borderRadius,
 		margin: theme.spacing(2),

client/src/Components/v1/Breadcrumbs/index.css

@@ -18,7 +18,6 @@ export const HttpAdornment = ({ https }) => {
 		>
 			<Typography
 				component="h5"
-				paddingRight={"var(--env-var-spacing-1-minus)"}
 				color={theme.palette.primary.contrastTextSecondary}
 				sx={{ lineHeight: 1, opacity: 0.8 }}
 			>

client/src/Components/v1/Inputs/Select/index.jsx

@@ -23,7 +23,6 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 				overflow={"hidden"}
 				textOverflow={"ellipsis"}
 				whiteSpace={"nowrap"}
-				maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
 			>
 				{monitor.name}
 			</Typography>
@@ -40,7 +39,6 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 					overflow={"hidden"}
 					textOverflow={"ellipsis"}
 					whiteSpace={"nowrap"}
-					maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
 				>
 					{formatUrl(monitor?.url)}
 				</Typography>

client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx

@@ -1,4 +1,17 @@
-import { Box, Stack, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import { useTheme, keyframes } from "@mui/material";
+
+const ripple = keyframes`
+	from {
+		opacity: 1;
+		transform: scale(0);
+	}
+	to {
+		opacity: 0;
+		transform: scale(2);
+	}
+`;
 
 interface PulseDotProps {
 	color: string;
@@ -28,7 +41,7 @@ export const PulseDot = ({ color }: PulseDotProps) => {
 						height: "100%",
 						backgroundColor: "inherit",
 						borderRadius: "50%",
-						animation: "ripple 1.8s ease-out infinite",
+						animation: `${ripple} 1.8s ease-out infinite`,
 					},
 					"&::after": {
 						content: `""`,

client/src/Components/v2/design-elements/MonitorStatus.tsx

@@ -38,7 +38,6 @@ const baseTheme = (palette) => ({
 			fontWeight: 400,
 		},
 		label: {
-			fontSize: "var(--env-var-font-size-medium)",
 			color: palette.primary.contrastTextSecondary,
 			fontWeight: 500,
 		},
@@ -332,8 +331,6 @@ const baseTheme = (palette) => ({
 
 					"& .MuiInputBase-input": {
 						padding: ".75em",
-						minHeight: "var(--env-var-height-2)",
-						fontSize: "var(--env-var-font-size-medium)",
 						fontWeight: 400,
 						color: palette.primary.contrastTextSecondary,
 						"&.Mui-disabled": {
@@ -368,13 +365,12 @@ const baseTheme = (palette) => ({
 					"& .MuiFormHelperText-root": {
 						color: palette.error.main,
 						opacity: 0.8,
-						fontSize: "var(--env-var-font-size-medium)",
+						fontSize: "var()",
 						marginLeft: 0,
 					},
 
 					"& .MuiFormHelperText-root.Mui-error": {
 						opacity: 0.8,
-						fontSize: "var(--env-var-font-size-medium)",
 						color: palette.error.main,
 						whiteSpace: "nowrap",
 					},
@@ -762,7 +758,6 @@ const baseTheme = (palette) => ({
 						overflow: "hidden",
 						textOverflow: "ellipsis",
 						whiteSpace: "nowrap",
-						maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
 					},
 				},
 				{
@@ -775,7 +770,6 @@ const baseTheme = (palette) => ({
 						overflow: "hidden",
 						textOverflow: "ellipsis",
 						whiteSpace: "nowrap",
-						maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
 					},
 				},
 			],