component classes v2

[lemmy-ui.git] / src / shared / components / person / inbox.tsx

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index b0550f2241a8fae938d61f5b3cf60b7fe5bce0d0..415c3e3fd6c9ee216ba5b37b9d5b9b266449276c 100644 (file)
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -92,9 +92,9 @@ enum ReplyEnum {
 }
 
 type InboxData = RouteDataResponse<{
-  repliesResponse: GetRepliesResponse;
-  personMentionsResponse: GetPersonMentionsResponse;
-  privateMessagesResponse: PrivateMessagesResponse;
+  repliesRes: GetRepliesResponse;
+  mentionsRes: GetPersonMentionsResponse;
+  messagesRes: PrivateMessagesResponse;
 }>;
 
 type ReplyType = {
@@ -167,11 +167,7 @@ export class Inbox extends Component<any, InboxState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const {
-        personMentionsResponse: mentionsRes,
-        privateMessagesResponse: messagesRes,
-        repliesResponse: repliesRes,
-      } = this.isoData.routeData;
+      const { mentionsRes, messagesRes, repliesRes } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
@@ -220,7 +216,7 @@ export class Inbox extends Component<any, InboxState> {
     const auth = myAuth();
     const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
     return (
-      <div className="container-lg">
+      <div className="inbox container-lg">
         <div className="row">
           <div className="col-12">
             <HtmlTags
@@ -232,7 +228,7 @@ export class Inbox extends Component<any, InboxState> {
               {inboxRss && (
                 <small>
                   <a href={inboxRss} title="RSS" rel={relTags}>
-                    <Icon icon="rss" classes="ml-2 text-muted small" />
+                    <Icon icon="rss" classes="ms-2 text-muted small" />
                   </a>
                   <link
                     rel="alternate"
@@ -296,6 +292,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.Unread}
             checked={this.state.unreadOrAll == UnreadOrAll.Unread}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -309,6 +306,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.All}
             checked={this.state.unreadOrAll == UnreadOrAll.All}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -329,6 +327,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.All}
             checked={this.state.messageType == MessageType.All}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -342,6 +341,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.Replies}
             checked={this.state.messageType == MessageType.Replies}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -355,6 +355,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.Mentions}
             checked={this.state.messageType == MessageType.Mentions}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -368,6 +369,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.Messages}
             checked={this.state.messageType == MessageType.Messages}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -381,8 +383,8 @@ export class Inbox extends Component<any, InboxState> {
   selects() {
     return (
       <div className="mb-2">
-        <span className="mr-3">{this.unreadOrAllRadios()}</span>
-        <span className="mr-3">{this.messageTypeRadios()}</span>
+        <span className="me-3">{this.unreadOrAllRadios()}</span>
+        <span className="me-3">{this.messageTypeRadios()}</span>
         <CommentSortSelect
           sort={this.state.sort}
           onChange={this.handleSortChange}
@@ -702,7 +704,7 @@ export class Inbox extends Component<any, InboxState> {
     const sort: CommentSortType = "New";
 
     return {
-      personMentionsResponse: auth
+      mentionsRes: auth
         ? await client.getPersonMentions({
             sort,
             unread_only: true,
@@ -711,7 +713,7 @@ export class Inbox extends Component<any, InboxState> {
             auth,
           })
         : { state: "empty" },
-      privateMessagesResponse: auth
+      messagesRes: auth
         ? await client.getPrivateMessages({
             unread_only: true,
             page: 1,
@@ -719,7 +721,7 @@ export class Inbox extends Component<any, InboxState> {
             auth,
           })
         : { state: "empty" },
-      repliesResponse: auth
+      repliesRes: auth
         ? await client.getReplies({
             sort,
             unread_only: true,