feat: theming and extensibility improvements (#3876)

* feat: make page structure customizable across different pages (#3867)

* feat: create `PageStructure` component
* feat: apply to `DiscussionPage`
* feat: apply to `UserPage`
* feat: apply to `TagsPage`
* fix: adapt subscriptions ext
* chore: cleanup

* chore: use grid & flexbox for the discussion list item (#3868)

* chore: rename `DiscussionPage-list` to `DiscussionListPane`
* chore: itemlistify `DiscussionListItem`
* chore: use flex and grid for `DiscussionListItem`

* chore: use flexbox for `App-header` (#3869)

* chore: use flex and grid for `App-header`
* chore: drop search floats
* fix: adapt admin styles

* chore: use flexbox in dropdowns and SplitDropdown for subscriptions (#3874)

* chore: flexbox dropdown menu items
* chore: normalize subscriptions menu (use slit dropdown)
* chore: cleanup

* chore: misc flexbox/grid changes (#3875)

* chore: `TagsPage` to tsx
* chore: `TagsPage` flexbox/grid
* chore: `IndexPage-toolbar` flexbox
* chore: `UserCard` flexbox & itemlists
* fix: `Post` improve spacing logic
* chore: `Post` grid and proper spacing
* fix: avatar editor hover layer layout
* chore: `Button` flex

* chore: normalize form semantics (#3877)

* chore: normalize fieldsets
* fix: `LinkButton` spacing
* chore: consistent form semantics

* fix: styling regressions (#3878)

* fix: post spacing goes off in other pages
* fix: regression

* feat: extract reusable components from `NotificationsDropdown` (#3879)

* feat: extensible global notices (#3880)

* fix: js error on null item list
* feat: extensible global notices

* chore: housekeeping (#3881)

* chore: use CSS variables where still not using
* chore: cleanup suspension modal
* chore: cleanup post flag
* fix: badge vertical align
* chore: use CSS variables for custom coloring
* chore: `icon` helper to `Icon` component
* chore: `avatar` helper to `Avatar` component
* fix: chunk loading fails on admin frontend
* chore: format

* feat: reusable `UploadImageButton` component (#3882)

* chore: convert `UploadImageButton` to tsx
* feat: reusable `UploadImageButton` component
* feat: add `image-upload` setting type

* feat: extensible default footer component (#3883)

* chore: yarn format

extensions/statistics/js/src/admin/components/StatisticsWidget.tsx

@@ -6,7 +6,7 @@ import abbreviateNumber from 'flarum/common/utils/abbreviateNumber';
 import extractText from 'flarum/common/utils/extractText';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import Placeholder from 'flarum/common/components/Placeholder';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import classList from 'flarum/common/utils/classList';
 
 import DashboardWidget, { IDashboardWidgetAttrs } from 'flarum/admin/components/DashboardWidget';
@@ -291,7 +291,7 @@ export default class StatisticsWidget extends DashboardWidget {
                     <>
                       {' '}
                       <span className={'StatisticsWidget-change StatisticsWidget-change--' + (periodChange > 0 ? 'up' : 'down')}>
-                        {icon('fas fa-arrow-' + (periodChange > 0 ? 'up' : 'down'))}
+                        <Icon name={'fas fa-arrow-' + (periodChange > 0 ? 'up' : 'down')} />
                         {Math.abs(periodChange).toFixed(1)}%
                       </span>
                     </>

extensions/statistics/less/admin.less

@@ -11,7 +11,7 @@
 
   &-title {
     margin: 0 20px;
-    color: @muted-color;
+    color: var(--muted-color);
   }
 
   &-entities {
@@ -29,7 +29,7 @@
     min-width: 130px;
     font-size: 12px;
     font-weight: bold;
-    color: @muted-color;
+    color: var(--muted-color);
   }
 
   &-label {
@@ -39,7 +39,7 @@
   &-entity {
     min-width: 130px;
     padding: 15px 20px;
-    color: @text-color;
+    color: var(--text-color);
     font-size: 20px;
 
     .StatisticsWidget:not(.StatisticsWidget--mini) & {
@@ -47,12 +47,12 @@
 
       &:hover,
       &:focus-visible {
-        background: mix(@control-bg, @body-bg, 50%);
+        background: var(--control-body-bg-mix);
         text-decoration: none;
       }
 
       &.active {
-        border-top: 4px solid @primary-color;
+        border-top: 4px solid var(--primary-color);
         padding-top: 11px;
       }
     }
@@ -75,10 +75,10 @@
     font-weight: bold;
     text-transform: uppercase;
     font-size: 12px;
-    color: @muted-color;
+    color: var(--muted-color);
 
     .active & {
-      color: @primary-color;
+      color: var(--primary-color);
     }
   }