fix: Fixed input and dropdown styles (#397)

Author: praveen5959

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}