Adding 8 different themes.

- Fixes #276

4 files changed, 36 insertions, 19 deletions

diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx
index 87d7097e..2d607ae9 100644
--- a/ui/src/components/footer.tsx
+++ b/ui/src/components/footer.tsx
@@ -13,7 +13,7 @@ export class Footer extends Component<any, any> {
 
   render() {
     return (
-      <nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3 my-2">
+      <nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3 mt-2">
         <div className="navbar-collapse">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item">
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index d0322d98..9db7cf4b 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -96,8 +96,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <div className="post-title">
             <h5 className="mb-0 d-inline">
               {post.url ? 
-              <a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a> : 
-              <Link className="text-white" to={`/post/${post.id}`} title={i18n.t('comments')}>{post.name}</Link>
+              <a className="text-body" href={post.url} target="_blank" title={post.url}>{post.name}</a> : 
+              <Link className="text-body" to={`/post/${post.id}`} title={i18n.t('comments')}>{post.name}</Link>
               }
             </h5>
             {post.url && 
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 43489327..9e20aa29 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -74,7 +74,7 @@ export class Post extends Component<any, PostState> {
     if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) {
       var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`);
       elmnt.scrollIntoView(); 
-      elmnt.classList.add("mark-two");
+      elmnt.classList.add("mark");
       this.state.scrolled = true;
       this.markScrolledAsRead(this.state.scrolled_comment_id);
     }
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 016721ad..2a2a8124 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -4,7 +4,7 @@ import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
 import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView, CommentResponse, UserSettingsForm, LoginResponse, BanUserResponse, AddAdminResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { msgOp, fetchLimit, routeSortTypeToEnum, capitalizeFirstLetter } from '../utils';
+import { msgOp, fetchLimit, routeSortTypeToEnum, capitalizeFirstLetter, themes, setTheme } from '../utils';
 import { PostListing } from './post-listing';
 import { CommentNodes } from './comment-nodes';
 import { MomentTime } from './moment-time';
@@ -61,6 +61,7 @@ export class User extends Component<any, UserState> {
     page: this.getPageFromProps(this.props),
     userSettingsForm: {
       show_nsfw: null,
+      theme: null,
       auth: null,
     },
     userSettingsLoading: null,
@@ -285,7 +286,18 @@ export class User extends Component<any, UserState> {
           <div class="card-body">
             <h5><T i18nKey="settings">#</T></h5>
             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
-              <div class="form-group row">
+              <div class="form-group">
+                <div class="col-12">
+                  <label><T i18nKey="theme">#</T></label>
+                  <select value={this.state.userSettingsForm.theme} onChange={linkEvent(this, this.handleUserSettingsThemeChange)} class="ml-2 custom-select custom-select-sm w-auto">
+                    <option disabled><T i18nKey="theme">#</T></option>
+                    {themes.map(theme =>
+                      <option value={theme}>{theme}</option>
+                    )}
+                  </select>
+                </div>
+              </div>
+              <div class="form-group">
                 <div class="col-12">
                   <div class="form-check">
                     <input class="form-check-input" type="checkbox" checked={this.state.userSettingsForm.show_nsfw} onChange={linkEvent(this, this.handleUserSettingsShowNsfwChange)}/>
@@ -309,20 +321,18 @@ export class User extends Component<any, UserState> {
   moderates() {
     return (
       <div>
-        <div class="card border-secondary mb-3">
-          <div class="card-body">
-            {this.state.moderates.length > 0 &&
-              <div>
-                <h5><T i18nKey="moderates">#</T></h5>
-                <ul class="list-unstyled mb-0"> 
-                  {this.state.moderates.map(community =>
-                    <li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
-                  )}
-                </ul>
-              </div>
-            }
+        {this.state.moderates.length > 0 &&
+          <div class="card border-secondary mb-3">
+            <div class="card-body">
+              <h5><T i18nKey="moderates">#</T></h5>
+              <ul class="list-unstyled mb-0"> 
+                {this.state.moderates.map(community =>
+                  <li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
+                )}
+              </ul>
+            </div>
           </div>
-        </div>
+        }
       </div>
     )
   }
@@ -410,6 +420,12 @@ export class User extends Component<any, UserState> {
     i.setState(i.state);
   }
 
+  handleUserSettingsThemeChange(i: User, event: any) {
+    i.state.userSettingsForm.theme = event.target.value;
+    setTheme(event.target.value);
+    i.setState(i.state);
+  }
+
   handleUserSettingsSubmit(i: User, event: any) {
     event.preventDefault();
     i.state.userSettingsLoading = true;
@@ -435,6 +451,7 @@ export class User extends Component<any, UserState> {
       this.state.loading = false;
       if (this.isCurrentUser) {
         this.state.userSettingsForm.show_nsfw = UserService.Instance.user.show_nsfw;
+        this.state.userSettingsForm.theme = UserService.Instance.user.theme ? UserService.Instance.user.theme : 'darkly';
       }
       document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
       window.scrollTo(0,0);