fix Fab layout

src/client/js/base.jsx

@@ -6,7 +6,7 @@ import Xss from '@commons/service/xss';
 import GrowiNavbar from './components/Navbar/GrowiNavbar';
 import GrowiNavbarBottom from './components/Navbar/GrowiNavbarBottom';
 import Sidebar from './components/Sidebar';
-import Fav from './components/Fav';
+import Fab from './components/Fab';
 import StaffCredit from './components/StaffCredit/StaffCredit';
 
 import AppContainer from './services/AppContainer';
@@ -45,7 +45,7 @@ const componentMappings = {
 
   'grw-sidebar-wrapper': <Sidebar />,
 
-  'grw-fixed-controls-container': <Fav />,
+  'grw-fab-container': <Fab />,
 
   'staff-credit': <StaffCredit />,
 };

src/client/js/components/Fav.jsx → src/client/js/components/Fab.jsx

@@ -8,9 +8,9 @@ import NavigationContainer from '../services/NavigationContainer';
 import { withUnstatedContainers } from './UnstatedUtils';
 
 
-const logger = loggerFactory('growi:cli:FixedControls');
+const logger = loggerFactory('growi:cli:Fab');
 
-const FixedControls = (props) => {
+const Fab = (props) => {
   const { navigationContainer } = props;
 
   const [animateClasses, setAnimateClasses] = useState('invisible');
@@ -40,18 +40,18 @@ const FixedControls = (props) => {
 
 
   return (
-    <div className="grw-fixed-controls d-none d-md-block">
-      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: '2.3rem', right: '3rem' }}>
+    <div className="grw-fab d-none d-md-block">
+      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: '2.3rem', right: '4rem' }}>
         <button
           type="button"
-          className="btn btn-lg btn-create-page btn-primary rounded-circle waves-effect waves-light"
+          className="btn btn-lg btn-create-page btn-primary rounded-circle p-0 waves-effect waves-light"
           onClick={navigationContainer.openPageCreateModal}
         >
           <i className="icon-pencil"></i>
         </button>
       </div>
       <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }}>
-        <button type="button" className="btn btn-light btn-scroll-to-top rounded-circle" onClick={() => navigationContainer.smoothScrollIntoView()}>
+        <button type="button" className="btn btn-light btn-scroll-to-top rounded-circle p-0" onClick={() => navigationContainer.smoothScrollIntoView()}>
           <i className="icon-control-start"></i>
         </button>
       </div>
@@ -60,8 +60,8 @@ const FixedControls = (props) => {
 
 };
 
-FixedControls.propTypes = {
+Fab.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
-export default withUnstatedContainers(FixedControls, [NavigationContainer]);
+export default withUnstatedContainers(Fab, [NavigationContainer]);

src/client/styles/scss/_layout.scss

@@ -56,7 +56,7 @@ body {
   }
 }
 
-.grw-fixed-controls {
+.grw-fab {
   position: fixed;
   right: 1.5rem;
   bottom: 3rem;
@@ -71,6 +71,18 @@ body {
 
     box-shadow: 2px 3px 6px #0000005d;
   }
+
+  .btn-scroll-to-top {
+    width: 40px;
+    height: 40px;
+
+    opacity: 0.4;
+
+    i {
+      display: inline-block;
+      transform: rotate(90deg);
+    }
+  }
 }
 
 // printable style

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

@@ -26,15 +26,6 @@
   }
 }
 
-.btn-scroll-to-top {
-  opacity: 0.4;
-
-  i {
-    display: inline-block;
-    transform: rotate(90deg);
-  }
-}
-
 .rounded-pill-weak {
   border-radius: 60px;
 }

src/server/views/layout/layout.html

@@ -94,7 +94,7 @@
 </div><!-- /#wrapper -->
 
 {% block fixed-controls %}
-<div id="grw-fixed-controls-container"></div>
+<div id="grw-fab-container"></div>
 {% endblock %}
 
 <!-- /#staff-credit -->