nodebb-theme-persona 12.1.6 → 12.1.8

package/templates/account/profile.tpl

@@ -20,7 +20,7 @@
 		<div class="text-center">
 		{{{each selectedGroup}}}
 		<!-- IF selectedGroup.slug -->
-		<!-- IMPORT partials/groups/badge.tpl -->
+			<a href="{config.relative_path}/groups/{selectedGroup.slug}"><small class="label group-label inline-block" style="color:{selectedGroup.textColor};background-color: {selectedGroup.labelColor};"><!-- IF selectedGroup.icon --><i class="fa {selectedGroup.icon}"></i> <!-- ENDIF selectedGroup.icon -->{selectedGroup.userTitle}</small></a>
 		<!-- ENDIF selectedGroup.slug -->
 		{{{end}}}
 		</div>
@@ -93,14 +93,14 @@
 	<hr />
 
 	<div class="row">
-		<div class="col-12 account-block hidden">
+		<div class="col-xs-12 account-block hidden">
 			<div class="account-picture-block text-center">
 				<span>
 					<span class="account-username"> {username}</span>
 				</span>
 
 				<!-- IF !isSelf -->
-				<a component="account/unfollow" href="#" class="btn btn-outline-secondary{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
+				<a component="account/unfollow" href="#" class="btn btn-default{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
 				<a component="account/follow" href="#" class="btn btn-primary{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
 				<!-- ENDIF !isSelf -->
 			</div>
@@ -109,7 +109,7 @@
 
 	<!-- IF groups.length -->
 	<div class="row">
-		<div class="col-12 hidden">
+		<div class="col-xs-12 hidden">
 			{{{each groups}}}
 			<a href="{config.relative_path}/groups/{groups.slug}"><span class="label group-label inline-block" style="background-color: {groups.labelColor};"><!-- IF groups.icon --><i class="fa {groups.icon}"></i> <!-- ENDIF groups.icon -->{groups.userTitle}</span></a>
 			{{{end}}}
@@ -119,16 +119,14 @@
 
 	<!-- IF ips.length -->
 	<div class="row">
-		<div class="col-12 hidden">
-			<div class="card">
-				<h5 class="card-header">
-					[[global:recentips]]
-				</h5>
-				<div class="card-body">
-				{{{each ips}}}
-					<div>{ips}</div>
-				{{{end}}}
-				</div>
+		<div class="col-xs-12 hidden">
+			<div class="panel-heading">
+				<h3 class="panel-title">[[global:recentips]]</h3>
+			</div>
+			<div class="panel-body">
+			{{{each ips}}}
+				<div>{ips}</div>
+			{{{end}}}
 			</div>
 		</div>
 	</div>
@@ -136,11 +134,11 @@
 
 	<div class="row">
 		{{{ if bestPosts.length }}}
-		<div class="col-lg-12 col-12">
+		<div class="col-lg-12 col-xs-12">
 			<h1>[[pages:account/best, {username}]]</h1>
 
-			<div class="col-12">
-				<ul component="posts" class="posts-list list-unstyled">
+			<div class="col-xs-12">
+				<ul component="posts" class="posts-list">
 				{{{each bestPosts}}}
 				<!-- IMPORT partials/posts_list_item.tpl -->
 				{{{end}}}
@@ -149,10 +147,10 @@
 		</div>
 		{{{ end }}}
 		{{{ if latestPosts.length}}}
-		<div class="col-lg-12 col-12">
+		<div class="col-lg-12 col-xs-12">
 			<h1>[[pages:account/latest-posts, {username}]]</h1>
-			<div class="col-12">
-				<ul component="posts" class="posts-list list-unstyled">
+			<div class="col-xs-12">
+				<ul component="posts" class="posts-list">
 				{{{each latestPosts}}}
 				<!-- IMPORT partials/posts_list_item.tpl -->
 				{{{end}}}

package/templates/account/sessions.tpl

@@ -3,16 +3,16 @@
 
 	<!-- IF sessions.length -->
 	<div class="row">
-		<div class="col-12 col-md-12">
+		<div class="col-xs-12 col-md-12">
 			<p class="lead">[[user:sessions.description]]</p>
 			<hr />
 			<ul class="list-group" component="user/sessions">
 				{{{each sessions}}}
 				<li class="list-group-item" data-uuid="{../uuid}">
