From d8ca37a38ef404860add8f4d1b11b98299fdfaa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?=
 <matthaeus.noessing@aboutbits.it>
Date: Tue, 3 Sep 2024 16:20:26 +0200
Subject: [PATCH] add icon from lib for spinner

---
 src/components/files/FileListItem.tsx         |  4 +++-
 src/components/loading/IconSpinner.tsx        | 18 ++++-----------
 .../react-hook-form/FormSubmitFeedback.tsx    |  2 +-
 tailwind-preset.ts                            | 23 -------------------
 4 files changed, 8 insertions(+), 39 deletions(-)

diff --git a/src/components/files/FileListItem.tsx b/src/components/files/FileListItem.tsx
index 8b6aaf1c..c8f8bed8 100644
--- a/src/components/files/FileListItem.tsx
+++ b/src/components/files/FileListItem.tsx
@@ -68,7 +68,9 @@ export function FileListItem<TRemoteFile>({
               files.icon.container.default,
             )}
           >
-            <IconSpinner className={files.icon.size} />
+            <IconSpinner
+              className={classNames(files.icon.size, files.icon.default)}
+            />
           </div>
         ) : (
           <div
diff --git a/src/components/loading/IconSpinner.tsx b/src/components/loading/IconSpinner.tsx
index aa836e75..b3dfb510 100644
--- a/src/components/loading/IconSpinner.tsx
+++ b/src/components/loading/IconSpinner.tsx
@@ -1,3 +1,4 @@
+import IconProgressActivityRounded from '@aboutbits/react-material-icons/dist/IconProgressActivityRounded'
 import classNames from 'classnames'
 import { useTheme } from '../../framework'
 import { IconProps } from '../types'
@@ -5,20 +6,9 @@ import { IconProps } from '../types'
 export function IconSpinner({ className, ...props }: IconProps) {
   const { loading } = useTheme()
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="none"
-      className={classNames(
-        loading.iconSpinner.defaultColor,
-        loading.iconSpinner.base,
-        className,
-      )}
+    <IconProgressActivityRounded
+      className={classNames(loading.iconSpinner.base, className)}
       {...props}
-    >
-      <path d="M12.497 21.5C11.1965 21.5 9.96875 21.2508 8.81375 20.7525C7.65892 20.2542 6.65042 19.5739 5.78825 18.7118C4.92608 17.8496 4.24583 16.8411 3.7475 15.6863C3.24917 14.5312 3 13.3035 3 12.003C3 10.6867 3.24967 9.45358 3.749 8.30375C4.24833 7.15375 4.92817 6.14867 5.7885 5.2885C6.64867 4.42817 7.65733 3.74833 8.8145 3.249C9.97167 2.74967 11.2002 2.5 12.5 2.5C12.7125 2.5 12.8906 2.57192 13.0343 2.71575C13.1781 2.85958 13.25 3.03775 13.25 3.25025C13.25 3.46292 13.1781 3.641 13.0343 3.7845C12.8906 3.92817 12.7125 4 12.5 4C10.2833 4 8.39583 4.77917 6.8375 6.3375C5.27917 7.89583 4.5 9.78333 4.5 12C4.5 14.2167 5.27917 16.1042 6.8375 17.6625C8.39583 19.2208 10.2833 20 12.5 20C14.7167 20 16.6042 19.2208 18.1625 17.6625C19.7208 16.1042 20.5 14.2167 20.5 12C20.5 11.7872 20.5719 11.609 20.7157 11.4655C20.8596 11.3218 21.0378 11.25 21.2502 11.25C21.4629 11.25 21.641 11.3219 21.7845 11.4658C21.9282 11.6094 22 11.7875 22 12C22 13.2998 21.7503 14.5283 21.251 15.6855C20.7517 16.8427 20.0718 17.8513 19.2115 18.7115C18.3513 19.5718 17.3462 20.2517 16.1962 20.751C15.0464 21.2503 13.8133 21.5 12.497 21.5Z" />
-    </svg>
+    />
   )
 }
diff --git a/src/components/react-hook-form/FormSubmitFeedback.tsx b/src/components/react-hook-form/FormSubmitFeedback.tsx
index 4c19dde0..53bb9f49 100644
--- a/src/components/react-hook-form/FormSubmitFeedback.tsx
+++ b/src/components/react-hook-form/FormSubmitFeedback.tsx
@@ -1,4 +1,4 @@
-import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircleRounded'
+import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircleRoundedFilled'
 import classNames from 'classnames'
 import { ComponentType, ReactElement, ReactNode } from 'react'
 import { useInternationalization, useTheme } from '../../framework'
diff --git a/tailwind-preset.ts b/tailwind-preset.ts
index 7fc724a2..03f0266a 100644
--- a/tailwind-preset.ts
+++ b/tailwind-preset.ts
@@ -102,29 +102,6 @@ export default {
       lineHeight: {
         12: '3rem',
       },
-      keyframes: {
-        spinner: {
-          '0%': {
-            strokeDasharray: '0 100',
-            strokeDashoffset: '25',
-          },
-          '50%': {
-            strokeDasharray: `100 0`,
-            strokeDashoffset: '25',
-          },
-          '50.1%': {
-            strokeDasharray: '100 0',
-            strokeDashoffset: '125',
-          },
-          '100%': {
-            strokeDasharray: '0 100',
-            strokeDashoffset: '25',
-          },
-        },
-      },
-      animation: {
-        spinner: 'spinner 2s cubic-bezier(0.88, 0, 0.58, 1) infinite',
-      },
     },
   },
 } satisfies Config