From c058270a791a8347d14a368ae7e863efef6c5061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 22 Mar 2022 13:47:08 +0100
Subject: [PATCH] feat(dashboard-v2): make circle around checkmark icon
 optional

---
 .../{CircledCheckmarkIcon.js => CheckmarkIcon.js}     | 11 +++++++++--
 packages/dashboard-v2/src/components/Icons/index.js   |  2 +-
 .../src/components/Uploader/UploaderItemIcon.js       |  4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)
 rename packages/dashboard-v2/src/components/Icons/icons/{CircledCheckmarkIcon.js => CheckmarkIcon.js} (54%)

diff --git a/packages/dashboard-v2/src/components/Icons/icons/CircledCheckmarkIcon.js b/packages/dashboard-v2/src/components/Icons/icons/CheckmarkIcon.js
similarity index 54%
rename from packages/dashboard-v2/src/components/Icons/icons/CircledCheckmarkIcon.js
rename to packages/dashboard-v2/src/components/Icons/icons/CheckmarkIcon.js
index 5f0cfc31..b42915de 100644
--- a/packages/dashboard-v2/src/components/Icons/icons/CircledCheckmarkIcon.js
+++ b/packages/dashboard-v2/src/components/Icons/icons/CheckmarkIcon.js
@@ -1,6 +1,8 @@
+import PropTypes from "prop-types";
+
 import { withIconProps } from "../withIconProps";
 
-export const CircledCheckmarkIcon = withIconProps(({ size, ...props }) => (
+export const CheckmarkIcon = withIconProps(({ size, circled, ...props }) => (
   <svg
     width={size}
     height={size}
@@ -9,10 +11,15 @@ export const CircledCheckmarkIcon = withIconProps(({ size, ...props }) => (
     shapeRendering="geometricPrecision"
     {...props}
   >
-    <circle cx="16" cy="16" r="15" fill="transparent" stroke="currentColor" strokeWidth="2" />
+    {circled && <circle cx="16" cy="16" r="15" fill="transparent" stroke="currentColor" strokeWidth="2" />}
     <polygon
       fill="currentColor"
       points="22.45 11.19 23.86 12.61 14.44 22.03 9.69 17.28 11.1 15.86 14.44 19.2 22.45 11.19"
     />
   </svg>
 ));
+
+CheckmarkIcon.propTypes = {
+  ...CheckmarkIcon.propTypes,
+  circled: PropTypes.bool,
+};
diff --git a/packages/dashboard-v2/src/components/Icons/index.js b/packages/dashboard-v2/src/components/Icons/index.js
index beaf1789..e2af85e9 100644
--- a/packages/dashboard-v2/src/components/Icons/index.js
+++ b/packages/dashboard-v2/src/components/Icons/index.js
@@ -4,7 +4,7 @@ export * from "./icons/LockClosedIcon";
 export * from "./icons/SkynetLogoIcon";
 export * from "./icons/ArrowRightIcon";
 export * from "./icons/InfoIcon";
-export * from "./icons/CircledCheckmarkIcon";
+export * from "./icons/CheckmarkIcon";
 export * from "./icons/CircledErrorIcon";
 export * from "./icons/CircledProgressIcon";
 export * from "./icons/CircledArrowUpIcon";
diff --git a/packages/dashboard-v2/src/components/Uploader/UploaderItemIcon.js b/packages/dashboard-v2/src/components/Uploader/UploaderItemIcon.js
index c0d6a766..ab681b61 100644
--- a/packages/dashboard-v2/src/components/Uploader/UploaderItemIcon.js
+++ b/packages/dashboard-v2/src/components/Uploader/UploaderItemIcon.js
@@ -1,6 +1,6 @@
 import cn from "classnames";
 
-import { CircledCheckmarkIcon, CircledErrorIcon, CircledProgressIcon, CircledArrowUpIcon } from "../Icons";
+import { CheckmarkIcon, CircledErrorIcon, CircledProgressIcon, CircledArrowUpIcon } from "../Icons";
 
 export default function UploaderItemIcon({ status }) {
   switch (status) {
@@ -11,7 +11,7 @@ export default function UploaderItemIcon({ status }) {
     case "processing":
       return <CircledProgressIcon className="animate-[spin_3s_linear_infinite]" />;
     case "complete":
-      return <CircledCheckmarkIcon />;
+      return <CheckmarkIcon circled />;
     case "error":
       return <CircledErrorIcon className="text-error" />;
     default: