refactor: Sender style adjust (#151)

* chore: init * chore: fix border style * chore: loading status * test: update snapshot * chore: fix lint * chore: fix lint * test: fix test case
ant-design · Oct 11, 2024 · b1d6da4 · b1d6da4
1 parent a7d240e
commit b1d6da4
Show file tree

Hide file tree

Showing 20 changed files with 1,296 additions and 889 deletions.
diff --git a/components/sender/StopLoading.tsx b/components/sender/StopLoading.tsx
@@ -1,37 +1,47 @@
 import React, { memo } from 'react';
-import useToken from '../theme/useToken';
 
-const StopLoadingIcon = memo(() => {
-  const { token } = useToken();
+const StopLoadingIcon = memo((props: { className?: string }) => {
+  const { className } = props;
+
   return (
     <svg
       color="currentColor"
-      height={16}
-      viewBox="0 0 1024 1024"
-      width={16}
+      viewBox="0 0 1000 1000"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={className}
     >
       <title>Stop Loading Icon</title>
-      <g fill="none">
-        <circle cx="512" cy="512" fill="none" r="426" stroke={token.colorBgBase} strokeWidth="72" />
-        <rect fill="currentColor" height="252" rx="24" ry="24" width="252" x="386" y="386" />
-        <path
-          d="M938.667 512C938.667 276.359 747.64 85.333 512 85.333"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeWidth="73"
-        >
-          <animateTransform
-            attributeName="transform"
-            dur="1s"
-            from="0 512 512"
-            repeatCount="indefinite"
-            to="360 512 512"
-            type="rotate"
-          />
-        </path>
-      </g>
+      <rect fill="currentColor" height="250" rx="24" ry="24" width="250" x="375" y="375" />
+
+      <circle
+        cx="500"
+        cy="500"
+        fill="none"
+        r="450"
+        stroke="currentColor"
+        strokeWidth="100"
+        opacity="0.45"
+      />
+
+      <circle
+        cx="500"
+        cy="500"
+        fill="none"
+        r="450"
+        stroke="currentColor"
+        strokeWidth="100"
+        strokeDasharray="600 9999999"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          from="0 500 500"
+          repeatCount="indefinite"
+          to="360 500 500"
+          type="rotate"
+        />
+      </circle>
     </svg>
   );
 });