From f3a7c715eae70882dcd6c2fa6ffcd784a5d98b74 Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Tue, 23 Nov 2021 14:27:12 +0300
Subject: [PATCH] feat(core-app): CB-1459 add new icon for the big spinner

---
 .../core-app/public/icons/spinner-primary.svg   | 17 +++++++++--------
 .../core-app/public/icons/spinner-small.svg     |  9 +++++++++
 .../packages/core-app/public/icons/spinner.svg  | 17 +++++++++--------
 .../packages/core-blocks/src/Loader/Loader.tsx  |  9 ++++++++-
 4 files changed, 35 insertions(+), 17 deletions(-)
 create mode 100644 webapp/packages/core-app/public/icons/spinner-small.svg

diff --git a/webapp/packages/core-app/public/icons/spinner-primary.svg b/webapp/packages/core-app/public/icons/spinner-primary.svg
index d0f6b78f45..e407692eb8 100644
--- a/webapp/packages/core-app/public/icons/spinner-primary.svg
+++ b/webapp/packages/core-app/public/icons/spinner-primary.svg
@@ -1,9 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 43 42">
-    <defs>
-        <linearGradient id="prefix__a" x1="59.847%" x2="43.09%" y1="106.152%" y2="60.499%">
-            <stop offset="0%" stop-color="#2a7cb4" stop-opacity="0"/>
-            <stop offset="100%" stop-color="#2a7cb4"/>
-        </linearGradient>
-    </defs>
-    <path fill="none" fill-rule="evenodd" stroke="url(#prefix__a)" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M808.5 476c-9.94 0-18-8.06-18-18s8.06-18 18-18 18 8.06 18 18" transform="translate(-787 -437)"/>
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M32 5C17.0883 5 5 17.0883 5 32C5 46.9117 17.0883 59 32 59C46.9117 59 59 46.9117 59 32C59 30.8954 59.8954 30 61 30C62.1046 30 63 30.8954 63 32C63 49.1208 49.1208 63 32 63C14.8792 63 1 49.1208 1 32C1 14.8792 14.8792 1 32 1C33.1046 1 34 1.89543 34 3C34 4.10457 33.1046 5 32 5Z" fill="url(#paint0_radial_257_4)"/>
+  <defs>
+    <radialGradient id="paint0_radial_257_4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(63 32) rotate(180) scale(53.5 52.7883)">
+      <stop offset="0.139672" stop-color="#417BAF" stop-opacity="0"/>
+      <stop offset="0.559863" stop-color="#417BAF" stop-opacity="0.3"/>
+      <stop offset="0.869303" stop-color="#417BAF"/>
+    </radialGradient>
+  </defs>
 </svg>
diff --git a/webapp/packages/core-app/public/icons/spinner-small.svg b/webapp/packages/core-app/public/icons/spinner-small.svg
new file mode 100644
index 0000000000..d0f6b78f45
--- /dev/null
+++ b/webapp/packages/core-app/public/icons/spinner-small.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 43 42">
+    <defs>
+        <linearGradient id="prefix__a" x1="59.847%" x2="43.09%" y1="106.152%" y2="60.499%">
+            <stop offset="0%" stop-color="#2a7cb4" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#2a7cb4"/>
+        </linearGradient>
+    </defs>
+    <path fill="none" fill-rule="evenodd" stroke="url(#prefix__a)" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M808.5 476c-9.94 0-18-8.06-18-18s8.06-18 18-18 18 8.06 18 18" transform="translate(-787 -437)"/>
+</svg>
diff --git a/webapp/packages/core-app/public/icons/spinner.svg b/webapp/packages/core-app/public/icons/spinner.svg
index 10f26d8719..d238e505be 100644
--- a/webapp/packages/core-app/public/icons/spinner.svg
+++ b/webapp/packages/core-app/public/icons/spinner.svg
@@ -1,9 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 43 42">
-    <defs>
-        <linearGradient id="prefix__a" x1="59.847%" x2="43.09%" y1="106.152%" y2="60.499%">
-            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
-            <stop offset="100%" stop-color="#FFF"/>
-        </linearGradient>
-    </defs>
-    <path fill="none" fill-rule="evenodd" stroke="url(#prefix__a)" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M808.5 476c-9.94 0-18-8.06-18-18s8.06-18 18-18 18 8.06 18 18" transform="translate(-787 -437)"/>
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M32 5C17.0883 5 5 17.0883 5 32C5 46.9117 17.0883 59 32 59C46.9117 59 59 46.9117 59 32C59 30.8954 59.8954 30 61 30C62.1046 30 63 30.8954 63 32C63 49.1208 49.1208 63 32 63C14.8792 63 1 49.1208 1 32C1 14.8792 14.8792 1 32 1C33.1046 1 34 1.89543 34 3C34 4.10457 33.1046 5 32 5Z" fill="url(#paint0_radial_257_4)"/>
+  <defs>
+    <radialGradient id="paint0_radial_257_4" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(63 32) rotate(180) scale(53.5 52.7883)">
+      <stop offset="0.139672" stop-color="#FFF" stop-opacity="0"/>
+      <stop offset="0.559863" stop-color="#FFF" stop-opacity="0.3"/>
+      <stop offset="0.869303" stop-color="#FFF"/>
+    </radialGradient>
+  </defs>
 </svg>
diff --git a/webapp/packages/core-blocks/src/Loader/Loader.tsx b/webapp/packages/core-blocks/src/Loader/Loader.tsx
index ebb5185437..6280a22148 100644
--- a/webapp/packages/core-blocks/src/Loader/Loader.tsx
+++ b/webapp/packages/core-blocks/src/Loader/Loader.tsx
@@ -60,6 +60,7 @@ interface Props {
 const spinnerType = {
   primary: '/icons/spinner-primary.svg',
   secondary: '/icons/spinner.svg',
+  small: '/icons/spinner-small.svg',
 };
 
 export const Loader = observer<Props>(function Loader({
@@ -122,7 +123,7 @@ export const Loader = observer<Props>(function Loader({
 
   style = useStyles(loaderStyles, style, overlay && overlayStyles);
   const [isVisible, setVisible] = useState(loading);
-  const spinnerURL = (secondary || overlay) ? spinnerType.secondary : spinnerType.primary;
+
   const refLoaderDisplayed = { state: false };
 
   useEffect(() => {
@@ -186,6 +187,12 @@ export const Loader = observer<Props>(function Loader({
 
   refLoaderDisplayed.state = true;
 
+  let spinnerURL = (secondary || overlay) ? spinnerType.secondary : spinnerType.primary;
+
+  if (small) {
+    spinnerURL = spinnerType.small;
+  }
+
   return styled(style)(
     <LoaderContext.Provider value={contextState}>
       {overlay && children}