nodebb-theme-harmony 1.0.0-beta.82 → 1.0.0-beta.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.82",
+  "version": "1.0.0-beta.84",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/scss/common.scss

@@ -1,14 +1,17 @@
 
 body {
 	overflow-y: scroll;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
 }
 
 // fixes chrome font boosting :/ https://stackoverflow.com/questions/13430897/how-to-override-font-boosting-in-mobile-chrome
 body * {
-    max-height:1000000px;
-    text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    -moz-text-size-adjust: none;
+	max-height:1000000px;
+	text-size-adjust: none;
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
 }
 
 .ff-base {
@@ -32,6 +35,11 @@ body * {
 	opacity: 0.5;
 }
 
+.bg-card-cap {
+	--bs-bg-opacity: 1;
+	background-color: $card-cap-bg!important;
+}
+
 blockquote {
 	background-color: $light;
 	font-style: normal;

package/scss/modules/topics-list.scss

@@ -17,9 +17,9 @@
 		p { margin-bottom: 0; }
 	}
 
-	&.unread .title {
-		color: $link-color;
-	}
+	// &.unread .title {
+	// 	color: $link-color;
+	// }
 
 	.ui-sortable-handle {
 		cursor: move;

package/scss/modules/user-menu.scss

@@ -2,4 +2,10 @@
 	[component="header/profilelink"] > div, .user-status > div {
 		min-width: 1.25em; // match fontawesome fixed width
 	}
+	.user-status i.fa-check {
+		display: none;
+	}
+	.user-status.selected i.fa-check {
+		display: block;
+	}
 }

package/scss/sidebar.scss

@@ -45,11 +45,17 @@
 	}
 
 	.nav-link {
+		@extend .ff-secondary;
 		padding: 0;
 		&.active {
 			background-color: $hover-color;
 		}
 	}
+	.nav-item {
+		.dropdown-menu .dropdown-item {
+			@extend .rounded-1;
+		}
+	}
 	#user_dropdown .avatar {
 		margin: 2px 0; // fixes the avatar so its height is same as the icons on right sidebar
 	}

package/templates/account/blocks.tpl

@@ -6,7 +6,7 @@
 			<div class="input-group">
 				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
 
-				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
+				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;">
 					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
 					{{{ each edit }}}
 					<li class="">

package/templates/account/categories.tpl

@@ -10,10 +10,31 @@
 			<button class="btn-ghost-sm fw-semibold dropdown-toggle" data-bs-toggle="dropdown" type="button">
 				<span>[[user:change_all]]</span>
 			</button>
-			<ul class="dropdown-menu dropdown-menu-end">
-				<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
-				<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-				<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end">
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/watching" data-state="watching">
+						<div class="d-flex align-items-center gap-2">
+							<i class="fa fa-fw fa-inbox"></i>
+							<span class="flex-1 fw-semibold">[[category:watching]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:watching.description]]</div>
+					</a>
+				</li>
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/notwatching" data-state="notwatching">
+						<div class="d-flex align-items-center gap-2">
+							<i class="fa fa-fw fa-clock-o"></i>
+							<span class="flex-1 fw-semibold">[[category:not-watching]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
+					</a>
+				</li>
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/ignoring" data-state="ignoring">
+						<div class="d-flex align-items-center gap-2">
+							<i class="fa fa-fw fa-eye-slash"></i>
+							<span class="flex-1 fw-semibold">[[category:ignoring]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:ignoring.description]]</div>
+					</a>
+				</li>
 			</ul>
 		</div>
 	</div>

package/templates/account/followers.tpl

@@ -5,7 +5,7 @@
 <div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
 {{{ end }}}
 
-<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-4">
 {{{ each users }}}
 <!-- IMPORT partials/users/item.tpl -->
 {{{end}}}

package/templates/account/following.tpl

@@ -6,7 +6,7 @@
 <div class="alert alert-warning text-center">[[user:follows_no_one]]</div>
 {{{ end }}}
 
-<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-4">
 {{{ each users }}}
 <!-- IMPORT partials/users/item.tpl -->
 {{{end}}}

package/templates/account/topics.tpl

@@ -6,9 +6,12 @@
 		{{{ if showSort }}}
 		<div class="btn-group bottom-sheet" component="thread/sort">
 			<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
