diff --git a/framework/core/js/src/admin/components/AppearancePage.tsx b/framework/core/js/src/admin/components/AppearancePage.tsx
index a37393b7f..5db1058b1 100644
--- a/framework/core/js/src/admin/components/AppearancePage.tsx
+++ b/framework/core/js/src/admin/components/AppearancePage.tsx
@@ -22,57 +22,91 @@ export default class AppearancePage extends AdminPage {
}
content() {
- return (
- <>
-
+ return this.contentItems().toArray();
+ }
-
- >
+ items.add(
+ 'colors',
+ ,
+ 100
);
+
+ items.add('branding', , 90);
+
+ return items;
+ }
+
+ brandingItems(): ItemList {
+ const items = new ItemList();
+
+ items.add(
+ 'logo',
+
+
+
{app.translator.trans('core.admin.appearance.logo_text')}
+
+
,
+ 100
+ );
+
+ items.add(
+ 'favicon',
+
+
+
{app.translator.trans('core.admin.appearance.favicon_text')}
+
+
,
+ 90
+ );
+
+ items.add(
+ 'custom-header',
+
+
+
{app.translator.trans('core.admin.appearance.custom_header_text')}
+
+
,
+ 80
+ );
+
+ items.add(
+ 'custom-footer',
+
+
+
{app.translator.trans('core.admin.appearance.custom_footer_text')}
+
+
,
+ 70
+ );
+
+ items.add(
+ 'custom-css',
+
+
+
{app.translator.trans('core.admin.appearance.custom_styles_text')}
+
+
,
+ 60
+ );
+
+ return items;
}
colorItems() {