ISSUE #5151 - fix input not having placeholder text

3drepo · Sep 27, 2024 · a23b4d0 · a23b4d0
1 parent 56c1ddb
commit a23b4d0
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/frontend/src/v5/ui/themes/theme.ts b/frontend/src/v5/ui/themes/theme.ts
@@ -319,13 +319,6 @@ export const theme = createTheme({
 							'-moz-appearance': 'textfield',
 						},
 
-						'::placeholder': {
-							opacity: 1,
-							color: COLOR.BASE_MAIN,
-							'&:hover': {
-								color: COLOR.SECONDARY_MAIN,
-							},
-						},
 					},
 					'.Mui-error': {
 						'.MuiOutlinedInput-notchedOutline': {
@@ -958,9 +951,6 @@ export const theme = createTheme({
 					},
 					'&:hover:not(.Mui-focused)': {
 						backgroundColor: COLOR.TERTIARY_LIGHTER,
-						'.MuiInputBase-input::placeholder': {
-							color: COLOR.SECONDARY_MAIN,
-						},
 					},
 					'&, &:hover, &.Mui-focused': {
 						'&:not(.Mui-disabled):before, &:not(.Mui-disabled):after': {
@@ -970,6 +960,13 @@ export const theme = createTheme({
 				},
 				input: {
 					padding: '0 12px',
+					'::placeholder': {
+						opacity: 1,
+						color: COLOR.BASE_MAIN,
+					},
+					'&:hover:not(.Mui-focused)::placeholder': {
+						color: COLOR.SECONDARY_MAIN,
+					},
 				},
 			},
 		},
@@ -996,6 +993,10 @@ export const theme = createTheme({
 						height: 35,
 						lineHeight: '35px',
 					},
+					'&&&& ::placeholder': {
+						opacity: '1 !important',
+						color: COLOR.BASE_LIGHTER,
+					},
 				},
 				notchedOutline: {
 					height: 35,