-					<div class="float-end">
+					<div class="pull-right">
 						<!-- IF isSelfOrAdminOrGlobalModerator -->
 						<!-- IF !../current -->
-						<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
+						<button class="btn btn-xs btn-default" type="button" data-action="revokeSession">Revoke Session</button>
 						<!-- ENDIF !../current -->
 						<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
 						{function.userAgentIcons}

package/templates/account/settings.tpl

@@ -2,11 +2,11 @@
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<div class="row">
-		<div class="col-12 col-md-6">
+		<div class="col-xs-12 col-md-6">
 			<!-- IF !disableCustomUserSkins -->
 			<h4>[[user:select-skin]]</h4>
-			<div class="card card-body mb-3">
-				<select class="form-select" id="bootswatchSkin" data-property="bootswatchSkin">
+			<div class="well">
+				<select class="form-control" id="bootswatchSkin" data-property="bootswatchSkin">
 					{{{each bootswatchSkinOptions}}}
 					<option value="{bootswatchSkinOptions.value}" <!-- IF bootswatchSkinOptions.selected -->selected<!-- ENDIF bootswatchSkinOptions.selected -->>{bootswatchSkinOptions.name}</option>
 					{{{end}}}
@@ -16,130 +16,120 @@
 
 			<!-- IF allowUserHomePage -->
 			<h4>[[user:select-homepage]]</h4>
-			<div class="card card-body mb-3">
-				<div class="mb-2">
+			<div class="well">
+				<div class="form-group">
 					<label for="homePageRoute">[[user:homepage]]</label>
-					<select class="form-select" id="homePageRoute" data-property="homePageRoute">
+					<select class="form-control" id="homePageRoute" data-property="homePageRoute">
 						<option value="none">None</option>
 						{{{each homePageRoutes}}}
 						<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
 						{{{end}}}
 					</select>
-					<p class="form-text">[[user:homepage_description]]</p>
+					<p class="help-block">[[user:homepage_description]]</p>
 				</div>
-				<div id="homePageCustom" class="mb-2" style="display: none;">
+				<div id="homePageCustom" class="form-group" style="display: none;">
 					<label for="homePageCustom">[[user:custom_route]]</label>
 					<input type="text" class="form-control" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
-					<p class="form-text">[[user:custom_route_help]]</p>
+					<p class="help-block">[[user:custom_route_help]]</p>
 				</div>
 			</div>
 			<!-- ENDIF allowUserHomePage -->
 
 			<h4>[[global:privacy]]</h4>
-			<div class="card card-body mb-3">
+			<div class="well">
 				<!-- IF !hideEmail -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/>
-					<strong>
-						<label class="form-check-label">[[user:show_email]]</label>
-					</strong>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/> <strong>[[user:show_email]]</strong>
+					</label>
 				</div>
 				<!-- ENDIF !hideEmail -->
 
 				<!-- IF !hideFullname -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/>
-					<strong>
-						<label class="form-check-label">[[user:show_fullname]]</label>
-					</strong>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/> <strong>[[user:show_fullname]]</strong>
+					</label>
 				</div>
 				<!-- ENDIF !hideFullname -->
 				<!-- IF !config.disableChat -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/>
-					<strong>
-						<label class="form-check-label">[[user:restrict_chats]]</label>
-					</strong>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/> <strong>[[user:restrict_chats]]</strong>
+					</label>
 				</div>
 				<!-- ENDIF !config.disableChat -->
 			</div>
 
 			<h4>[[user:browsing]]</h4>
-			<div class="card card-body mb-3">
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/>
-					<strong>
-						<label class="form-check-label">[[user:open_links_in_new_tab]]</label>
-					</strong>
+			<div class="well">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/> <strong>[[user:open_links_in_new_tab]]</strong>
+					</label>
 				</div>
 				<!-- IF inTopicSearchAvailable -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/>
-					<strong>
-						<label class="form-check-label">[[user:enable_topic_searching]]</label>
-					</strong>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/> <strong>[[user:enable_topic_searching]]</strong>
+					</label>
 				</div>
