Style updates/design changes

src/pages/settings/components/Theming/Themes/MiniGroupItem.tsx

@@ -0,0 +1,46 @@
+import { Box, Group, Stack } from '@mantine/core';
+import { boxClasses } from 'styles';
+import type { Theme } from 'types';
+
+export function MiniGroupItem({ cardTheme }: { cardTheme: Theme }) {
+	return (
+		<Box className={boxClasses.bookmarkItemExampleText}>
+			<Group w={'100%'} justify='space-between'>
+				<Stack gap={4} align='start'>
+					<Box
+						style={{
+							height: '2px',
+							width: '25px',
+							backgroundColor: cardTheme.accentColor,
+							borderRadius: '4px',
+						}}
+					/>
+					<Box
+						style={{
+							height: '2px',
+							width: '33px',
+							backgroundColor: cardTheme.primaryColor,
+							borderRadius: '4px',
+						}}
+					/>
+					<Box
+						style={{
+							height: '2px',
+							width: '38px',
+							backgroundColor: cardTheme.primaryColor,
+							borderRadius: '4px',
+						}}
+					/>
+					<Box
+						style={{
+							height: '2px',
+							width: '28px',
+							backgroundColor: cardTheme.primaryColor,
+							borderRadius: '4px',
+						}}
+					/>
+				</Stack>
+			</Group>
+		</Box>
+	);
+}