Merge pull request #2272 from weseek/support/remove-m-x-x-class

Support/remove m x x class

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -75,7 +75,7 @@ class XssForm extends React.Component {
               />
               <label className="custom-control-label w-100" htmlFor="xssOption2">
                 <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
-                <div className="m-t-15">
+                <div className="mt-4">
                   <div className="d-flex justify-content-between">
                     {t('admin:markdown_setting.xss_options.tag_names')}
                   </div>
@@ -88,7 +88,7 @@ class XssForm extends React.Component {
                     defaultValue={tags}
                   />
                 </div>
-                <div className="m-t-15">
+                <div className="mt-4">
                   <div className="d-flex justify-content-between">
                     {t('admin:markdown_setting.xss_options.tag_attributes')}
                   </div>

src/client/js/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -111,7 +111,7 @@ class ManageGlobalNotification extends React.Component {
 
 
         <div className="row">
-          <div className="m-t-20 form-box col-md-12">
+          <div className="form-box col-md-12">
             <h2 className="border-bottom mb-5">{t('notification_setting.notification_detail')}</h2>
           </div>
 

src/client/js/components/Admin/Security/SecurityManagement.jsx

@@ -58,7 +58,7 @@ class SecurityManagement extends React.Component {
           </div>
         </div>
 
-        <div className="auth-mechanism-configurations m-t-10">
+        <div className="auth-mechanism-configurations">
           <h2 className="border-bottom">{t('security_setting.Authentication mechanism settings')}</h2>
           <Nav tabs>
             <NavItem>

src/client/js/components/Me/PasswordSettings.jsx

@@ -67,7 +67,7 @@ class PasswordSettings extends React.Component {
 
     return (
       <React.Fragment>
-        {(!personalContainer.state.isPasswordSet) && <div className="alert alert-warning m-t-10">{ t('Password is not set') }</div>}
+        {(!personalContainer.state.isPasswordSet) && <div className="alert alert-warning">{ t('Password is not set') }</div>}
         <div className="container-fluid my-4">
           {(personalContainer.state.isPasswordSet)
             ? <h2 className="border-bottom">{t('personal_settings.update_password')}</h2>

src/client/js/components/Me/PersonalSettings.jsx

@@ -15,38 +15,36 @@ class PersonalSettings extends React.Component {
 
     return (
       <Fragment>
-        <div className="m-t-10">
-          <div className="personal-settings">
-            <ul className="nav nav-tabs" role="tablist">
-              <li className="nav-item">
-                <a className="nav-link active" href="#user-settings" data-toggle="tab" role="tab"><i className="icon-user"></i> { t('User Information') }</a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link" href="#external-accounts" data-toggle="tab" role="tab">
-                  <i className="icon-share-alt mr-1"></i>
-                  { t('admin:user_management.external_accounts') }
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link" href="#password-settings" data-toggle="tab" role="tab"><i className="icon-lock"></i> { t('Password Settings') }</a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link" href="#apiToken" data-toggle="tab" role="tab"><i className="icon-paper-plane"></i> { t('API Settings') }</a>
-              </li>
-            </ul>
-            <div className="tab-content p-t-10">
-              <div id="user-settings" className="tab-pane active" role="tabpanel">
-                <UserSettings />
-              </div>
-              <div id="external-accounts" className="tab-pane" role="tabpanel">
-                <ExternalAccountLinkedMe />
-              </div>
-              <div id="password-settings" className="tab-pane" role="tabpanel">
-                <PasswordSettings />
-              </div>
-              <div id="apiToken" className="tab-pane" role="tabpanel">
-                <ApiSettings />
-              </div>
+        <div className="personal-settings">
+          <ul className="nav nav-tabs" role="tablist">
+            <li className="nav-item">
+              <a className="nav-link active" href="#user-settings" data-toggle="tab" role="tab"><i className="icon-user"></i> { t('User Information') }</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#external-accounts" data-toggle="tab" role="tab">
+                <i className="icon-share-alt mr-1"></i>
+                { t('admin:user_management.external_accounts') }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#password-settings" data-toggle="tab" role="tab"><i className="icon-lock"></i> { t('Password Settings') }</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#apiToken" data-toggle="tab" role="tab"><i className="icon-paper-plane"></i> { t('API Settings') }</a>
+            </li>
+          </ul>
+          <div className="tab-content p-t-10">
+            <div id="user-settings" className="tab-pane active" role="tabpanel">
+              <UserSettings />
+            </div>
+            <div id="external-accounts" className="tab-pane" role="tabpanel">
+              <ExternalAccountLinkedMe />
+            </div>
+            <div id="password-settings" className="tab-pane" role="tabpanel">
+              <PasswordSettings />
+            </div>
+            <div id="apiToken" className="tab-pane" role="tabpanel">
+              <ApiSettings />
             </div>
           </div>
         </div>

src/client/js/components/PageDeleteModal.jsx

@@ -125,7 +125,7 @@ const PageDeleteModal = (props) => {
       </ModalBody>
       <ModalFooter>
         <ApiErrorMessage errorCode={errorCode} errorMessage={errorMessage} linkPath={path} />
-        <button type="button" className={`m-l-10 btn btn-${deleteIconAndKey[deleteMode].color}`} onClick={deleteButtonHandler}>
+        <button type="button" className={`btn btn-${deleteIconAndKey[deleteMode].color}`} onClick={deleteButtonHandler}>
           <i className={`icon-${deleteIconAndKey[deleteMode].icon}`} aria-hidden="true"></i>
           { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
         </button>

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

@@ -27,7 +27,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container d-edit-none d-print-none">
+      <div class="mb-5 user-page-content-container d-edit-none d-print-none">
         {% include '../widget/user_page_content.html' %}
       </div>
 

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

@@ -25,7 +25,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container d-edit-none">
+      <div class="mb-5 user-page-content-container d-edit-none">
         {% include '../widget/user_page_content.html' %}
       </div>