-				<p class="form-text">[[user:topic_search_help]]</p>
+				<p class="help-block">[[user:topic_search_help]]</p>
 				<!-- ENDIF inTopicSearchAvailable -->
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/>
-					<strong>
-						<label class="form-check-label">[[user:update_url_with_post_index]]</label>
-					</strong>
-				</div>
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/>
-					<strong>
-						<label class="form-check-label">[[user:scroll_to_my_post]]</label>
-					</strong>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/> <strong>[[user:update_url_with_post_index]]</strong>
+					</label>
+				</div>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/> <strong>[[user:scroll_to_my_post]]</strong>
+					</label>
 				</div>
 			</div>
 
 			<h4>[[global:pagination]]</h4>
-			<div class="card card-body mb-3">
-				<div class="mb-2 form-check">
-					<input type="checkbox" class="form-check-input" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->> <strong><label class="form-check-label">[[user:paginate_description]]</label></strong>
-				</div>
-				<div class="mb-3">
-					<strong><label class="form-label">[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</label></strong>
-					<input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}">
-				</div>
-				<div class="">
-					<strong><label class="form-label">[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</label></strong>
-					<input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}">
+			<div class="well">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->> <strong>[[user:paginate_description]]</strong>
+					</label>
 				</div>
+
+				<strong>[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</strong><br /> <input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}"><br />
+				<strong>[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</strong><br /> <input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}"><br />
 			</div>
 
 			<!-- IF !disableEmailSubscriptions -->
 			<h4>[[global:email]]</h4>
-			<div class="card card-body mb-3">
-				<div class="mb-2">
+			<div class="well">
+				<div class="form-group">
 					<label for="dailyDigestFreq">[[user:digest_label]]</label>
-					<select class="form-select" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
+					<select class="form-control" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
 						{{{each dailyDigestFreqOptions}}}
 						<option value="{dailyDigestFreqOptions.value}" <!-- IF dailyDigestFreqOptions.selected -->selected="1"<!-- ENDIF dailyDigestFreqOptions.selected -->>{dailyDigestFreqOptions.name}</option>
 						{{{end}}}
 					</select>
-					<p class="form-text">[[user:digest_description]]</p>
+					<p class="help-block">[[user:digest_description]]</p>
 				</div>
 			</div>
 			<!-- ENDIF !disableEmailSubscriptions -->
 
 			{{{each customSettings}}}
 			<h4>{customSettings.title}</h4>
-			<div class="card card-body mb-3">
+			<div class="well">
 				{customSettings.content}
 			</div>
 			{{{end}}}
 
 		</div>
 
-		<div class="col-12 col-md-6">
+		<div class="col-xs-12 col-md-6">
 			<h4>[[global:language]]</h4>
-			<div class="card card-body mb-3">
+			<div class="well">
 				<div class="row">
-					<div class="mb-2 col-lg-12">
-						<select data-property="userLang" class="form-select">
+					<div class="form-group col-lg-12">
+						<select data-property="userLang" class="form-control">
 							{{{each languages}}}
 							<option value="{languages.code}" <!-- IF languages.selected -->selected<!-- ENDIF languages.selected -->>{languages.name} ({languages.code})</option>
 							{{{end}}}
@@ -150,8 +140,8 @@
 				<!-- IF isSelf -->
 				<label>[[user:acp_language]]</label>
 				<div class="row">
-					<div class="mb-2 col-lg-12">
-						<select data-property="acpLang" class="form-select">
+					<div class="form-group col-lg-12">
+						<select data-property="acpLang" class="form-control">
 							{{{each acpLanguages}}}
 							<option value="{acpLanguages.code}" <!-- IF acpLanguages.selected -->selected<!-- ENDIF acpLanguages.selected -->>{acpLanguages.name} ({acpLanguages.code})</option>
 							{{{end}}}
@@ -163,22 +153,20 @@
 			</div>
 
 			<h4>[[topic:watch]]</h4>
-			<div class="card card-body mb-3">
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/>
-					<strong>
-						<label class="form-check-label">[[user:follow_topics_you_create]]</label>
-					</strong>
-				</div>
-				<div class="form-check">
-					<input class="form-check-input" type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/>
-					<strong>
-						 <label class="form-check-label">[[user:follow_topics_you_reply_to]]</label>
-					</strong>
-				</div>
-				<div class="mb-2">
+			<div class="well">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/> <strong>[[user:follow_topics_you_create]]</strong>
+					</label>
+				</div>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/> <strong>[[user:follow_topics_you_reply_to]]</strong>
+					</label>
+				</div>
+				<div class="form-group">
 					<label>[[user:default-category-watch-state]]</label>
