update fab style

packages/app/src/components/Fab.module.scss

@@ -1,4 +1,36 @@
+@use '~/styles/bootstrap/init' as bs;
+
 .grw-fab :global {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 3rem;
+  z-index: bs.$zindex-fixed;
+
+  transition: all 200ms linear;
+
+  .btn-create-page {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+
+    box-shadow: 2px 3px 6px #0000005d;
+    svg {
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  .btn-scroll-to-top {
+    width: 40px;
+    height: 40px;
+
+    opacity: 0.4;
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
   // workaround
   // https://stackoverflow.com/a/57667536
   .fadeInUp {

packages/app/src/styles/_layout.scss

@@ -71,38 +71,6 @@ body.not-found-page .grw-container-convertible {
   top: calc(100px + 4px + 20px);
 }
 
-.grw-fab {
-  position: fixed;
-  right: 1.5rem;
-  bottom: 3rem;
-  z-index: bs.$zindex-fixed;
-
-  transition: all 200ms linear;
-
-  .btn-create-page {
-    width: 60px;
-    height: 60px;
-    font-size: 24px;
-
-    box-shadow: 2px 3px 6px #0000005d;
-    svg {
-      width: 28px;
-      height: 28px;
-    }
-  }
-
-  .btn-scroll-to-top {
-    width: 40px;
-    height: 40px;
-
-    opacity: 0.4;
-    svg {
-      width: 18px;
-      height: 18px;
-    }
-  }
-}
-
 // printable style
 @media print {
   body {

packages/app/src/styles/theme/_apply-colors.scss

@@ -664,7 +664,9 @@ mark.rbt-highlight-text {
 
 .grw-fab {
   .btn-create-page {
-    fill: color-yiq($primary);
+    svg {
+      fill: color-yiq($primary);
+    }
   }
 
   .btn-scroll-to-top {

packages/preset-themes/src/styles/theme/_apply-colors.scss

@@ -655,7 +655,9 @@ mark.rbt-highlight-text {
 
 .grw-fab {
   .btn-create-page {
-    fill: color-yiq($primary);
+    svg {
+      fill: color-yiq($primary);
+    }
   }
 
   .btn-scroll-to-top {