From 2577416edb8d2bb2c96a01e2af76bf0fcea59247 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Fri, 1 Mar 2024 18:41:26 +0500
Subject: [PATCH] web: fix sync icon spin direction

---
 apps/web/src/components/icons/index.tsx      | 11 +++++------
 apps/web/src/components/status-bar/index.tsx |  7 ++++++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/icons/index.tsx b/apps/web/src/components/icons/index.tsx
index 8b024d5e0..0de4fc06e 100644
--- a/apps/web/src/components/icons/index.tsx
+++ b/apps/web/src/components/icons/index.tsx
@@ -214,7 +214,6 @@ import {
 import { useTheme } from "@emotion/react";
 import { Theme } from "@notesnook/theme";
 import { Flex, FlexProps } from "@theme-ui/components";
-import { MotionProps } from "framer-motion";
 import { isThemeColor, SchemeColors } from "@notesnook/theme";
 
 type MDIIconWrapperProps = {
@@ -223,13 +222,15 @@ type MDIIconWrapperProps = {
   size?: keyof Theme["iconSizes"] | number;
   color?: SchemeColors;
   rotate?: boolean;
+  rotateDirection?: "clockwise" | "counterclockwise";
 };
 function _MDIIconWrapper({
   title,
   path,
   size = 24,
   color = "icon",
-  rotate
+  rotate,
+  rotateDirection
 }: MDIIconWrapperProps) {
   const theme = useTheme() as Theme;
 
@@ -253,7 +254,7 @@ function _MDIIconWrapper({
         stroke: themedColor
       }}
       color={themedColor}
-      spin={rotate}
+      spin={rotate ? (rotateDirection === "clockwise" ? 2 : -2) : false}
     />
   );
 }
@@ -265,9 +266,7 @@ const MDIIconWrapper = memo(
     prev.title === next.title
 );
 
-export type IconProps = FlexProps &
-  MotionProps &
-  Omit<MDIIconWrapperProps, "path">;
+export type IconProps = FlexProps & Omit<MDIIconWrapperProps, "path">;
 
 export type Icon = {
   (props: IconProps): JSX.Element;
diff --git a/apps/web/src/components/status-bar/index.tsx b/apps/web/src/components/status-bar/index.tsx
index a029bb10d..77be318c4 100644
--- a/apps/web/src/components/status-bar/index.tsx
+++ b/apps/web/src/components/status-bar/index.tsx
@@ -230,7 +230,12 @@ function SyncStatus() {
       }
       data-test-id={`sync-status-${status.key}`}
     >
-      <status.icon size={12} rotate={status.loading} color={status.iconColor} />
+      <status.icon
+        size={12}
+        rotate={status.loading}
+        rotateDirection="counterclockwise"
+        color={status.iconColor}
+      />
     </Button>
   );
 }