refactor: Sender style adjust

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>
   );
 });