AdminUX Patch and Admin Page

js/src/admin/components/AdminPage.js

@@ -1,7 +1,7 @@
 import Page from '../../common/components/Page';
+import Button from '../../common/components/Button';
 import Switch from '../../common/components/Switch';
 import Select from '../../common/components/Select';
-import Button from '../../common/components/Button';
 import classList from '../../common/utils/classList';
 import Stream from '../../common/utils/Stream';
 import saveSettings from '../utils/saveSettings';
@@ -17,7 +17,7 @@ export default class AdminPage extends Page {
   }
 
   view() {
-    const className = classList(['AdminPage', this.info().name]);
+    const className = classList(['AdminPage', this.headerInfo().className]);
 
     return (
       <div className={className}>
@@ -40,26 +40,26 @@ export default class AdminPage extends Page {
   }
 
   header() {
-    const info = this.info();
+    const headerInfo = this.headerInfo();
 
     return (
-      <AdminHeader icon={info.icon} description={info.description} className={info.name + '-header'}>
-        {info.title}
+      <AdminHeader icon={headerInfo.icon} description={headerInfo.description} className={headerInfo.className + '-header'}>
+        {headerInfo.title}
       </AdminHeader>
     );
   }
 
-  info() {
+  headerInfo() {
     return {
-      name: '',
+      className: '',
       icon: '',
       title: '',
       description: '',
     };
   }
 
   /**
-   * getSetting takes a settings object and turns it into a component.
+   * buildSettingComponent takes a settings object and turns it into a component.
    * Depending on the type of input, you can set the type to 'bool', 'select', or
    * any standard <input> type. Any values inside the 'extra' object will be added
    * to the component as an attribute.

js/src/admin/components/AppearancePage.js

@@ -6,9 +6,9 @@ import UploadImageButton from './UploadImageButton';
 import AdminPage from './AdminPage';
 
 export default class AppearancePage extends AdminPage {
-  info() {
+  headerInfo() {
     return {
-      name: 'AppearancePage',
+      className: 'AppearancePage',
       icon: 'fas fa-paint-brush',
       title: app.translator.trans('core.admin.appearance.title'),
       description: app.translator.trans('core.admin.appearance.description'),

js/src/admin/components/BasicsPage.js

@@ -28,9 +28,9 @@ export default class BasicsPage extends AdminPage {
     });
   }
 
-  info() {
+  headerInfo() {
     return {
-      name: 'BasicsPage',
+      className: 'BasicsPage',
       icon: 'fas fa-pencil-alt',
       title: app.translator.trans('core.admin.basics.title'),
       description: app.translator.trans('core.admin.basics.description'),
@@ -68,26 +68,22 @@ export default class BasicsPage extends AdminPage {
             ]
           : ''}
 
-          <FieldSet className='BasicsPage-homePage Form-group' label={app.translator.trans('core.admin.basics.home_page_heading')}>
-            <div className="helpText">{app.translator.trans('core.admin.basics.home_page_text')}</div>
-            {this.homePageItems()
+        <FieldSet className="BasicsPage-homePage Form-group" label={app.translator.trans('core.admin.basics.home_page_heading')}>
+          <div className="helpText">{app.translator.trans('core.admin.basics.home_page_text')}</div>
+          {this.homePageItems()
             .toArray()
             .map(({ path, label }) => (
-            <label className="checkbox">
-              <input type="radio" name="homePage" value={path} bidi={this.setting('default_route')} />
-              {label}
-            </label>
+              <label className="checkbox">
+                <input type="radio" name="homePage" value={path} bidi={this.setting('default_route')} />
+                {label}
+              </label>
             ))}
-          </FieldSet>
-
-        <div className="BasicsPage-welcomeBanner-input">
-          {this.buildSettingComponent({
-            type: 'text',
-            setting: 'welcome_title',
-            label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
-            className: 'BasicsPage-welcomeBanner',
-            help: app.translator.trans('core.admin.basics.welcome_banner_text'),
-          })}
+        </FieldSet>
+
+        <div className="Form-group BasicsPage-welcomeBanner-input">
+          <label>{app.translator.trans('core.admin.basics.welcome_banner_heading')}</label>
+          <div className="helpText">{app.translator.trans('core.admin.basics.welcome_banner_text')}</div>
+          <input type="text" className="FormControl" bidi={this.setting('welcome_title')} />
           <textarea className="FormControl" bidi={this.setting('welcome_message')} />
         </div>
 

js/src/admin/components/DashboardPage.js

@@ -4,9 +4,9 @@ import ItemList from '../../common/utils/ItemList';
 import AdminPage from './AdminPage';
 
 export default class DashboardPage extends AdminPage {
-  info() {
+  headerInfo() {
     return {
-      name: 'DashboardPage',
+      className: 'DashboardPage',
       icon: 'fas fa-chart-bar',
       title: app.translator.trans('core.admin.dashboard.title'),
       description: app.translator.trans('core.admin.dashboard.description'),

js/src/admin/components/MailPage.js

@@ -12,9 +12,9 @@ export default class MailPage extends AdminPage {
     this.refresh();
   }
 
-  info() {
+  headerInfo() {
     return {
-      name: 'MailPage',
+      className: 'MailPage',
       icon: 'fas fa-envelope',
       title: app.translator.trans('core.admin.email.title'),
       description: app.translator.trans('core.admin.email.description'),
@@ -72,50 +72,38 @@ export default class MailPage extends AdminPage {
             app.translator.trans('core.admin.email.not_sending_message')
           )}
 
-        {fieldKeys.length > 0 &&
-          FieldSet.component(
+        {fieldKeys.length > 0 && (
+          <FieldSet label={app.translator.trans(`core.admin.email.${this.setting('mail_driver')()}_heading`)} className="MailPage-MailSettings">
+            <div className="MailPage-MailSettings-input">
+              {fieldKeys.map((field) => {
+                const fieldInfo = fields[field];
+
+                return [
+                  this.buildSettingComponent({
+                    type: typeof this.setting(field)() === 'string' ? 'text' : 'select',
+                    label: app.translator.trans(`core.admin.email.${field}_label`),
+                    setting: field,
+                    options: fieldInfo,
+                  }),
+                  this.status.errors[field] && <p className="ValidationError">{this.status.errors[field]}</p>,
+                ];
+              })}
+            </div>
+          </FieldSet>
+        )}
+        {this.submitButton()}
+
+        <FieldSet label={app.translator.trans('core.admin.email.send_test_mail_heading')} className="MailPage-MailSettings">
+          <div className="helpText">{app.translator.trans('core.admin.email.send_test_mail_text', { email: app.session.user.email() })}</div>
+          {Button.component(
             {
-              label: app.translator.trans(`core.admin.email.${this.setting('mail_driver')()}_heading`),
-              className: 'MailPage-MailSettings',
+              className: 'Button Button--primary',
+              disabled: this.sendingTest || this.isChanged(),
+              onclick: () => this.sendTestEmail(),
             },
-            [
-              <div className="MailPage-MailSettings-input">
-                {fieldKeys.map((field) => {
-                  const fieldInfo = fields[field];
-                  console.log(field);
-
-                  return [
-                    this.buildSettingComponent({
-                      type: typeof this.setting(field)() === 'string' ? 'text' : 'select',
-                      label: app.translator.trans(`core.admin.email.${field}_label`),
-                      setting: field,
-                      options: fieldInfo,
-                    }),
-                    this.status.errors[field] && <p className="ValidationError">{this.status.errors[field]}</p>,
-                  ];
-                })}
-              </div>,
-            ]
+            app.translator.trans('core.admin.email.send_test_mail_button')
           )}
-        {this.submitButton()}
-
-        {FieldSet.component(
-          {
-            label: app.translator.trans('core.admin.email.send_test_mail_heading'),
-            className: 'MailPage-MailSettings',
-          },
-          [
-            <div className="helpText">{app.translator.trans('core.admin.email.send_test_mail_text', { email: app.session.user.email() })}</div>,
-            Button.component(
-              {
-                className: 'Button Button--primary',
-                disabled: this.sendingTest || this.isChanged(),
-                onclick: () => this.sendTestEmail(),
-              },
-              app.translator.trans('core.admin.email.send_test_mail_button')
-            ),
-          ]
-        )}
+        </FieldSet>
       </div>
     );
   }

js/src/admin/components/PermissionsPage.js

@@ -6,9 +6,9 @@ import PermissionGrid from './PermissionGrid';
 import AdminPage from './AdminPage';
 
 export default class PermissionsPage extends AdminPage {
-  info() {
+  headerInfo() {
     return {
-      name: 'PermissionsPage',
+      className: 'PermissionsPage',
       icon: 'fas fa-key',
       title: app.translator.trans('core.admin.permissions.title'),
       description: app.translator.trans('core.admin.permissions.description'),

less/admin/BasicsPage.less

@@ -1,5 +1,5 @@
 .BasicsPage {
-  padding-bottom: 25vh;
+  padding-bottom: 30px;
 
   @media @desktop-up {
     .container {
@@ -20,13 +20,13 @@
 }
 
 .BasicsPage-welcomeBanner-input {
-  .Form-group {
+  input {
     margin-bottom: 1px;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     font-weight: bold;
   }
-  :last-child {
+  textarea {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
     margin-bottom: 10px;

less/admin/DashboardPage.less

@@ -2,6 +2,7 @@
   background: @body-bg;
   color: @control-color;
   min-height: 100vh;
+  padding-bottom: 30px;
 }
 
 .Widget {

less/admin/ExtensionPage.less

@@ -1,5 +1,4 @@
 .ExtensionPage {
-  padding-bottom: 25vh;
 
   .ExtensionPage-header {
     .ExtensionTitle {
@@ -148,7 +147,7 @@
 
     > .container {
       overflow-x: scroll;
-      padding-bottom: 20px;
+      padding-bottom: 25vh;
     }
 
     .ExtensionPage-permissions-header {

less/admin/ExtensionWidget.less

@@ -39,11 +39,11 @@
   padding: 20px 0 20px 20px;
   margin-bottom: 20px;
   border-radius: @border-radius;
+}
 
-  .ExtensionList-Label {
-    margin-top: 0;
-    color: @muted-color;
-  }
+.ExtensionList-Label {
+  margin-top: 0;
+  color: @muted-color;
 }
 
 .ExtensionListItem.disabled {
@@ -64,18 +64,18 @@
     transform: scale(1.05);
   }
 
-  .ExtensionListItem-title {
-    display: block;
-    text-align: center;
-    margin-top: 5px;
-    color: @text-color;
-  }
-
   a:hover {
     text-decoration: none;
   }
 }
 
+.ExtensionListItem-title {
+  display: block;
+  text-align: center;
+  margin-top: 5px;
+  color: @text-color;
+}
+
 .ExtensionIcon {
   width: 90px;
   height: 90px;

less/admin/MailPage.less

@@ -1,5 +1,5 @@
 .MailPage {
-  padding-bottom: 25vh;
+  padding-bottom: 30px;
 
   @media @desktop-up {
     .container {