Update sizes for Database route components of frontend

EXG1O · Apr 23, 2024 · 65123f5 · 65123f5
1 parent 7fa7a41
commit 65123f5
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/...c/routes/AuthRequired/TelegramBotMenu/Database/components/RecordList/components/Block.tsx b/...c/routes/AuthRequired/TelegramBotMenu/Database/components/RecordList/components/Block.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 export type BlockProps = HTMLAttributes<HTMLDivElement>;
 
 function Block({ className, ...props }: BlockProps): ReactElement<BlockProps> {
-	return <div {...props} className={classNames('border rounded', className)} />;
+	return <div {...props} className={classNames('border rounded-1', className)} />;
 }
 
 export default memo(Block);
diff --git a/...Database/components/RecordList/components/RecordDisplay/components/ConfirmButtonGroup.tsx b/...Database/components/RecordList/components/RecordDisplay/components/ConfirmButtonGroup.tsx
@@ -15,14 +15,14 @@ function ConfirmButtonGroup({ onConfirm, onCancel, ...props }: ConfirmButtonGrou
 				as='i'
 				variant='success'
 				className='d-flex bi bi-check p-0'
-				style={{ fontSize: '26px' }}
+				style={{ fontSize: '25px' }}
 				onClick={onConfirm}
 			/>
 			<Button
 				as='i'
 				variant='danger'
 				className='d-flex bi bi-x p-0'
-				style={{ fontSize: '26px', WebkitTextStroke: '0.4px' }}
+				style={{ fontSize: '25px', WebkitTextStroke: '0.4px' }}
 				onClick={onCancel}
 			/>
 		</ButtonGroup>

diff --git a/...tMenu/Database/components/RecordList/components/RecordDisplay/components/DeleteButton.tsx b/...tMenu/Database/components/RecordList/components/RecordDisplay/components/DeleteButton.tsx
@@ -71,7 +71,7 @@ function DeleteButton({ record, className, style, onClick, ...props }: DeleteBut
 				size='sm'
 				variant='danger'
 				className={classNames('d-flex justify-content-center align-items-center bi bi-trash p-0', className)}
-				style={{ width: '28px', height: '28px', fontSize: '19px', ...style }}
+				style={{ width: '25px', height: '25px', fontSize: '18px', ...style }}
 				onClick={handleClick}
 			/>
 		</>

diff --git a/...equired/TelegramBotMenu/Database/components/RecordList/components/RecordDisplay/index.tsx b/...equired/TelegramBotMenu/Database/components/RecordList/components/RecordDisplay/index.tsx
@@ -92,6 +92,7 @@ function RecordDisplay({ record, className, ...props }: RecordDisplayProps): Rea
 		!loading ? (
 			<ListGroupItem {...props} className={classNames(className, 'd-flex gap-3')}>
 				<MonacoEditor
+					size='sm'
 					value={value}
 					language='json'
 					options={options}

diff --git a/frontend/src/routes/AuthRequired/TelegramBotMenu/Database/components/RecordList/index.tsx b/frontend/src/routes/AuthRequired/TelegramBotMenu/Database/components/RecordList/index.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement, memo } from 'react';
+import classNames from 'classnames';
 
 import ListGroup, { ListGroupProps } from 'react-bootstrap/ListGroup';
 
@@ -13,13 +14,13 @@ export interface RecordListProps extends Omit<ListGroupProps, 'children'> {
 	loading: boolean;
 }
 
-function RecordList({ loading, ...props }: RecordListProps): ReactElement<RecordListProps> {
+function RecordList({ loading, className, ...props }: RecordListProps): ReactElement<RecordListProps> {
 	const { records, filter } = useRecords();
 
 	return (
 		!loading ? (
 			records.length ? (
-				<ListGroup {...props}>
+				<ListGroup {...props} className={classNames(className, 'rounded-1')}>
 					{records.map(record => (
 						<RecordDisplay key={record.id} record={record} />
 					))}