fix: Fixed input and dropdown styles

src/components/Header/Dropdown.tsx

@@ -23,7 +23,11 @@ const Dropdown: FC<DropdownProps> = (props) => {
 			onChange={onChange}
 			allowDeselect={false}
 			value={value}
-			classNames={{ option: classes.dropdownOption, input: classes.dropdownBtn }}
+			classNames={{
+				option: classes.dropdownOption,
+				input: classes.dropdownBtn,
+				description: classes.dropdownDescription,
+			}}
 		/>
 	);
 };

src/components/Header/styles/LogQuery.module.css

@@ -188,6 +188,12 @@
 	font-size: var(--mantine-font-size-md);
 }
 
+.dropdownDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
 .liveTailFilterContainer {
 	display: flex;
 	gap: 12px;

src/components/Misc/DeleteOrResetModal.tsx

@@ -98,7 +98,13 @@ const DeleteOrResetModal = ({
 								Please type <span className={classes.confirmationTextHighlight}>{`"${confirmationText}"`}</span> to
 								confirm {type === 'delete' ? 'deletion' : 'reset'}.
 							</Text>
-							<TextInput value={confirmText} onChange={onChangeHandler} placeholder={placeholder} required />
+							<TextInput
+								classNames={{ input: classes.inputField }}
+								value={confirmText}
+								onChange={onChangeHandler}
+								placeholder={placeholder}
+								required
+							/>
 						</>
 					)}
 

src/components/Misc/styles/DeleteOrResetModal.module.css

@@ -35,3 +35,7 @@
 	align-items: center;
 	justify-content: flex-end;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}

src/pages/AccessManagement/PrivilegeTR.tsx

@@ -321,6 +321,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 						onChange={(value) => {
 							setSelectedPrivilege(value ?? '');
 						}}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						value={selectedPrivilege}
 						nothingFoundMessage="No options"
 					/>
@@ -340,6 +341,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 								onDropdownOpen={() => setStreamSearchValue('')}
 								data={getLogStreamListData?.data?.map((stream) => ({ value: stream.name, label: stream.name })) ?? []}
 								searchable
+								classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 								label="Select a stream to assign"
 								required
 							/>
