add icon button

src/client/js/bootstrap.jsx

@@ -47,6 +47,7 @@ const componentMappings = {
   'personal-dropdown': <PersonalDropdown />,
 
   'create-page-button': <PageCreateButton />,
+  'create-page-button-icon': <PageCreateButton isIcon />,
   'page-create-modal': <PageCreateModal />,
 
   'grw-sidebar-wrapper': <Sidebar />,

src/client/js/components/Navbar/PageCreateButton.jsx

@@ -7,13 +7,21 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
 const PageCreateButton = (props) => {
-  const { t, appContainer } = props;
+  const { t, appContainer, isIcon } = props;
+
+  if (isIcon) {
+    return (
+      <a className="btn btn-lg btn-primary rounded-circle waves-effect waves-light" type="button" onClick={appContainer.openPageCreateModal}>
+        <i className="icon-pencil"></i>
+      </a>
+    );
+  }
 
   return (
-    <a className="nav-link create-page" type="button" onClick={appContainer.openPageCreateModal}>
+    <button className="nav-link create-page" type="button" onClick={appContainer.openPageCreateModal}>
       <i className="icon-pencil mr-2"></i>
       <span>{ t('New') }</span>
-    </a>
+    </button>
   );
 };
 
@@ -28,6 +36,8 @@ const PageCreateButtonWrapper = (props) => {
 PageCreateButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  isIcon: PropTypes.bool,
 };
 
 export default withTranslation()(PageCreateButtonWrapper);

src/client/js/components/PageCreateModal.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Button, Modal, ModalHeader, ModalBody, ModalFooter,
+  Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
 import { withTranslation } from 'react-i18next';
@@ -12,12 +12,12 @@ import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
 const PageCreateModal = (props) => {
-  const { appContainer } = props;
+  const { t, appContainer } = props;
 
   return (
     <Modal isOpen={appContainer.state.isPageCreateModalShown} toggle={appContainer.closePageCreateModal}>
       <ModalHeader tag="h4" toggle={appContainer.closePageCreateModal} className="bg-primary text-light">
-        <span className="text-white">Edit Tags</span>
+        <span className="text-white">{ t('New Page') }</span>
       </ModalHeader>
       <ModalBody>
         hoge

src/server/views/layout/layout.html

@@ -143,9 +143,7 @@
 
 <div class="grw-fixed-controls-container d-md-none d-edit-none animated fadeInUp faster">
   <div class="grw-fixed-controls-button-container rounded-circle">
-    <button class="btn btn-lg btn-primary rounded-circle waves-effect waves-light" type="button" data-target="#create-page" data-toggle="modal">
-      <i class="icon-pencil"></i>
-    </button>
+    <div id='create-page-button-icon'></div>
   </div>
 </div>