4 files changed, 52 insertions, 18 deletions
diff --git a/src/components/shared/Fab.module.css b/src/components/shared/Fab.module.css
new file mode 100644
index 0000000..61aaecb
--- /dev/null
+++ b/src/components/shared/Fab.module.css
@@ -0,0 +1,33 @@
+.spining {
+  position: relative;
+  border-radius: 50%;
+  background: linear-gradient(60deg, #e66465, #9198e5);
+
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spining:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spining_keyframes 1s linear infinite;
+}
+
+@keyframes spining_keyframes {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/shared/Fab.ts b/src/components/shared/Fab.ts
deleted file mode 100644
index 4e2e800..0000000
--- a/src/components/shared/Fab.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import './rtf.css';
-
-import { Action, Fab } from 'react-tiny-fab';
-
-export const position = {
-  right: 10,
-  bottom: 10,
-};
-
-export { Fab, Action };
diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx
new file mode 100644
index 0000000..68750ef
--- /dev/null
+++ b/src/components/shared/Fab.tsx
@@ -0,0 +1,17 @@
+import './rtf.css';
+
+import * as React from 'react';
+import { Action, Fab } from 'react-tiny-fab/dist';
+
+import s from './Fab.module.css';
+
+export function IsFetching({ children }: { children: React.ReactNode }) {
+  return <span className={s.spining}>{children}</span>;
+}
+
+export const position = {
+  right: 10,
+  bottom: 10,
+};
+
+export { Fab, Action };
diff --git a/src/components/shared/rtf.css b/src/components/shared/rtf.css
index 1e97412..da439ee 100644
--- a/src/components/shared/rtf.css
+++ b/src/components/shared/rtf.css
@@ -11,13 +11,7 @@
   padding-left: 0;
   list-style: none;
 }
-.rtf.open .rtf--mb > * {
-  /* transform-origin: center center; */
-  /* transform: rotate(360deg); */
-  transition: ease-in-out transform 0.2s;
-}
 .rtf.open .rtf--mb {
-  background: rgba(56, 124, 236, 0.92);
   box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
     0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
@@ -114,10 +108,10 @@
 }
 
 .rtf--mb {
-  height: 48px;
   width: 48px;
+  height: 48px;
+  background: var(--btn-bg);
   z-index: 9999;
-  background: #387cec;
   display: inline-flex;
   justify-content: center;
   align-items: center;