@@ -348,6 +350,7 @@ const PrivilegeTR: FC<PrivilegeTRProps> = (props) => {
 									type="text"
 									placeholder={'Please enter the Tag.'}
 									label="Tag"
+									classNames={{ input: styles.inputField }}
 									onChange={(e) => {
 										setTagInput(e.target.value);
 									}}

src/pages/AccessManagement/RoleTR.tsx

@@ -286,6 +286,7 @@ const RoleTR: FC<RoleTRProps> = (props) => {
 						onChange={(value) => {
 							setSelectedRole(value ?? '');
 						}}
+						classNames={{ input: styles.selectInput, description: styles.selectDescription }}
 						nothingFoundMessage="No roles found"
 						value={selectedRole}
 						searchValue={roleSearchValue}

src/pages/AccessManagement/Roles.tsx

@@ -220,6 +220,7 @@ const Roles: FC = () => {
 						onChange={(value) => {
 							setInputDefaultRole(value ?? '');
 						}}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						value={inputDefaultRole}
 						nothingFoundMessage="No options"
 						searchable
@@ -259,6 +260,7 @@ const Roles: FC = () => {
 						onChange={(e) => {
 							setCreateRoleInput(e.target.value);
 						}}
+						classNames={{ input: classes.inputField }}
 						value={createRoleInput}
 						required
 					/>
@@ -270,6 +272,7 @@ const Roles: FC = () => {
 							setSelectedPrivilege(value ?? '');
 						}}
 						value={selectedPrivilege}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						nothingFoundMessage="No options"
 						required
 					/>
@@ -282,6 +285,7 @@ const Roles: FC = () => {
 								onChange={(value) => {
 									setSelectedStream(value ?? '');
 								}}
+								classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 								value={SelectedStream}
 								searchValue={streamSearchValue}
 								onSearchChange={(value) => setStreamSearchValue(value)}
@@ -300,6 +304,7 @@ const Roles: FC = () => {
 									onChange={(e) => {
 										setTagInput(e.target.value);
 									}}
+									classNames={{ input: classes.inputField }}
 								/>
 							) : (
 								''

src/pages/AccessManagement/Users.tsx

@@ -150,6 +150,7 @@ const Users: FC = () => {
 						onChange={(e) => {
 							setCreateUserInput(e.target.value);
 						}}
+						classNames={{ input: classes.inputField }}
 						value={createUserInput}
 						required
 					/>
@@ -165,6 +166,7 @@ const Users: FC = () => {
 						onDropdownClose={() => setRoleSearchValue(selectedRole)}
 						onDropdownOpen={() => setRoleSearchValue('')}
 						data={getRolesData?.data || []}
+						classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 						searchable
 						label="Select a role to assign"
 						required

src/pages/AccessManagement/styles/AccessManagement.module.css

@@ -145,3 +145,19 @@
 .tableHeader {
 	font-weight: 600;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}

src/pages/Dashboards/CreateDashboardModal.tsx

@@ -113,13 +113,13 @@ const CreateDashboardModal = () => {
 			<Stack style={{ padding: '0.5rem 0 1rem 0' }} gap={28}>
 				<Stack gap={10}>
 					<TextInput
-						classNames={{ label: classes.fieldTitle }}
+						classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 						label="Name"
 						key="name"
 						{...form.getInputProps('name')}
 					/>
 					<TextInput
-						classNames={{ label: classes.fieldTitle }}
+						classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 						label="Description (Optional)"
 						key="description"
 						{...form.getInputProps('description')}
@@ -129,6 +129,7 @@ const CreateDashboardModal = () => {
 							<Text style={{ fontSize: '0.7rem', fontWeight: 500 }}>Time Range</Text>
 							<Select
 								data={timeRangeOptions}
+								classNames={{ input: classes.selectInput, description: classes.selectDescription }}
 								{...form.getInputProps('time_filter')}
 								{...(form.values.time_filter === null ? { value: 'none' } : {})}
 								disabled={!editMode}

src/pages/Dashboards/CreateTileForm.tsx

@@ -384,7 +384,11 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 					<Select
 						data={allStreams}
 						onChange={onStreamSelect}
-						classNames={{ label: classes.fieldTitle }}
+						classNames={{
+							label: classes.fieldTitle,
+							input: classes.selectInput,
+							description: classes.selectDescription,
+						}}
 						key="stream"
 						placeholder="Select Stream"
 					/>
@@ -405,6 +409,7 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
 								name="ai_query"
 								id="ai_query"
 								value={aiQuery}
+								classNames={{ input: classes.inputField }}
 								onChange={(e) => setAiQuery(e.target.value)}
 								placeholder={
 									isValidStream
@@ -488,15 +493,15 @@ const Config = (props: { form: TileFormType; onChangeValue: (key: string, value:
 			<SectionHeader title="Tile Config" />
 			<Stack style={{ flexDirection: 'row', padding: '0 1rem' }}>
 				<TextInput
-					classNames={{ label: classes.fieldTitle }}
+					classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 					label="Name"
 					key="name"
 					{...form.getInputProps('name')}
 					style={{ width: '50%' }}
 				/>
 				<Select
 					data={allDashboards}
-					classNames={{ label: classes.fieldTitle }}
+					classNames={{ label: classes.fieldTitle, input: classes.selectInput, description: classes.selectDescription }}
 					label="Dashboard"
 					key="dashboardId"
 					{...form.getInputProps('dashboardId')}
@@ -506,7 +511,7 @@ const Config = (props: { form: TileFormType; onChangeValue: (key: string, value:
 			</Stack>
 			<Stack style={{ padding: '0 1rem' }}>
 				<TextInput
-					classNames={{ label: classes.fieldTitle }}
+					classNames={{ label: classes.fieldTitle, input: classes.inputField }}
 					label="Description (Optional)"
 					key="description"
 					{...form.getInputProps('description')}

src/pages/Dashboards/Dashboard.tsx

@@ -381,7 +381,7 @@ const DuplicateTileModal = () => {
 			title={<Text style={{ fontSize: '0.9rem', fontWeight: 600 }}>Duplicate Tile</Text>}>
 			<Stack>
 				<Stack gap={12}>
-					<TextInput value={inputValue} onChange={handleInputChange} />
+					<TextInput classNames={{ input: classes.inputField }} value={inputValue} onChange={handleInputChange} />
 				</Stack>
 				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
 					<Box>

src/pages/Dashboards/styles/CreateDashboardModal.module.css

@@ -7,3 +7,19 @@
 	font-weight: 500;
 	font-size: 0.7rem;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}

src/pages/Dashboards/styles/DashboardView.module.css

@@ -34,3 +34,7 @@
 	font-size: 0.8rem;
 	text-align: center;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}

src/pages/Dashboards/styles/Form.module.css

@@ -75,3 +75,19 @@
 	color: var(--mantine-color-gray-7);
 	cursor: pointer;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}

src/pages/Home/CreateStreamModal.tsx

@@ -129,8 +129,21 @@ const FieldRow = (props: {
 	const rmvBtnProps = _.isFunction(props.onRemove) ? { onClick: props.onRemove } : { color: 'gray' };
 	return (
 		<Stack style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-			<TextInput w="47%" withAsterisk placeholder="Field name" key="name" {...props.nameInputProps} />
-			<Select w="47%" placeholder="Select Datatype" data={datatypes} {...props.datatypeInputProps} />
+			<TextInput
+				classNames={{ input: styles.inputField }}
+				w="47%"
+				withAsterisk
+				placeholder="Field name"
+				key="name"
+				{...props.nameInputProps}
+			/>
+			<Select
+				classNames={{ input: styles.selectInput, description: styles.selectDescription }}
+				w="47%"
+				placeholder="Select Datatype"
+				data={datatypes}
+				{...props.datatypeInputProps}
+			/>
 			<Stack w="6%" style={{ alignItems: 'center', paddingTop: 4 }}>
 				<ActionIcon className={styles.deleteRulebtn} variant="light" {...rmvBtnProps}>
 					<CloseIcon />
@@ -176,7 +189,12 @@ const SchemaTypeField = (props: { inputProps: GetInputPropsReturnType }) => {
 				</Stack>
 				<Text className={styles.fieldDescription}>Choose dynamic or static schema</Text>
 			</Stack>
-			<Select w={200} data={[dynamicType, staticType]} {...props.inputProps} />
+			<Select
+				classNames={{ input: styles.selectInput, description: styles.selectDescription }}
+				w={200}
+				data={[dynamicType, staticType]}
+				{...props.inputProps}
+			/>
 		</Stack>
 	);
 };
@@ -563,7 +581,7 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => {
 		<Stack>
 			<TextInput
 				withAsterisk
-				classNames={{ label: styles.fieldTitle }}
+				classNames={{ label: styles.fieldTitle, input: styles.inputField }}
 				styles={{ label: { marginBottom: 8 } }}
 				label="Name"
 				placeholder="Name"

src/pages/Home/index.tsx

@@ -147,6 +147,7 @@ const Home: FC = () => {
 						key="search-stream"
 						value={searchTerm}
 						rightSection={shortcutKeyElement}
+						classNames={{ input: homeStyles.searchBar }}
 						rightSectionWidth={80}
 						onChange={(event) => {
 							setSearchTerm(event.target.value);

src/pages/Home/styles/CreateStreamModal.module.css

@@ -30,3 +30,19 @@
 	color: var(--mantine-color-gray-5);
 	cursor: pointer;
 }
+
+.inputField {
+	border-radius: rem(8px);
+}
+
+.selectDescription {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--mantine-color-gray-6);
+}
+
+.selectInput {
+	cursor: pointer;
+	border: 1px var(--mantine-color-gray-2) solid;
+	border-radius: rem(8px);
+}

src/pages/Home/styles/Home.module.css

@@ -37,3 +37,7 @@
 		color: black;
 	}
 }
+
+.searchBar {
+	border-radius: rem(8px);
+}

src/pages/Login/index.tsx

@@ -58,6 +58,7 @@ const Login: FC = () => {
 							)}
 							<TextInput
 								mt="sm"
+								classNames={{ input: loginStyles.inputField }}
 								className={formInput}
 								placeholder="J.Doe"
 								label="Username"