-					<select class="form-select" data-property="categoryWatchState">
+					<select class="form-control" data-property="categoryWatchState">
 						<option value="watching" <!-- IF categoryWatchState.watching -->selected<!-- ENDIF categoryWatchState.watching -->>[[category:watching]]</option>
 						<option value="notwatching" <!-- IF categoryWatchState.notwatching -->selected<!-- ENDIF categoryWatchState.notwatching -->>[[category:not-watching]]</option>
 						<option value="ignoring" <!-- IF categoryWatchState.ignoring -->selected<!-- ENDIF categoryWatchState.ignoring -->>[[category:ignoring]]</option>
@@ -188,14 +176,14 @@
 
 
 			<h4>[[user:notifications]]</h4>
-			<div class="card card-body mb-3">
+			<div class="well">
 				{{{each notificationSettings}}}
-				<div class="row mb-3">
-					<div class="col-7">
+				<div class="row">
+					<div class="col-xs-7">
 						<label>{notificationSettings.label}</label>
 					</div>
-					<div class="mb-2 col-5">
-						<select class="form-select" data-property="{notificationSettings.name}">
+					<div class="form-group col-xs-5">
+						<select class="form-control" data-property="{notificationSettings.name}">
 							<option value="none" <!-- IF notificationSettings.none -->selected<!-- ENDIF notificationSettings.none -->>[[notifications:none]]</option>
 							<option value="notification" <!-- IF notificationSettings.notification -->selected<!-- ENDIF notificationSettings.notification -->>[[notifications:notification_only]]</option>
 							<option value="email" <!-- IF notificationSettings.email -->selected<!-- ENDIF notificationSettings.email -->>[[notifications:email_only]]</option>
@@ -206,11 +194,11 @@
 				{{{end}}}
 
 				<div class="row">
-					<div class="col-7">
+					<div class="col-xs-7">
 						<label for="upvote-notif-freq">[[user:upvote-notif-freq]]</label>
 					</div>
-					<div class="mb-2 col-5">
-						<select class="form-select" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
+					<div class="form-group col-xs-5">
+						<select class="form-control" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
 							{{{each upvoteNotifFreq}}}
 							<option value="{upvoteNotifFreq.name}" <!-- IF upvoteNotifFreq.selected -->selected<!-- ENDIF upvoteNotifFreq.selected -->>
 								[[user:upvote-notif-freq.{upvoteNotifFreq.name}]]

package/templates/account/topics.tpl

@@ -4,12 +4,12 @@
 	<div class="row">
 		<h1>{title}</h1>
 		<!-- IF showSort -->
-		<div class="btn-toolbar justify-content-end mb-2">
-			<div class="btn-group bottom-sheet" component="thread/sort">
-				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span> <span class="caret"></span></button>
-				<ul class="dropdown-menu dropdown-menu-end">
+		<div class="row clearfix">
+			<div class="pull-right btn-group bottom-sheet" component="thread/sort">
+				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span> <span class="caret"></span></button>
+				<ul class="dropdown-menu dropdown-menu-right">
 					{{{each sortOptions }}}
-					<li><a class="dropdown-item" href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
+					<li><a href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
 					{{{end}}}
 				</ul>
 			</div>

package/templates/account/uploads.tpl

@@ -13,7 +13,7 @@
 			<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
 		<!-- ENDIF !uploads.length -->
 
-		<div class="col-12">
+		<div class="col-xs-12">
             <table class="table table-striped">
                 <thead>
                     <tr>
@@ -29,7 +29,7 @@
                         </td>
                         <td>
                             <div class="btn-group ">
-                                <button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
+                                <button class="btn btn-danger btn-xs" data-action="delete"><i class="fa fa-trash"></i></button>
                             </div>
                         </td>
                     </tr>

package/templates/admin/plugins/persona.tpl

@@ -1,6 +1,6 @@
 <div class="row">
-	<div class="col-sm-2 col-12 settings-header">Theme Settings</div>
-	<div class="col-sm-10 col-12">
+	<div class="col-sm-2 col-xs-12 settings-header">Theme Settings</div>
+	<div class="col-sm-10 col-xs-12">	
 		<form role="form" class="persona-settings">
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -23,7 +23,7 @@
 		</form>
 	</div>
 </div>