-			<ul class="dropdown-menu">
+			<ul class="dropdown-menu p-1 text-sm">
 				{{{each sortOptions }}}
-				<li><a class="dropdown-item" href="{config.relative_path}{./url}"><i class="fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>{./name}</a></li>
+				<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{config.relative_path}{./url}">
+					<div class="flex-1">{./name}</div>
+					<i class="fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>
+				</a></li>
 				{{{end}}}
 			</ul>
 		</div>

package/templates/categories.tpl

@@ -3,7 +3,7 @@
 	{{widgets.header.html}}
 	{{{ end }}}
 </div>
-<div class="row">
+<div class="row py-2">
 	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		{{{ if pagination.pages.length }}}
 		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>

package/templates/category.tpl

@@ -2,7 +2,7 @@
 <div class="d-flex flex-column gap-2">
 	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
-		<h2 class="fs-2 fw-semibold mb-0 text-center">{./name}</h2>
+		<h2 class="tracking-tight fs-2 fw-semibold mb-0 text-center">{./name}</h2>
 	</div>
 	<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<span class="badge text-body border border-gray-300 stats text-xs">

package/templates/chats.tpl

@@ -6,7 +6,7 @@
 			<div class="input-group">
 				<input class="form-control" type="text" component="chat/search" data-bs-toggle="dropdown" />
 				<ul component="chat/search/list" class="dropdown-menu">
-					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+					<li><a href="#" class="dropdown-item rounded-1">[[admin/menu:search.start-typing]]</a></li>
 				</ul>
 				<button class="btn btn-primary" type="button">
 					<i class="fa fa-search"></i>

package/templates/flags/detail.tpl

@@ -14,24 +14,24 @@
 					<i class="fa fa-fw fa-street-view text-primary"></i>
 					[[flags:flagged-user]]
 				</button>
-				<ul class="dropdown-menu">
-					<li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
+				<ul class="dropdown-menu p-1 text-sm">
+					<li><a class="dropdown-item rounded-1" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
 					{{{ if !config.disableChat }}}
-						<li><a class="dropdown-item" href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
+						<li><a class="dropdown-item rounded-1" href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
 					{{{ end }}}
 					<li class="dropdown-divider"></li>
 					{{{ if privileges.ban }}}
-					<li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="ban">[[user:ban_account]]</a></li>
-					<li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unban">[[user:unban_account]]</a></li>
+					<li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="ban">[[user:ban_account]]</a></li>
+					<li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unban">[[user:unban_account]]</a></li>
 					{{{ end }}}
 					{{{ if privileges.mute}}}
-					<li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="mute">[[user:mute_account]]</a></li>
-					<li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unmute">[[user:unmute_account]]</a></li>
+					<li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="mute">[[user:mute_account]]</a></li>
+					<li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item rounded-1" href="#" data-action="unmute">[[user:unmute_account]]</a></li>
 					{{{ end }}}
 					{{{ if privileges.admin:users }}}
-					<li><a class="dropdown-item" href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
-					<li><a class="dropdown-item" href="#" data-action="delete-content">[[user:delete_content]]</a></li>
-					<li><a class="dropdown-item" href="#" data-action="delete-all">[[user:delete_all]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-content">[[user:delete_content]]</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="delete-all">[[user:delete_all]]</a></li>
 					{{{ end }}}
 				</ul>
 			</div>

package/templates/footer.tpl

@@ -6,7 +6,7 @@
 	<!-- IMPORT partials/mobile-footer.tpl -->
 	{{{ if !isSpider }}}
 	<div class="">
-		<div component="toaster/tray" class="alert-window fixed-bottom mb-5 mb-md-2 me-2 me-md-5 ms-auto" style="width:300px;">
+		<div component="toaster/tray" class="alert-window fixed-bottom mb-5 mb-md-2 me-2 me-md-5 ms-auto" style="width:300px; z-index: 1090;">
 			<div id="reconnect-alert" class="alert alert-dismissible alert-warning clearfix hide" component="toaster/toast">
 				<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-hidden="true"></button>
 				<p>[[global:reconnecting-message, {config.siteTitle}]]</p>

package/templates/header.tpl

@@ -39,6 +39,6 @@
 					document.documentElement.style.setProperty('--panel-offset', `0px`);
 				}
 			</script>
