From b45c24537db2c0618626ff15a5d76ee836697e72 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jsit@users.noreply.github.com>
Date: Tue, 4 Jul 2023 17:24:57 -0400
Subject: [PATCH 01/11] fix: Fix focus ring styles for radio button toggles
 #1772 (#1773)

---
 .../components/common/data-type-select.tsx    |  54 ++++---
 .../components/common/listing-type-select.tsx |  77 +++++----
 src/shared/components/person/inbox.tsx        | 147 +++++++++--------
 src/shared/components/person/profile.tsx      |  22 ++-
 .../person/registration-applications.tsx      |  51 +++---
 src/shared/components/person/reports.tsx      | 148 ++++++++++--------
 src/shared/components/post/post.tsx           | 125 ++++++++-------
 7 files changed, 363 insertions(+), 261 deletions(-)

diff --git a/src/shared/components/common/data-type-select.tsx b/src/shared/components/common/data-type-select.tsx
index 6bf0666c..a0393f67 100644
--- a/src/shared/components/common/data-type-select.tsx
+++ b/src/shared/components/common/data-type-select.tsx
@@ -1,3 +1,5 @@
+import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { DataType } from "../../interfaces";
 import { I18NextService } from "../../services";
@@ -15,6 +17,8 @@ export class DataTypeSelect extends Component<
   DataTypeSelectProps,
   DataTypeSelectState
 > {
+  private id = `listing-type-input-${randomStr()}`;
+
   state: DataTypeSelectState = {
     type_: this.props.type_,
   };
@@ -31,33 +35,41 @@ export class DataTypeSelect extends Component<
 
   render() {
     return (
-      <div className="data-type-select btn-group btn-group-toggle flex-wrap">
+      <div
+        className="data-type-select btn-group btn-group-toggle flex-wrap"
+        role="group"
+      >
+        <input
+          id={`${this.id}-posts`}
+          type="radio"
+          className="btn-check"
+          value={DataType.Post}
+          checked={this.state.type_ === DataType.Post}
+          onChange={linkEvent(this, this.handleTypeChange)}
+        />
         <label
-          className={`pointer btn btn-outline-secondary 
-            ${this.state.type_ == DataType.Post && "active"}
-          `}
+          htmlFor={`${this.id}-posts`}
+          className={classNames("pointer btn btn-outline-secondary", {
+            active: this.state.type_ === DataType.Post,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={DataType.Post}
-            checked={this.state.type_ == DataType.Post}
-            onChange={linkEvent(this, this.handleTypeChange)}
-          />
           {I18NextService.i18n.t("posts")}
         </label>
+
+        <input
+          id={`${this.id}-comments`}
+          type="radio"
+          className="btn-check"
+          value={DataType.Comment}
+          checked={this.state.type_ === DataType.Comment}
+          onChange={linkEvent(this, this.handleTypeChange)}
+        />
         <label
-          className={`pointer btn btn-outline-secondary ${
-            this.state.type_ == DataType.Comment && "active"
-          }`}
+          htmlFor={`${this.id}-comments`}
+          className={classNames("pointer btn btn-outline-secondary", {
+            active: this.state.type_ === DataType.Comment,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={DataType.Comment}
-            checked={this.state.type_ == DataType.Comment}
-            onChange={linkEvent(this, this.handleTypeChange)}
-          />
           {I18NextService.i18n.t("comments")}
         </label>
       </div>
diff --git a/src/shared/components/common/listing-type-select.tsx b/src/shared/components/common/listing-type-select.tsx
index 9d0a1b9f..1d917dcd 100644
--- a/src/shared/components/common/listing-type-select.tsx
+++ b/src/shared/components/common/listing-type-select.tsx
@@ -1,4 +1,5 @@
 import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { ListingType } from "lemmy-js-client";
 import { I18NextService, UserService } from "../../services";
@@ -38,60 +39,72 @@ export class ListingTypeSelect extends Component<
 
   render() {
     return (
-      <div className="listing-type-select btn-group btn-group-toggle flex-wrap">
+      <div
+        className="listing-type-select btn-group btn-group-toggle flex-wrap"
+        role="group"
+      >
         {this.props.showSubscribed && (
-          <label
-            title={I18NextService.i18n.t("subscribed_description")}
-            className={`btn btn-outline-secondary 
-            ${this.state.type_ == "Subscribed" && "active"}
-            ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
-          `}
-          >
+          <>
             <input
               id={`${this.id}-subscribed`}
               type="radio"
               className="btn-check"
               value={"Subscribed"}
-              checked={this.state.type_ == "Subscribed"}
+              checked={this.state.type_ === "Subscribed"}
               onChange={linkEvent(this, this.handleTypeChange)}
               disabled={!UserService.Instance.myUserInfo}
             />
-            {I18NextService.i18n.t("subscribed")}
-          </label>
+            <label
+              htmlFor={`${this.id}-subscribed`}
+              title={I18NextService.i18n.t("subscribed_description")}
+              className={classNames("btn btn-outline-secondary", {
+                active: this.state.type_ === "Subscribed",
+                disabled: !UserService.Instance.myUserInfo,
+                pointer: UserService.Instance.myUserInfo,
+              })}
+            >
+              {I18NextService.i18n.t("subscribed")}
+            </label>
+          </>
         )}
         {this.props.showLocal && (
-          <label
-            title={I18NextService.i18n.t("local_description")}
-            className={`pointer btn btn-outline-secondary ${
-              this.state.type_ == "Local" && "active"
-            }`}
-          >
+          <>
             <input
               id={`${this.id}-local`}
               type="radio"
               className="btn-check"
               value={"Local"}
-              checked={this.state.type_ == "Local"}
+              checked={this.state.type_ === "Local"}
               onChange={linkEvent(this, this.handleTypeChange)}
             />
-            {I18NextService.i18n.t("local")}
-          </label>
+            <label
+              htmlFor={`${this.id}-local`}
+              title={I18NextService.i18n.t("local_description")}
+              className={classNames("pointer btn btn-outline-secondary", {
+                active: this.state.type_ === "Local",
+              })}
+            >
+              {I18NextService.i18n.t("local")}
+            </label>
+          </>
         )}
+        <input
+          id={`${this.id}-all`}
+          type="radio"
+          className="btn-check"
+          value={"All"}
+          checked={this.state.type_ === "All"}
+          onChange={linkEvent(this, this.handleTypeChange)}
+        />
         <label
           title={I18NextService.i18n.t("all_description")}
-          className={`pointer btn btn-outline-secondary ${
-            (this.state.type_ == "All" && "active") ||
-            (!this.props.showLocal && this.state.type_ == "Local" && "active")
-          }`}
+          htmlFor={`${this.id}-all`}
+          className={classNames("pointer btn btn-outline-secondary", {
+            active:
+              this.state.type_ === "All" ||
+              (!this.props.showLocal && this.state.type_) === "Local",
+          })}
         >
-          <input
-            id={`${this.id}-all`}
-            type="radio"
-            className="btn-check"
-            value={"All"}
-            checked={this.state.type_ == "All"}
-            onChange={linkEvent(this, this.handleTypeChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 28bb0716..bf246f64 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -11,8 +11,9 @@ import {
   setIsoData,
   updatePersonBlock,
 } from "@utils/app";
-import { capitalizeFirstLetter } from "@utils/helpers";
+import { capitalizeFirstLetter, randomStr } from "@utils/helpers";
 import { RouteDataResponse } from "@utils/types";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import {
   AddAdmin,
@@ -283,34 +284,41 @@ export class Inbox extends Component<any, InboxState> {
   }
 
   unreadOrAllRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap">
+      <div className="btn-group btn-group-toggle flex-wrap" role="group">
+        <input
+          id={`${radioId}-unread`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.Unread}
+          checked={this.state.unreadOrAll === UnreadOrAll.Unread}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
-          `}
+          htmlFor={`${radioId}-unread`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.Unread,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.Unread}
-            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("unread")}
         </label>
+
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.All}
+          checked={this.state.unreadOrAll === UnreadOrAll.All}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.All}
-            checked={this.state.unreadOrAll == UnreadOrAll.All}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
@@ -318,62 +326,75 @@ export class Inbox extends Component<any, InboxState> {
   }
 
   messageTypeRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap">
+      <div className="btn-group btn-group-toggle flex-wrap" role="group">
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.All}
+          checked={this.state.messageType === MessageType.All}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.All}
-            checked={this.state.messageType == MessageType.All}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
+
+        <input
+          id={`${radioId}-replies`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.Replies}
+          checked={this.state.messageType === MessageType.Replies}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.Replies && "active"}
-          `}
+          htmlFor={`${radioId}-replies`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.Replies,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.Replies}
-            checked={this.state.messageType == MessageType.Replies}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("replies")}
         </label>
+
+        <input
+          id={`${radioId}-mentions`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.Mentions}
+          checked={this.state.messageType === MessageType.Mentions}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.Mentions && "active"}
-          `}
+          htmlFor={`${radioId}-mentions`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.Mentions,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.Mentions}
-            checked={this.state.messageType == MessageType.Mentions}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("mentions")}
         </label>
+
+        <input
+          id={`${radioId}-messages`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.Messages}
+          checked={this.state.messageType === MessageType.Messages}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.Messages && "active"}
-          `}
+          htmlFor={`${radioId}-messages`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.Messages,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.Messages}
-            checked={this.state.messageType == MessageType.Messages}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("messages")}
         </label>
       </div>
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index 96ac3da3..39979e29 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -18,6 +18,7 @@ import {
   getQueryParams,
   getQueryString,
   numToSI,
+  randomStr,
 } from "@utils/helpers";
 import { canMod, isAdmin, isBanned } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
@@ -397,7 +398,7 @@ export class Profile extends Component<
 
   get viewRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
         {this.getRadio(PersonDetailsView.Overview)}
         {this.getRadio(PersonDetailsView.Comments)}
         {this.getRadio(PersonDetailsView.Posts)}
@@ -409,22 +410,27 @@ export class Profile extends Component<
   getRadio(view: PersonDetailsView) {
     const { view: urlView } = getProfileQueryParams();
     const active = view === urlView;
+    const radioId = randomStr();
 
     return (
-      <label
-        className={classNames("btn btn-outline-secondary pointer", {
-          active,
-        })}
-      >
+      <>
         <input
+          id={radioId}
           type="radio"
           className="btn-check"
           value={view}
           checked={active}
           onChange={linkEvent(this, this.handleViewChange)}
         />
-        {I18NextService.i18n.t(view.toLowerCase() as NoOptionI18nKeys)}
-      </label>
+        <label
+          htmlFor={radioId}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active,
+          })}
+        >
+          {I18NextService.i18n.t(view.toLowerCase() as NoOptionI18nKeys)}
+        </label>
+      </>
     );
   }
 
diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index a26dd79e..757170f8 100644
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -3,7 +3,9 @@ import {
   myAuthRequired,
   setIsoData,
 } from "@utils/app";
+import { randomStr } from "@utils/helpers";
 import { RouteDataResponse } from "@utils/types";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import {
   ApproveRegistrationApplication,
@@ -125,34 +127,41 @@ export class RegistrationApplications extends Component<
   }
 
   unreadOrAllRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+        <input
+          id={`${radioId}-unread`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.Unread}
+          checked={this.state.unreadOrAll === UnreadOrAll.Unread}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
-          `}
+          htmlFor={`${radioId}-unread`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.Unread,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.Unread}
-            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("unread")}
         </label>
+
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.All}
+          checked={this.state.unreadOrAll === UnreadOrAll.All}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.All}
-            checked={this.state.unreadOrAll == UnreadOrAll.All}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index c16b17ac..d298930e 100644
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@@ -5,8 +5,10 @@ import {
   myAuthRequired,
   setIsoData,
 } from "@utils/app";
+import { randomStr } from "@utils/helpers";
 import { amAdmin } from "@utils/roles";
 import { RouteDataResponse } from "@utils/types";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import {
   CommentReportResponse,
@@ -187,34 +189,41 @@ export class Reports extends Component<any, ReportsState> {
   }
 
   unreadOrAllRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+        <input
+          id={`${radioId}-unread`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.Unread}
+          checked={this.state.unreadOrAll === UnreadOrAll.Unread}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
-          `}
+          htmlFor={`${radioId}-unread`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.Unread,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.Unread}
-            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("unread")}
         </label>
+
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.All}
+          checked={this.state.unreadOrAll === UnreadOrAll.All}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.All}
-            checked={this.state.unreadOrAll == UnreadOrAll.All}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
@@ -222,70 +231,83 @@ export class Reports extends Component<any, ReportsState> {
   }
 
   messageTypeRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.All}
+          checked={this.state.messageType === MessageType.All}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.All}
-            checked={this.state.messageType == MessageType.All}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
+
+        <input
+          id={`${radioId}-comments`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.CommentReport}
+          checked={this.state.messageType === MessageType.CommentReport}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.CommentReport && "active"}
-          `}
+          htmlFor={`${radioId}-comments`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.CommentReport,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.CommentReport}
-            checked={this.state.messageType == MessageType.CommentReport}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("comments")}
         </label>
+
+        <input
+          id={`${radioId}-posts`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.PostReport}
+          checked={this.state.messageType === MessageType.PostReport}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.PostReport && "active"}
-          `}
+          htmlFor={`${radioId}-posts`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.PostReport,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.PostReport}
-            checked={this.state.messageType == MessageType.PostReport}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("posts")}
         </label>
