cp refactor

lifeparticle · Sep 11, 2023 · 9ae3c74 · 9ae3c74
1 parent 1edd58c
commit 9ae3c74
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/ui/src/pages/Colors/ColorPicker/components/DisplayColors/index.tsx b/ui/src/pages/Colors/ColorPicker/components/DisplayColors/index.tsx
@@ -18,7 +18,17 @@ const DisplayColors: React.FC<DisplayColorsProps> = ({
 	title,
 }) => {
 	return (
-		<Card bordered={false} title={title}>
+		<Card
+			bordered={false}
+			title={title}
+			extra={
+				<Clipboard
+					text={generateClipboardText(displayType, colors)}
+					label="Copy All"
+					clipboardComponent={ClipboardButton}
+				/>
+			}
+		>
 			<Space direction="vertical" className={style.dp}>
 				{EXTENDED_DATA_OPTIONS.map(({ value, label }) => (
 					<DisplayColor
@@ -30,11 +40,6 @@ const DisplayColors: React.FC<DisplayColorsProps> = ({
 						format={format}
 					/>
 				))}
-				<Clipboard
-					text={generateClipboardText(displayType, colors)}
-					label="Copy All"
-					clipboardComponent={ClipboardButton}
-				/>
 			</Space>
 		</Card>
 	);

diff --git a/ui/src/pages/Colors/ColorPicker/index.tsx b/ui/src/pages/Colors/ColorPicker/index.tsx
@@ -42,7 +42,7 @@ const ColorPicker: React.FC = () => {
 		<Form layout="vertical">
 			<div className={style.cp}>
 				<Card bordered={false}>
-					<Space size="large" direction="vertical" wrap>
+					<Space direction="vertical" wrap>
 						<CopyInput>
 							<ResponsiveInputWithLabel
 								label="Color code"
@@ -55,12 +55,12 @@ const ColorPicker: React.FC = () => {
 								clipboardComponent={ClipboardButton}
 							/>
 						</CopyInput>
-						<Space size="small" direction="horizontal" wrap>
-							<ColorFormatTags
-								currentFormat={format}
-								onSelect={setFormat}
-							/>
-						</Space>
+
+						<ColorFormatTags
+							currentFormat={format}
+							onSelect={setFormat}
+						/>
+
 						<CP
 							format={format}
 							value={color}