Merge pull request #1384 from weseek/adjust-layout-customize-page

Adjust layout customize page

src/client/js/components/Admin/Customize/Customize.jsx

@@ -21,27 +21,27 @@ class Customize extends React.Component {
 
     return (
       <Fragment>
-        <div className="my-3">
+        <div className="mb-5">
           <CustomizeLayoutSetting />
         </div>
-        <div className="my-3">
+        <div className="mb-5">
           <CustomizeBehaviorSetting />
         </div>
-        <div className="my-3">
+        <div className="mb-5">
           <CustomizeFunctionSetting />
         </div>
-        <div className="my-3">
+        <div className="mb-5">
           <CustomizeHighlightSetting />
         </div>
         <legend>{t('customize_page.custom_title')}</legend>
         {/* カスタムタイトルフォームの react componentをここで呼ぶ(GW-278) */}
-        <div className="my-3">
+        <div className="mb-5">
           <CustomizeHeaderSetting />
         </div>
-        <div className="my-3">
+        <div className="mb-5">
           <CustomizeCssSetting />
         </div>
-        <div className="my-3">
+        <div className="mb-5">
           <CustomizeScriptSetting />
         </div>
       </Fragment>

src/client/js/components/Admin/Customize/CustomizeBehaviorSetting.jsx

@@ -42,7 +42,7 @@ class CustomizeBehaviorSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <h2>{t('customize_page.Behavior')}</h2>
+        <h2 className="admin-setting-header">{t('customize_page.Behavior')}</h2>
         <div className="row">
           <div className="col-xs-6">
             <CustomizeBehaviorOption

src/client/js/components/Admin/Customize/CustomizeCssSetting.jsx

@@ -50,7 +50,7 @@ class CustomizeCssSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <h2>{t('customize_page.Custom CSS')}</h2>
+        <h2 className="admin-setting-header">{t('customize_page.Custom CSS')}</h2>
         <p className="well">
           { t('customize_page.write_CSS') }<br />
           { t('customize_page.reflect_change') }

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -41,7 +41,7 @@ class CustomizeBehaviorSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <h2>{t('customize_page.Function')}</h2>
+        <h2 className="admin-setting-header">{t('customize_page.Function')}</h2>
         <p className="well">{ t('customize_page.function_choose') }</p>
 
         <div className="form-group row">

src/client/js/components/Admin/Customize/CustomizeHeaderSetting.jsx

@@ -50,7 +50,7 @@ class CustomizeHeaderSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <h2>{t('customize_page.custom_header')}</h2>
+        <h2 className="admin-setting-header">{t('customize_page.custom_header')}</h2>
 
         <p
           className="well"

src/client/js/components/Admin/Customize/CustomizeHighlightSetting.jsx

@@ -72,7 +72,7 @@ class CustomizeHighlightSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <h2>{t('customize_page.Code Highlight')}</h2>
+        <h2 className="admin-setting-header">{t('customize_page.Code Highlight')}</h2>
 
         <div className="form-group row">
           <div className="col-xs-offset-3 col-xs-6 text-left">

src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx

@@ -54,9 +54,9 @@ class CustomizeLayoutSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <h2>{t('customize_page.Layout')}</h2>
+        <h2 className="admin-setting-header">{t('customize_page.Layout')}</h2>
         <CustomizeLayoutOptions />
-        <h2>{ t('customize_page.Theme') }</h2>
+        <h2 className="admin-setting-header">{ t('customize_page.Theme') }</h2>
         {this.renderDevAlert()}
         <CustomizeThemeOptions />
         <AdminUpdateButtonRow onClick={this.onClickSubmit} />

src/client/js/components/Admin/Customize/CustomizeScriptSetting.jsx

@@ -58,7 +58,7 @@ class CustomizeScriptSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <h2>{t('customize_page.Custom script')}</h2>
+        <h2 className="admin-setting-header">{t('customize_page.Custom script')}</h2>
         <p className="well">
           { t('customize_page.write_java') }<br />
           { t('customize_page.reflect_change') }

src/client/styles/scss/_admin.scss

@@ -29,6 +29,10 @@
     }
   }
 
+  .admin-setting-header {
+    border-bottom: 1px solid #dee2e6;
+  }
+
   .admin-security {
     .passport-logo {
       height: 32px;