6 files changed, 47 insertions, 19 deletions
diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx
index 832306e..8e72432 100644
--- a/src/components/shared/Fab.tsx
+++ b/src/components/shared/Fab.tsx
@@ -28,8 +28,7 @@ const AB: React.FC<ABProps> = ({ children, ...p }) => (
   </button>
 );
 
-interface MBProps
-  extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'tabIndex'> {
+interface MBProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'tabIndex'> {
   tabIndex?: number;
 }
 
@@ -77,10 +76,7 @@ const Fab: React.FC<FabProps> = ({
     return event === 'click' ? (isOpen ? close() : open()) : null;
   };
 
-  const actionOnClick = (
-    e: React.FormEvent,
-    userFunc: (e: React.FormEvent) => void
-  ) => {
+  const actionOnClick = (e: React.FormEvent, userFunc: (e: React.FormEvent) => void) => {
     e.persist();
     setIsOpen(false);
     setTimeout(() => {
@@ -141,9 +137,7 @@ const Fab: React.FC<FabProps> = ({
         </MB>
         {text && (
           <span
-            className={`${'right' in style ? 'right' : ''} ${
-              alwaysShowTitle ? 'always-show' : ''
-            }`}
+            className={`${'right' in style ? 'right' : ''} ${alwaysShowTitle ? 'always-show' : ''}`}
             aria-hidden={ariaHidden}
           >
             {text}
diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx
index 7e3ceae..d291ece 100644
--- a/src/components/shared/RotateIcon.tsx
+++ b/src/components/shared/RotateIcon.tsx
@@ -4,13 +4,12 @@ import { RotateCw } from 'react-feather';
 
 import s from './RotateIcon.module.scss';
 
-export function RotateIcon({ isRotating }: { isRotating: boolean }) {
-  const cls = cx(s.rotate, {
-    [s.isRotating]: isRotating,
-  });
+export function RotateIcon(props: { isRotating: boolean; size?: number }) {
+  const size = props.size || 16;
+  const cls = cx(s.rotate, { [s.isRotating]: props.isRotating });
   return (
     <span className={cls}>
-      <RotateCw width={16} />
+      <RotateCw size={size} />
     </span>
   );
 }
diff --git a/src/components/shared/TextFitler.tsx b/src/components/shared/TextFitler.tsx
index e4a4a88..7af61ac 100644
--- a/src/components/shared/TextFitler.tsx
+++ b/src/components/shared/TextFitler.tsx
@@ -4,10 +4,7 @@ import { useTextInut } from 'src/hooks/useTextInput';
 
 import s from './TextFitler.module.scss';
 
-export function TextFilter(props: {
-  textAtom: RecoilState<string>;
-  placeholder?: string;
-}) {
+export function TextFilter(props: { textAtom: RecoilState<string>; placeholder?: string }) {
   const [onChange, text] = useTextInut(props.textAtom);
   return (
     <input
diff --git a/src/components/shared/ThemeSwitcher.module.scss b/src/components/shared/ThemeSwitcher.module.scss
index c5de126..951376a 100644
--- a/src/components/shared/ThemeSwitcher.module.scss
+++ b/src/components/shared/ThemeSwitcher.module.scss
@@ -29,7 +29,8 @@
   height: var(--sz);
   select {
     cursor: pointer;
-    padding-left: var(--sz);
+    padding-left: calc(var(--sz) - 2px);
+    font-size: 0;
     width: var(--sz);
     height: var(--sz);
     appearance: none;
diff --git a/src/components/shared/ZapAnimated.module.scss b/src/components/shared/ZapAnimated.module.scss
new file mode 100644
index 0000000..e4cb37b
--- /dev/null
+++ b/src/components/shared/ZapAnimated.module.scss
@@ -0,0 +1,12 @@
+.animate {
+  --saturation: 70%;
+  stroke: hsl(46deg var(--saturation) 45%);
+  animation: zap-pulse 0.7s 0s ease-in-out none normal infinite;
+}
+
+// prettier-ignore
+@keyframes zap-pulse {
+  0% { stroke: hsl(46deg var(--saturation) 45%); }
+  50% { stroke: hsl(46deg var(--saturation) 95%); }
+  100% { stroke: hsl(46deg var(--saturation) 45%); }
+}
diff --git a/src/components/shared/ZapAnimated.tsx b/src/components/shared/ZapAnimated.tsx
new file mode 100644
index 0000000..e3b153a
--- /dev/null
+++ b/src/components/shared/ZapAnimated.tsx
@@ -0,0 +1,25 @@
+import cx from 'clsx';
+import * as React from 'react';
+
+import s from './ZapAnimated.module.scss';
+
+export function ZapAnimated(props: { size?: number; animate?: boolean }) {
+  const size = props.size || 24;
+  const cls = cx({ [s.animate]: props.animate });
+  return (
+    <svg
+      className={cls}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+    </svg>
+  );
+}