Responded to feedback.

- Changed the position adjustment method of the new page icon.
- Move icon color designation to another file.

src/client/js/components/EditNewPageIcon.jsx

@@ -5,7 +5,7 @@ const EditNewPageIcon = () => (
     xmlns="http://www.w3.org/2000/svg"
     width="27"
     height="27"
-    viewBox="0 0 27 27"
+    viewBox="0 0 27 30"
   >
     <path
       d="M22.81,8.2a4.2,4.2,0,0,0,1.36-2.95,4,4,0,0,0-1.43-2.81,4.53,4.53,0,0,0-1.28-.89,3.26,3.26,0,

src/client/js/components/Fab.jsx

@@ -48,9 +48,7 @@ const Fab = (props) => {
           className="btn btn-lg btn-create-page btn-primary rounded-circle p-0 waves-effect waves-light"
           onClick={navigationContainer.openPageCreateModal}
         >
-          <div className="mb-2">
-            <EditNewPageIcon />
-          </div>
+          <EditNewPageIcon />
         </button>
       </div>
       <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }}>

src/client/styles/scss/atoms/_buttons.scss

@@ -78,13 +78,3 @@
     }
   }
 }
-
-.grw-fab {
-  .btn-create-page {
-    fill: color-yiq($primary);
-  }
-
-  .btn-scroll-to-top {
-    fill: $gray-900;
-  }
-}

src/client/styles/scss/theme/_apply-colors.scss

@@ -431,3 +431,13 @@ mark.rbt-highlight-text {
 .bg-box {
   background-color: $bgcolor-global;
 }
+
+.grw-fab {
+  .btn-create-page {
+    fill: color-yiq($primary);
+  }
+
+  .btn-scroll-to-top {
+    fill: $gray-900;
+  }
+}