Make refresh button spin counter clockwise (#1155)

apps/server/AliasVault.Client/tailwind.config.js

@@ -52,6 +52,15 @@ module.exports = {
             minWidth: {
                 'kanban': '28rem'
             },
+            animation: {
+                'spin-ccw': 'spin-ccw 1s linear infinite',
+            },
+            keyframes: {
+                'spin-ccw': {
+                    'from': { transform: 'rotate(0deg)' },
+                    'to': { transform: 'rotate(-360deg)' }
+                }
+            },
         },
     },
     plugins: [

apps/server/AliasVault.Client/wwwroot/css/tailwind.css

@@ -1171,6 +1171,20 @@ video {
   animation: spin 1s linear infinite;
 }
 
+@keyframes spin-ccw {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.animate-spin-ccw {
+  animation: spin-ccw 1s linear infinite;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }

apps/server/Shared/AliasVault.RazorComponents/Buttons/RefreshButton.razor

@@ -72,6 +72,6 @@
     /// <returns>A string containing the CSS classes for the icon.</returns>
     private string GetIconClasses()
     {
-        return $"w-4 h-4 {(IsRefreshing ? "animate-spin" : "")}";
+        return $"w-4 h-4 {(IsRefreshing ? "animate-spin-ccw" : "")}";
     }
 }