organize HeaderSearchBox

src/client/js/components/HeaderSearchBox.jsx

@@ -61,14 +61,14 @@ class HeaderSearchBox extends React.Component {
 
     return (
       <div className="form-group">
-        <div className="input-group flex-nowrap">
-          <div className="dropdown my-auto">
-            <span className="btn-group-dropdown-scope d-block dropdown-toggle pl-3 pr-2" id="dbScope" data-toggle="dropdown">
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <button className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
               {scopeLabel}
-            </span>
-            <div className="dropdown-menu" aria-labelledby="dbScope">
-              <a className="dropdown-item" onClick={this.onClickAllPages}>All pages</a>
-              <a className="dropdown-item" onClick={this.onClickChildren}>{ t('header_search_box.item_label.This tree') }</a>
+            </button>
+            <div className="dropdown-menu">
+              <a className="dropdown-item" type="button" onClick={this.onClickAllPages}>All pages</a>
+              <a className="dropdown-item" type="button" onClick={this.onClickChildren}>{ t('header_search_box.item_label.This tree') }</a>
             </div>
           </div>
           <SearchForm
@@ -78,7 +78,7 @@ class HeaderSearchBox extends React.Component {
             onSubmit={this.search}
             placeholder="Search ..."
           />
-          <div className="btn-group-submit-search mr-2 my-1">
+          <div className="btn-group-submit-search">
             <span className="btn-link" onClick={this.search}>
               <i className="icon-magnifier"></i>
             </span>

src/client/styles/scss/_login.scss

@@ -139,7 +139,7 @@
   }
   .btn-login.fcbtn {
     .btn-label {
-      background-color: rgba($brand-danger, 0.4);
+      background-color: rgba($danger, 0.4);
     }
     &:after {
       background-color: #7e4153;
@@ -187,7 +187,7 @@
   }
   .btn-register.fcbtn {
     .btn-label {
-      background-color: rgba($brand-success, 0.4);
+      background-color: rgba($success, 0.4);
     }
     .btn-label-text {
       display: inline-block;

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

@@ -13,13 +13,14 @@ $gray-light:             lighten($gray-base, 46.7%); // #777
 $gray-lighter:           lighten($gray-base, 93.5%); // #eee
 $gray-extralight:        #fafafa; // Growi original
 
-$brand-primary:         $primary;
-$brand-success:         $success;
-$brand-info:            $info;
-$brand-warning:         $warning;
-$brand-danger:          $danger;
-
-
+//** override bootstrap theme colors
+$theme-colors: (
+  'primary': #337ab7,
+  'success': #2cce90,
+  'info': #31708f,
+  'warning': #8a6d3b,
+  'danger': #ff0a54
+);
 
 //== Typography
 //
@@ -35,40 +36,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;
+$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:     0px;
-$btn-border-radius-lg:  0px;
-$btn-border-radius-sm:  0px;
+$btn-border-radius:       0;
+$btn-border-radius-lg:    0;
+$btn-border-radius-sm:    0;
 
 
-//== Forms
-//
-//##
+// Forms
 
-//** `<input>` background color
-$input-bg:                       $bodycolor;
-//** `<input disabled>` background color
-$input-bg-disabled:              $btn-default-bgcolor;
-
-//** `<input>` border color
-$input-border:                   $border;
-
-//** override bootstrap theme colors
-$theme-colors: (
-  'primary': #337ab7,
-  'success': #2cce90,
-  'info': #31708f,
-  'warning': #8a6d3b,
-  'danger': #ff0a54
-);
+$input-border-radius:     0;
+$input-border-radius-lg:  0;
+$input-border-radius-sm:  0;
 
 
 // Navs

src/client/styles/scss/_search.scss

@@ -61,12 +61,9 @@
     right: 26px;
   }
 
-  .btn-group-dropdown-scope .dropdown-toggle {
+  .dropdown-toggle {
     min-width: 95px;
-    height: 30px;
-    padding-top: 4px;
-    padding-right: 4px;
-    padding-bottom: 4px;
+    padding-left: 1.5rem;
     border-top-left-radius: 40px;
     border-bottom-left-radius: 40px;
   }
@@ -74,8 +71,6 @@
   // using react-bootstrap-typeahead
   // see: https://github.com/ericgio/react-bootstrap-typeahead
   .rbt-input.form-control {
-    height: 30px;
-    border: none;
     border-top-right-radius: 40px;
     border-bottom-right-radius: 40px;
 
@@ -89,11 +84,13 @@
     top: 0;
     right: 0;
 
-    .btn {
-      padding: 4px 10px;
-    }
-
     z-index: 3;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
   }
 }
 
@@ -123,21 +120,6 @@
   }
 }
 
-@mixin search-typeahead-rbtmenu-mt($margin-top) {
-  .search-typeahead .rbt-menu {
-    margin-top: $margin-top; // DIRTY HACK
-    //                            note: 'transform: translate3d(0px, XXpx, 0px)' calculation has failed
-    //                                  since upgrade react-bootstrap-typeahead to v3.3.2 -- 2019.02.05 Yuki Takei
-  }
-}
-
-#search-top,
-#renamePage,
-#duplicatePage,
-.search-page-input {
-  @include search-typeahead-rbtmenu-mt(36px);
-}
-
 .search-result {
   .search-result-list {
     nav {

src/client/styles/scss/_wiki.scss

@@ -139,7 +139,7 @@ div.body {
   }
 
   .highlighted {
-    background-color: $brand-warning;
+    background-color: $warning;
   }
 
   .revision-head {