+
         {amAdmin() && (
-          <label
-            className={`btn btn-outline-secondary pointer
-            ${
-              this.state.messageType == MessageType.PrivateMessageReport &&
-              "active"
-            }
-          `}
-          >
+          <>
             <input
+              id={`${radioId}-messages`}
               type="radio"
               className="btn-check"
               value={MessageType.PrivateMessageReport}
               checked={
-                this.state.messageType == MessageType.PrivateMessageReport
+                this.state.messageType === MessageType.PrivateMessageReport
               }
               onChange={linkEvent(this, this.handleMessageTypeChange)}
             />
-            {I18NextService.i18n.t("messages")}
-          </label>
+            <label
+              htmlFor={`${radioId}-messages`}
+              className={classNames("btn btn-outline-secondary pointer", {
+                active:
+                  this.state.messageType === MessageType.PrivateMessageReport,
+              })}
+            >
+              {I18NextService.i18n.t("messages")}
+            </label>
+          </>
         )}
       </div>
     );
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index 3c0015ec..f9d35127 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -19,10 +19,11 @@ import {
   restoreScrollPosition,
   saveScrollPosition,
 } from "@utils/browser";
-import { debounce } from "@utils/helpers";
+import { debounce, randomStr } from "@utils/helpers";
 import { isImage } from "@utils/media";
 import { RouteDataResponse } from "@utils/types";
 import autosize from "autosize";
+import classNames from "classnames";
 import { Component, RefObject, createRef, linkEvent } from "inferno";
 import {
   AddAdmin,
@@ -430,80 +431,98 @@ export class Post extends Component<any, PostState> {
   }
 
   sortRadios() {
+    const radioId =
+      this.state.postRes.state === "success"
+        ? this.state.postRes.data.post_view.post.id
+        : randomStr();
+
     return (
       <>
-        <div className="btn-group btn-group-toggle flex-wrap me-3 mb-2">
+        <div
+          className="btn-group btn-group-toggle flex-wrap me-3 mb-2"
+          role="group"
+        >
+          <input
+            id={`${radioId}-hot`}
+            type="radio"
+            className="btn-check"
+            value={"Hot"}
+            checked={this.state.commentSort === "Hot"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "Hot" && "active"
-            }`}
+            htmlFor={`${radioId}-hot`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "Hot",
+            })}
           >
             {I18NextService.i18n.t("hot")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"Hot"}
-              checked={this.state.commentSort === "Hot"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
+          <input
+            id={`${radioId}-top`}
+            type="radio"
+            className="btn-check"
+            value={"Top"}
+            checked={this.state.commentSort === "Top"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "Top" && "active"
-            }`}
+            htmlFor={`${radioId}-top`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "Top",
+            })}
           >
             {I18NextService.i18n.t("top")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"Top"}
-              checked={this.state.commentSort === "Top"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
+          <input
+            id={`${radioId}-new`}
+            type="radio"
+            className="btn-check"
+            value={"New"}
+            checked={this.state.commentSort === "New"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "New" && "active"
-            }`}
+            htmlFor={`${radioId}-new`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "New",
+            })}
           >
             {I18NextService.i18n.t("new")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"New"}
-              checked={this.state.commentSort === "New"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
+          <input
+            id={`${radioId}-old`}
+            type="radio"
+            className="btn-check"
+            value={"Old"}
+            checked={this.state.commentSort === "Old"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "Old" && "active"
-            }`}
+            htmlFor={`${radioId}-old`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "Old",
+            })}
           >
             {I18NextService.i18n.t("old")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"Old"}
