Merge branch 'master' into feat/3176-grid-edit-modal-for-master-merge

.github/workflows/release-rc.yml

@@ -35,7 +35,7 @@ jobs:
     - name: Get SemVer
       run: |
         semver=`npm run version --silent`
-        echo ::set-env name=SEMVER::$semver
+        echo "SEMVER=$semver" >> $GITHUB_ENV
 
     - name: Docker Tags by SemVer
       uses: weseek/ghaction-docker-tags-by-semver@v1.0.3

.github/workflows/release.yml

@@ -28,7 +28,7 @@ jobs:
         npm --no-git-tag-version version patch
         export RELEASE_VERSION=`npm run version --silent`
         sh ./bin/github-actions/update-readme.sh
-        echo ::set-env name=RELEASE_VERSION::$RELEASE_VERSION
+        echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
         echo ::set-output name=RELEASE_VERSION::$RELEASE_VERSION
 
     - name: Checkout, Commit, Tag and Push
@@ -69,7 +69,7 @@ jobs:
     - name: Determine suffix
       run: |
         [[ ${{ matrix.flavor }} = "nocdn" ]] && suffix="-nocdn" || suffix=""
-        echo ::set-env name=SUFFIX::$suffix
+        echo "SUFFIX=$suffix" >> $GITHUB_ENV
 
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v1

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

@@ -12,21 +12,17 @@ import AppContainer from '../../services/AppContainer';
 import NavigationContainer from '../../services/NavigationContainer';
 import PageContainer from '../../services/PageContainer';
 
-import RevisionPathControls from '../Page/RevisionPathControls';
+import CopyDropdown from '../Page/CopyDropdown';
 import TagLabels from '../Page/TagLabels';
-import LikeButton from '../LikeButton';
-import BookmarkButton from '../BookmarkButton';
+import SubnavButtons from './SubNavButtons';
 import PageEditorModeManager from './PageEditorModeManager';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
-import PageManagement from '../Page/PageManagement';
-
-
 const PagePathNav = ({
   // eslint-disable-next-line react/prop-types
-  pageId, pagePath, isEditorMode,
+  pageId, pagePath, isEditorMode, isCompactMode,
 }) => {
 
   const dPagePath = new DevidedPagePath(pagePath, false, true);
@@ -47,43 +43,29 @@ const PagePathNav = ({
     latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} />;
   }
 
+  const copyDropdownId = `copydropdown${isCompactMode ? '-subnav-compact' : ''}-${pageId}`;
+  const copyDropdownToggleClassName = 'd-block text-muted bg-transparent btn-copy border-0';
+
   return (
     <div className="grw-page-path-nav">
       {formerLink}
       <span className="d-flex align-items-center">
         <h1 className="m-0">{latterLink}</h1>
         <div className="mx-2">
-          <RevisionPathControls
+          <CopyDropdown
             pageId={pageId}
             pagePath={pagePath}
-          />
+            dropdownToggleId={copyDropdownId}
+            dropdownToggleClassName={copyDropdownToggleClassName}
+          >
+            <i className="ti-clipboard"></i>
+          </CopyDropdown>
         </div>
       </span>
     </div>
   );
 };
 
