Merge branch 'imprv/profile-image-cache' into imprv/update-cache-bulk

resource/locales/en-US/sandbox-bootstrap4.md

@@ -6,92 +6,181 @@
 <span class="badge badge-info">Info</span>
 <span class="badge badge-warning">Warning</span>
 <span class="badge badge-danger">Danger</span>
-<span class="badge badge-light">Light</span>
+<span class="badge badge-light text-dark">Light</span>
 <span class="badge badge-dark">Dark</span>
 
+<span class="badge badge-blue">Blue</span>
+<span class="badge badge-indigo">Indigo</span>
+<span class="badge badge-purple">Purple</span>
+<span class="badge badge-pink">Pink</span>
+<span class="badge badge-red">Red</span>
+<span class="badge badge-orange">Orange</span>
+<span class="badge badge-yellow">Yellow</span>
+<span class="badge badge-green">Green</span>
+<span class="badge badge-teal">Teal</span>
+<span class="badge badge-cyan">Cyan</span>
+
+
 # Alerts
 
-<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
-<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
-<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
-<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
+<div class="alert alert-primary" role="alert">
+  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-secondary" role="alert">
+  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-success" role="alert">
+  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-danger" role="alert">
+  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-warning" role="alert">
+  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-info" role="alert">
+  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-light text-dark" role="alert">
+  This is a light alert with <a href="#" class="alert-link text-dark">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-dark" role="alert">
+  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
 
 # Cards
 
-<div class="card">
-  <div class="card-header">Card header without title</div>
+<div class="d-flex">
+
+<div class="mr-3">
+<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Primary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-light">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Secondary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-secondary text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Success card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-dark text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Danger card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-primary text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Warning card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-success text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Info card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-info text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card bg-light mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Light card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-warning text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Dark card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
+</div>
 
-<div class="card bg-danger text-white">
-  <div class="card-header">Card header without title</div>
+<div>
+<div class="card border-primary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-primary">
+    <h5 class="card-title">Primary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-secondary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-secondary">
+    <h5 class="card-title">Secondary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-success mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-success">
+    <h5 class="card-title">Success card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-danger mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-danger">
+    <h5 class="card-title">Danger card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-warning mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-warning">
+    <h5 class="card-title">Warning card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-info mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-info">
+    <h5 class="card-title">Info card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-light mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Light card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-dark mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-dark">
+    <h5 class="card-title">Dark card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
+</div>
+
+</div>
 
 # Wells
 
 ## Default well
 
-<div class="card card-body bg-light">Look, I'm in a well! </div>
+<div class="card card-body">Look, I'm in a well! </div>
 
 ## Optional classes
 
-<div class="card card-body bg-light p-5">Look, I'm in a well! </div>
-
-<div class="card card-body bg-light p-2">Look, I'm in a well! </div>
+<div class="card card-body bg-primary text-light p-2">Look, I'm in a well! </div>
 
 # Typography
 

resource/locales/en-US/welcome.md