-              checked={this.state.commentSort === "Old"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
         </div>
-        <div className="btn-group btn-group-toggle flex-wrap mb-2">
+        <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+          <input
+            id={`${radioId}-chat`}
+            type="radio"
+            className="btn-check"
+            value={CommentViewType.Flat}
+            checked={this.state.commentViewType === CommentViewType.Flat}
+            onChange={linkEvent(this, this.handleCommentViewTypeChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentViewType === CommentViewType.Flat && "active"
-            }`}
+            htmlFor={`${radioId}-chat`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentViewType === CommentViewType.Flat,
+            })}
           >
             {I18NextService.i18n.t("chat")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={CommentViewType.Flat}
-              checked={this.state.commentViewType === CommentViewType.Flat}
-              onChange={linkEvent(this, this.handleCommentViewTypeChange)}
-            />
           </label>
         </div>
       </>

From 53348d5ac4ba0d6af9204a41398622f228f2fa94 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jsit@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:41:12 -0400
Subject: [PATCH 02/11] fix: Add focus ring color to post action buttons and
 markdown help link (#1816)

---
 src/shared/components/common/markdown-textarea.tsx |  2 +-
 src/shared/components/post/post-listing.tsx        | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 7cccbb11..cd4b5e4b 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -219,7 +219,7 @@ export class MarkdownTextArea extends Component<
                 {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
                 <a
                   href={markdownHelpUrl}
-                  className="btn btn-sm text-muted fw-bold"
+                  className="btn btn-sm btn-link rounded-0 text-muted fw-bold"
                   title={I18NextService.i18n.t("formatting_help")}
                   rel={relTags}
                 >
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 5dcff2fc..d9b3ad28 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -602,7 +602,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {this.commentsButton}
         {canShare() && (
           <button
-            className="btn btn-sm btn-animate text-muted py-0"
+            className="btn btn-sm btn-link btn-animate text-muted py-0"
             onClick={linkEvent(this, this.handleShare)}
             type="button"
           >
@@ -611,7 +611,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         )}
         {!post.local && (
           <a
-            className="btn btn-sm btn-animate text-muted py-0"
+            className="btn btn-sm btn-link btn-animate text-muted py-0"
             title={I18NextService.i18n.t("link")}
             href={post.ap_id}
           >
@@ -650,7 +650,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
         <div className="dropdown">
           <button
-            className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
+            className="btn btn-sm btn-link btn-animate text-muted py-0 dropdown-toggle"
             onClick={linkEvent(this, this.handleShowAdvanced)}
             data-tippy-content={I18NextService.i18n.t("more")}
             data-bs-toggle="dropdown"
@@ -783,7 +783,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       : I18NextService.i18n.t("save");
     return (
       <button
-        className="btn btn-sm btn-animate text-muted py-0"
+        className="btn btn-sm btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleSavePostClick)}
         data-tippy-content={label}
         aria-label={label}
@@ -804,7 +804,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get crossPostButton() {
     return (
       <Link
-        className="btn btn-sm btn-animate text-muted py-0"
+        className="btn btn-sm btn-link btn-animate text-muted py-0"
         to={{
           /* Empty string properties are required to satisfy type*/
           pathname: "/create_post",
@@ -894,7 +894,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get viewSourceButton() {
     return (
       <button
-        className="btn btn-sm btn-animate text-muted py-0"
+        className="btn btn-sm btn-link btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleViewSource)}
         data-tippy-content={I18NextService.i18n.t("view_source")}
         aria-label={I18NextService.i18n.t("view_source")}

From 3a89454e829d2a7ed59346c35b83c6991fd7b1b7 Mon Sep 17 00:00:00 2001
From: Dennis Saw <dennissaw12@gmail.com>
Date: Wed, 5 Jul 2023 08:42:44 -0700
Subject: [PATCH 03/11] Use Join Lemmy hostname as link text in footer (#1737)

* Use Join Lemmy URL as link text in footer when there's a user

I think it makes sense to keep a link to the Join Lemmy website even
though there's a logged in user. There's plenty of other useful info on
that website beyond just joining Lemmy.

Using the URL avoids the phrase "Join Lemmy" and should indicate that
you're navigating to said website.

* Extract hostname from the existing URL constant instead

* Just use hostname of join lemmy site in footer

To maintain consistency whether logged in or not.
---
 src/shared/components/app/footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/app/footer.tsx b/src/shared/components/app/footer.tsx
index 6409ef35..17f7dc29 100644
--- a/src/shared/components/app/footer.tsx
+++ b/src/shared/components/app/footer.tsx
@@ -58,7 +58,7 @@ export class Footer extends Component<FooterProps, any> {
             </li>
             <li className="nav-item">
               <a className="nav-link" href={joinLemmyUrl}>
-                {I18NextService.i18n.t("join_lemmy")}
+                {new URL(joinLemmyUrl).hostname}
               </a>
             </li>
           </ul>

From 9ce164245f51b834997f31f3f12497ee87474965 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jsit@users.noreply.github.com>
Date: Wed, 5 Jul 2023 15:31:08 -0400
Subject: [PATCH 04/11] fix: Fix mobile thumbnail being too small (#1814)

Co-authored-by: SleeplessOne1917 <abias1122@gmail.com>
---
 src/assets/css/main.css                     | 5 +++++
 src/shared/components/post/post-listing.tsx | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b92f0866..36566b9b 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -204,6 +204,11 @@ blockquote {
   height: 5rem;
 }
 
+.mobile-thumbnail-container .thumbnail {
+  width: 100%;
+  height: auto;
+}
+
 .thumbnail svg {
   height: 1.25rem;
   width: 1.25rem;
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index d9b3ad28..eb4dc8d9 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1327,10 +1327,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
     return post.thumbnail_url || (post.url && isImage(post.url)) ? (
       <div className="row">
-        <div className={`${this.state.imageExpanded ? "col-12" : "col-8"}`}>
+        <div className={`${this.state.imageExpanded ? "col-12" : "col-9"}`}>
           {this.postTitleLine()}
         </div>
-        <div className="col-4">
+        <div className="col-3 mobile-thumbnail-container">
           {/* Post thumbnail */}
           {!this.state.imageExpanded && this.thumbnail()}
         </div>

From 1de0fdb8c25931b08dac985dac76e4113636aff2 Mon Sep 17 00:00:00 2001
From: Michael Charles Aubrey <aubrey@michaelcharl.es>
Date: Thu, 6 Jul 2023 20:44:32 +0900
Subject: [PATCH 05/11] add ruby annotation support (#1831)

---
 package.json           |  1 +
 src/shared/markdown.ts |  2 ++
 yarn.lock              | 43 ++++++++----------------------------------
 3 files changed, 11 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 6e2babb9..0d5f7702 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "markdown-it-emoji": "^2.0.2",
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-html5-embed": "^1.0.0",
+    "markdown-it-ruby": "^0.1.1",
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
     "mini-css-extract-plugin": "^2.7.5",
diff --git a/src/shared/markdown.ts b/src/shared/markdown.ts
index 9f1ec733..85aa8ee3 100644
--- a/src/shared/markdown.ts
+++ b/src/shared/markdown.ts
@@ -10,6 +10,7 @@ import markdown_it_container from "markdown-it-container";
 // import markdown_it_emoji from "markdown-it-emoji/bare";
 import markdown_it_footnote from "markdown-it-footnote";
 import markdown_it_html5_embed from "markdown-it-html5-embed";
+import markdown_it_ruby from "markdown-it-ruby";
 import markdown_it_sub from "markdown-it-sub";
 import markdown_it_sup from "markdown-it-sup";
 import Renderer from "markdown-it/lib/renderer";
@@ -159,6 +160,7 @@ export function setupMarkdown() {
     .use(markdown_it_footnote)
     .use(markdown_it_html5_embed, html5EmbedConfig)
     .use(markdown_it_container, "spoiler", spoilerConfig)
+    .use(markdown_it_ruby)
     .use(localInstanceLinkParser);
   // .use(markdown_it_emoji, {
   //   defs: emojiDefs,
diff --git a/yarn.lock b/yarn.lock
index 173cecd8..cbaa3b8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3026,7 +3026,7 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz"
   integrity sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==
@@ -4759,7 +4759,7 @@ import-sort@^6.0.0:
     is-builtin-module "^3.0.0"
     resolve "^1.8.1"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
@@ -5646,11 +5646,6 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha512-bSYo8Pc/f0qAkr8fPJydpJjtrHiSynYfYBjtANIgXv5xEf1WlTC63dIDlgu0s9dmTvzRu1+JJTxcIAHe+sH0FQ==
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz"
@@ -5659,33 +5654,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha512-2wlI0JRAGX8WEf4Gm1p/mv/SZ+jLijpj0jyaE/AXeuQphzCgD8ZQW4oSpoN8JAopujOFGU3KMuq7qfHBWlGpjQ==
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha512-S8dUjWr7SUT/X6TBIQ/OYoCHo1Stu1ZRy6uMUSKqzFnZp5G5RyQizSm6kvxD2Ewyy6AVfMg4AToeZzKfF99T5w==
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha512-ev5SP+iFpZOugyab/DEUQxUeZP5qyciVTlgQ1f4Vlw7VUcCD8fVnyIqVUEIaoFH9zjAqdgi69KiofzvVmda/ZQ==
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha512-RrL9VxMEPyDMHOd9uFbvMe8X55X16/cGM5IgOKgRElQZutpX89iS6vwl64duTV1/16w5JY7tuFNXqoekmh1EmA==
-
 lodash._root@~3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
@@ -5711,11 +5684,6 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw==
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
@@ -5890,6 +5858,11 @@ markdown-it-html5-embed@^1.0.0:
     markdown-it "^8.4.0"
     mimoza "~1.0.0"
 
+markdown-it-ruby@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-ruby/-/markdown-it-ruby-0.1.1.tgz#6e2050a9b2c3275afc2844920d53cdffbbe12f78"
+  integrity sha512-ct8t/Drt7scv20VdaQtOhpBOC2SDICaW8E/WQS8kY2eUdu0eoDwW8ugXcCy8Vku4Y5CuA5qrewlHpwaFsJxbpQ==
+
 markdown-it-sub@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz"
@@ -7477,7 +7450,7 @@ readable-stream@~1.1.10:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
   integrity sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==

From 02198f1076acd110e24c2c1916551a2839a1d764 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Thu, 6 Jul 2023 09:15:44 -0400
Subject: [PATCH 06/11] v0.18.1-rc.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0d5f7702..1222f5ba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.1-rc.10",
+  "version": "0.18.1-rc.11",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",

From 53a5bfe59271ec6de08c43e0731784e33519cc3a Mon Sep 17 00:00:00 2001
From: Oliver White <46496055+oliverwhite19@users.noreply.github.com>
Date: Fri, 7 Jul 2023 08:22:50 -0400
Subject: [PATCH 07/11] fix: Adjust sidebar banner to wrap bellow the title
 (#1819)

* fix: Adjust sidebar banner to wrap bellow the title

* remove flex and add bottom border when uncollapsed

* use classnames utility
---
 src/shared/components/home/site-sidebar.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 78090dd9..52ecbbc7 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
 import { mdToHtml } from "../../markdown";
@@ -32,10 +33,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     return (
       <div className="site-sidebar accordion">
         <section id="sidebarInfo" className="card border-secondary mb-3">
-          <header
-            className="card-header d-flex align-items-center"
-            id="sidebarInfoHeader"
-          >
+          <header className="card-header" id="sidebarInfoHeader">
             {this.siteName()}
             {!this.state.collapsed && (
               <BannerIconHeader banner={this.props.site.banner} />
@@ -54,7 +52,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   siteName() {
     return (
-      <>
+      <div className={classNames({ "mb-2": !this.state.collapsed })}>
         <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
         {!this.props.isMobile && (
           <button
@@ -83,7 +81,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
             )}
           </button>
         )}
-      </>
+      </div>
     );
   }
 

From f854a51090c5f5e20968f4d0d22813e0db0a9c9c Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <abias1122@gmail.com>
Date: Fri, 7 Jul 2023 12:23:25 +0000
Subject: [PATCH 08/11] Dark theme tweaks (#1840)

* Make post titles visible on i386

* Make post titles visible on vaporwave dark

* Undo unnecessary changes
---
 src/assets/css/themes/_variables.i386.scss    |   2 +-
 .../css/themes/_variables.vaporwave-dark.scss |   1 +
 src/assets/css/themes/i386.css                | 224 +++++++++---------
 src/assets/css/themes/vaporwave-dark.css      | 188 ++++++++-------
 src/assets/css/themes/vaporwave-light.css     | 110 ++++-----
 5 files changed, 267 insertions(+), 258 deletions(-)

diff --git a/src/assets/css/themes/_variables.i386.scss b/src/assets/css/themes/_variables.i386.scss
index 3273a63b..750429e2 100644
--- a/src/assets/css/themes/_variables.i386.scss
+++ b/src/assets/css/themes/_variables.i386.scss
@@ -26,7 +26,7 @@ $danger: #aa0000;
 $info: #00aaaa;
 $warning: #aa00aa;
 $light: $gray-800;
-$dark: black;
+$dark: $gray-300;
 
 $body-bg: #000084;
 $body-color: $gray-300;
diff --git a/src/assets/css/themes/_variables.vaporwave-dark.scss b/src/assets/css/themes/_variables.vaporwave-dark.scss
index 09c8eb35..ca737262 100644
--- a/src/assets/css/themes/_variables.vaporwave-dark.scss
+++ b/src/assets/css/themes/_variables.vaporwave-dark.scss
@@ -9,6 +9,7 @@ $gray-800: #303030;
 $gray-900: #222;
 
 $light: $gray-700;
+$dark: $gray-200;
 
 $body-bg: $gray-900;
 $body-color: $gray-200;
diff --git a/src/assets/css/themes/i386.css b/src/assets/css/themes/i386.css
index 51de7d67..6c0084a2 100644
--- a/src/assets/css/themes/i386.css
+++ b/src/assets/css/themes/i386.css
@@ -26,35 +26,35 @@
   --bs-gray-400: #ced4da;
   --bs-gray-500: #adb5bd;
   --bs-gray-600: #6c757d;
-  --bs-gray-700: #495057;
+  --bs-gray-700: #444;
   --bs-gray-800: #303030;
-  --bs-gray-900: #222;
+  --bs-gray-900: #2f2f2f;
   --bs-primary: #fefe54;
-  --bs-secondary: #222;
+  --bs-secondary: #303030;
   --bs-success: #00aa00;
   --bs-info: #00aaaa;
   --bs-warning: #aa00aa;
   --bs-danger: #aa0000;
-  --bs-light: #303030;
-  --bs-dark: black;
+  --bs-light: #444;
+  --bs-dark: #bbb;
   --bs-primary-rgb: 254, 254, 84;
-  --bs-secondary-rgb: 34, 34, 34;
+  --bs-secondary-rgb: 48, 48, 48;
   --bs-success-rgb: 0, 170, 0;
   --bs-info-rgb: 0, 170, 170;
   --bs-warning-rgb: 170, 0, 170;
   --bs-danger-rgb: 170, 0, 0;
-  --bs-light-rgb: 48, 48, 48;
-  --bs-dark-rgb: 0, 0, 0;
+  --bs-light-rgb: 68, 68, 68;
+  --bs-dark-rgb: 187, 187, 187;
   --bs-primary-text-emphasis: #666622;
-  --bs-secondary-text-emphasis: #0e0e0e;
+  --bs-secondary-text-emphasis: #131313;
   --bs-success-text-emphasis: #004400;
   --bs-info-text-emphasis: #004444;
   --bs-warning-text-emphasis: #440044;
   --bs-danger-text-emphasis: #440000;
-  --bs-light-text-emphasis: #495057;
-  --bs-dark-text-emphasis: #495057;
+  --bs-light-text-emphasis: #444;
+  --bs-dark-text-emphasis: #444;
   --bs-primary-bg-subtle: #ffffdd;
-  --bs-secondary-bg-subtle: lightgray;
+  --bs-secondary-bg-subtle: #d6d6d6;
   --bs-success-bg-subtle: #cceecc;
   --bs-info-bg-subtle: #cceeee;
   --bs-warning-bg-subtle: #eeccee;
@@ -62,7 +62,7 @@
   --bs-light-bg-subtle: #fcfcfd;
   --bs-dark-bg-subtle: #ced4da;
   --bs-primary-border-subtle: #ffffbb;
-  --bs-secondary-border-subtle: #a7a7a7;
+  --bs-secondary-border-subtle: #acacac;
   --bs-success-border-subtle: #99dd99;
   --bs-info-border-subtle: #99dddd;
   --bs-warning-border-subtle: #dd99dd;
@@ -129,8 +129,8 @@
   color-scheme: dark;
   --bs-body-color: #adb5bd;
   --bs-body-color-rgb: 173, 181, 189;
-  --bs-body-bg: #222;
-  --bs-body-bg-rgb: 34, 34, 34;
+  --bs-body-bg: #2f2f2f;
+  --bs-body-bg-rgb: 47, 47, 47;
   --bs-emphasis-color: #fff;
   --bs-emphasis-color-rgb: 255, 255, 255;
   --bs-secondary-color: rgba(173, 181, 189, 0.75);
@@ -139,10 +139,10 @@
   --bs-secondary-bg-rgb: 48, 48, 48;
   --bs-tertiary-color: rgba(173, 181, 189, 0.5);
   --bs-tertiary-color-rgb: 173, 181, 189;
-  --bs-tertiary-bg: #292929;
-  --bs-tertiary-bg-rgb: 41, 41, 41;
+  --bs-tertiary-bg: #303030;
+  --bs-tertiary-bg-rgb: 48, 48, 48;
   --bs-primary-text-emphasis: #fefe98;
-  --bs-secondary-text-emphasis: #7a7a7a;
+  --bs-secondary-text-emphasis: #838383;
   --bs-success-text-emphasis: #66cc66;
   --bs-info-text-emphasis: #66cccc;
   --bs-warning-text-emphasis: #cc66cc;
@@ -150,7 +150,7 @@
   --bs-light-text-emphasis: #f8f9fa;
   --bs-dark-text-emphasis: #bbb;
   --bs-primary-bg-subtle: #333311;
-  --bs-secondary-bg-subtle: #070707;
+  --bs-secondary-bg-subtle: #0a0a0a;
   --bs-success-bg-subtle: #002200;
   --bs-info-bg-subtle: #002222;
   --bs-warning-bg-subtle: #220022;
@@ -158,12 +158,12 @@
   --bs-light-bg-subtle: #303030;
   --bs-dark-bg-subtle: #181818;
   --bs-primary-border-subtle: #989832;
-  --bs-secondary-border-subtle: #141414;
+  --bs-secondary-border-subtle: #1d1d1d;
   --bs-success-border-subtle: #006600;
   --bs-info-border-subtle: #006666;
   --bs-warning-border-subtle: #660066;
   --bs-danger-border-subtle: #660000;
-  --bs-light-border-subtle: #495057;
+  --bs-light-border-subtle: #444;
   --bs-dark-border-subtle: #303030;
   --bs-heading-color: inherit;
   --bs-link-color: #fefe98;
@@ -171,7 +171,7 @@
   --bs-link-color-rgb: 254, 254, 152;
   --bs-link-hover-color-rgb: 254, 254, 173;
   --bs-code-color: #fe98fe;
-  --bs-border-color: #495057;
+  --bs-border-color: #444;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #99ff99;
   --bs-form-valid-border-color: #99ff99;
@@ -1942,13 +1942,13 @@ progress {
 
 .table-secondary {
   --bs-table-color: #000;
-  --bs-table-bg: lightgray;
-  --bs-table-border-color: #bebebe;
-  --bs-table-striped-bg: #c8c8c8;
+  --bs-table-bg: #d6d6d6;
+  --bs-table-border-color: #c1c1c1;
+  --bs-table-striped-bg: #cbcbcb;
   --bs-table-striped-color: #000;
-  --bs-table-active-bg: #bebebe;
+  --bs-table-active-bg: #c1c1c1;
   --bs-table-active-color: #000;
-  --bs-table-hover-bg: #c3c3c3;
+  --bs-table-hover-bg: #c6c6c6;
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
@@ -2012,28 +2012,28 @@ progress {
 
 .table-light {
   --bs-table-color: #fff;
-  --bs-table-bg: #303030;
-  --bs-table-border-color: #454545;
-  --bs-table-striped-bg: #3a3a3a;
+  --bs-table-bg: #444;
+  --bs-table-border-color: #575757;
+  --bs-table-striped-bg: #4d4d4d;
   --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #454545;
+  --bs-table-active-bg: #575757;
   --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #404040;
+  --bs-table-hover-bg: #525252;
   --bs-table-hover-color: #fff;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
 }
 
 .table-dark {
-  --bs-table-color: #fff;
-  --bs-table-bg: black;
-  --bs-table-border-color: #1a1a1a;
-  --bs-table-striped-bg: #0d0d0d;
-  --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #1a1a1a;
-  --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #131313;
-  --bs-table-hover-color: #fff;
+  --bs-table-color: #000;
+  --bs-table-bg: #bbb;
+  --bs-table-border-color: #a8a8a8;
+  --bs-table-striped-bg: #b2b2b2;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #a8a8a8;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #adadad;
+  --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
 }
@@ -2933,19 +2933,19 @@ textarea.form-control-lg {
 
 .btn-secondary {
   --bs-btn-color: #fff;
-  --bs-btn-bg: #222;
-  --bs-btn-border-color: #222;
+  --bs-btn-bg: #303030;
+  --bs-btn-border-color: #303030;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #1d1d1d;
-  --bs-btn-hover-border-color: #1b1b1b;
-  --bs-btn-focus-shadow-rgb: 67, 67, 67;
+  --bs-btn-hover-bg: #292929;
+  --bs-btn-hover-border-color: #262626;
+  --bs-btn-focus-shadow-rgb: 79, 79, 79;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #1b1b1b;
-  --bs-btn-active-border-color: #1a1a1a;
+  --bs-btn-active-bg: #262626;
+  --bs-btn-active-border-color: #242424;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #222;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-bg: #303030;
+  --bs-btn-disabled-border-color: #303030;
 }
 
 .btn-success {
@@ -3018,36 +3018,36 @@ textarea.form-control-lg {
 
 .btn-light {
   --bs-btn-color: #fff;
-  --bs-btn-bg: #303030;
-  --bs-btn-border-color: #303030;
+  --bs-btn-bg: #444;
+  --bs-btn-border-color: #444;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #292929;
-  --bs-btn-hover-border-color: #262626;
-  --bs-btn-focus-shadow-rgb: 79, 79, 79;
+  --bs-btn-hover-bg: #3a3a3a;
+  --bs-btn-hover-border-color: #363636;
+  --bs-btn-focus-shadow-rgb: 96, 96, 96;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #262626;
-  --bs-btn-active-border-color: #242424;
+  --bs-btn-active-bg: #363636;
+  --bs-btn-active-border-color: #333333;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #303030;
-  --bs-btn-disabled-border-color: #303030;
+  --bs-btn-disabled-bg: #444;
+  --bs-btn-disabled-border-color: #444;
 }
 
 .btn-dark {
-  --bs-btn-color: #fff;
-  --bs-btn-bg: black;
-  --bs-btn-border-color: black;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #262626;
-  --bs-btn-hover-border-color: #1a1a1a;
-  --bs-btn-focus-shadow-rgb: 38, 38, 38;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #333333;
-  --bs-btn-active-border-color: #1a1a1a;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #bbb;
+  --bs-btn-border-color: #bbb;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #c5c5c5;
+  --bs-btn-hover-border-color: #c2c2c2;
+  --bs-btn-focus-shadow-rgb: 159, 159, 159;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #c9c9c9;
+  --bs-btn-active-border-color: #c2c2c2;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: black;
-  --bs-btn-disabled-border-color: black;
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #bbb;
+  --bs-btn-disabled-border-color: #bbb;
 }
 
 .btn-outline-primary {
@@ -3068,19 +3068,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-secondary {
-  --bs-btn-color: #222;
-  --bs-btn-border-color: #222;
+  --bs-btn-color: #303030;
+  --bs-btn-border-color: #303030;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #222;
-  --bs-btn-hover-border-color: #222;
-  --bs-btn-focus-shadow-rgb: 34, 34, 34;
+  --bs-btn-hover-bg: #303030;
+  --bs-btn-hover-border-color: #303030;
+  --bs-btn-focus-shadow-rgb: 48, 48, 48;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #222;
-  --bs-btn-active-border-color: #222;
+  --bs-btn-active-bg: #303030;
+  --bs-btn-active-border-color: #303030;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #222;
+  --bs-btn-disabled-color: #303030;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-border-color: #303030;
   --bs-gradient: none;
 }
 
@@ -3153,36 +3153,36 @@ textarea.form-control-lg {
 }
 
 .btn-outline-light {
-  --bs-btn-color: #303030;
-  --bs-btn-border-color: #303030;
+  --bs-btn-color: #444;
+  --bs-btn-border-color: #444;
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #303030;
-  --bs-btn-hover-border-color: #303030;
-  --bs-btn-focus-shadow-rgb: 48, 48, 48;
+  --bs-btn-hover-bg: #444;
+  --bs-btn-hover-border-color: #444;
+  --bs-btn-focus-shadow-rgb: 68, 68, 68;
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #303030;
-  --bs-btn-active-border-color: #303030;
+  --bs-btn-active-bg: #444;
+  --bs-btn-active-border-color: #444;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #303030;
+  --bs-btn-disabled-color: #444;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #303030;
+  --bs-btn-disabled-border-color: #444;
   --bs-gradient: none;
 }
 
 .btn-outline-dark {
-  --bs-btn-color: black;
-  --bs-btn-border-color: black;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: black;
-  --bs-btn-hover-border-color: black;
-  --bs-btn-focus-shadow-rgb: 0, 0, 0;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: black;
-  --bs-btn-active-border-color: black;
+  --bs-btn-color: #bbb;
+  --bs-btn-border-color: #bbb;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #bbb;
+  --bs-btn-hover-border-color: #bbb;
+  --bs-btn-focus-shadow-rgb: 187, 187, 187;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #bbb;
+  --bs-btn-active-border-color: #bbb;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: black;
+  --bs-btn-disabled-color: #bbb;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: black;
+  --bs-btn-disabled-border-color: #bbb;
   --bs-gradient: none;
 }
 
@@ -6490,7 +6490,7 @@ textarea.form-control-lg {
 
 .text-bg-secondary {
   color: #fff !important;
-  background-color: RGBA(34, 34, 34, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(48, 48, 48, var(--bs-bg-opacity, 1)) !important;
 }
 
 .text-bg-success {
@@ -6515,12 +6515,12 @@ textarea.form-control-lg {
 
 .text-bg-light {
   color: #fff !important;
-  background-color: RGBA(48, 48, 48, var(--bs-bg-opacity, 1)) !important;
+  background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important;
 }
 
 .text-bg-dark {
-  color: #fff !important;
-  background-color: RGBA(0, 0, 0, var(--bs-bg-opacity, 1)) !important;
+  color: #000 !important;
+  background-color: RGBA(187, 187, 187, var(--bs-bg-opacity, 1)) !important;
 }
 
 .link-primary {
@@ -6537,8 +6537,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(27, 27, 27, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(27, 27, 27, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(38, 38, 38, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(38, 38, 38, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-success {
@@ -6582,8 +6582,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-light:hover, .link-light:focus {
-  color: RGBA(38, 38, 38, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(38, 38, 38, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-dark {
@@ -6591,8 +6591,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-dark:hover, .link-dark:focus {
-  color: RGBA(0, 0, 0, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(0, 0, 0, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(201, 201, 201, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(201, 201, 201, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-body-emphasis {
@@ -11588,7 +11588,7 @@ textarea.form-control-lg {
 .dropdown-item.active,
 .dropdown-item:hover,
 option:disabled {
-  color: #222;
+  color: #303030;
 }
 
 .input-group-text {
diff --git a/src/assets/css/themes/vaporwave-dark.css b/src/assets/css/themes/vaporwave-dark.css
index c7f13e19..61a75914 100644
--- a/src/assets/css/themes/vaporwave-dark.css
+++ b/src/assets/css/themes/vaporwave-dark.css
@@ -36,7 +36,7 @@
   --bs-warning: #fffb96;
   --bs-danger: rgb(255, 95, 110);
   --bs-light: #444;
-  --bs-dark: #222;
+  --bs-dark: #ebebeb;
   --bs-primary-rgb: 255, 64, 186;
   --bs-secondary-rgb: 1, 205, 254;
   --bs-success-rgb: 5, 255, 161;
@@ -44,7 +44,7 @@
   --bs-warning-rgb: 255, 251, 150;
   --bs-danger-rgb: 255, 95, 110;
   --bs-light-rgb: 68, 68, 68;
-  --bs-dark-rgb: 34, 34, 34;
+  --bs-dark-rgb: 235, 235, 235;
   --bs-primary-text-emphasis: #661a4a;
   --bs-secondary-text-emphasis: #005266;
   --bs-success-text-emphasis: #026640;
@@ -74,8 +74,9 @@
   --bs-font-sans-serif: "Lucida Console", Monaco, monospace;
   --bs-font-monospace: Arial, "Noto Sans", sans-serif;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-root-font-size: 93.75%;
   --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 0.875rem;
+  --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
   --bs-body-line-height: 1.5;
   --bs-body-color: #ebebeb;
@@ -184,6 +185,9 @@
   box-sizing: border-box;
 }
 
+:root {
+  font-size: var(--bs-root-font-size);
+}
 @media (prefers-reduced-motion: no-preference) {
   :root {
     scroll-behavior: smooth;
@@ -220,47 +224,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
 }
 
 h1, .h1 {
-  font-size: calc(1.34375rem + 1.125vw);
+  font-size: calc(1.375rem + 1.5vw);
 }
 @media (min-width: 1200px) {
   h1, .h1 {
-    font-size: 2.1875rem;
+    font-size: 2.5rem;
   }
 }
 
 h2, .h2 {
-  font-size: calc(1.3rem + 0.6vw);
+  font-size: calc(1.325rem + 0.9vw);
 }
 @media (min-width: 1200px) {
   h2, .h2 {
-    font-size: 1.75rem;
+    font-size: 2rem;
   }
 }
 
 h3, .h3 {
-  font-size: calc(1.278125rem + 0.3375vw);
+  font-size: calc(1.3rem + 0.6vw);
 }
 @media (min-width: 1200px) {
   h3, .h3 {
-    font-size: 1.53125rem;
+    font-size: 1.75rem;
   }
 }
 
 h4, .h4 {
-  font-size: calc(1.25625rem + 0.075vw);
+  font-size: calc(1.275rem + 0.3vw);
 }
 @media (min-width: 1200px) {
   h4, .h4 {
-    font-size: 1.3125rem;
+    font-size: 1.5rem;
   }
 }
 
 h5, .h5 {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 
 h6, .h6 {
-  font-size: 0.875rem;
+  font-size: 1rem;
 }
 
 p {
@@ -586,7 +590,7 @@ progress {
 }
 
 .lead {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   font-weight: 300;
 }
 
@@ -680,7 +684,7 @@ progress {
 
 .blockquote {
   margin-bottom: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 .blockquote > :last-child {
   margin-bottom: 0;
@@ -2025,15 +2029,15 @@ progress {
 }
 
 .table-dark {
-  --bs-table-color: #fff;
-  --bs-table-bg: #222;
-  --bs-table-border-color: #383838;
-  --bs-table-striped-bg: #2d2d2d;
-  --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #383838;
-  --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #333333;
-  --bs-table-hover-color: #fff;
+  --bs-table-color: #000;
+  --bs-table-bg: #ebebeb;
+  --bs-table-border-color: #d4d4d4;
+  --bs-table-striped-bg: #dfdfdf;
+  --bs-table-striped-color: #000;
+  --bs-table-active-bg: #d4d4d4;
+  --bs-table-active-color: #000;
+  --bs-table-hover-bg: #d9d9d9;
+  --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
 }
@@ -2088,13 +2092,13 @@ progress {
 .col-form-label-lg {
   padding-top: calc(0.5rem + var(--bs-border-width));
   padding-bottom: calc(0.5rem + var(--bs-border-width));
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 
 .col-form-label-sm {
   padding-top: calc(0.25rem + var(--bs-border-width));
   padding-bottom: calc(0.25rem + var(--bs-border-width));
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
 }
 
 .form-text {
@@ -2107,7 +2111,7 @@ progress {
   display: block;
   width: 100%;
   padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #fff;
@@ -2200,7 +2204,7 @@ progress {
 .form-control-sm {
   min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
   padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 .form-control-sm::file-selector-button {
@@ -2212,7 +2216,7 @@ progress {
 .form-control-lg {
   min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
   padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 .form-control-lg::file-selector-button {
@@ -2259,7 +2263,7 @@ textarea.form-control-lg {
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #fff;
@@ -2300,7 +2304,7 @@ textarea.form-control-lg {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-left: 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 
@@ -2308,7 +2312,7 @@ textarea.form-control-lg {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 
@@ -2318,7 +2322,7 @@ textarea.form-control-lg {
 
 .form-check {
   display: block;
-  min-height: 1.3125rem;
+  min-height: 1.5rem;
   padding-left: 1.5em;
   margin-bottom: 0.125rem;
 }
@@ -2654,7 +2658,7 @@ textarea.form-control-lg {
   display: flex;
   align-items: center;
   padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #fff;
@@ -2670,7 +2674,7 @@ textarea.form-control-lg {
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
   padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 
@@ -2679,7 +2683,7 @@ textarea.form-control-lg {
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
   padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 
@@ -2729,7 +2733,7 @@ textarea.form-control-lg {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-success);
   border-radius: var(--bs-border-radius);
@@ -2819,7 +2823,7 @@ textarea.form-control-lg {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-danger);
   border-radius: var(--bs-border-radius);
@@ -2897,7 +2901,7 @@ textarea.form-control-lg {
   --bs-btn-padding-x: 0.75rem;
   --bs-btn-padding-y: 0.375rem;
   --bs-btn-font-family: ;
-  --bs-btn-font-size: 0.875rem;
+  --bs-btn-font-size: 1rem;
   --bs-btn-font-weight: 400;
   --bs-btn-line-height: 1.5;
   --bs-btn-color: var(--bs-body-color);
@@ -3095,20 +3099,20 @@ textarea.form-control-lg {
 }
 
 .btn-dark {
-  --bs-btn-color: #fff;
-  --bs-btn-bg: #222;
-  --bs-btn-border-color: #222;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #434343;
-  --bs-btn-hover-border-color: #383838;
-  --bs-btn-focus-shadow-rgb: 67, 67, 67;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #4e4e4e;
-  --bs-btn-active-border-color: #383838;
+  --bs-btn-color: #000;
+  --bs-btn-bg: #ebebeb;
+  --bs-btn-border-color: #ebebeb;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #eeeeee;
+  --bs-btn-hover-border-color: #ededed;
+  --bs-btn-focus-shadow-rgb: 200, 200, 200;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #efefef;
+  --bs-btn-active-border-color: #ededed;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #222;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #ebebeb;
+  --bs-btn-disabled-border-color: #ebebeb;
 }
 
 .btn-outline-primary {
@@ -3231,19 +3235,19 @@ textarea.form-control-lg {
 }
 
 .btn-outline-dark {
-  --bs-btn-color: #222;
-  --bs-btn-border-color: #222;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #222;
-  --bs-btn-hover-border-color: #222;
-  --bs-btn-focus-shadow-rgb: 34, 34, 34;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #222;
-  --bs-btn-active-border-color: #222;
+  --bs-btn-color: #ebebeb;
+  --bs-btn-border-color: #ebebeb;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #ebebeb;
+  --bs-btn-hover-border-color: #ebebeb;
+  --bs-btn-focus-shadow-rgb: 235, 235, 235;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #ebebeb;
+  --bs-btn-active-border-color: #ebebeb;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #222;
+  --bs-btn-disabled-color: #ebebeb;
   --bs-btn-disabled-bg: transparent;
-  --bs-btn-disabled-border-color: #222;
+  --bs-btn-disabled-border-color: #ebebeb;
   --bs-gradient: none;
 }
 
@@ -3273,14 +3277,14 @@ textarea.form-control-lg {
 .btn-lg, .btn-group-lg > .btn {
   --bs-btn-padding-y: 0.5rem;
   --bs-btn-padding-x: 1rem;
-  --bs-btn-font-size: 1.09375rem;
+  --bs-btn-font-size: 1.25rem;
   --bs-btn-border-radius: var(--bs-border-radius-lg);
 }
 
 .btn-sm, .btn-group-sm > .btn {
   --bs-btn-padding-y: 0.25rem;
   --bs-btn-padding-x: 0.5rem;
-  --bs-btn-font-size: 0.765625rem;
+  --bs-btn-font-size: 0.875rem;
   --bs-btn-border-radius: var(--bs-border-radius-sm);
 }
 
@@ -3353,7 +3357,7 @@ textarea.form-control-lg {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 0.875rem;
+  --bs-dropdown-font-size: 1rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: var(--bs-body-bg);
   --bs-dropdown-border-color: var(--bs-border-color-translucent);
@@ -3615,7 +3619,7 @@ textarea.form-control-lg {
   display: block;
   padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
   margin-bottom: 0;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   color: var(--bs-dropdown-header-color);
   white-space: nowrap;
 }
@@ -3900,15 +3904,15 @@ textarea.form-control-lg {
   --bs-navbar-hover-color: rgba(255, 64, 186, 0.7);
   --bs-navbar-disabled-color: rgba(235, 235, 235, 0.3);
   --bs-navbar-active-color: rgba(235, 235, 235, 0.9);
-  --bs-navbar-brand-padding-y: 0.3359375rem;
+  --bs-navbar-brand-padding-y: 0.3125rem;
   --bs-navbar-brand-margin-end: 1rem;
-  --bs-navbar-brand-font-size: 1.09375rem;
+  --bs-navbar-brand-font-size: 1.25rem;
   --bs-navbar-brand-color: rgba(235, 235, 235, 0.9);
   --bs-navbar-brand-hover-color: rgba(235, 235, 235, 0.9);
   --bs-navbar-nav-link-padding-x: 0.5rem;
   --bs-navbar-toggler-padding-y: 0.25rem;
   --bs-navbar-toggler-padding-x: 0.75rem;
-  --bs-navbar-toggler-font-size: 1.09375rem;
+  --bs-navbar-toggler-font-size: 1.25rem;
   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28235, 235, 235, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
   --bs-navbar-toggler-border-radius: var(--bs-border-radius);
@@ -4545,7 +4549,7 @@ textarea.form-control-lg {
   align-items: center;
   width: 100%;
   padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
-  font-size: 0.875rem;
+  font-size: 1rem;
   color: var(--bs-accordion-btn-color);
   text-align: left;
   background-color: var(--bs-accordion-btn-bg);
@@ -4689,7 +4693,7 @@ textarea.form-control-lg {
 .pagination {
   --bs-pagination-padding-x: 0.75rem;
   --bs-pagination-padding-y: 0.375rem;
-  --bs-pagination-font-size: 0.875rem;
+  --bs-pagination-font-size: 1rem;
   --bs-pagination-color: var(--bs-link-color);
   --bs-pagination-bg: var(--bs-body-bg);
   --bs-pagination-border-width: var(--bs-border-width);
@@ -4769,14 +4773,14 @@ textarea.form-control-lg {
 .pagination-lg {
   --bs-pagination-padding-x: 1.5rem;
   --bs-pagination-padding-y: 0.75rem;
-  --bs-pagination-font-size: 1.09375rem;
+  --bs-pagination-font-size: 1.25rem;
   --bs-pagination-border-radius: var(--bs-border-radius-lg);
 }
 
 .pagination-sm {
   --bs-pagination-padding-x: 0.5rem;
   --bs-pagination-padding-y: 0.25rem;
-  --bs-pagination-font-size: 0.765625rem;
+  --bs-pagination-font-size: 0.875rem;
   --bs-pagination-border-radius: var(--bs-border-radius-sm);
 }
 
@@ -4911,7 +4915,7 @@ textarea.form-control-lg {
 .progress,
 .progress-stacked {
   --bs-progress-height: 1rem;
-  --bs-progress-font-size: 0.65625rem;
+  --bs-progress-font-size: 0.75rem;
   --bs-progress-bg: var(--bs-secondary-bg);
   --bs-progress-border-radius: var(--bs-border-radius);
   --bs-progress-box-shadow: var(--bs-box-shadow-inset);
@@ -5717,7 +5721,7 @@ textarea.form-control-lg {
   --bs-tooltip-padding-x: 0.5rem;
   --bs-tooltip-padding-y: 0.25rem;
   --bs-tooltip-margin: ;
-  --bs-tooltip-font-size: 0.765625rem;
+  --bs-tooltip-font-size: 0.875rem;
   --bs-tooltip-color: var(--bs-body-bg);
   --bs-tooltip-bg: var(--bs-emphasis-color);
   --bs-tooltip-border-radius: var(--bs-border-radius);
@@ -5816,7 +5820,7 @@ textarea.form-control-lg {
 .popover {
   --bs-popover-zindex: 1070;
   --bs-popover-max-width: 276px;
-  --bs-popover-font-size: 0.765625rem;
+  --bs-popover-font-size: 0.875rem;
   --bs-popover-bg: var(--bs-body-bg);
   --bs-popover-border-width: var(--bs-border-width);
   --bs-popover-border-color: var(--bs-border-color-translucent);
@@ -5825,7 +5829,7 @@ textarea.form-control-lg {
   --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
-  --bs-popover-header-font-size: 0.875rem;
+  --bs-popover-header-font-size: 1rem;
   --bs-popover-header-color: inherit;
   --bs-popover-header-bg: var(--bs-secondary-bg);
   --bs-popover-body-padding-x: 1rem;
@@ -6844,8 +6848,8 @@ textarea.form-control-lg {
 }
 
 .text-bg-dark {
-  color: #fff !important;
-  background-color: RGBA(34, 34, 34, var(--bs-bg-opacity, 1)) !important;
+  color: #000 !important;
+  background-color: RGBA(235, 235, 235, var(--bs-bg-opacity, 1)) !important;
 }
 
 .link-primary {
@@ -6916,8 +6920,8 @@ textarea.form-control-lg {
   text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-dark:hover, .link-dark:focus {
-  color: RGBA(27, 27, 27, var(--bs-link-opacity, 1)) !important;
-  text-decoration-color: RGBA(27, 27, 27, var(--bs-link-underline-opacity, 1)) !important;
+  color: RGBA(239, 239, 239, var(--bs-link-opacity, 1)) !important;
+  text-decoration-color: RGBA(239, 239, 239, var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-body-emphasis {
@@ -8296,27 +8300,27 @@ textarea.form-control-lg {
 }
 
 .fs-1 {
-  font-size: calc(1.34375rem + 1.125vw) !important;
+  font-size: calc(1.375rem + 1.5vw) !important;
 }
 
 .fs-2 {
-  font-size: calc(1.3rem + 0.6vw) !important;
+  font-size: calc(1.325rem + 0.9vw) !important;
 }
 
 .fs-3 {
-  font-size: calc(1.278125rem + 0.3375vw) !important;
+  font-size: calc(1.3rem + 0.6vw) !important;
 }
 
 .fs-4 {
-  font-size: calc(1.25625rem + 0.075vw) !important;
+  font-size: calc(1.275rem + 0.3vw) !important;
 }
 
 .fs-5 {
-  font-size: 1.09375rem !important;
+  font-size: 1.25rem !important;
 }
 
 .fs-6 {
-  font-size: 0.875rem !important;
+  font-size: 1rem !important;
 }
 
 .fst-italic {
@@ -11859,16 +11863,16 @@ textarea.form-control-lg {
 }
 @media (min-width: 1200px) {
   .fs-1 {
-    font-size: 2.1875rem !important;
+    font-size: 2.5rem !important;
   }
   .fs-2 {
-    font-size: 1.75rem !important;
+    font-size: 2rem !important;
   }
   .fs-3 {
-    font-size: 1.53125rem !important;
+    font-size: 1.75rem !important;
   }
   .fs-4 {
-    font-size: 1.3125rem !important;
+    font-size: 1.5rem !important;
   }
 }
 @media print {
diff --git a/src/assets/css/themes/vaporwave-light.css b/src/assets/css/themes/vaporwave-light.css
index 14a19d72..cb03d8ef 100644
--- a/src/assets/css/themes/vaporwave-light.css
+++ b/src/assets/css/themes/vaporwave-light.css
@@ -74,8 +74,9 @@
   --bs-font-sans-serif: "Lucida Console", Monaco, monospace;
   --bs-font-monospace: Arial, "Noto Sans", sans-serif;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-root-font-size: 93.75%;
   --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 0.875rem;
+  --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
   --bs-body-line-height: 1.5;
   --bs-body-color: #495057;
@@ -184,6 +185,9 @@
   box-sizing: border-box;
 }
 
+:root {
+  font-size: var(--bs-root-font-size);
+}
 @media (prefers-reduced-motion: no-preference) {
   :root {
     scroll-behavior: smooth;
@@ -220,47 +224,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
 }
 
 h1, .h1 {
-  font-size: calc(1.34375rem + 1.125vw);
+  font-size: calc(1.375rem + 1.5vw);
 }
 @media (min-width: 1200px) {
   h1, .h1 {
-    font-size: 2.1875rem;
+    font-size: 2.5rem;
   }
 }
 
 h2, .h2 {
-  font-size: calc(1.3rem + 0.6vw);
+  font-size: calc(1.325rem + 0.9vw);
 }
 @media (min-width: 1200px) {
   h2, .h2 {
-    font-size: 1.75rem;
+    font-size: 2rem;
   }
 }
 
 h3, .h3 {
-  font-size: calc(1.278125rem + 0.3375vw);
+  font-size: calc(1.3rem + 0.6vw);
 }
 @media (min-width: 1200px) {
   h3, .h3 {
-    font-size: 1.53125rem;
+    font-size: 1.75rem;
   }
 }
 
 h4, .h4 {
-  font-size: calc(1.25625rem + 0.075vw);
+  font-size: calc(1.275rem + 0.3vw);
 }
 @media (min-width: 1200px) {
   h4, .h4 {
-    font-size: 1.3125rem;
+    font-size: 1.5rem;
   }
 }
 
 h5, .h5 {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 
 h6, .h6 {
-  font-size: 0.875rem;
+  font-size: 1rem;
 }
 
 p {
@@ -585,7 +589,7 @@ progress {
 }
 
 .lead {
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   font-weight: 300;
 }
 
@@ -679,7 +683,7 @@ progress {
 
 .blockquote {
   margin-bottom: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 .blockquote > :last-child {
   margin-bottom: 0;
@@ -2087,13 +2091,13 @@ progress {
 .col-form-label-lg {
   padding-top: calc(0.5rem + var(--bs-border-width));
   padding-bottom: calc(0.5rem + var(--bs-border-width));
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
 }
 
 .col-form-label-sm {
   padding-top: calc(0.25rem + var(--bs-border-width));
   padding-bottom: calc(0.25rem + var(--bs-border-width));
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
 }
 
 .form-text {
@@ -2106,7 +2110,7 @@ progress {
   display: block;
   width: 100%;
   padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--bs-body-color);
@@ -2199,7 +2203,7 @@ progress {
 .form-control-sm {
   min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
   padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 .form-control-sm::file-selector-button {
@@ -2211,7 +2215,7 @@ progress {
 .form-control-lg {
   min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
   padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 .form-control-lg::file-selector-button {
@@ -2258,7 +2262,7 @@ textarea.form-control-lg {
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--bs-body-color);
@@ -2299,7 +2303,7 @@ textarea.form-control-lg {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-left: 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 
@@ -2307,7 +2311,7 @@ textarea.form-control-lg {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 
@@ -2317,7 +2321,7 @@ textarea.form-control-lg {
 
 .form-check {
   display: block;
-  min-height: 1.3125rem;
+  min-height: 1.5rem;
   padding-left: 1.5em;
   margin-bottom: 0.125rem;
 }
@@ -2653,7 +2657,7 @@ textarea.form-control-lg {
   display: flex;
   align-items: center;
   padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--bs-body-color);
@@ -2669,7 +2673,7 @@ textarea.form-control-lg {
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
   padding: 0.5rem 1rem;
-  font-size: 1.09375rem;
+  font-size: 1.25rem;
   border-radius: var(--bs-border-radius-lg);
 }
 
@@ -2678,7 +2682,7 @@ textarea.form-control-lg {
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
   padding: 0.25rem 0.5rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   border-radius: var(--bs-border-radius-sm);
 }
 
@@ -2728,7 +2732,7 @@ textarea.form-control-lg {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-success);
   border-radius: var(--bs-border-radius);
@@ -2818,7 +2822,7 @@ textarea.form-control-lg {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   color: #fff;
   background-color: var(--bs-danger);
   border-radius: var(--bs-border-radius);
@@ -2896,7 +2900,7 @@ textarea.form-control-lg {
   --bs-btn-padding-x: 0.75rem;
   --bs-btn-padding-y: 0.375rem;
   --bs-btn-font-family: ;
-  --bs-btn-font-size: 0.875rem;
+  --bs-btn-font-size: 1rem;
   --bs-btn-font-weight: 400;
   --bs-btn-line-height: 1.5;
   --bs-btn-color: var(--bs-body-color);
@@ -3272,14 +3276,14 @@ textarea.form-control-lg {
 .btn-lg, .btn-group-lg > .btn {
   --bs-btn-padding-y: 0.5rem;
   --bs-btn-padding-x: 1rem;
-  --bs-btn-font-size: 1.09375rem;
+  --bs-btn-font-size: 1.25rem;
   --bs-btn-border-radius: var(--bs-border-radius-lg);
 }
 
 .btn-sm, .btn-group-sm > .btn {
   --bs-btn-padding-y: 0.25rem;
   --bs-btn-padding-x: 0.5rem;
-  --bs-btn-font-size: 0.765625rem;
+  --bs-btn-font-size: 0.875rem;
   --bs-btn-border-radius: var(--bs-border-radius-sm);
 }
 
@@ -3352,7 +3356,7 @@ textarea.form-control-lg {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 0.875rem;
+  --bs-dropdown-font-size: 1rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: var(--bs-body-bg);
   --bs-dropdown-border-color: var(--bs-border-color-translucent);
@@ -3614,7 +3618,7 @@ textarea.form-control-lg {
   display: block;
   padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
   margin-bottom: 0;
-  font-size: 0.765625rem;
+  font-size: 0.875rem;
   color: var(--bs-dropdown-header-color);
   white-space: nowrap;
 }
@@ -3899,15 +3903,15 @@ textarea.form-control-lg {
   --bs-navbar-hover-color: rgba(255, 64, 186, 0.7);
   --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
   --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
-  --bs-navbar-brand-padding-y: 0.3359375rem;
+  --bs-navbar-brand-padding-y: 0.3125rem;
   --bs-navbar-brand-margin-end: 1rem;
-  --bs-navbar-brand-font-size: 1.09375rem;
+  --bs-navbar-brand-font-size: 1.25rem;
   --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
   --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
   --bs-navbar-nav-link-padding-x: 0.5rem;
   --bs-navbar-toggler-padding-y: 0.25rem;
   --bs-navbar-toggler-padding-x: 0.75rem;
-  --bs-navbar-toggler-font-size: 1.09375rem;
+  --bs-navbar-toggler-font-size: 1.25rem;
   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2873, 80, 87, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
   --bs-navbar-toggler-border-radius: var(--bs-border-radius);
@@ -4544,7 +4548,7 @@ textarea.form-control-lg {
   align-items: center;
   width: 100%;
   padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
-  font-size: 0.875rem;
+  font-size: 1rem;
   color: var(--bs-accordion-btn-color);
   text-align: left;
   background-color: var(--bs-accordion-btn-bg);
@@ -4688,7 +4692,7 @@ textarea.form-control-lg {
 .pagination {
   --bs-pagination-padding-x: 0.75rem;
   --bs-pagination-padding-y: 0.375rem;
-  --bs-pagination-font-size: 0.875rem;
+  --bs-pagination-font-size: 1rem;
   --bs-pagination-color: var(--bs-link-color);
   --bs-pagination-bg: var(--bs-body-bg);
   --bs-pagination-border-width: var(--bs-border-width);
@@ -4768,14 +4772,14 @@ textarea.form-control-lg {
 .pagination-lg {
   --bs-pagination-padding-x: 1.5rem;
   --bs-pagination-padding-y: 0.75rem;
-  --bs-pagination-font-size: 1.09375rem;
+  --bs-pagination-font-size: 1.25rem;
   --bs-pagination-border-radius: var(--bs-border-radius-lg);
 }
 
 .pagination-sm {
   --bs-pagination-padding-x: 0.5rem;
   --bs-pagination-padding-y: 0.25rem;
-  --bs-pagination-font-size: 0.765625rem;
+  --bs-pagination-font-size: 0.875rem;
   --bs-pagination-border-radius: var(--bs-border-radius-sm);
 }
 
@@ -4910,7 +4914,7 @@ textarea.form-control-lg {
 .progress,
 .progress-stacked {
   --bs-progress-height: 1rem;
-  --bs-progress-font-size: 0.65625rem;
+  --bs-progress-font-size: 0.75rem;
   --bs-progress-bg: var(--bs-secondary-bg);
   --bs-progress-border-radius: var(--bs-border-radius);
   --bs-progress-box-shadow: var(--bs-box-shadow-inset);
@@ -5716,7 +5720,7 @@ textarea.form-control-lg {
   --bs-tooltip-padding-x: 0.5rem;
   --bs-tooltip-padding-y: 0.25rem;
   --bs-tooltip-margin: ;
-  --bs-tooltip-font-size: 0.765625rem;
+  --bs-tooltip-font-size: 0.875rem;
   --bs-tooltip-color: var(--bs-body-bg);
   --bs-tooltip-bg: var(--bs-emphasis-color);
   --bs-tooltip-border-radius: var(--bs-border-radius);
@@ -5815,7 +5819,7 @@ textarea.form-control-lg {
 .popover {
   --bs-popover-zindex: 1070;
   --bs-popover-max-width: 276px;
-  --bs-popover-font-size: 0.765625rem;
+  --bs-popover-font-size: 0.875rem;
   --bs-popover-bg: var(--bs-body-bg);
   --bs-popover-border-width: var(--bs-border-width);
   --bs-popover-border-color: var(--bs-border-color-translucent);
@@ -5824,7 +5828,7 @@ textarea.form-control-lg {
   --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
-  --bs-popover-header-font-size: 0.875rem;
+  --bs-popover-header-font-size: 1rem;
   --bs-popover-header-color: inherit;
   --bs-popover-header-bg: var(--bs-secondary-bg);
   --bs-popover-body-padding-x: 1rem;
@@ -8295,27 +8299,27 @@ textarea.form-control-lg {
 }
 
 .fs-1 {
-  font-size: calc(1.34375rem + 1.125vw) !important;
+  font-size: calc(1.375rem + 1.5vw) !important;
 }
 
 .fs-2 {
-  font-size: calc(1.3rem + 0.6vw) !important;
+  font-size: calc(1.325rem + 0.9vw) !important;
 }
 
 .fs-3 {
-  font-size: calc(1.278125rem + 0.3375vw) !important;
+  font-size: calc(1.3rem + 0.6vw) !important;
 }
 
 .fs-4 {
-  font-size: calc(1.25625rem + 0.075vw) !important;
+  font-size: calc(1.275rem + 0.3vw) !important;
 }
 
 .fs-5 {
-  font-size: 1.09375rem !important;
+  font-size: 1.25rem !important;
 }
 
 .fs-6 {
-  font-size: 0.875rem !important;
+  font-size: 1rem !important;
 }
 
 .fst-italic {
@@ -11858,16 +11862,16 @@ textarea.form-control-lg {
 }
 @media (min-width: 1200px) {
   .fs-1 {
-    font-size: 2.1875rem !important;
+    font-size: 2.5rem !important;
   }
   .fs-2 {
-    font-size: 1.75rem !important;
+    font-size: 2rem !important;
   }
   .fs-3 {
-    font-size: 1.53125rem !important;
+    font-size: 1.75rem !important;
   }
   .fs-4 {
-    font-size: 1.3125rem !important;
+    font-size: 1.5rem !important;
   }
 }
 @media print {

From 719747463307080ae29a119ab1ad22657a13455b Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 7 Jul 2023 09:17:00 -0400
Subject: [PATCH 09/11] v0.18.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1222f5ba..40d2eb26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.1-rc.11",
+  "version": "0.18.1",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",

From 497fb7014feb1118b3c2240ce8f29082dedee269 Mon Sep 17 00:00:00 2001
From: Sander Saarend <sander@saarend.com>
Date: Fri, 7 Jul 2023 17:53:42 +0300
Subject: [PATCH 10/11] Update lemmy-js-client and lemmy-translations (#1848)

---
 lemmy-translations | 2 +-
 package.json       | 2 +-
 yarn.lock          | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lemmy-translations b/lemmy-translations
index a241fe12..713ceed9 160000
--- a/lemmy-translations
+++ b/lemmy-translations
@@ -1 +1 @@
-Subproject commit a241fe1255a6363c7ae1ec5a09520c066745e6ce
+Subproject commit 713ceed9c7ef84deaa222e68361e670e0763cd83
diff --git a/package.json b/package.json
index 40d2eb26..7ad0175e 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "inferno-router": "^8.1.1",
     "inferno-server": "^8.1.1",
     "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.18.0-rc.2",
+    "lemmy-js-client": "0.18.1",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "markdown-it": "^13.0.1",
diff --git a/yarn.lock b/yarn.lock
index cbaa3b8b..a97f8ba1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5497,10 +5497,10 @@ leac@^0.6.0:
   resolved "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz"
   integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==
 
-lemmy-js-client@0.18.0-rc.2:
-  version "0.18.0-rc.2"
-  resolved "https://registry.npmjs.org/lemmy-js-client/-/lemmy-js-client-0.18.0-rc.2.tgz"
-  integrity sha512-bnYs89MjlQHwVIr1YIoAvgFkCTWrXDjSgPbCJx8ijrxZXqOKW/KAgWEisfqyFpy3dYpA3/sxFjh7b4sdxM+8VA==
+lemmy-js-client@0.18.1:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.18.1.tgz#28df266eded0ef4a72b05ee6eabebddadfd81a27"
+  integrity sha512-maafUZ9ZJkXthRZmM0+limJmymF2kmN/8SiKufS3V4OVNM72s+wUFFiyhKmA370g23iZRW6SUagE7jNKnqNyYQ==
   dependencies:
     cross-fetch "^3.1.5"
     form-data "^4.0.0"

From 214eae5be57f87afe1905c7fc97a7d03df8dfd5b Mon Sep 17 00:00:00 2001
From: c-andy-candies <74613851+c-andy-candies@users.noreply.github.com>
Date: Fri, 7 Jul 2023 19:37:50 +0200
Subject: [PATCH 11/11] Reopen PR 1420 Feature add three six and nine months
 options frontend (#1689)

Co-authored-by: Dessalines <dessalines@users.noreply.github.com>
---
 src/shared/components/common/sort-select.tsx      | 9 +++++++++
 src/shared/utils/app/convert-comment-sort-type.ts | 3 +++
 2 files changed, 12 insertions(+)

diff --git a/src/shared/components/common/sort-select.tsx b/src/shared/components/common/sort-select.tsx
index 4d03ab5d..088f45ed 100644
--- a/src/shared/components/common/sort-select.tsx
+++ b/src/shared/components/common/sort-select.tsx
@@ -79,6 +79,15 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           <option value={"TopMonth"}>
             {I18NextService.i18n.t("top_month")}
           </option>
+          <option value={"TopThreeMonths"}>
+            {I18NextService.i18n.t("top_three_months")}
+          </option>
+          <option value={"TopSixMonths"}>
+            {I18NextService.i18n.t("top_six_months")}
+          </option>
+          <option value={"TopNineMonths"}>
+            {I18NextService.i18n.t("top_nine_months")}
+          </option>
           <option value={"TopYear"}>{I18NextService.i18n.t("top_year")}</option>
           <option value={"TopAll"}>{I18NextService.i18n.t("top_all")}</option>
         </select>
diff --git a/src/shared/utils/app/convert-comment-sort-type.ts b/src/shared/utils/app/convert-comment-sort-type.ts
index 665ab462..2f920d4d 100644
--- a/src/shared/utils/app/convert-comment-sort-type.ts
+++ b/src/shared/utils/app/convert-comment-sort-type.ts
@@ -11,6 +11,9 @@ export default function convertCommentSortType(
     case "TopDay":
     case "TopWeek":
     case "TopMonth":
+    case "TopThreeMonths":
+    case "TopSixMonths":
+    case "TopNineMonths":
     case "TopYear": {
       return "Top";
     }