-
-/* eslint-enable react/prop-types */
-
-/* eslint-disable react/prop-types */
-const PageReactionButtons = ({ appContainer, pageContainer }) => {
-
-  return (
-    <>
-      {pageContainer.isAbleToShowLikeButton && (
-        <span className="mr-2">
-          <LikeButton />
-        </span>
-      )}
-      <span>
-        <BookmarkButton />
-      </span>
-    </>
-  );
-};
-/* eslint-enable react/prop-types */
-
 const GrowiSubNavigation = (props) => {
   const {
     appContainer, navigationContainer, pageContainer, isCompactMode,
@@ -119,19 +101,18 @@ const GrowiSubNavigation = (props) => {
               <TagLabels editorMode={editorMode} />
             </div>
           ) }
-          <PagePathNav pageId={pageId} pagePath={path} isEditorMode={isEditorMode} />
+          <PagePathNav pageId={pageId} pagePath={path} isEditorMode={isEditorMode} isCompactMode={isCompactMode} />
         </div>
       </div>
 
       {/* Right side */}
       <div className="d-flex">
 
-        <div className={`d-flex ${isEditorMode ? 'align-items-center' : 'flex-column align-items-end'}`}>
+        <div className="d-flex flex-column align-items-end">
           <div className="d-flex">
-            { pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
-            { pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} /> }
+            <SubnavButtons isCompactMode={isCompactMode} />
           </div>
-          <div className={`${isEditorMode ? 'ml-2' : 'mt-2'}`}>
+          <div className="mt-2">
             {pageContainer.isAbleToShowPageEditorModeManager && (
               <PageEditorModeManager
                 onPageEditorModeButtonClicked={onPageEditorModeButtonClicked}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppContainer from '../../services/AppContainer';
+import NavigationContainer from '../../services/NavigationContainer';
+import PageContainer from '../../services/PageContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import BookmarkButton from '../BookmarkButton';
+import LikeButton from '../LikeButton';
+import PageManagement from '../Page/PageManagement';
+
+const SubnavButtons = (props) => {
+  const {
+    appContainer, navigationContainer, pageContainer, isCompactMode,
+  } = props;
+
+  /* eslint-enable react/prop-types */
+
+  /* eslint-disable react/prop-types */
+  const PageReactionButtons = ({ pageContainer }) => {
+
+    return (
+      <>
+        {pageContainer.isAbleToShowLikeButton && (
+          <span>
+            <LikeButton />
+          </span>
+        )}
+        <span>
+          <BookmarkButton />
+        </span>
+
+      </>
+    );
+  };
+  /* eslint-enable react/prop-types */
+
+  const { editorMode } = navigationContainer.state;
+  const isViewMode = editorMode === 'view';
+
+  return (
+    <>
+      {isViewMode && (
+      <>
+        { pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
+        { pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} /> }
+      </>
+      )}
+    </>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SubnavButtonsWrapper = withUnstatedContainers(SubnavButtons, [AppContainer, NavigationContainer, PageContainer]);
+
+
+SubnavButtons.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isCompactMode: PropTypes.bool,
+};
+
+export default SubnavButtonsWrapper;

src/client/js/components/Page/CopyDropdown.jsx

@@ -1,49 +1,46 @@
-import React from 'react';
+import React, {
+  useState, useMemo, useCallback,
+} from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
 import {
-  UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
+  Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
   Tooltip,
 } from 'reactstrap';
 
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
-class CopyDropdown extends React.Component {
-
-  constructor(props) {
-    super(props);
+function encodeSpaces(str) {
+  if (str == null) {
+    return null;
+  }
 
-    this.state = {
-      tooltipOpen: false,
-      isParamsAppended: true,
-      pagePathWithParams: '',
-      pagePathUrl: '',
-      permalink: '',
-      markdownLink: '',
-    };
+  // Encode SPACE and IDEOGRAPHIC SPACE
+  return str.replace(/ /g, '%20').replace(/\u3000/g, '%E3%80%80');
+}
 
-    this.id = (Math.random() * 1000).toString();
 
-    this.showToolTip = this.showToolTip.bind(this);
-    this.generateItemContents = this.generateItemContents.bind(this);
-    this.generatePagePathWithParams = this.generatePagePathWithParams.bind(this);
-    this.generatePagePathUrl = this.generatePagePathUrl.bind(this);
-    this.generatePermalink = this.generatePermalink.bind(this);
-    this.generateMarkdownLink = this.generateMarkdownLink.bind(this);
-  }
+/* eslint-disable react/prop-types */
+const DropdownItemContents = ({ title, contents }) => (
+  <>
+    <div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
+    <div className="card well mb-1 p-2">{contents}</div>
+  </>
+);
+/* eslint-enable react/prop-types */
 
-  showToolTip() {
-    this.setState({ tooltipOpen: true });
-    setTimeout(() => {
-      this.setState({ tooltipOpen: false });
-    }, 1000);
-  }
 
-  get uriParams() {
-    const { isParamsAppended } = this.state;
+const CopyDropdown = (props) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [isParamsAppended, setParamsAppended] = useState(!props.isShareLinkMode);
 
+  /*
+   * functions to construct labels and URLs
+   */
+  const getUriParams = useCallback(() => {
     if (!isParamsAppended) {
       return '';
     }
@@ -51,42 +48,23 @@ class CopyDropdown extends React.Component {
     const {
       search, hash,
     } = window.location;
-    return `${search}${hash}`;
-  }
-
-  encodeSpaces(str) {
-    if (str == null) {
-      return null;
-    }
 
-    // Encode SPACE and IDEOGRAPHIC SPACE
-    return str.replace(/ /g, '%20').replace(/\u3000/g, '%E3%80%80');
-  }
-
-  generateItemContents() {
-    const pagePathWithParams = this.generatePagePathWithParams();
-    const pagePathUrl = this.generatePagePathUrl();
-    const permalink = this.generatePermalink();
-    const markdownLink = this.generateMarkdownLink();
-
-    this.setState({
-      pagePathWithParams, pagePathUrl, permalink, markdownLink,
-    });
-  }
+    return `${search}${hash}`;
+  }, [isParamsAppended]);
 
-  generatePagePathWithParams() {
-    const { pagePath } = this.props;
-    return decodeURI(`${pagePath}${this.uriParams}`);
-  }
+  const pagePathWithParams = useMemo(() => {
+    const { pagePath } = props;
+    return decodeURI(`${pagePath}${getUriParams()}`);
+  }, [props, getUriParams]);
 
-  generatePagePathUrl() {
+  const pagePathUrl = useMemo(() => {
     const { origin } = window.location;
-    return `${origin}${this.encodeSpaces(this.generatePagePathWithParams())}`;
-  }
+    return `${origin}${encodeSpaces(pagePathWithParams)}`;
+  }, [pagePathWithParams]);
 
-  generatePermalink() {
+  const permalink = useMemo(() => {
     const { origin } = window.location;
-    const { pageId, isShareLinkMode } = this.props;
+    const { pageId, isShareLinkMode } = props;
 
     if (pageId == null) {
       return null;
@@ -95,140 +73,146 @@ class CopyDropdown extends React.Component {
       return decodeURI(`${origin}/share/${pageId}`);
     }
 
-    return this.encodeSpaces(decodeURI(`${origin}/${pageId}${this.uriParams}`));
-  }
+    return encodeSpaces(decodeURI(`${origin}/${pageId}${getUriParams()}`));
+  }, [props, getUriParams]);
 
-  generateMarkdownLink() {
-    const { pagePath } = this.props;
+  const markdownLink = useMemo(() => {
+    const { pagePath } = props;
 
-    const label = decodeURI(`${pagePath}${this.uriParams}`);
-    const permalink = this.generatePermalink();
+    const label = decodeURI(`${pagePath}${getUriParams()}`);
+    // const permalink = generatePermalink();
 
     return `[${label}](${permalink})`;
-  }
+  }, [props, getUriParams, permalink]);
 
-  DropdownItemContents = ({ title, contents }) => (
-    <>
-      <div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
-      <div className="card well mb-1 p-2">{contents}</div>
-    </>
-  );
 
-  render() {
-    const {
-      t, pageId, isShareLinkMode,
-    } = this.props;
-    const {
-      isParamsAppended, pagePathWithParams, pagePathUrl, permalink, markdownLink,
-    } = this.state;
-
-    const copyTarget = isShareLinkMode ? `copyShareLink${pageId}` : 'copyPagePathDropdown';
-    const dropdownToggleStyle = isShareLinkMode ? 'btn btn-secondary' : 'd-block text-muted bg-transparent btn-copy border-0';
-
-    const { id, DropdownItemContents } = this;
-
-    const customSwitchForParamsId = `customSwitchForParams_${id}`;
-
-    return (
-      <>
-        <UncontrolledDropdown id={copyTarget} className="grw-copy-dropdown">
-          <DropdownToggle
-            caret
-            className={dropdownToggleStyle}
-            style={this.props.buttonStyle}
-            onClick={this.generateItemContents}
-          >
-            { isShareLinkMode ? (
-              <>Copy Link</>
-            ) : (<i className="ti-clipboard"></i>)}
-          </DropdownToggle>
-
-          <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: null } }}>
-
-            <div className="d-flex align-items-center justify-content-between">
-              <DropdownItem header className="px-3">
-                { t('copy_to_clipboard.Copy to clipboard') }
-              </DropdownItem>
+  /**
+   * control
+   */
+  const toggleDropdown = useCallback(() => {
+    setDropdownOpen(!dropdownOpen);
+  }, [dropdownOpen]);
+
+  const toggleAppendParams = useCallback(() => {
+    setParamsAppended(!isParamsAppended);
+  }, [isParamsAppended]);
+
+  const showToolTip = useCallback(() => {
+    setTooltipOpen(true);
+    setTimeout(() => {
+      setTooltipOpen(false);
+    }, 1000);
+  }, []);
+
+
+  /*
+   * render
+   */
+  const {
+    t, dropdownToggleId, pageId, dropdownToggleClassName, children, isShareLinkMode,
+  } = props;
+
+  const customSwitchForParamsId = `customSwitchForParams_${dropdownToggleId}`;
+
+  return (
+    <>
+      <Dropdown className="grw-copy-dropdown" isOpen={dropdownOpen} toggle={toggleDropdown}>
+        <DropdownToggle
+          caret
+          className={dropdownToggleClassName}
+        >
+          <span id={dropdownToggleId}>{children}</span>
+        </DropdownToggle>
+
+        <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: null } }}>
+
+          <div className="d-flex align-items-center justify-content-between">
+            <DropdownItem header className="px-3">
+              { t('copy_to_clipboard.Copy to clipboard') }
+            </DropdownItem>
+            { !isShareLinkMode && (
               <div className="px-3 custom-control custom-switch custom-switch-sm">
                 <input
                   type="checkbox"
                   id={customSwitchForParamsId}
                   className="custom-control-input"
                   checked={isParamsAppended}
-                  onChange={e => this.setState({ isParamsAppended: !isParamsAppended })}
+                  onChange={toggleAppendParams}
                 />
                 <label className="custom-control-label small" htmlFor={customSwitchForParamsId}>Append params</label>
               </div>
-            </div>
+            ) }
+          </div>
+
+          <DropdownItem divider className="my-0"></DropdownItem>
+
+          {/* Page path */}
+          <CopyToClipboard text={pagePathWithParams} onCopy={showToolTip}>
+            <DropdownItem className="px-3">
+              <DropdownItemContents title={t('copy_to_clipboard.Page path')} contents={pagePathWithParams} />
+            </DropdownItem>
+          </CopyToClipboard>
+
+          <DropdownItem divider className="my-0"></DropdownItem>
+
+          {/* Page path URL */}
+          <CopyToClipboard text={pagePathUrl} onCopy={showToolTip}>
+            <DropdownItem className="px-3">
+              <DropdownItemContents title={t('copy_to_clipboard.Page URL')} contents={pagePathUrl} />
+            </DropdownItem>
+          </CopyToClipboard>
+          <DropdownItem divider className="my-0"></DropdownItem>
+
+          {/* Permanent Link */}
+          { pageId && (
+            <CopyToClipboard text={permalink} onCopy={showToolTip}>
+              <DropdownItem className="px-3">
+                <DropdownItemContents title={t('copy_to_clipboard.Permanent link')} contents={permalink} />
+              </DropdownItem>
+            </CopyToClipboard>
+          )}
 
-            <DropdownItem divider className="my-0"></DropdownItem>
+          <DropdownItem divider className="my-0"></DropdownItem>
 
-            {/* Page path */}
-            <CopyToClipboard text={pagePathWithParams} onCopy={this.showToolTip}>
+          {/* Page path + Permanent Link */}
+          { pageId && (
+            <CopyToClipboard text={`${pagePathWithParams}\n${permalink}`} onCopy={showToolTip}>
               <DropdownItem className="px-3">
-                <DropdownItemContents title={t('copy_to_clipboard.Page path')} contents={pagePathWithParams} />
+                <DropdownItemContents title={t('copy_to_clipboard.Page path and permanent link')} contents={<>{pagePathWithParams}<br />{permalink}</>} />
               </DropdownItem>
             </CopyToClipboard>
+          )}
 
-            <DropdownItem divider className="my-0"></DropdownItem>
+          <DropdownItem divider className="my-0"></DropdownItem>
 
-            {/* Page path URL */}
-            <CopyToClipboard text={pagePathUrl} onCopy={this.showToolTip}>
-              <DropdownItem className="px-3">
-                <DropdownItemContents title={t('copy_to_clipboard.Page URL')} contents={pagePathUrl} />
+          {/* Markdown Link */}
+          { pageId && (
+            <CopyToClipboard text={markdownLink} onCopy={showToolTip}>
+              <DropdownItem className="px-3 text-wrap">
+                <DropdownItemContents title={t('copy_to_clipboard.Markdown link')} contents={markdownLink} isContentsWrap />
               </DropdownItem>
             </CopyToClipboard>
-            <DropdownItem divider className="my-0"></DropdownItem>
-
-            {/* Permanent Link */}
-            { pageId && (
-              <CopyToClipboard text={permalink} onCopy={this.showToolTip}>
-                <DropdownItem className="px-3">
-                  <DropdownItemContents title={t('copy_to_clipboard.Permanent link')} contents={permalink} />
-                </DropdownItem>
-              </CopyToClipboard>
-            )}
-
-            <DropdownItem divider className="my-0"></DropdownItem>
-
-            {/* Page path + Permanent Link */}
-            { pageId && (
-              <CopyToClipboard text={`${pagePathWithParams}\n${permalink}`} onCopy={this.showToolTip}>
-                <DropdownItem className="px-3">
-                  <DropdownItemContents title={t('copy_to_clipboard.Page path and permanent link')} contents={<>{pagePathWithParams}<br />{permalink}</>} />
-                </DropdownItem>
-              </CopyToClipboard>
-            )}
-
-            <DropdownItem divider className="my-0"></DropdownItem>
-
-            {/* Markdown Link */}
-            { pageId && (
-              <CopyToClipboard text={markdownLink} onCopy={this.showToolTip}>
-                <DropdownItem className="px-3 text-wrap">
-                  <DropdownItemContents title={t('copy_to_clipboard.Markdown link')} contents={markdownLink} isContentsWrap />
-                </DropdownItem>
-              </CopyToClipboard>
-            )}
-          </DropdownMenu>
-
-        </UncontrolledDropdown>
-
-        <Tooltip placement="bottom" isOpen={this.state.tooltipOpen} target={copyTarget} fade={false}>
-          copied!
-        </Tooltip>
-      </>
-    );
-  }
+          )}
+        </DropdownMenu>
 
-}
+      </Dropdown>
+
+      <Tooltip placement="bottom" isOpen={tooltipOpen} target={dropdownToggleId} fade={false}>
+        copied!
+      </Tooltip>
+    </>
+  );
+};
 
 CopyDropdown.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