-			<div class="container d-flex flex-column gap-3" id="content">
+			<div class="container px-md-4 d-flex flex-column gap-3" id="content">
 			<!-- IMPORT partials/noscript/warning.tpl -->
 			<!-- IMPORT partials/noscript/message.tpl -->

package/templates/partials/account/admin-menu.tpl

@@ -2,34 +2,34 @@
 	<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-gear fa-fw"></i>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end account-sub-links">
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm account-sub-links">
 		<li>
-			<a class="dropdown-item" href="{config.relative_path}/user/{userslug}/info">[[user:account_info]]</a>
+			<a class="dropdown-item rounded-1" href="{config.relative_path}/user/{userslug}/info">[[user:account_info]]</a>
 		</li>
 		{{{ if (canBan || canMute) }}}
 		<li role="separator" class="dropdown-divider"></li>
 		{{{ end }}}
 		{{{ if canBan }}}
 		<li class="{{{ if banned }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/ban" href="#">[[user:ban_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/ban" href="#">[[user:ban_account]]</a>
 		</li>
 		<li class="{{{ if !banned }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/unban" href="#">[[user:unban_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/unban" href="#">[[user:unban_account]]</a>
 		</li>
 		{{{ end }}}
 		{{{ if canMute }}}
 		<li class="{{{ if muted }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/mute" href="#">[[user:mute_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/mute" href="#">[[user:mute_account]]</a>
 		</li>
 		<li class="{{{ if !muted }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/unmute" href="#">[[user:unmute_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/unmute" href="#">[[user:unmute_account]]</a>
 		</li>
 		{{{ end }}}
 		{{{ if isAdmin }}}
 		<li>
-			<a component="account/delete-account" href="#" class="dropdown-item">[[user:delete_account_as_admin]]</a>
-			<a component="account/delete-content" href="#" class="dropdown-item">[[user:delete_content]]</a>
-			<a component="account/delete-all" href="#" class="dropdown-item">[[user:delete_all]]</a>
+			<a component="account/delete-account" href="#" class="dropdown-item rounded-1">[[user:delete_account_as_admin]]</a>
+			<a component="account/delete-content" href="#" class="dropdown-item rounded-1">[[user:delete_content]]</a>
+			<a component="account/delete-all" href="#" class="dropdown-item rounded-1">[[user:delete_all]]</a>
 		</li>
 		{{{ end }}}
 	</ul>

package/templates/partials/account/category-item.tpl

@@ -1,25 +1,22 @@
-<li component="categories/category" data-cid="{./cid}" data-parent-cid="{../parentCid}" class="row category-{./cid} mb-4">
+<li component="categories/category" data-cid="{./cid}" data-parent-cid="{../parentCid}" class="category-{./cid}">
 	<meta itemprop="name" content="{./name}">
-	<div class="content col-10 depth-{./depth}">
-		<div class="d-flex">
-			<div class="fs-3">
-				{buildCategoryIcon(@value, "40px", "rounded-1")}
+	<div class="content depth-{./depth} d-flex gap-2">
+		<div class="flex-1 align-items-start d-flex gap-2">
+			<div>
+				{buildCategoryIcon(@value, "24px", "rounded-1")}
 			</div>
-
-			<div class="ms-3">
-				<h3 class="title">
+			<div class="d-grid gap-0">
+				<div class="title fw-semibold">
 					<!-- IMPORT partials/categories/link.tpl -->
-				</h3>
-				<!-- description -->
-				<div class="mb-2">
-					{{{ if ./descriptionParsed }}}
-					<div class="description text-muted">{./descriptionParsed}</div>
-					{{{ end }}}
 				</div>
+				{{{ if ./descriptionParsed }}}
+				<div class="description text-muted text-xs">{./descriptionParsed}</div>
+				{{{ end }}}
 			</div>
 		</div>
+		<div class="flex-grow-0 flex-shrink-0">
+			<!-- IMPORT partials/category/watch.tpl -->
+		</div>
 	</div>
-	<div class="col-2">
-		<!-- IMPORT partials/category/watch.tpl -->
-	</div>
+	<hr class="text-muted opacity-25"/>
 </li>

package/templates/partials/account/header.tpl

@@ -77,8 +77,8 @@
 					<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown">
 						<i class="fa fa-caret-down"></i>
 					</button>
-					<ul class="dropdown-menu dropdown-menu-end" role="menu">
-						<li><a class="dropdown-item" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
+					<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+						<li><a class="dropdown-item rounded-1" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
 					</ul>
 					{{{ end }}}
 				</div>

package/templates/partials/buttons/newTopic.tpl

@@ -4,7 +4,7 @@
 </button>
 <noscript>
 	<input type="checkbox" class="hidden" id="category-dropdown-check" aria-hidden="true">
-	<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+	<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
 		{{{each categories}}}
 		<li role="presentation" class="category {{{if categories.disabledClass}}}disabled{{{end}}}">
 			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}

package/templates/partials/categories/item.tpl

@@ -6,11 +6,11 @@
 		{buildCategoryIcon(@value, "40px", "rounded-1")}
 		</div>
 		<div class="d-flex flex-column gap-1 flex-1">
-			<h2 class="title fw-bold fs-4">
+			<h2 class="title fw-semibold fs-4 m-0 tracking-tight">
 				<!-- IMPORT partials/categories/link.tpl -->
 			</h2>
 			{{{ if ./descriptionParsed }}}
-			<div class="description text-muted small">
+			<div class="description text-muted text-xs">
 				{./descriptionParsed}
 			</div>
 			{{{ end }}}
@@ -21,9 +21,9 @@
 				{{{ if !./isSection }}}
 				<span class="category-children-item small">
 					{{{ if ./link }}}
-					<a href="{./link}">{./name}</a>
+					<div class="d-flex align-items-center gap-1"><i class="fa fa-fw fa-caret-right text-primary"></i><a href="{./link}" class="text-reset fw-semibold">{./name}</a></div>
 					{{{ else }}}
-					<a href="{config.relative_path}/category/{./slug}">{./name}</a>
+					<div class="d-flex align-items-center gap-1"><i class="fa fa-fw fa-caret-right text-primary"></i><a href="{config.relative_path}/category/{./slug}" class="text-reset fw-semibold">{./name}</a></div>
 					{{{ end }}}
 				</span>
 				{{{ end }}}
@@ -38,13 +38,13 @@
 		<div class="col-md-5 d-none d-lg-flex stats text-muted gap-2 px-0">
 			<div class="w-50">
 				<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
-					<span class="{./unread-class} human-readable-number fs-5 fw-semibold ff-secondary" title="{./totalTopicCount}">{./totalTopicCount}</span>
+					<span class="{./unread-class} human-readable-number fs-5 ff-secondary" title="{./totalTopicCount}">{./totalTopicCount}</span>
 					<span class="text-lowercase text-xs">[[global:topics]]</span>
 				</div>
 			</div>
 			<div class="w-50">
 				<div class="card card-header align-items-center px-0 py-2 border-0 rounded-1">
-					<span class="{./unread-class} human-readable-number fs-5 fw-semibold ff-secondary" title="{./totalPostCount}">{./totalPostCount}</span>
+					<span class="{./unread-class} human-readable-number fs-5 ff-secondary" title="{./totalPostCount}">{./totalPostCount}</span>
 					<span class="text-lowercase text-xs">[[global:posts]]</span>
 				</div>
 			</div>

package/templates/partials/category/filter-dropdown-content.tpl

@@ -1,4 +1,4 @@
-<button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
     <span class="category-item d-inline-flex align-items-center gap-1">
         {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
@@ -9,16 +9,20 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control form-control-sm" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
     <li role="presentation" class="category" data-cid="all">
-        <a class="dropdown-item" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
+            <div class="flex-1">[[unread:all_categories]]</div>
+            <i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
+        </a>
     </li>
     {{{each categoryItems}}}
     <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
-        <a class="dropdown-item" role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
-            <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
+            {../level}
+            <span component="category-markup" class="flex-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
                 <div class="category-item d-inline-flex align-items-center gap-1">
                     {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
@@ -26,6 +30,7 @@
                     {./name}
                 </div>
             </span>
+            <i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
         </a>
     </li>
     {{{end}}}

package/templates/partials/category/selector-dropdown-content.tpl

@@ -1,4 +1,4 @@
-<button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
     <span component="category-selector-selected">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
         <span class="category-item d-inline-flex align-items-center gap-1">
@@ -12,15 +12,15 @@
     </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control form-control-sm" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
 </div>
-<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+<ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
     <li component="category/no-matches" role="presentation" class="category hidden">
-        <a class="dropdown-item" role="menu-item">[[search:no-matches]]</a>
+        <a class="dropdown-item rounded-1" role="menu-item">[[search:no-matches]]</a>
     </li>
     {{{ each categoryItems }}}
     <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
-        <a class="dropdown-item" role="menu-item">{./level}
+        <a class="dropdown-item rounded-1" role="menu-item">{./level}
             <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
                 <div class="category-item d-inline-flex align-items-center gap-1">
                     {{{ if ./icon }}}

package/templates/partials/category/sort.tpl

@@ -1,14 +1,14 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:sort_by]]</span>
 	</button>
 
-	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_posts" data-sort="most_posts"><i class="fa fa-fw"></i> [[topic:most_posts]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_views" data-sort="most_views"><i class="fa fa-fw"></i> [[topic:most_views]]</a></li>
+	<ul class="dropdown-menu p-1 text-sm">
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><span class="flex-1">[[topic:newest_to_oldest]]</span><i class="fa fa-fw text-muted"></i></a></li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><span class="flex-1">[[topic:oldest_to_newest]]</span><i class="fa fa-fw text-muted"></i></a></li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_posts" data-sort="most_posts"><span class="flex-1">[[topic:most_posts]]</span><i class="fa fa-fw text-muted"></i></a></li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes"><span class="flex-1">[[topic:most_votes]]</span><i class="fa fa-fw text-muted"></i></a></li>
+		<li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_views" data-sort="most_views"><span class="flex-1">[[topic:most_views]]</span><i class="fa fa-fw text-muted"></i></a></li>
 	</ul>
 </div>

package/templates/partials/category/tools.tpl

@@ -1,78 +1,78 @@
 {{{ if showTopicTools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-gear text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:thread_tools.title]]</span>
 	</button>
-	<ul class="dropdown-menu">
+	<ul class="dropdown-menu p-1 text-sm">
 		<li>
-			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
+			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/pin" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]
+			<a component="topic/pin" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-thumb-tack"></i> [[topic:thread_tools.pin]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unpin" href="#" class="hidden dropdown-item">
-				<i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]
+			<a component="topic/unpin" href="#" class="hidden dropdown-item rounded-1">
+				<i class="fa fa-fw text-muted fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]
 			</a>
 		</li>
 
 		<li>
-			<a component="topic/lock" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]
+			<a component="topic/lock" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-lock"></i> [[topic:thread_tools.lock]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unlock" href="#" class="hidden dropdown-item" >
-				<i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]
+			<a component="topic/unlock" href="#" class="hidden dropdown-item rounded-1" >
+				<i class="fa fa-fw text-muted fa-unlock"></i> [[topic:thread_tools.unlock]]
 			</a>
 		</li>
 
 		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/move" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]
+			<a component="topic/move" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move]]
 			</a>
 		</li>
 		{{{if template.category}}}
 		<li>
-			<a component="topic/move-all" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move_all]]
+			<a component="topic/move-all" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-arrows"></i> [[topic:thread_tools.move_all]]
 			</a>
 		</li>
 		{{{end}}}
 		<li>
-			<a component="topic/merge" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]
+			<a component="topic/merge" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-code-fork"></i> [[topic:thread_tools.merge]]
 			</a>
 		</li>
 
 		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/delete" href="#" class="dropdown-item">
-				<i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]
+			<a component="topic/delete" href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw text-muted fa-trash-o"></i> [[topic:thread_tools.delete]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/restore" href="#" class="hidden dropdown-item">
-				<i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]
+			<a component="topic/restore" href="#" class="hidden dropdown-item rounded-1">
+				<i class="fa fa-fw text-muted fa-history"></i> [[topic:thread_tools.restore]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/purge" href="#" class="hidden dropdown-item">
-				<i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]
+			<a component="topic/purge" href="#" class="hidden dropdown-item rounded-1">
+				<i class="fa fa-fw text-muted fa-eraser"></i> [[topic:thread_tools.purge]]
 			</a>
 		</li>
 
 		{{{each thread_tools}}}
 		<li>
-			<a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
+			<a href="#" class="dropdown-item rounded-1 d-flex align-items-center gap-2 {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
 		</li>
 		{{{end}}}
 	</ul>