-
+	
 <button id="save" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
     <i class="material-icons">save</i>
 </button>

package/templates/alert.tpl

@@ -0,0 +1,15 @@
+<div id="{alert_id}" class="alert alert-dismissable alert-{type} clearfix" component="toaster/toast">
+	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+
+	<!-- IF image -->
+	<img src="{image}">
+	<!-- ENDIF image -->
+
+	<!-- IF title -->
+	<strong>{title}</strong>
+	<!-- ENDIF title -->
+
+	<!-- IF message -->
+	<p>{message}</p>
+	<!-- ENDIF message -->
+</div>

package/templates/category.tpl

@@ -8,25 +8,24 @@
 	<div class="category <!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
 		<!-- IMPORT partials/category/subcategory.tpl -->
 
-		<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 flex-nowrap">
-			<div class="d-flex gap-1 align-items-stretch">
-				<!-- IF privileges.topics:create -->
-				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
-				<!-- ELSE -->
-					<!-- IF !loggedIn -->
-					<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-					<!-- ENDIF !loggedIn -->
-				<!-- ENDIF privileges.topics:create -->
+		<div class="topic-list-header clearfix">
+			<!-- IF privileges.topics:create -->
+			<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
+			<!-- ELSE -->
+				<!-- IF !loggedIn -->
+				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+				<!-- ENDIF !loggedIn -->
+			<!-- ENDIF privileges.topics:create -->
 
-				<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">
-					<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
-				</a>
-			</div>
-			<div class="d-flex gap-1 align-items-stretch">
+			<a href="{url}" class="inline-block">
+				<div class="alert alert-warning hide" id="new-topics-alert"></div>
+			</a>
+
+			<span class="pull-right" component="category/controls">
 				<!-- IMPORT partials/category/watch.tpl -->
 				<!-- IMPORT partials/category/sort.tpl -->
 				<!-- IMPORT partials/category/tools.tpl -->
-			</div>
+			</span>
 		</div>
 
 		<!-- IF !topics.length -->

package/templates/chat.tpl

@@ -1,25 +1,18 @@
-<div id="chat-modal" class="chat-modal modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+
+<div id="chat-modal" class="chat-modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
 	<div class="modal-dialog">
-		<div class="modal-content" style="width: 600px;">
-			<div class="modal-header d-flex">
-				<div class="fs-5 flex-grow-1" component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></div>
-				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize">
-					<span aria-hidden="true"><i class="fa fa-fw fa-expand"></i></span>
-					<span class="sr-only">[[modules:chat.maximize]]</span>
-				</button>
-				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="minimize">
-					<span aria-hidden="true"><i class="fa fa-fw fa-minus"></i></span>
-					<span class="sr-only">[[modules:chat.minimize]]</span>
-				</button>
+		<div class="modal-content">
+			<div class="modal-header">
+				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+				<button type="button" class="close hidden-xs hidden-sm" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
+				<button type="button" class="close hidden-xs hidden-sm" data-action="minimize"><span aria-hidden="true"><i class="fa fa-minus"></i></span><span class="sr-only">[[modules:chat.minimize]]</span></button>
 				<!-- IMPORT partials/chats/options.tpl -->
 
-				<button id="chat-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				<h4 component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></h4>
 			</div>
 
 			<div class="modal-body">
-				<div class="position-relative">
-					<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button">[[modules:chat.scroll-up-alert]]</div>
-				</div>
+				<div component="chat/messages/scroll-up-alert" class="scroll-up-alert alert alert-info" role="button">[[modules:chat.scroll-up-alert]]</div>
 				<ul class="chat-content" component="chat/messages">
 					<!-- IMPORT partials/chats/messages.tpl -->
 				</ul>

package/templates/chats.tpl

@@ -1,12 +1,10 @@
 <div class="chats-full">
 	<div component="chat/nav-wrapper" data-loaded="<!-- IF roomId -->1<!-- ELSE -->0<!-- END -->">
 		<div class="chat-search dropdown">
-			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" 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>
-			</ul>
+			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-toggle="dropdown" />
+			<ul component="chat/search/list" class="dropdown-menu"></ul>
 		</div>
-		<ul component="chat/recent" class="chats-list list-unstyled" data-nextstart="{nextStart}">
+		<ul component="chat/recent" class="chats-list" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}