+  children: PropTypes.node.isRequired,
+  dropdownToggleId: PropTypes.string.isRequired,
   pagePath: PropTypes.string.isRequired,
+
   pageId: PropTypes.string,
-  buttonStyle: PropTypes.object,
+  dropdownToggleClassName: PropTypes.string,
   isShareLinkMode: PropTypes.bool,
 };
 

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -42,7 +42,7 @@ const DisplaySwitcher = (props) => {
               </div>
             </div>
 
-            <div>
+            <div className="flex-grow-1 flex-basis-0 mw-0">
               {pageUser && <UserInfo pageUser={pageUser} />}
               <Page />
             </div>

src/client/js/components/Page/RevisionPathControls.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-
-import CopyDropdown from './CopyDropdown';
-
-const RevisionPathControls = (props) => {
-  // define styles
-  const buttonStyle = {
-    marginLeft: '0.5em',
-    padding: '0 2px',
-  };
-
-  const {
-    pagePath, pageId,
-  } = props;
-
-
-  return (
-    <>
-      <CopyDropdown pagePath={pagePath} pageId={pageId} buttonStyle={buttonStyle} />
-    </>
-  );
-};
-
-RevisionPathControls.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-
-  pagePath: PropTypes.string.isRequired,
-  pageId: PropTypes.string,
-};
-
-export default withTranslation()(RevisionPathControls);

