chore: housekeeping

extensions/embed/less/forum.less

@@ -50,7 +50,7 @@
       padding: 15px 15px;
 
       .scrolled & {
-        .box-shadow(0 2px 6px @shadow-color);
+        .box-shadow(0 2px 6px var(--shadow-color));
       }
     }
 
@@ -69,7 +69,7 @@
         margin: 0;
 
         &, a {
-          color: @muted-color;
+          color: var(--muted-color);
         }
       }
     }

extensions/emoji/less/forum.less

@@ -12,7 +12,7 @@ img.emoji {
   margin: 5px 0 !important;
 
   > li > button {
-    color: @text-color;
+    color: var(--text-color);
     font-weight: bold;
     padding-top: 6px;
     padding-bottom: 6px;
@@ -25,7 +25,7 @@ img.emoji {
   }
 
   .Dropdown-header {
-    color: @muted-more-color;
+    color: var(--muted-more-color);
     text-transform: none;
     font-weight: normal;
     padding-bottom: 5px;

extensions/flags/js/src/forum/components/FlagList.tsx

@@ -1,7 +1,7 @@
 import app from 'flarum/forum/app';
 import Component from 'flarum/common/Component';
 import type { ComponentAttrs } from 'flarum/common/Component';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import username from 'flarum/common/helpers/username';
 import HeaderList from 'flarum/forum/components/HeaderList';
 import HeaderListItem from 'flarum/forum/components/HeaderListItem';
@@ -39,7 +39,7 @@ export default class FlagList<CustomAttrs extends IFlagListAttrs = IFlagListAttr
                 <li>
                   <HeaderListItem
                     className="Flag"
-                    avatar={avatar(post.user() || null)}
+                    avatar={<Avatar user={post.user() || null} />}
                     icon="fas fa-flag"
                     content={app.translator.trans('flarum-flags.forum.flagged_posts.item_text', {
                       username: username(post.user()),

extensions/flags/less/forum.less

@@ -3,33 +3,30 @@
   padding-top: 0 !important;
   padding-left: var(--post-padding);
   margin-left: calc(~"0px - var(--post-padding)");
-  border: var(--border-width) solid @primary-color;
+  border: var(--border-width) solid var(--primary-color);
 }
 
 .Post-header .item-flagged {
   display: block;
   margin: 0;
 }
 .Post-flagged {
-  background: @primary-color;
-  margin-top: calc(~"0px - var(--border-width)");
-  margin-bottom: var(--post-padding);
-  margin-left: calc(~"0px - var(--border-width) - var(--post-padding)");
-  margin-right: calc(~"0px - var(--border-width) - var(--post-padding)");
+  background: var(--primary-color);
+  margin: calc(~"0px - var(--border-width)") calc(~"0px - var(--border-width) - var(--post-padding)") var(--post-padding);
   padding: 10px;
-  border-radius: @border-radius @border-radius 0 0;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
   overflow: hidden;
   .light-contents(@color: @body-bg; @control-color: @body-bg);
 
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
   &, a {
-    color: @body-bg !important;
+    color: var(--body-bg) !important;
   }
 }
 .Post-flagged-flags {
-  @media @tablet-up {
-    float: left;
-  }
-
   font-size: 14px;
   margin: 7px 10px;
   text-align: left;
@@ -41,12 +38,10 @@
   font-weight: normal;
 }
 .Post-flagged-actions {
-  @media @tablet-up {
-    float: right;
-  }
-}
-.Post-flagged-actions .Button {
-  margin-left: 5px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
 .FlagPostModal {
@@ -58,7 +53,7 @@
 
     strong {
       display: block;
-      color: @text-color;
+      color: var(--text-color);
     }
   }
 }

extensions/likes/js/src/forum/addLikesList.js

@@ -4,7 +4,7 @@ import CommentPost from 'flarum/forum/components/CommentPost';
 import Link from 'flarum/common/components/Link';
 import punctuateSeries from 'flarum/common/helpers/punctuateSeries';
 import username from 'flarum/common/helpers/username';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Button from 'flarum/common/components/Button';
 
 import PostLikesModal from './components/PostLikesModal';
@@ -58,7 +58,7 @@ export default function () {
       items.add(
         'liked',
         <div className="Post-likedBy">
-          {icon('far fa-thumbs-up')}
+          <Icon name={'far fa-thumbs-up'} />
           {app.translator.trans(`flarum-likes.forum.post.liked_by${likes[0] === app.session.user ? '_self' : ''}_text`, {
             count: names.length,
             users: punctuateSeries(names),

extensions/likes/js/src/forum/components/PostLikesModal.tsx

@@ -1,7 +1,7 @@
 import app from 'flarum/forum/app';
 import Modal from 'flarum/common/components/Modal';
 import Link from 'flarum/common/components/Link';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import username from 'flarum/common/helpers/username';
 import type { IInternalModalAttrs } from 'flarum/common/components/Modal';
 import type Post from 'flarum/common/models/Post';
@@ -48,7 +48,7 @@ export default class PostLikesModal<CustomAttrs extends IPostLikesModalAttrs = I
                 page.items.map((user) => (
                   <li>
                     <Link href={app.route.user(user)}>
-                      {avatar(user)} {username(user)}
+                      <Avatar user={user} /> {username(user)}
                     </Link>
                   </li>
                 ))

extensions/likes/less/forum.less

@@ -4,7 +4,7 @@
   margin: 0;
 
   a {
-    color: @text-color;
+    color: var(--text-color);
     font-size: 15px;
     font-weight: bold;
     display: block;

extensions/markdown/js/src/common/components/MarkdownButton.js

@@ -1,5 +1,5 @@
 import Component from 'flarum/common/Component';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Tooltip from 'flarum/common/components/Tooltip';
 
 export default class MarkdownButton extends Component {
@@ -16,7 +16,7 @@ export default class MarkdownButton extends Component {
         onkeydown={this.keydown.bind(this)}
         onclick={this.attrs.onclick}
       >
-        {icon(this.attrs.icon)}
+        <Icon name={this.attrs.icon} />
       </button>
     );
 

extensions/mentions/js/src/forum/addMentionedByList.js

@@ -5,7 +5,7 @@ import Link from 'flarum/common/components/Link';
 import PostPreview from 'flarum/forum/components/PostPreview';
 import punctuateSeries from 'flarum/common/helpers/punctuateSeries';
 import username from 'flarum/common/helpers/username';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Button from 'flarum/common/components/Button';
 import MentionedByModal from './components/MentionedByModal';
 
@@ -54,7 +54,9 @@ export default function addMentionedByList() {
                   }}
                 >
                   <span className="PostPreview-content">
-                    <span className="PostPreview-badge Avatar">{icon('fas fa-reply-all')}</span>
+                    <span className="PostPreview-badge Avatar">
+                      <Icon name={'fas fa-reply-all'} />
+                    </span>
                     <span>
                       {app.translator.trans('flarum-mentions.forum.post.mentioned_by_more_text', { count: post.mentionedByCount() - replies.length })}
                     </span>
@@ -145,7 +147,7 @@ export default function addMentionedByList() {
         'replies',
         <div className="Post-mentionedBy">
           <span className="Post-mentionedBy-summary">
-            {icon('fas fa-reply')}
+            <Icon name={'fas fa-reply'} />
             {app.translator.trans(`flarum-mentions.forum.post.mentioned_by${repliers[0].user() === app.session.user ? '_self' : ''}_text`, {
               count: names.length,
               users: punctuateSeries(names),

extensions/mentions/js/src/forum/fragments/PostQuoteButton.js

@@ -1,6 +1,6 @@
 import app from 'flarum/forum/app';
 import Fragment from 'flarum/common/Fragment';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 
 import reply from '../utils/reply';
 
@@ -19,7 +19,7 @@ export default class PostQuoteButton extends Fragment {
           reply(this.post, this.content);
         }}
       >
-        {icon('fas fa-quote-left', { className: 'Button-icon' })}
+        <Icon name="fas fa-quote-left" className="Button-icon" />
         {app.translator.trans('flarum-mentions.forum.post.quote_button')}
       </button>
     );

extensions/mentions/js/src/forum/mentionables/PostMention.tsx

@@ -3,7 +3,7 @@ import MentionableModel from './MentionableModel';
 import type Post from 'flarum/common/models/Post';
 import type Mithril from 'mithril';
 import usernameHelper from 'flarum/common/helpers/username';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import highlight from 'flarum/common/helpers/highlight';
 import { truncate } from 'flarum/common/utils/string';
 import getCleanDisplayName from '../utils/getCleanDisplayName';
@@ -63,7 +63,7 @@ export default class PostMention extends MentionableModel<Post, AtMentionFormat>
 
     return (
       <>
-        {avatar(user)}
+        <Avatar user={user} />
         {username}
         {[
           app.translator.trans('flarum-mentions.forum.composer.reply_to_post_text', { number: model.number() }),

extensions/mentions/js/src/forum/mentionables/UserMention.tsx

@@ -2,7 +2,7 @@ import app from 'flarum/forum/app';
 import type Mithril from 'mithril';
 import type User from 'flarum/common/models/User';
 import usernameHelper from 'flarum/common/helpers/username';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import highlight from 'flarum/common/helpers/highlight';
 import MentionableModel from './MentionableModel';
 import getCleanDisplayName, { shouldUseOldFormat } from '../utils/getCleanDisplayName';
@@ -46,7 +46,7 @@ export default class UserMention extends MentionableModel<User, AtMentionFormat>
 
     return (
       <>
-        {avatar(model)}
+        <Avatar user={model} />
         {username}
       </>
     );

extensions/mentions/less/forum.less

@@ -1,7 +1,7 @@
 .PostMention, .UserMention, .GroupMention {
   background: var(--control-bg);
   color: var(--control-color);
-  border-radius: @border-radius;
+  border-radius: var(--border-radius);
   font-weight: 600;
 
   blockquote & {
@@ -81,7 +81,7 @@
 .MentionsDropdown, .PostMention-preview, .Post-mentionedBy-preview {
   // @TODO: Rename to .MentionsDropdownItem, along with child classes. 2.0
   .PostPreview {
-    color: @muted-color;
+    color: var(--muted-color);
 
     .Avatar {
       .Avatar--size(24px);
@@ -93,7 +93,7 @@
       }
     }
     .username {
-      color: @text-color;
+      color: var(--text-color);
       font-weight: bold;
     }
   }

extensions/package-manager/js/src/admin/components/ExtensionItem.tsx

@@ -2,7 +2,7 @@ import type Mithril from 'mithril';
 import app from 'flarum/admin/app';
 import Component, { ComponentAttrs } from 'flarum/common/Component';
 import classList from 'flarum/common/utils/classList';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Tooltip from 'flarum/common/components/Tooltip';
 import Button from 'flarum/common/components/Button';
 import { Extension } from 'flarum/admin/AdminApplication';
@@ -35,7 +35,7 @@ export default class ExtensionItem<Attrs extends ExtensionItemAttrs = ExtensionI
         })}
       >
         <div className="PackageManager-extension-icon ExtensionIcon" style={extension.icon}>
-          {extension.icon ? icon(extension.icon.name) : ''}
+          {extension.icon ? <Icon name={extension.icon.name} /> : ''}
         </div>
         <div className="PackageManager-extension-info">
           <div className="PackageManager-extension-name">{extension.extra['flarum-extension'].title}</div>

extensions/package-manager/js/src/admin/components/QueueSection.tsx

@@ -5,7 +5,7 @@ import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import Button from 'flarum/common/components/Button';
 import Tooltip from 'flarum/common/components/Tooltip';
 import { Extension } from 'flarum/admin/AdminApplication';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import ItemList from 'flarum/common/utils/ItemList';
 import extractText from 'flarum/common/utils/extractText';
 
@@ -75,7 +75,7 @@ export default class QueueSection extends Component<{}> {
           return extension ? (
             <div className="PackageManager-queueTable-package">
               <div className="PackageManager-queueTable-package-icon ExtensionIcon" style={extension.icon}>
-                {!!extension.icon && icon(extension.icon.name)}
+                {!!extension.icon && <Icon name={extension.icon.name} />}
               </div>
               <div className="PackageManager-queueTable-package-details">
                 <span className="PackageManager-queueTable-package-title">{extension.extra['flarum-extension'].title}</span>
@@ -199,17 +199,17 @@ export default class QueueSection extends Component<{}> {
   }
 
   operationIcon(operation: TaskOperations): Mithril.Children {
-    return icon(
-      {
-        update_check: 'fas fa-sync-alt',
-        update_major: 'fas fa-play',
-        update_minor: 'fas fa-play',
-        update_global: 'fas fa-play',
-        extension_install: 'fas fa-download',
-        extension_remove: 'fas fa-times',
-        extension_update: 'fas fa-arrow-alt-circle-up',
-        why_not: 'fas fa-exclamation-circle',
-      }[operation]
-    );
+    const iconName = {
+      update_check: 'fas fa-sync-alt',
+      update_major: 'fas fa-play',
+      update_minor: 'fas fa-play',
+      update_global: 'fas fa-play',
+      extension_install: 'fas fa-download',
+      extension_remove: 'fas fa-times',
+      extension_update: 'fas fa-arrow-alt-circle-up',
+      why_not: 'fas fa-exclamation-circle',
+    }[operation];
+
+    return <Icon name={iconName} />;
   }
 }

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>
                     </>