@@ -3,16 +3,14 @@
 [![GitHub Releases](https://img.shields.io/github/release/weseek/growi.svg)](https://github.com/weseek/growi/releases/latest)
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
 
-<div class="card">
-  <div class="card-header">Tips</div>
+<div class="card border-primary">
+  <div class="card-header bg-primary text-light">Tips</div>
   <div class="card-body"><ul>
-    <li>Ctrl(⌘)-/ to show quick help</li>
-    <li>You can write HTML with <a href="https://getbootstrap.com/docs/3.3/css/">Bootstrap 3</a>.</li>
+    <li>Ctrl(⌘) + "/" to show quick help</li>
+    <li>You can write HTML with <a href="https://getbootstrap.com/docs/4.5/components/">Bootstrap 4</a>.</li>
   </ul></div>
 </div>
 
-<div class="clearfix"></div>
-
 Contents
 =========
 

resource/locales/ja/sandbox-bootstrap4.md

@@ -6,92 +6,181 @@
 <span class="badge badge-info">Info</span>
 <span class="badge badge-warning">Warning</span>
 <span class="badge badge-danger">Danger</span>
-<span class="badge badge-light">Light</span>
+<span class="badge badge-light text-dark">Light</span>
 <span class="badge badge-dark">Dark</span>
 
+<span class="badge badge-blue">Blue</span>
+<span class="badge badge-indigo">Indigo</span>
+<span class="badge badge-purple">Purple</span>
+<span class="badge badge-pink">Pink</span>
+<span class="badge badge-red">Red</span>
+<span class="badge badge-orange">Orange</span>
+<span class="badge badge-yellow">Yellow</span>
+<span class="badge badge-green">Green</span>
+<span class="badge badge-teal">Teal</span>
+<span class="badge badge-cyan">Cyan</span>
+
+
 # Alerts
 
-<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
-<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
-<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
-<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
+<div class="alert alert-primary" role="alert">
+  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-secondary" role="alert">
+  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-success" role="alert">
+  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-danger" role="alert">
+  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-warning" role="alert">
+  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-info" role="alert">
+  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-light text-dark" role="alert">
+  This is a light alert with <a href="#" class="alert-link text-dark">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-dark" role="alert">
+  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
 
 # Cards
 
-<div class="card">
-  <div class="card-header">Card header without title</div>
+<div class="d-flex">
+
+<div class="mr-3">
+<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Primary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-light">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Secondary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-secondary text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Success card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-dark text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Danger card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-primary text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Warning card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-success text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Info card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-info text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card bg-light mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Light card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
-
-<div class="card bg-warning text-white">
-  <div class="card-header">Card header without title</div>
+<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Dark card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
+</div>
 
-<div class="card bg-danger text-white">
-  <div class="card-header">Card header without title</div>
+<div>
+<div class="card border-primary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-primary">
+    <h5 class="card-title">Primary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-secondary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-secondary">
+    <h5 class="card-title">Secondary card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-success mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-success">
+    <h5 class="card-title">Success card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-danger mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-danger">
+    <h5 class="card-title">Danger card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-warning mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-warning">
+    <h5 class="card-title">Warning card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-info mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-info">
+    <h5 class="card-title">Info card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-light mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
   <div class="card-body">
-    Card body content
+    <h5 class="card-title">Light card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+</div>
+<div class="card border-dark mb-3" style="max-width: 18rem;">
+  <div class="card-header">Header</div>
+  <div class="card-body text-dark">
+    <h5 class="card-title">Dark card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
 </div>
+</div>
+
+</div>
 
 # Wells
 
 ## Default well
 
-<div class="card card-body bg-light">Look, I'm in a well! </div>
+<div class="card card-body">Look, I'm in a well! </div>
 
 ## Optional classes
 
-<div class="card card-body bg-light p-5">Look, I'm in a well! </div>
-
-<div class="card card-body bg-light p-2">Look, I'm in a well! </div>
+<div class="card card-body bg-primary text-light p-2">Look, I'm in a well! </div>
 
 # Typography
 

resource/locales/ja/translation.json

@@ -315,7 +315,7 @@
       "konami_code_url": "https://ja.wikipedia.org/wiki/コナミコマンド"
     },
     "editor": {
-      "titile": "エディターショートカット",
+      "title": "エディターショートカット",
       "Indent": "インデント",
       "Outdent": "左インデント",
       "Save Page": "保存",

resource/locales/ja/welcome.md

@@ -3,16 +3,14 @@
 [![GitHub Releases](https://img.shields.io/github/release/weseek/growi.svg)](https://github.com/weseek/growi/releases/latest)
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
 
-<div class="card">
-  <div class="card-header">Tips</div>
+<div class="card border-primary">
+  <div class="card-header bg-primary text-light">Tips</div>
   <div class="card-body"><ul>
-    <li>Ctrl(⌘)-/ でショートカットヘルプを表示します</li>
-      <li>HTML/CSS の記述時は、<a href="https://getbootstrap.com/docs/3.3/css/">Bootstrap 3</a> を利用できます</li>
+    <li>Ctrl(⌘) + "/" でショートカットヘルプを表示します</li>
+    <li>HTML/CSS の記述には、<a href="https://getbootstrap.com/docs/4.5/components/">Bootstrap 4</a> を利用できます</li>
   </ul></div>
 </div>
 
-<div class="clearfix"></div>
-
 Contents
 =========
 
@@ -26,4 +24,4 @@ Slack
 <a href="https://growi-slackin.weseek.co.jp/"><img src="https://growi-slackin.weseek.co.jp/badge.svg"></a>
 
 GROWI をより良いものにするために、是非 Slack に参加してください。  
-開発に関する議論を行っている他、導入時の質問等も受け付けています。
+開発に関する議論を行っている他、導入時の質問等も受け付けています。

src/client/js/app.jsx

@@ -31,7 +31,6 @@ import MyDraftList from './components/MyDraftList/MyDraftList';
 import SeenUserPictureList from './components/User/SeenUserPictureList';
 import LikerPictureList from './components/User/LikerPictureList';
 import TableOfContents from './components/TableOfContents';
-import PageCreateModal from './components/PageCreateModal';
 
 import PersonalSettings from './components/Me/PersonalSettings';
 import PageContainer from './services/PageContainer';
@@ -98,7 +97,6 @@ if (pageContainer.state.pageId != null) {
     'seen-user-list': <SeenUserPictureList />,
     'liker-list': <LikerPictureList />,
     'rename-page-name-input': <PagePathAutoComplete crowi={appContainer} initializedPath={pageContainer.state.path} />,
-    'page-create-modal': <PageCreateModal />,
 
     'user-created-list': <RecentCreated />,
     'user-draft-list': <MyDraftList />,

src/client/js/bootstrap.jsx

@@ -12,6 +12,7 @@ import StaffCredit from './components/StaffCredit/StaffCredit';
 import AppContainer from './services/AppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import PageCreateButton from './components/Navbar/PageCreateButton';
+import PageCreateModal from './components/PageCreateModal';
 
 const logger = loggerFactory('growi:app');
 
@@ -46,6 +47,7 @@ const componentMappings = {
 
   'create-page-button': <PageCreateButton />,
   'create-page-button-icon': <PageCreateButton isIcon />,
+  'page-create-modal': <PageCreateModal />,
 
   'grw-sidebar-wrapper': <Sidebar />,
 

src/client/js/components/CreateTemplateModal.jsx

@@ -55,13 +55,9 @@ const CreateTemplateModal = (props) => {
             <code>{parentPath}</code><br />
             { t('template.modal_label.Create template under') }
           </label>
-          <div className="row">
-            <div className="col-md-6">
-              {renderTemplateCard('children', '_template')}
-            </div>
-            <div className="col-md-6">
-              {renderTemplateCard('decendants', '__template')}
-            </div>
+          <div className="card-deck">
+            {renderTemplateCard('children', '_template')}
+            {renderTemplateCard('decendants', '__template')}
           </div>
         </div>
       </ModalBody>

src/client/js/components/LoginForm.jsx

@@ -44,13 +44,13 @@ class LoginForm extends React.Component {
 
     return (
       <form role="form" action="/login" method="post">
-        <div className="input-group mb-3">
+        <div className="input-group">
           <div className="input-group-prepend">
             <span className="input-group-text">
               <i className="icon-user"></i>
             </span>
           </div>
-          <input type="text" className="form-control" placeholder="Username or E-mail" name="loginForm[username]" />
+          <input type="text" className="form-control rounded-0" placeholder="Username or E-mail" name="loginForm[username]" />
           {isLdapStrategySetup && (
             <div className="input-group-append">
               <small className="input-group-text text-success">
@@ -60,18 +60,18 @@ class LoginForm extends React.Component {
           )}
         </div>
 
-        <div className="input-group mb-3">
+        <div className="input-group">
           <div className="input-group-prepend">
             <span className="input-group-text">
               <i className="icon-lock"></i>
             </span>
           </div>
-          <input type="password" className="form-control" placeholder="Password" name="loginForm[password]" />
+          <input type="password" className="form-control rounded-0" placeholder="Password" name="loginForm[password]" />
         </div>
 
-        <div className="input-group mt-5">
+        <div className="input-group my-4">
           <input type="hidden" name="_csrf" value={noLoginContainer.csrfToken} />
-          <button type="submit" id="login" className="btn btn-fill login mx-auto">
+          <button type="submit" id="login" className="btn btn-fill rounded-0 login mx-auto">
             <div className="eff"></div>
             <span className="btn-label">
               <i className="icon-login"></i>
@@ -96,8 +96,8 @@ class LoginForm extends React.Component {
     };
 
     return (
-      <div key={auth} className="col-6 mb-2">
-        <button type="button" className="btn btn-fill" id={auth} onClick={this.handleLoginWithExternalAuth}>
+      <div key={auth} className="col-6 my-2">
+        <button type="button" className="btn btn-fill rounded-0" id={auth} onClick={this.handleLoginWithExternalAuth}>
           <div className="eff"></div>
           <span className="btn-label">
             <i className={`fa fa-${authIconNames[auth]}`}></i>
@@ -131,7 +131,7 @@ class LoginForm extends React.Component {
         <div className="text-center">
           <button
             type="button"
-            className="btn btn-secondary btn-sm mb-3"
+            className="btn btn-secondary btn-sm rounded-0 mb-3"
             data-toggle={isExternalAuthCollapsible ? 'collapse' : ''}
             data-target="#external-auth"
             aria-expanded="false"
@@ -171,7 +171,7 @@ class LoginForm extends React.Component {
                 <i className="icon-user"></i>
               </span>
             </div>
-            <input type="text" className="form-control" placeholder={t('User ID')} name="registerForm[username]" defaultValue={username} required />
+            <input type="text" className="form-control rounded-0" placeholder={t('User ID')} name="registerForm[username]" defaultValue={username} required />
           </div>
           <p className="form-text text-danger">
             <span id="help-block-username"></span>
@@ -183,7 +183,7 @@ class LoginForm extends React.Component {
                 <i className="icon-tag"></i>
               </span>
             </div>
-            <input type="text" className="form-control" placeholder={t('Name')} name="registerForm[name]" defaultValue={name} required />
+            <input type="text" className="form-control rounded-0" placeholder={t('Name')} name="registerForm[name]" defaultValue={name} required />
           </div>
 
           <div className="input-group">
@@ -192,7 +192,7 @@ class LoginForm extends React.Component {
                 <i className="icon-envelope"></i>
               </span>
             </div>
-            <input type="email" className="form-control" placeholder={t('Email')} name="registerForm[email]" defaultValue={email} required />
+            <input type="email" className="form-control rounded-0" placeholder={t('Email')} name="registerForm[email]" defaultValue={email} required />
           </div>
 
           {registrationWhiteList.length > 0 && (
@@ -216,12 +216,12 @@ class LoginForm extends React.Component {
                 <i className="icon-lock"></i>
               </span>
             </div>
-            <input type="password" className="form-control" placeholder={t('Password')} name="registerForm[password]" required />
+            <input type="password" className="form-control rounded-0" placeholder={t('Password')} name="registerForm[password]" required />
           </div>
 
-          <div className="input-group justify-content-center mt-5">
+          <div className="input-group justify-content-center my-4">
             <input type="hidden" name="_csrf" value={noLoginContainer.csrfToken} />
-            <button type="submit" className="btn btn-fill" id="register">
+            <button type="submit" className="btn btn-fill rounded-0" id="register">
               <div className="eff"></div>
               <span className="btn-label">
                 <i className="icon-user-follow"></i>
@@ -231,10 +231,10 @@ class LoginForm extends React.Component {
           </div>
         </form>
 
-        <div className="border-bottom mb-3"></div>
+        <div className="border-bottom"></div>
 
         <div className="row">
-          <div className="text-right col-12 py-1">
+          <div className="text-right col-12 mt-2 py-2">
             <a href="#login" id="login" className="link-switch" onClick={this.switchForm}>
               <i className="icon-fw icon-login"></i>
               {t('Sign in is here')}

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

@@ -70,11 +70,6 @@ const PersonalDropdown = (props) => {
 
         <div className="dropdown-divider"></div>
 
-        <a className="dropdown-item" href={`/user/${user.username}#user-draft-list`}><i className="icon-fw icon-docs"></i>{ t('List Drafts') }</a>
-        <a className="dropdown-item" href="/trash"><i className="icon-fw icon-trash"></i>{ t('Deleted Pages') }</a>
-
-        <div className="dropdown-divider"></div>
-
         <h6 className="dropdown-header">Color Scheme</h6>
         <form className="px-4">
           <div className="form-row align-items-center">

src/client/js/components/PageCreateModal.jsx

@@ -13,17 +13,16 @@ import { pathUtils } from 'growi-commons';
 import { createSubscribedElement } from './UnstatedUtils';
 
 import AppContainer from '../services/AppContainer';
-import PageContainer from '../services/PageContainer';
 import PagePathAutoComplete from './PagePathAutoComplete';
 
 const PageCreateModal = (props) => {
-  const { t, appContainer, pageContainer } = props;
+  const { t, appContainer } = props;
 
   const config = appContainer.getConfig();
   const isReachable = config.isSearchServiceReachable;
-  const { path } = pageContainer.state;
+  const { pathname } = window.location;
   const userPageRootPath = userPageRoot(appContainer.currentUser);
-  const parentPath = pathUtils.addTrailingSlash(path);
+  const parentPath = pathUtils.addTrailingSlash(pathname);
   const now = format(new Date(), 'yyyy/MM/dd');
 
   const [todayInput1, setTodayInput1] = useState(t('Memo'));
@@ -152,7 +151,7 @@ const PageCreateModal = (props) => {
                 ? (
                   <PagePathAutoComplete
                     crowi={appContainer}
-                    initializedPath={path}
+                    initializedPath={decodeURI(pathname)}
                     addTrailingSlash
                     onSubmit={ppacSubmitHandler}
                     onInputChange={ppacInputChangeHandler}
@@ -189,7 +188,7 @@ const PageCreateModal = (props) => {
         <fieldset className="col-12">
 
           <h3 className="grw-modal-head pb-2">{ t('template.modal_label.Create template under')}<br />
-            <code>{path}</code>
+            <code>{decodeURI(pathname)}</code>
           </h3>
 
           <div className="d-sm-flex align-items-center justify-items-between">
@@ -248,14 +247,13 @@ const PageCreateModal = (props) => {
  * Wrapper component for using unstated
  */
 const ModalControlWrapper = (props) => {
-  return createSubscribedElement(PageCreateModal, props, [AppContainer, PageContainer]);
+  return createSubscribedElement(PageCreateModal, props, [AppContainer]);
 };
 
 
 PageCreateModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
 export default withTranslation()(ModalControlWrapper);

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -658,12 +658,10 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   getNavbarItems() {
-    const buttonColor = '';
     return [
-      /* eslint-disable max-len */
       <Button
         key="nav-item-bold"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Bold"
         onClick={this.createReplaceSelectionHandler('**', '**')}
@@ -672,7 +670,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-italic"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Italic"
         onClick={this.createReplaceSelectionHandler('*', '*')}
@@ -681,7 +679,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-strikethrough"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Strikethrough"
         onClick={this.createReplaceSelectionHandler('~~', '~~')}
@@ -690,7 +688,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-header"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Heading"
         onClick={this.makeHeaderHandler}
@@ -699,7 +697,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-code"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Inline Code"
         onClick={this.createReplaceSelectionHandler('`', '`')}
@@ -708,7 +706,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-quote"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Quote"
         onClick={this.createAddPrefixToEachLinesHandler('> ')}
@@ -717,7 +715,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-ul"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="List"
         onClick={this.createAddPrefixToEachLinesHandler('- ')}
@@ -726,7 +724,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-ol"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Numbered List"
         onClick={this.createAddPrefixToEachLinesHandler('1. ')}
@@ -735,7 +733,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-checkbox"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Check List"
         onClick={this.createAddPrefixToEachLinesHandler('- [ ] ')}
@@ -744,7 +742,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-link"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Link"
         onClick={this.createReplaceSelectionHandler('[', ']()')}
@@ -753,7 +751,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-image"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Image"
         onClick={this.createReplaceSelectionHandler('![', ']()')}
@@ -762,7 +760,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-table"
-        color={buttonColor}
+        color={null}
         size="sm"
         title="Table"
         onClick={this.showHandsonTableHandler}
@@ -771,14 +769,13 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-drawio"
-        color={buttonColor}
+        color={null}
         bssize="small"
         title="draw.io"
         onClick={this.showDrawioHandler}
       >
         <EditorIcon icon="Drawio" />
       </Button>,
-      /* eslint-able max-len */
     ];
   }
 

src/client/js/components/PageEditor/OptionsSelector.jsx

@@ -162,7 +162,7 @@ class OptionsSelector extends React.Component {
           toggle={this.onToggleConfigurationDropdown}
         >
 
-          <DropdownToggle color="light" caret>
+          <DropdownToggle color="outline-secondary" caret>
             <i className="icon-settings"></i>
           </DropdownToggle>
 

src/client/js/components/RecentCreated/RecentCreated.jsx

@@ -77,7 +77,7 @@ class RecentCreated extends React.Component {
 
     return (
       <div className="page-list-container-create">
-        <ul className="page-list-ul page-list-ul-flat">
+        <ul className="page-list-ul page-list-ul-flat mb-3">
           {pageList}
         </ul>
         <PaginationWrapper

src/client/js/components/SavePageControls/GrantSelector.jsx

@@ -30,17 +30,17 @@ class GrantSelector extends React.Component {
 
     this.availableGrants = [
       {
-        grant: 1, iconClass: 'icon-people', styleClass: '', label: 'Public',
+        grant: 1, iconClass: 'icon-people', btnStyleClass: 'outline-info', label: 'Public',
       },
       {
-        grant: 2, iconClass: 'icon-link', styleClass: 'text-info', label: 'Anyone with the link',
+        grant: 2, iconClass: 'icon-link', btnStyleClass: 'outline-teal', label: 'Anyone with the link',
       },
       // { grant: 3, iconClass: '', label: 'Specified users only' },
       {
-        grant: 4, iconClass: 'icon-lock', styleClass: 'text-danger', label: 'Only me',
+        grant: 4, iconClass: 'icon-lock', btnStyleClass: 'outline-danger', label: 'Only me',
       },
       {
-        grant: 5, iconClass: 'icon-options', styleClass: '', label: 'Only inside the group', reselectLabel: 'Reselect the group',
+        grant: 5, iconClass: 'icon-options', btnStyleClass: 'outline-purple', label: 'Only inside the group', reselectLabel: 'Reselect the group',
       },
     ];
 
@@ -136,6 +136,7 @@ class GrantSelector extends React.Component {
     const { t } = this.props;
     const { grant: currentGrant, grantGroup } = this.state;
 
+    let dropdownToggleBtnColor = null;
     let dropdownToggleLabelElm = null;
 
     const dropdownMenuElems = this.availableGrants.map((opt) => {
@@ -143,10 +144,15 @@ class GrantSelector extends React.Component {
         ? opt.reselectLabel // when grantGroup is selected
         : opt.label;
 
-      const labelElm = <span><i className={`icon icon-fw ${opt.iconClass} ${opt.styleClass}`}></i> <span className={opt.styleClass}>{t(label)}</span></span>;
+      const labelElm = (
+        <span>
+          <i className={`icon icon-fw ${opt.iconClass}`}></i> {t(label)}
+        </span>
+      );
 
-      // set dropdownToggleLabelElm
+      // set dropdownToggleBtnColor, dropdownToggleLabelElm
       if (opt.grant === 1 || opt.grant === currentGrant) {
+        dropdownToggleBtnColor = opt.btnStyleClass;
         dropdownToggleLabelElm = labelElm;
       }
 
@@ -155,7 +161,7 @@ class GrantSelector extends React.Component {
 
     // add specified group option
     if (grantGroup != null) {
-      const labelElm = <span><i className="icon icon-fw icon-organization text-success"></i> <span className="text-success">{this.getGroupName()}</span></span>;
+      const labelElm = <span><i className="icon icon-fw icon-organization"></i> {this.getGroupName()}</span>;
 
       // set dropdownToggleLabelElm
       dropdownToggleLabelElm = labelElm;
@@ -166,7 +172,7 @@ class GrantSelector extends React.Component {
     return (
       <div className="form-group grw-grant-selector mb-0">
         <UncontrolledDropdown direction="up" size="sm">
-          <DropdownToggle color="light" caret className="d-flex justify-content-between align-items-center" disabled={this.props.disabled}>
+          <DropdownToggle color={dropdownToggleBtnColor} caret className="d-flex justify-content-between align-items-center" disabled={this.props.disabled}>
             {dropdownToggleLabelElm}
           </DropdownToggle>
           <DropdownMenu>
@@ -217,7 +223,7 @@ class GrantSelector extends React.Component {
         isOpen={this.state.isSelectGroupModalShown}
         toggle={this.hideSelectGroupModal}
       >
-        <ModalHeader tag="h4" toggle={this.hideSelectGroupModal} className="bg-info text-light">
+        <ModalHeader tag="h4" toggle={this.hideSelectGroupModal} className="bg-purple text-light">
           Select a Group
         </ModalHeader>
         <ModalBody>

src/client/styles/agile-admin/inverse/variables.scss

@@ -1,78 +0,0 @@
-// Variables
-
-// @import 'https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900';
-
-// $basefont1:'Rubik', sans-serif;
-// $basefont2:'Rubik', sans-serif;
-// $basefont1: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
-// $basefont2: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
-
-/* GROWI Color */
-// $growi-green: #74bc46;
-// $growi-blue: #175fa5;
-
-/*bootstrap Color*/
-// $danger: #ff0a54 !default;
-// $success: #00bb83 !default;
-// $warning: #ffa32b !default;
-// $primary: $growi-blue !default;
-// $info: #009fbb !default;
-// $muted: #98a6ad !default;
-// $dark: #3e4d6c !default;
-// $inverse: #3e4d6c !default;
-// $light: #e4e7ea !default;
-// $extralight: #f7fafc !default;
-
-/*Normal Color*/
-// $white: #ffffff !default;
-// $red: #ff0000 !default;
-// $purple: #7b00ce !default;
-// $blue: #0d00c5 !default;
-// $yellow: #cccf0e !default;
-// $border: #f0f0f0 !default;
-// $megna: #00b5c2 !default;
-
-/*Theme Colors*/
-// $topbar: #3c4451 !default;
-// $sidebar: #4f5467 !default;
-// $bodycolor: #fff !default;
-// $headingtext: #2b2b2b !default;
-// $bodytext: #686868 !default;
-// $linktext: $inverse !default;
-// $linktext-hover: lighten($inverse, 20%) !default;
-// $sidebar-text: #54667a !default;
-// $themecolor: #ff6849 !default;
-// $dark-themecolor: #4f5467 !default;
-
-// $rgt: right !default;
-// $lft: left !default;
-
-// $dark-text: #848a96 !default;
-// $navbar-border: #ccc !default;
-// $active-navbar-border: lighten($navbar-border, 10%) !default;
-// $btn-default-bgcolor: darken(#fff, 10%) !default;
-// $color-inline-code: #c7254e !default;
-// $bgcolor-inline-code: #f9f2f4 !default;
-
-/*Border radius*/
-// $radius: 0 !default;
-
-/*Preloader*/
-/*
-.preloader{
-    width: 100%;
-    height: 100%;
-    top:0px;
-    position: fixed;
-    z-index: 99999;
-    background: #fff;
-    .cssload-speeding-wheel{
-        position: absolute;
-        top: "calc(50% - 3.5px)";
-        left: "calc(50% - 3.5px)";
-    }
-}
-*/
-
-/*Font weight*/
-// $font-bold: 700 !default;

src/client/styles/scss/_editor-attachment.scss

@@ -108,7 +108,8 @@
     border: none;
     border-top: 1px dotted #ccc;
     border-bottom: none;
-    border-radius: 0;
+    // TODO: remove or set value for GW-2531
+    // border-radius: 0;
 
     &:active {
       box-shadow: none;

src/client/styles/scss/_hljs.scss

@@ -2,7 +2,8 @@ pre.hljs {
   position: relative;
 
   // override Highlight Js Style Border
-  border-radius: 3px;
+  border: 1px solid $gray-500;
+  border-radius: $border-radius;
   &.hljs-no-border {
     border: none;
   }

src/client/styles/scss/_layout.scss

@@ -1,5 +1,3 @@
-@import 'layout_variable';
-
 // FIXME: replace with mt-2 or mt-3
 .grw-mt-10px {
   margin-top: 10px !important;
@@ -29,7 +27,7 @@
 
 .grw-modal-head {
   font-size: 1em;
-  border-bottom: 1px solid $grw-line-gray;
+  border-bottom: 1px solid $gray-500;
 }
 
 .main {
@@ -47,7 +45,7 @@
   text-align: center;
   border: solid 1px #ccc;
   border-right: none;
-  border-radius: 5px 0 0 5px;
+  // border-radius: 5px 0 0 5px;
   transition: 0.3s ease;
 
   &:hover {
@@ -114,7 +112,7 @@
       margin-bottom: 20px;
       font-size: 0.9em;
       border: solid 1px #aaa;
-      border-radius: 5px;
+      // border-radius: 5px;
 
       .revision-toc-head {
         display: inline-block;

src/client/styles/scss/_layout_growi.scss

@@ -1,4 +1,3 @@
-@import 'layout_variable';
 @import 'layout';
 
 .growi {
@@ -10,7 +9,7 @@
     // adjusting position with negative margin
     height: $grw-nav-main-tab-height;
     line-height: 1.25;
-    border-bottom: 1px solid $grw-line-gray;
+    border-bottom: 1px solid transparent;
 
     .liker-user-count,
     .seen-user-count {

src/client/styles/scss/_layout_variable.scss

@@ -1,8 +0,0 @@
-/* color variables */
-
-/* blue */
-$grw-alice-blue: aliceblue;
-
-/* gray */
-$grw-line-gray: #dee2e6;
-$grw-line-light-gray: #ddd;

src/client/styles/scss/_mixins.scss

@@ -1,5 +1,3 @@
-@import 'layout_variable';
-
 @mixin variable-font-size($basesize) {
   font-size: $basesize * 0.6;
 

src/client/styles/scss/_on-edit.scss

@@ -1,5 +1,4 @@
 @import 'editor-overlay';
-@import 'layout_variable';
 
 body:not(.on-edit) {
   // hide .page-editor-footer

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -11,7 +11,7 @@ $success: #00bb83 !default;
 $warning: #ffa32b !default;
 $danger: #ff0a54 !default;
 $light: #e4e7ea !default;
-$dark: #3e4d6c !default;
+$dark: #343a40 !default;
 
 //== Typography
 //
@@ -26,33 +26,25 @@ $line-height-base: 1.42857;
 
 //== Components
 //
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-$border-radius-base: 0;
-$border-radius-large: 0;
-$border-radius-small: 0;
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-$btn-border-radius: 0;
-$btn-border-radius-lg: 0;
-$btn-border-radius-sm: 0;
-
+$border-radius:               .15rem;
+$border-radius-sm:            .1rem;
+$border-radius-lg:            .25rem;
+$border-radius-xl:            .35rem;
 
 
 //== Forms
 //
-$input-border-radius: 0;
-$input-border-radius-lg: 0;
-$input-border-radius-sm: 0;
+// TODO: remove or set value for GW-2531
+// $input-border-radius: 0;
+// $input-border-radius-lg: 0;
+// $input-border-radius-sm: 0;
 
 //== Navs
 
 $nav-link-padding-y: 0.75rem;
 $nav-link-padding-x: 1rem;
-$nav-tabs-border-radius: 0;
+// TODO: remove or set value for GW-2531
+// $nav-tabs-border-radius: 0;
 
 //== Navbar
 $navbar-padding-y: 0;
@@ -60,29 +52,38 @@ $navbar-brand-padding-y: 0;
 $navbar-nav-link-padding-x: 1rem;
 
 //== Dropdowns
-$dropdown-border-radius: 0;
+// TODO: remove or set value for GW-2531
+// $dropdown-border-radius: 0;
 
 //== card
-$card-border-radius: 0;
+// TODO: remove or set value for GW-2531
+// $card-border-radius: 0;
 $card-spacer-y: 7px;
 $card-spacer-x: 15px;
 
 //== Modals
 $modal-content-border-width: 0;
-$modal-content-border-radius: 0;
+// TODO: remove or set value for GW-2531
+// $modal-content-border-radius: 0;
 $modal-header-padding-y: 0.75rem;
 $modal-header-padding-x: 1rem;
 
 //== Alerts
-$alert-border-radius: 0;
+// TODO: remove or set value for GW-2531
+// $alert-border-radius: 0;
 
 //== Progress bar
 $progress-height: 4px;
-$progress-border-radius: 0;
+// TODO: remove or set value for GW-2531
+// $progress-border-radius: 0;
 $progress-bg: #f0f0f0;
 $progress-box-shadow: none;
 
+//== Code
+$pre-color: dummyinvalildcolor; // disable pre color specification with invalid value
+
 //== Custom Checkbox
-$custom-checkbox-indicator-border-radius: 0px;
+// TODO: remove or set value for GW-2531
+// $custom-checkbox-indicator-border-radius: 0px;
 $custom-control-indicator-focus-box-shadow: none;
 $custom-control-indicator-size: 1.2rem;

src/client/styles/scss/_override-bootstrap.scss

@@ -39,11 +39,6 @@
     line-height: 14px;
   }
 
-  code {
-    padding: 2px 4px;
-    font-size: 90%;
-  }
-
   // Navs
   .nav-tabs {
     .nav-item {
@@ -65,24 +60,22 @@
   // card (substitute panel of bootstrap3)
   .card {
     margin-bottom: 20px;
-    border-radius: $card-border-radius;
   }
 
   .card-header {
     font-weight: 700;
     text-transform: none;
-    border-radius: $card-border-radius;
   }
 
   .card-header:first-child {
-    border-radius: $card-border-radius;
   }
 
   // Well (substitute Well of bootstrap3)
   .card.well {
     min-height: 20px;
     padding: $card-spacer-y $card-spacer-x;
-    border-radius: 3px;
+    // TODO: remove or set value for GW-2531
+    // border-radius: 3px;
   }
 
   // Dropdowns

src/client/styles/scss/_search.scss

@@ -1,5 +1,3 @@
-@import 'layout_variable';
-
 .search-listpage-icon {
   font-size: 16px;
   color: #999;
@@ -137,7 +135,8 @@
       > li {
         > a {
           padding: 2px 8px;
-          border-radius: 0;
+          // TODO: remove or set value for GW-2531
+          // border-radius: 0;
 
           &:hover {
             color: inherit;
@@ -187,7 +186,7 @@
         padding: 16px;
         font-size: 13px;
         border: solid 1px #ccc;
-        border-radius: 3px;
+        // border-radius: 3px;
       }
     }
   }
@@ -212,9 +211,4 @@
   caption {
     display: table-header-group;
   }
-
-  code {
-    padding: 0.25em;
-    background: $grw-alice-blue;
-  }
 }

src/client/styles/scss/_vendor-presentation.scss

@@ -0,0 +1,13 @@
+// import bootstrap configurations
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
+
+@import '~reveal.js/css/reveal.css';
+@import '~reveal.js/css/theme/black.css';
+
+// hljs
+.reveal {
+  @import 'hljs';
+}

src/client/styles/scss/_wiki.scss

@@ -1,5 +1,3 @@
-@import 'layout_variable';
-
 div.body {
   padding: 10px;
 }
@@ -36,7 +34,7 @@ div.body {
     margin-top: 2em;
     font-size: 1.8em;
     line-height: 1.1em;
-    border-bottom: solid 1px $grw-line-light-gray;
+    border-bottom: solid 1px transparent;
   }
   h2 {
     padding-bottom: 0.5em;
@@ -127,15 +125,6 @@ div.body {
     }
   }
 
-  pre {
-    white-space: pre-line;
-  }
-
-  // only inline code blocks
-  p code {
-    font-family: $font-family-monospace-not-strictly;
-  }
-
   .page-template-builder {
     position: relative;
 

src/client/styles/scss/atoms/_code.scss

@@ -0,0 +1,11 @@
+/*
+ * style of inline-code
+ */
+:not(pre) {
+  > code {
+    padding: 2px 4px;
+    font-family: $font-family-monospace-not-strictly;
+    border: 1px solid;
+    border-radius: $border-radius;
+  }
+}

src/client/styles/scss/atoms/_pre.scss

@@ -0,0 +1,4 @@
+pre {
+  padding: 0.5em;
+  border-radius: $border-radius;
+}

src/client/styles/scss/style-app.scss

@@ -1,5 +1,4 @@
 // import variables
-@import '../agile-admin/inverse/variables';
 @import 'variables';
 
 @import 'mixins';
@@ -16,7 +15,9 @@
 
 // atoms
 @import 'atoms/buttons';
+@import 'atoms/code';
 @import 'atoms/nav';
+@import 'atoms/pre';
 @import 'atoms/spinners';
 @import 'atoms/custom_control';
 
@@ -39,7 +40,6 @@
 @import 'layout';
 @import 'layout_growi';
 @import 'layout_kibela';
-@import 'layout_variable';
 @import 'login';
 @import 'me';
 @import 'navbar';

src/client/styles/scss/style-presentation.scss

@@ -1,13 +1,10 @@
-// import Growi variable
+// import variable
 @import 'variables';
 
-@import '~reveal.js/css/reveal.css';
-@import '~reveal.js/css/theme/black.css';
+@import 'mixins';
+@import 'override-bootstrap-variables';
 
-// hljs
-.reveal {
-  @import 'hljs';
-}
+@import 'vendor-presentation';
 
 .reveal {
   font-size: 32px;

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

@@ -39,20 +39,6 @@ textarea.form-control {
   }
 }
 
-/*
- * Panel
- */
-.panel {
-  &,
-  &.panel-white,
-  &.panel-default {
-    .panel-heading,
-    .panel-body {
-      color: theme-color('light');
-    }
-  }
-}
-
 /*
  * Table
  */
@@ -138,18 +124,6 @@ ul.pagination {
   background-color: $bgcolor-subnabvar;
 }
 
-/*
- * GROWI search page
- */
-.search-page {
-  .input-group-btn {
-    .btn-light {
-      // FIXME:
-      // border: 1px solid darken($border, 30%); // fit to input.form-control
-    }
-  }
-}
-
 /*
  * GROWI on-edit
  */
@@ -161,12 +135,10 @@ ul.pagination {
 
 .wiki {
   h1 {
-    // FIXME:
-    // border-color: lighten($border, 10%);
+    border-color: lighten($border-color-theme, 10%);
   }
   h2 {
-    // FIXME:
-    // border-color: $border;
+    border-color: $border-color-theme;
   }
 }
 

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

@@ -123,6 +123,9 @@ body.kibela {
   }
 
   /* Modal */
+  .modal-title {
+    color: #ffffff; // override header colors
+  }
   .modal-content {
     background-color: $themelight;
   }

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

@@ -16,6 +16,10 @@ $bgcolor-sidebar-list-group: $bgcolor-list !default;
 $bgcolor-inline-code: #f0f0f0 !default;
 $color-inline-code: #c7254e !default;
 $bordercolor-inline-code: #ccc8c8 !default;
+$bordercolor-nav-tabs: #dee2e6 !default;
+$bordercolor-nav-tabs-hover: #e9ecef #e9ecef $bordercolor-nav-tabs !default;
+$color-nav-tabs-link-active: #495057 !default;
+$bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -23,17 +27,41 @@ $body-color: $color-global;
 $link-color: $color-link;
 $link-hover-color: $color-link-hover;
 $input-focus-color: $color-global;
+$nav-tabs-border-color: $bordercolor-nav-tabs;
+$nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
+$nav-tabs-link-active-color: $color-nav-tabs-link-active;
+$nav-tabs-link-active-bg: $bgcolor-global;
+$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 @import '../mixins';
-@import 'mixins-for-tables';
 @import 'mixins/list-group';
+@import 'mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
+@import 'reboot-bootstrap-tables';
+@import 'reboot-bootstrap-nav';
 @import 'reboot-toastr-colors';
 
+:not(pre) {
+  > code {
+    color: $color-inline-code;
+    background-color: $bgcolor-inline-code;
+    border-color: $bordercolor-inline-code;
+  }
+}
+
+pre:not(.hljs):not(.CodeMirror-line) {
+  background-color: $bgcolor-inline-code;
+  border-color: $bordercolor-inline-code;
+}
+
+//
+//== Apply to Bootstrap Elements
+//
+
 // Link buttons
 .btn-link {
   color: $link-color;
@@ -179,16 +207,6 @@ $input-focus-color: $color-global;
   fill: $color-editor-icons;
 }
 
-/*
- * code color of inline-code
- */
-:not(.hljs) > code:not(.hljs) {
-  color: $color-inline-code;
-  background-color: $bgcolor-inline-code;
-  border: solid 1px $bordercolor-inline-code;
-  border-radius: 0.35em;
-}
-
 /*
  * Modal
  */
@@ -213,6 +231,10 @@ $input-focus-color: $color-global;
   }
 }
 
+.liker-and-seenusers {
+  border-bottom-color: $bordercolor-nav-tabs;
+}
+
 /*
  * cards
  */

src/client/styles/scss/theme/_mixins-for-tables.scss

@@ -1,34 +0,0 @@
-//== Table
-$table-variants: (
-  'light': $light,
-  'dark': $dark,
-);
-
-// remove when master version is released
-// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
-@mixin table-variant($state, $background) {
-  .table-#{$state} {
-    $table-hover-bg-factor: 0.075 !default;
-    $table-striped-bg-factor: 0.05 !default;
-    $body-bg: $white !default;
-    $table-active-bg-factor: 0.1 !default;
-    $table-border-factor: 0.1 !default;
-
-    $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
-    $color: gray;
-    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-
-    --bs-table-bg: #{$background};
-    --bs-table-striped-bg: #{$striped-bg};
-    --bs-table-striped-color: #{color-contrast($striped-bg)};
-    --bs-table-active-bg: #{$active-bg};
-    --bs-table-active-color: #{color-contrast($active-bg)};
-    --bs-table-hover-bg: #{$hover-bg};
-    --bs-table-hover-color: #{color-contrast($hover-bg)};
-
-    color: $color;
-    border-color: mix($color, $background, percentage($table-border-factor));
-  }
-}

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

@@ -25,9 +25,7 @@ body {
   background-color: $body-bg; // 2
 }
 
-//
 // Links
-//
 
 a {
   color: $link-color;

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

@@ -0,0 +1,41 @@
+//
+//
+// Apply partially
+//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_nav.scss
+//
+//
+
+//
+// Tabs
+//
+
+.nav-tabs {
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+  .nav-link {
+    border: $nav-tabs-border-width solid transparent;
+    @include border-top-radius($nav-tabs-border-radius);
+
+    @include hover-focus() {
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+
+    &.disabled {
+      color: $nav-link-disabled-color;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-tabs-link-active-color;
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color;
+  }
+
+  .dropdown-menu {
+    // Remove the top rounded corners here since there is a hard edge above the menu
+    @include border-top-radius(0);
+  }
+}

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

@@ -0,0 +1,36 @@
+//
+//
+// Apply partially
+//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_tables.scss
+//
+//
+
+.table-dark {
+  color: $table-dark-color;
+  background-color: $table-dark-bg;
+
+  th,
+  td,
+  thead th {
+    border-color: $table-dark-border-color;
+  }
+
+  &.table-bordered {
+    border: 0;
+  }
+
+  &.table-striped {
+    tbody tr:nth-of-type(#{$table-striped-order}) {
+      background-color: $table-dark-accent-bg;
+    }
+  }
+
+  &.table-hover {
+    tbody tr {
+      @include hover() {
+        color: $table-dark-hover-color;
+        background-color: $table-dark-hover-bg;
+      }
+    }
+  }
+}

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

@@ -4,6 +4,16 @@ $theme-colors: map-merge($theme-colors, $colors);
   @include bg-variant('.bg-#{$color}', $value);
 }
 
+@each $color, $value in $theme-colors {
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant('.text-#{$color}', $value, true);
+}
+
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
@@ -65,7 +75,3 @@ $theme-colors: map-merge($theme-colors, $colors);
     background: $color;
   }
 }
-
-@each $color, $value in $table-variants {
-  @include table-variant($color, $value);
-}

src/client/styles/scss/theme/christmas.scss

@@ -12,18 +12,17 @@
 // $danger: #;
 // $light: #;
 // $dark: #;
+
 $themecolor: #b3000c;
 $themelight: white;
-
-$subthemecolor: #017e20;
+$subthemecolor: #30882c;
 $bgcolor-global: $themelight;
-$linktext: lighten(#0d5901, 5%);
-$linktext-hover: lighten($linktext, 12%);
+$linktext: $subthemecolor;
+$linktext-hover: lighten($subthemecolor, 15%);
 $sidebar-text: #ffffff;
 $fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%);
-$color-link-wiki: lighten($themecolor, 5%);
+$color-link-wiki: lighten($subthemecolor, 5%);
 $color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$active-nav-tabs-bgcolor: white;
 
 .growi:not(.login-page) {
   // add background-image
@@ -40,15 +39,16 @@ $active-nav-tabs-bgcolor: white;
 //
 html[light],
 html[dark] {
+  $primary: #d3c665;
   // Background colors
   $bgcolor-card: #f5f5f5;
   $bgcolor-inline-code: #f0f0f0; //optional
 
   // Font colors
-  $color-global: $subthemecolor;
-  $color-reversal: #eeeeee;
-  $color-link: lighten($color-global, 2%);
-  $color-link-hover: lighten($color-link, 20%);
+  $color-global: #112744;
+  $color-reversal: #eee;
+  $color-link: $subthemecolor;
+  $color-link-hover: lighten($color-link, 10%);
   $color-link-nabvar: $color-reversal;
   $color-inline-code: #c7254e; // optional
 
@@ -61,16 +61,27 @@ html[dark] {
 
   // Navbar
   $bgcolor-navbar: $themecolor;
+  $bgcolor-search-top-dropdown: $primary;
   $border-color-navbar-gradient-left: #545fff;
   $border-color-navbar-gradient-right: #00a6e5;
+  $border-image-navbar: linear-gradient(to right, #6458bc 33%, #5cb4ff 66%, #85d800 100%);
 
   // Logo colors
   $bgcolor-logo: $themecolor;
 
   // Sidebar
-  $bgcolor-sidebar: $themecolor;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($themecolor, 10%);
+  $bgcolor-sidebar: $subthemecolor;
+  $bgcolor-sidebar-nav-item-active: rgba(#000000, 0.37); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+  // Sidebar resize button
+  $color-resize-button: $color-reversal;
+  $bgcolor-resize-button: $primary;
+  $color-resize-button-hover: $color-reversal;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  $color-sidebar-context: $linktext;
+  $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -80,9 +91,9 @@ html[dark] {
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
-  $bgcolor-dropdown-link-active: $growi-blue;
-  $color-dropdown-link-active: $color-reversal;
-  $color-dropdown-link-hover: $color-global;
+  $bgcolor-dropdown-link-active: $primary;
+  $color-dropdown-link-active: $color-global;
+  $color-dropdown-link-hover: $color-reversal;
 
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
@@ -124,19 +135,6 @@ html[dark] {
     background-size: cover;
   }
 
-  /*
-  * Tabs
-  */
-  body:not(.on-edit) .nav.nav-tabs {
-    > li.active > a {
-      background: linear-gradient(
-        rgba($active-nav-tabs-bgcolor, 0) 0%,
-        rgba($active-nav-tabs-bgcolor, 0) 90%,
-        $active-nav-tabs-bgcolor 100%
-      ); // overwrite only the bottom pixel
-    }
-  }
-
   // login page
   .nologin {
     .input-group {
@@ -193,28 +191,5 @@ html[dark] {
 
   .grw-navbar {
     background-image: url('/images/themes/christmas/christmas-navbar.jpg');
-    border-bottom: 4px solid $subthemecolor;
-  }
-
-  .grw-subnav {
-    background-color: #ffffff;
-  }
-
-  .nav-tabs {
-    border-bottom-color: $themecolor;
-  }
-
-  .nav-link {
-    border-color: $themecolor;
-  }
-
-  .nav-tabs .nav-link.active {
-    background: none;
-    border-color: $themecolor;
-  }
-
-  .search-top .dropdown-toggle {
-    color: black;
-    background-color: hsla(0, 0%, 100%, 0.8);
   }
 }

src/client/styles/scss/theme/default.scss

@@ -67,11 +67,17 @@ html[light] {
   // Subnavigation
   // $bgcolor-subnabvar: #fafafa; // optional
 
+  // Tabs
+  // $bordercolor-nav-tabs: #; // optional
+  // $color-nav-tabs-link-active: #; //optional
+  // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
+  // $bordercolor-nav-tabs-active: # # $bgcolor-global; // optional
+
   // Icon colors
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;@`
+  $border-color-theme: #ccc;
   $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
@@ -147,12 +153,18 @@ html[dark] {
   // Subnavigation
   $bgcolor-subnabvar: lighten($bgcolor-global, 4%); // optional
 
+  // Tabs
+  $bordercolor-nav-tabs: #444; // optional
+  // $color-nav-tabs-link-active: #; //optional
+  $bordercolor-nav-tabs-hover: #666 #666 $bordercolor-nav-tabs; // optional
+  // $bordercolor-nav-tabs-active: # # $bgcolor-global; // optional
+
   // Icon colors
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: black; // former: `$navbar-border: #ccc;`
-  $bordercolor-inline-code: #4d4d4d; // optional
+  $border-color-theme: #444;
+  $bordercolor-inline-code: #666; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

src/client/styles/scss/theme/mixins/_tables.scss

@@ -0,0 +1,34 @@
+//== Table
+// $table-variants: (
+//   'light': $light,
+//   'dark': $dark,
+// );
+
+// remove when master version is released
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
+// @mixin table-variant($state, $background) {
+//   .table-#{$state} {
+//     $table-hover-bg-factor: 0.075 !default;
+//     $table-striped-bg-factor: 0.05 !default;
+//     $body-bg: $white !default;
+//     $table-active-bg-factor: 0.1 !default;
+//     $table-border-factor: 0.1 !default;
+
+//     $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
+//     $color: gray;
+//     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+//     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+//     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+//     --bs-table-bg: #{$background};
+//     --bs-table-striped-bg: #{$striped-bg};
+//     --bs-table-striped-color: #{color-contrast($striped-bg)};
+//     --bs-table-active-bg: #{$active-bg};
+//     --bs-table-active-color: #{color-contrast($active-bg)};
+//     --bs-table-hover-bg: #{$hover-bg};
+//     --bs-table-hover-color: #{color-contrast($hover-bg)};
+
+//     color: $color;
+//     border-color: mix($color, $background, percentage($table-border-factor));
+//   }
+// }

src/server/views/admin/customize.html

@@ -19,6 +19,9 @@
 {% block content_main %}
 <div class="content-main admin-customize row">
   {% parent %}
+  <div id="grw-hljs-container-for-demo">
+    {{ cdnHighlightJsStyleTag(getConfig('crowi', 'customize:highlightJsStyle')) }}
+  </div>
   <div class="col-lg-9" id="admin-customize"></div>
 </div>
 {% endblock content_main %}

src/server/views/modal/shortcuts.html

@@ -2,7 +2,7 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
-      <div class="modal-header text-light">
+      <div class="modal-header bg-primary text-light">
         <div class="modal-title">{{ t('Shortcuts') }}</div>
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       </div>

src/server/views/widget/page_alerts.html

@@ -29,7 +29,7 @@
     {% endif %}
 
     {% if redirectFrom or req.query.renamed or req.query.redirectFrom %}
-    <div class="alert alert-info d-edit-none py-3 px-4 d-flex align-items-center justify-content-between">
+    <div class="alert alert-pink d-edit-none py-3 px-4 d-flex align-items-center justify-content-between">
       <span>
         {% set fromPath = req.query.renamed or req.query.redirectFrom %}
         {% if redirectFrom or req.query.redirectFrom %}