src/client/js/components/ShareLink/ShareLinkList.jsx

@@ -28,7 +28,14 @@ const ShareLinkList = (props) => {
             <td>
               <div className="d-flex">
                 <span className="mr-auto my-auto">{shareLink._id}</span>
-                <CopyDropdown isShareLinkMode pagePath={shareLink.relatedPage.path} pageId={shareLink._id} />
+                <CopyDropdown
+                  pagePath={shareLink.relatedPage.path}
+                  dropdownToggleId={`copydropdown-${shareLink._id}`}
+                  pageId={shareLink._id}
+                  isShareLinkMode
+                >
+                  Copy Link
+                </CopyDropdown>
               </div>
             </td>
             {props.isAdmin && <td><a href={shareLink.relatedPage.path}>{shareLink.relatedPage.path}</a></td>}

src/client/styles/scss/_user.scss

@@ -44,8 +44,8 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
   }
 }
 
-.user-page {
-  .grw-user-page-header {
+.user-page-footer {
+  .grw-user-page-list-m {
     svg {
       width: 35px;
       height: 35px;

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

@@ -382,14 +382,3 @@ ul.pagination {
 .grw-modal-head {
   border-color: $border-color-global;
 }
-
-/*
- * GROWI user page
- */
-.grw-page-list-m {
-  .grw-page-list-title-m {
-    svg {
-      fill: $color-global;
-    }
-  }
-}

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

@@ -322,14 +322,3 @@ $border-color: $border-color-global;
 .grw-modal-head {
   border-color: $border-color-global;
 }
-
-/*
- * GROWI user page
- */
-.grw-page-list-m {
-  .grw-page-list-title-m {
-    svg {
-      fill: $color-global;
-    }
-  }
-}

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

@@ -35,6 +35,7 @@ $nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 @import 'mixins/list-group';
 @import 'mixins/page-editor-mode-manager';
 @import 'mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
+@import 'reboot-bootstrap-buttons';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-bootstrap-nav';
@@ -70,15 +71,6 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
-// Link buttons
-.btn-link {
-  color: $link-color;
-
-  @include hover {
-    color: $link-hover-color;
-  }
-}
-
 // Dropdown
 .dropdown-menu {
   color: $color-global;
@@ -102,6 +94,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
 
   &:active,
   &.active,
+  &:active:hover,
   &.active:hover {
     color: $color-dropdown-link-active;
     background-color: $bgcolor-dropdown-link-active;
@@ -312,9 +305,6 @@ ul.pagination {
 }
 
 .grw-page-accessories-control {
-  .grw-btn-page-accessories {
-    fill: $color-link;
-  }
   .grw-seen-user-info {
     .btn {
       color: $color-seen-user;

src/client/styles/scss/theme/_reboot-bootstrap-buttons.scss

@@ -0,0 +1,21 @@
+.btn-link {
+  color: $link-color;
+  svg {
+    fill: $link-color;
+  }
+
+  @include hover() {
+    color: $link-hover-color;
+    svg {
+      fill: $link-hover-color;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+    svg {
+      fill: $btn-link-disabled-color;
+    }
+  }
+}

src/client/styles/scss/theme/_reboot-bootstrap-colors.scss

@@ -23,6 +23,10 @@ body {
   color: $body-color;
   // text-align: left; // 3
   background-color: $body-bg; // 2
+
+  svg {
+    fill: $body-color;
+  }
 }
 
 // Links
@@ -32,9 +36,17 @@ a {
   text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
 
+  svg {
+    fill: $link-color;
+  }
+
   @include hover() {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
+
+    svg {
+      fill: $link-hover-color;
+    }
   }
 }
 

src/client/styles/scss/theme/kibela.scss

@@ -6,36 +6,26 @@ $themelight: #f4f5f6;
 $subthemecolor: rgb(88, 130, 250);
 $lightthemecolor: rgba(181, 203, 247, 0.61);
 
-// change width only for pages with articles
-.growi:not(.on-edit):not(.admin-page):not(.user-settings-page) {
-  // layout
-  header,
-  #main {
-    max-width: 1024px;
-    margin: auto;
+.main {
+  .container,
+  .container-sm,
+  .container-md,
+  .container-lg,
+  .container-fluid {
+    padding-top: 30px;
+    padding-bottom: 30px;
+    background-color: white;
+    border-radius: 0.35em;
   }
-  header {
-    margin-top: 30px;
-    margin-bottom: 42px;
-    background-color: $gray-100;
-  }
-}
-
-.grw-subnav {
-  padding: 20px 30px;
-  border-radius: 0.35em;
 }
 
-.grw-page-content-container {
-  padding-top: 10px;
-  background-color: #fff;
+.user-page-footer {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+  background-color: white;
   border-radius: 0.35em;
 }
 
-.page-content-footer {
-  margin-top: 30px;
-}
-
 // Light Mode
 html[light],
 html[dark] {

src/server/views/layout-growi/user_page.html

@@ -12,9 +12,9 @@
   {% include 'widget/comments.html' %}
 
   {% if page %}
-    <div class="container-lg">
+    <div class="container-lg user-page-footer py-5">
 
-      <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+      <div class="grw-user-page-list-m d-edit-none">
         <h2 class="grw-user-page-header border-bottom pb-2 mb-3" id="bookmarks-list">
           <i id="user-bookmark-icon"></i>
           Bookmarks
@@ -25,7 +25,7 @@
         </div>
       </div>
 
-      <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+      <div class="grw-user-page-list-m mt-5 d-edit-none">
         <h2 class="grw-user-page-header border-bottom pb-2 mb-3" id="recently-created-list">
           <i id="recent-created-icon"></i>
           Recently Created

src/server/views/widget/page_content.html

@@ -40,7 +40,7 @@
   >
 {% endif %}
 
-<div class="flex-grow-1">
+<div class="flex-grow-1 flex-basis-0 mw-0">
   {% include 'page_alerts.html' %}
 
   <div id="display-switcher">