From 21a72434911057d5fbf3ae2d7b14a21223b75bd3 Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Mon, 19 Aug 2019 19:37:32 -0700
Subject: [PATCH] Adding cards for sidebars in UI.

---
 ui/src/components/community.tsx |   4 +-
 ui/src/components/main.tsx      |  93 ++++++++++---------
 ui/src/components/navbar.tsx    |   2 +-
 ui/src/components/sidebar.tsx   | 157 ++++++++++++++++----------------
 ui/src/components/user.tsx      | 110 ++++++++++++----------
 ui/src/css/main.css             |   4 -
 ui/src/index.tsx                |   2 +-
 7 files changed, 197 insertions(+), 175 deletions(-)

diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index b9f9c8b2..0a982a84 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -6,7 +6,7 @@ import { WebSocketService } from '../services';
 import { PostListings } from './post-listings';
 import { Sidebar } from './sidebar';
 import { msgOp, routeSortTypeToEnum, fetchLimit } from '../utils';
-import { T } from 'inferno-i18next';
+import { T, i18n } from 'inferno-i18next';
 
 interface State {
   community: CommunityI;
@@ -134,7 +134,7 @@ export class Community extends Component<any, State> {
           <option disabled><T i18nKey="sort_type">#</T></option>
           <option value={SortType.Hot}><T i18nKey="hot">#</T></option>
           <option value={SortType.New}><T i18nKey="new">#</T></option>
-          <option disabled>──────────</option>
+          <option disabled>──────</option>
           <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
           <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
           <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index a21be250..32631811 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -134,25 +134,30 @@ export class Main extends Component<any, MainState> {
       <div>
         {!this.state.loading &&
           <div>
-            {this.trendingCommunities()}
-            {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && 
-              <div>
-                <h5>
-                  <T i18nKey="subscribed_to_communities">#<Link class="text-white" to="/communities">#</Link></T>
-                </h5> 
-                <ul class="list-inline"> 
-                  {this.state.subscribedCommunities.map(community =>
-                    <li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
-                  )}
-                </ul>
+            <div class="card border-secondary mb-3">
+              <div class="card-body">
+                {this.trendingCommunities()}
+                {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && 
+                  <div>
+                    <h5>
+                      <T i18nKey="subscribed_to_communities">#<Link class="text-white" to="/communities">#</Link></T>
+                    </h5> 
+                    <ul class="list-inline"> 
+                      {this.state.subscribedCommunities.map(community =>
+                        <li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
+                      )}
+                    </ul>
+                  </div>
+                }
+                <Link class="btn btn-sm btn-secondary btn-block" 
+                  to="/create_community">
+                  <T i18nKey="create_a_community">#</T>
+                </Link>
               </div>
-            }
-            <Link class="btn btn-sm btn-secondary btn-block mb-3" 
-              to="/create_community">
-              <T i18nKey="create_a_community">#</T>
-            </Link>
-              {this.sidebar()}
             </div>
+            {this.sidebar()}
+            {this.landing()}
+          </div>
         }
       </div>
     )
@@ -175,15 +180,16 @@ export class Main extends Component<any, MainState> {
 
   sidebar() {
     return (
-      <div>
-        {!this.state.showEditSite ?
-          this.siteInfo() :
-          <SiteForm
-            site={this.state.site.site} 
-            onCancel={this.handleEditCancel} 
-          />
-        }
-        {this.landing()}
+      <div class="card border-secondary mb-3">
+        <div class="card-body">
+          {!this.state.showEditSite ?
+            this.siteInfo() :
+            <SiteForm
+              site={this.state.site.site} 
+              onCancel={this.handleEditCancel} 
+            />
+          }
+        </div>
       </div>
     )
   }
@@ -208,17 +214,17 @@ export class Main extends Component<any, MainState> {
           </ul>
         }
         <ul class="my-2 list-inline">
-          <li className="list-inline-item badge badge-light">
+          <li className="list-inline-item badge badge-secondary">
             <T i18nKey="number_of_users" interpolation={{count: this.state.site.site.number_of_users}}>#</T>
           </li>
-          <li className="list-inline-item badge badge-light">
+          <li className="list-inline-item badge badge-secondary">
             <T i18nKey="number_of_posts" interpolation={{count: this.state.site.site.number_of_posts}}>#</T>
           </li>
-          <li className="list-inline-item badge badge-light">
+          <li className="list-inline-item badge badge-secondary">
             <T i18nKey="number_of_comments" interpolation={{count: this.state.site.site.number_of_comments}}>#</T>
           </li>
           <li className="list-inline-item">
-            <Link className="badge badge-light" to="/modlog">
+            <Link className="badge badge-secondary" to="/modlog">
               <T i18nKey="modlog">#</T>
             </Link>
           </li>
@@ -235,7 +241,6 @@ export class Main extends Component<any, MainState> {
           <div>
             <hr />
             <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.site.site.description)} />
-            <hr />
           </div>
         }
       </div>
@@ -244,17 +249,19 @@ export class Main extends Component<any, MainState> {
 
   landing() {
     return (
-      <div>
-        <h5>
-          <T i18nKey="powered_by" class="d-inline">#</T>
-          <svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg>
-          <a href={repoUrl}>Lemmy<sup>beta</sup></a>
-        </h5>
-        <p>
-          <T i18nKey="landing_0">#<a href="https://en.wikipedia.org/wiki/Link_aggregation">#</a><a href="https://en.wikipedia.org/wiki/Fediverse">#</a><br></br><code>#</code><br></br><b>#</b><br></br><a href={repoUrl}>#</a><br></br><a href="https://www.rust-lang.org">#</a><a href="https://actix.rs/">#</a><a href="https://www.infernojs.org">#</a><a href="https://www.typescriptlang.org/">#</a>
-        </T>
-      </p>
+      <div class="card border-secondary">
+        <div class="card-body">
+          <h5>
+            <T i18nKey="powered_by" class="d-inline">#</T>
+            <svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg>
+            <a href={repoUrl}>Lemmy<sup>beta</sup></a>
+          </h5>
+          <p>
+            <T i18nKey="landing_0">#<a href="https://en.wikipedia.org/wiki/Link_aggregation">#</a><a href="https://en.wikipedia.org/wiki/Fediverse">#</a><br></br><code>#</code><br></br><b>#</b><br></br><a href={repoUrl}>#</a><br></br><a href="https://www.rust-lang.org">#</a><a href="https://actix.rs/">#</a><a href="https://www.infernojs.org">#</a><a href="https://www.typescriptlang.org/">#</a>
+          </T>
+        </p>
       </div>
+    </div>
     )
   }
 
@@ -275,7 +282,7 @@ export class Main extends Component<any, MainState> {
 
   selects() {
     return (
-      <div className="mb-2">
+      <div className="mb-3">
         <div class="btn-group btn-group-toggle">
           <label className={`btn btn-sm btn-secondary 
             ${this.state.type_ == ListingType.Subscribed && 'active'}
@@ -302,7 +309,7 @@ export class Main extends Component<any, MainState> {
           <option disabled><T i18nKey="sort_type">#</T></option>
           <option value={SortType.Hot}><T i18nKey="hot">#</T></option>
           <option value={SortType.New}><T i18nKey="new">#</T></option>
-          <option disabled>──────────</option>
+          <option disabled>─────</option>
           <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
           <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
           <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 732527d7..59330168 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -76,7 +76,7 @@ export class Navbar extends Component<any, NavbarState> {
   // TODO class active corresponding to current page
   navbar() {
     return (
-      <nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3">
+      <nav class="container-fluid navbar navbar-expand-md navbar-light shadow p-0 px-3">
         <Link title={version} class="navbar-brand" to="/">
           {this.state.siteName}
         </Link>
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 8d804343..9c24bed3 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -54,85 +54,90 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     let community = this.props.community;
     return (
       <div>
-        <h5 className="mb-0">{community.title}
-        {community.removed &&
-          <small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
-        }
-        {community.deleted &&
-          <small className="ml-2 text-muted font-italic"><T i18nKey="deleted">#</T></small>
-        }
-      </h5>
-      <Link className="text-muted" to={`/c/${community.name}`}>/c/{community.name}</Link>
-      <ul class="list-inline mb-1 text-muted small font-weight-bold"> 
-        {this.canMod && 
-          <>
-            <li className="list-inline-item">
-              <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}><T i18nKey="edit">#</T></span>
-            </li>
-            {this.amCreator && 
-              <li className="list-inline-item">
-                <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>
-                  {!community.deleted ? i18n.t('delete') : i18n.t('restore')}
-                </span>
-              </li>
-            }
-          </>
-        }
-        {this.canAdmin &&
-          <li className="list-inline-item">
-            {!this.props.community.removed ? 
-            <span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}><T i18nKey="remove">#</T></span> :
-            <span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}><T i18nKey="restore">#</T></span>
-            }
-          </li>
+        <div class="card border-secondary mb-3">
+          <div class="card-body">
+            <h5 className="mb-0">
+              <span>{community.title}</span>
+              {community.removed &&
+                <small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
+              }
+              {community.deleted &&
+                <small className="ml-2 text-muted font-italic"><T i18nKey="deleted">#</T></small>
+              }
+            </h5>
+            <Link className="text-muted" to={`/c/${community.name}`}>/c/{community.name}</Link>
+            <ul class="list-inline mb-1 text-muted small font-weight-bold"> 
+              {this.canMod && 
+                <>
+                  <li className="list-inline-item">
+                    <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}><T i18nKey="edit">#</T></span>
+                  </li>
+                  {this.amCreator && 
+                    <li className="list-inline-item">
+                      <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>
+                        {!community.deleted ? i18n.t('delete') : i18n.t('restore')}
+                      </span>
+                    </li>
+                  }
+                </>
+              }
+              {this.canAdmin &&
+                <li className="list-inline-item">
+                  {!this.props.community.removed ? 
+                  <span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}><T i18nKey="remove">#</T></span> :
+                  <span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}><T i18nKey="restore">#</T></span>
+                  }
+                </li>
 
-        }
-      </ul>
-      {this.state.showRemoveDialog && 
-        <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
-          <div class="form-group row">
-            <label class="col-form-label"><T i18nKey="reason">#</T></label>
-            <input type="text" class="form-control mr-2" placeholder={i18n.t('optional')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
+              }
+            </ul>
+            {this.state.showRemoveDialog && 
+              <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
+                <div class="form-group row">
+                  <label class="col-form-label"><T i18nKey="reason">#</T></label>
+                  <input type="text" class="form-control mr-2" placeholder={i18n.t('optional')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
+                </div>
+                {/* TODO hold off on expires for now */}
+                {/* <div class="form-group row"> */}
+                  {/*   <label class="col-form-label">Expires</label> */}
+                  {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
+                  {/* </div> */}
+                  <div class="form-group row">
+                    <button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button>
+                  </div>
+                </form>
+            }
+            <ul class="my-1 list-inline">
+              <li className="list-inline-item"><Link className="badge badge-secondary" to="/communities">{community.category_name}</Link></li>
+              <li className="list-inline-item badge badge-secondary"><T i18nKey="number_of_subscribers" interpolation={{count: community.number_of_subscribers}}>#</T></li>
+              <li className="list-inline-item badge badge-secondary"><T i18nKey="number_of_posts" interpolation={{count: community.number_of_posts}}>#</T></li>
+              <li className="list-inline-item badge badge-secondary"><T i18nKey="number_of_comments" interpolation={{count: community.number_of_comments}}>#</T></li>
+              <li className="list-inline-item"><Link className="badge badge-secondary" to={`/modlog/community/${this.props.community.id}`}><T i18nKey="modlog">#</T></Link></li>
+            </ul>
+            <ul class="list-inline small"> 
+              <li class="list-inline-item">{i18n.t('mods')}: </li>
+              {this.props.moderators.map(mod =>
+                <li class="list-inline-item"><Link class="text-info" to={`/u/${mod.user_name}`}>{mod.user_name}</Link></li>
+              )}
+            </ul>
+            <Link class={`btn btn-sm btn-secondary btn-block mb-3 ${(community.deleted || community.removed) && 'no-click'}`}
+            to={`/create_post/c/${community.name}`}><T i18nKey="create_a_post">#</T></Link>
+          <div>
+            {community.subscribed 
+              ? <button class="btn btn-sm btn-secondary btn-block" onClick={linkEvent(community.id, this.handleUnsubscribe)}><T i18nKey="unsubscribe">#</T></button>
+              : <button class="btn btn-sm btn-secondary btn-block" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></button>
+            }
           </div>
-          {/* TODO hold off on expires for now */}
-          {/* <div class="form-group row"> */}
-          {/*   <label class="col-form-label">Expires</label> */}
-          {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
-          {/* </div> */}
-          <div class="form-group row">
-            <button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button>
-          </div>
-        </form>
-      }
-      <ul class="my-1 list-inline">
-        <li className="list-inline-item"><Link className="badge badge-light" to="/communities">{community.category_name}</Link></li>
-        <li className="list-inline-item badge badge-light"><T i18nKey="number_of_subscribers" interpolation={{count: community.number_of_subscribers}}>#</T></li>
-        <li className="list-inline-item badge badge-light"><T i18nKey="number_of_posts" interpolation={{count: community.number_of_posts}}>#</T></li>
-        <li className="list-inline-item badge badge-light"><T i18nKey="number_of_comments" interpolation={{count: community.number_of_comments}}>#</T></li>
-        <li className="list-inline-item"><Link className="badge badge-light" to={`/modlog/community/${this.props.community.id}`}><T i18nKey="modlog">#</T></Link></li>
-      </ul>
-      <ul class="list-inline small"> 
-        <li class="list-inline-item">{i18n.t('mods')}: </li>
-        {this.props.moderators.map(mod =>
-          <li class="list-inline-item"><Link class="text-info" to={`/u/${mod.user_name}`}>{mod.user_name}</Link></li>
-        )}
-      </ul>
-      <Link class={`btn btn-sm btn-secondary btn-block mb-3 ${(community.deleted || community.removed) && 'no-click'}`}
-          to={`/create_post/c/${community.name}`}><T i18nKey="create_a_post">#</T></Link>
-      <div>
-        {community.subscribed 
-          ? <button class="btn btn-sm btn-secondary btn-block mb-3" onClick={linkEvent(community.id, this.handleUnsubscribe)}><T i18nKey="unsubscribe">#</T></button>
-          : <button class="btn btn-sm btn-secondary btn-block mb-3" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></button>
-        }
-      </div>
-      {community.description && 
-        <div>
-          <hr />
-          <div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} />
-          <hr />
         </div>
-      }
-    </div>
+        </div>
+        {community.description && 
+          <div class="card border-secondary">
+            <div class="card-body">
+              <div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} />
+            </div>
+          </div>
+        }
+        </div>
     );
   }
 
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 39a13e16..8b78917e 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -123,7 +123,7 @@ export class User extends Component<any, UserState> {
         {this.state.loading ? 
         <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
         <div class="row">
-          <div class="col-12 col-md-9">
+          <div class="col-12 col-md-8">
             <h5>/u/{this.state.user.name}</h5>
             {this.selects()}
             {this.state.view == View.Overview &&
@@ -140,7 +140,7 @@ export class User extends Component<any, UserState> {
             }
             {this.paginator()}
           </div>
-          <div class="col-12 col-md-3">
+          <div class="col-12 col-md-4">
             {this.userInfo()}
             {this.isCurrentUser &&
               this.userSettings()
@@ -232,19 +232,24 @@ export class User extends Component<any, UserState> {
     let user = this.state.user;
     return (
       <div>
-        <h5>{user.name}</h5>
-        <div>{i18n.t('joined')} <MomentTime data={user} /></div>
-        <table class="table table-bordered table-sm mt-2">
-          <tr>
-            <td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td>
-            <td><T i18nKey="number_of_posts" interpolation={{count: user.number_of_posts}}>#</T></td>
-          </tr>
-          <tr>
-            <td><T i18nKey="number_of_points" interpolation={{count: user.comment_score}}>#</T></td>
-            <td><T i18nKey="number_of_comments" interpolation={{count: user.number_of_comments}}>#</T></td>
-          </tr>
-        </table>
-        <hr />
+        <div class="card border-secondary mb-3">
+          <div class="card-body">
+            <h5>{user.name}</h5>
+            <div>{i18n.t('joined')} <MomentTime data={user} /></div>
+            <div class="table-responsive">
+              <table class="table table-bordered table-sm mt-2 mb-0">
+                <tr>
+                  <td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td>
+                  <td><T i18nKey="number_of_posts" interpolation={{count: user.number_of_posts}}>#</T></td>
+                </tr>
+                <tr>
+                  <td><T i18nKey="number_of_points" interpolation={{count: user.comment_score}}>#</T></td>
+                  <td><T i18nKey="number_of_comments" interpolation={{count: user.number_of_comments}}>#</T></td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }
@@ -252,23 +257,27 @@ export class User extends Component<any, UserState> {
   userSettings() {  
     return (
       <div>
-        <h5><T i18nKey="settings">#</T></h5>
-        <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
-          <div class="form-group row">
-            <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)}/>
-                <label class="form-check-label"><T i18nKey="show_nsfw">#</T></label>
+        <div class="card border-secondary mb-3">
+          <div class="card-body">
+            <h5><T i18nKey="settings">#</T></h5>
+            <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
+              <div class="form-group row">
+                <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)}/>
+                    <label class="form-check-label"><T i18nKey="show_nsfw">#</T></label>
+                  </div>
+                </div>
               </div>
-            </div>
+              <div class="form-group row mb-0">
+                <div class="col-12">
+                  <button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ? 
+                  <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button>
+                </div>
+              </div>
+            </form>
           </div>
-          <div class="form-group row">
-            <div class="col-12">
-              <button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ? 
-              <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button>
-            </div>
-          </div>
-        </form>
+        </div>
       </div>
     )
   }
@@ -276,16 +285,20 @@ export class User extends Component<any, UserState> {
   moderates() {
     return (
       <div>
-        {this.state.moderates.length > 0 &&
-          <div>
-            <h5><T i18nKey="moderates">#</T></h5>
-            <ul class="list-unstyled"> 
-              {this.state.moderates.map(community =>
-                <li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
-              )}
-            </ul>
+        <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>
+            }
           </div>
-        }
+        </div>
       </div>
     )
   }
@@ -294,14 +307,15 @@ export class User extends Component<any, UserState> {
     return (
       <div>
         {this.state.follows.length > 0 &&
-          <div>
-            <hr />
-            <h5><T i18nKey="subscribed">#</T></h5>
-            <ul class="list-unstyled"> 
-              {this.state.follows.map(community =>
-                <li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
-              )}
-            </ul>
+          <div class="card border-secondary mb-3">
+            <div class="card-body">
+              <h5><T i18nKey="subscribed">#</T></h5>
+              <ul class="list-unstyled mb-0"> 
+                {this.state.follows.map(community =>
+                  <li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
+                )}
+              </ul>
+            </div>
           </div>
         }
       </div>
@@ -310,7 +324,7 @@ export class User extends Component<any, UserState> {
 
   paginator() {
     return (
-      <div class="mt-2">
+      <div class="my-2">
         {this.state.page > 1 && 
           <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
         }
diff --git a/ui/src/css/main.css b/ui/src/css/main.css
index 249c7a26..729604a9 100644
--- a/ui/src/css/main.css
+++ b/ui/src/css/main.css
@@ -96,10 +96,6 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary {
   z-index: 2000;
 }
 
-.navbar-bg {
-  background-color: #222;
-}
-
 blockquote {
   border-left: 3px solid #ccc;
   margin: 0.5em 5px;
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 41381513..7f837355 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -39,7 +39,7 @@ class Index extends Component<any, any> {
       <Provider i18next={i18n}>
         <BrowserRouter>
           <Navbar />
-          <div class="mt-1 p-0">
+          <div class="mt-3 p-0">
             <Switch>
               <Route path={`/home/type/:type/sort/:sort/page/:page`} component={Main} />
               <Route exact path={`/`} component={Main} />