From a9358fb8a27cd3d48547f5427797702ee2780de8 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 16:02:43 +0200
Subject: Implemented navbar component; added some global stylings and changed
 the name of others; added icons

---
 src/app/app.module.ts                           |  4 +-
 src/app/components/navbar/navbar.component.css  | 43 +++++++++++++
 src/app/components/navbar/navbar.component.html | 36 +++++++++++
 src/app/components/navbar/navbar.component.ts   | 49 ++++++++++++++
 src/app/components/post/post.component.html     |  4 +-
 src/assets/icons/tabler-icon-home.svg           | 73 +++++++++++++++++++++
 src/assets/icons/tabler-icon-logout.svg         | 69 ++++++++++++++++++++
 src/assets/icons/tabler-icon-message-circle.svg | 86 +++++++++++++++++++++++++
 src/assets/icons/tabler-icon-search.svg         | 74 +++++++++++++++++++++
 src/assets/icons/tabler-icon-settings.svg       | 71 ++++++++++++++++++++
 src/assets/icons/tabler-icon-trending-up.svg    | 69 ++++++++++++++++++++
 src/styles.css                                  | 28 ++++++--
 12 files changed, 598 insertions(+), 8 deletions(-)
 create mode 100644 src/app/components/navbar/navbar.component.css
 create mode 100644 src/app/components/navbar/navbar.component.html
 create mode 100644 src/app/components/navbar/navbar.component.ts
 create mode 100644 src/assets/icons/tabler-icon-home.svg
 create mode 100644 src/assets/icons/tabler-icon-logout.svg
 create mode 100644 src/assets/icons/tabler-icon-message-circle.svg
 create mode 100644 src/assets/icons/tabler-icon-search.svg
 create mode 100644 src/assets/icons/tabler-icon-settings.svg
 create mode 100644 src/assets/icons/tabler-icon-trending-up.svg

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1bf44ad..f582bbc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { CommentComponent } from './components/comment/comment.component';
 import { CommentPageComponent } from './components/comment-page/comment-page.component';
 import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component';
 import { RouterModule } from '@angular/router';
+import { NavbarComponent } from './components/navbar/navbar.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +44,8 @@ import { RouterModule } from '@angular/router';
     AdminPanelPageComponent,
     CommentComponent,
     CommentPageComponent,
-    PostAttachmentComponent
+    PostAttachmentComponent,
+    NavbarComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
new file mode 100644
index 0000000..58ec821
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.css
@@ -0,0 +1,43 @@
+#navbar {
+  width: 100%;
+  background-color: var(--card-bg);
+}
+
+#nav-contents {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+#nav-contents img {
+  height: 1.9em;
+  width: 1.9em;
+}
+
+@media screen and (max-width: 30rem) {
+  #nav-username {
+    display: none;
+  }
+
+  #navbar {
+    font-size: 0.8em;
+  }
+}
+
+#nav-profile-picture {
+  padding: 0.1em;
+}
+
+#nav-profile-picture img {
+  height: 1.8em;
+  width: 1.8em;
+}
+
+.nav-item {
+  margin-left: 0.2em;
+  padding: 0 0.1em;
+}
+
+.nav-item:first-child {
+  margin-left: 0;
+}
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
new file mode 100644
index 0000000..2d386aa
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.html
@@ -0,0 +1,36 @@
+<nav id="navbar">
+	<div id="nav-contents" class="flex-row padding-smaller flex-center-align-items">
+		<div id="nav-profile-picture" class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()">
+			<img class="round-image" [src]="user.profilePictureURL">
+		</div>
+		<div id="nav-username" class="font-size-dot9 nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()">
+			<div class="padding-small">
+				Konstantin
+			</div>
+		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToFeed()">
+			<img src="/assets/icons/tabler-icon-home.svg">
+		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+			<!-- Trending functionality isn't implemented yet! -->
+			<img src="/assets/icons/tabler-icon-trending-up.svg">
+		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+			<!-- Chat functionality isn't implemented yet! -->
+			<img src="/assets/icons/tabler-icon-message-circle.svg">
+		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+			<!-- Search functionality isn't implemented yet! -->
+			<img src="/assets/icons/tabler-icon-search.svg">
+		</div>
+		<div class="flexible">
+			<!-- This element serves as a spacer -->
+		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()">
+			<img src="/assets/icons/tabler-icon-settings.svg">
+		</div>
+		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()">
+			<img src="/assets/icons/tabler-icon-logout.svg">
+		</div>
+	</div>
+</nav>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
new file mode 100644
index 0000000..4af7a8a
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { TokenService } from 'src/app/services/token.service';
+import { UserService } from 'src/app/services/user.service';
+import { User } from 'src/models/identity/user.model';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+  public user: User;
+
+  constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService)
+  { }
+
+  ngOnInit(): void {
+    if (!this._tokenService.getTokenFromSessionStorage()) {
+      this._router.navigate(['/login']);
+      return;
+    }
+
+    this.user = this._userService.getDefaultUser();
+
+    this._userService.getUserFromSessionStorageRequest().subscribe({
+      next: (res: object) => {
+        Object.assign(this.user, res);
+      },
+    });
+  }
+
+  goToProfile(): void {
+    this._router.navigate(['/profile/' + this.user.userName]);
+  }
+
+  goToFeed(): void {
+    this._router.navigate(['/']);
+  }
+
+  goToSettings(): void {
+    this._router.navigate(['/profile/' + this.user.userName + '/settings']);
+  }
+
+  logout(): void {
+    this._tokenService.logoutUserFromSessionStorage();
+    this._router.navigate(['/login']);
+  }
+}
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index a4acfe6..4d9fc64 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -36,11 +36,11 @@
 			</summary>
 		</section>
 		<section class="flex-row flexible-children justify-children-center">
-			<button class="small-padding lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-message-2.svg">
 				&nbsp;Comment
 			</button>
-			<button class="small-padding lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-link.svg">
 				&nbsp;Share
 			</button>
diff --git a/src/assets/icons/tabler-icon-home.svg b/src/assets/icons/tabler-icon-home.svg
new file mode 100644
index 0000000..3578ddb
--- /dev/null
+++ b/src/assets/icons/tabler-icon-home.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-home"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="tabler-icon-home.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <polyline
+     points="5 12 3 12 12 3 21 12 19 12"
+     id="polyline4"
+     style="stroke:#ffeede" />
+  <path
+     d="m 5,12 v 7 a 2,2 0 0 0 2,2 h 10 a 2,2 0 0 0 2,-2 v -7"
+     id="path6"
+     style="stroke:#ffeede" />
+  <path
+     d="m 9,21 v -6 a 2,2 0 0 1 2,-2 h 2 a 2,2 0 0 1 2,2 v 6"
+     id="path8"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-logout.svg b/src/assets/icons/tabler-icon-logout.svg
new file mode 100644
index 0000000..c311628
--- /dev/null
+++ b/src/assets/icons/tabler-icon-logout.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-logout"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-logout.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 14,8 V 6 A 2,2 0 0 0 12,4 H 5 A 2,2 0 0 0 3,6 v 12 a 2,2 0 0 0 2,2 h 7 a 2,2 0 0 0 2,-2 v -2"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="M 7,12 H 21 L 18,9 m 0,6 3,-3"
+     id="path6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-message-circle.svg b/src/assets/icons/tabler-icon-message-circle.svg
new file mode 100644
index 0000000..fc999bd
--- /dev/null
+++ b/src/assets/icons/tabler-icon-message-circle.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-message-circle"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="tabler-icon-message-circle.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 3,20 4.3,16.1 A 9,8 0 1 1 7.7,19 L 3,20"
+     id="path4"
+     style="stroke:#ffeede" />
+  <line
+     x1="12"
+     y1="12"
+     x2="12"
+     y2="12.01"
+     id="line6"
+     style="stroke:#ffeede" />
+  <line
+     x1="8"
+     y1="12"
+     x2="8"
+     y2="12.01"
+     id="line8"
+     style="stroke:#ffeede" />
+  <line
+     x1="16"
+     y1="12"
+     x2="16"
+     y2="12.01"
+     id="line10"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-search.svg b/src/assets/icons/tabler-icon-search.svg
new file mode 100644
index 0000000..abbd480
--- /dev/null
+++ b/src/assets/icons/tabler-icon-search.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-search"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-search.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <circle
+     cx="10"
+     cy="10"
+     r="7"
+     id="circle4"
+     style="stroke:#ffeede" />
+  <line
+     x1="21"
+     y1="21"
+     x2="15"
+     y2="15"
+     id="line6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-settings.svg b/src/assets/icons/tabler-icon-settings.svg
new file mode 100644
index 0000000..c133334
--- /dev/null
+++ b/src/assets/icons/tabler-icon-settings.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-settings"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-settings.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 10.325,4.317 c 0.426,-1.756 2.924,-1.756 3.35,0 a 1.724,1.724 0 0 0 2.573,1.066 c 1.543,-0.94 3.31,0.826 2.37,2.37 a 1.724,1.724 0 0 0 1.065,2.572 c 1.756,0.426 1.756,2.924 0,3.35 a 1.724,1.724 0 0 0 -1.066,2.573 c 0.94,1.543 -0.826,3.31 -2.37,2.37 a 1.724,1.724 0 0 0 -2.572,1.065 c -0.426,1.756 -2.924,1.756 -3.35,0 A 1.724,1.724 0 0 0 7.752,18.617 c -1.543,0.94 -3.31,-0.826 -2.37,-2.37 A 1.724,1.724 0 0 0 4.317,13.675 c -1.756,-0.426 -1.756,-2.924 0,-3.35 A 1.724,1.724 0 0 0 5.383,7.752 c -0.94,-1.543 0.826,-3.31 2.37,-2.37 1,0.608 2.296,0.07 2.572,-1.065 z"
+     id="path4"
+     style="stroke:#ffeede" />
+  <circle
+     cx="12"
+     cy="12"
+     r="3"
+     id="circle6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-trending-up.svg b/src/assets/icons/tabler-icon-trending-up.svg
new file mode 100644
index 0000000..c40ee92
--- /dev/null
+++ b/src/assets/icons/tabler-icon-trending-up.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-trending-up"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-trending-up.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <polyline
+     points="3 17 9 11 13 15 21 7"
+     id="polyline4"
+     style="stroke:#ffeede" />
+  <polyline
+     points="14 7 21 7 21 14"
+     id="polyline6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/styles.css b/src/styles.css
index b187391..75fe905 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -201,10 +201,22 @@ input[type=file]::file-selector-button {
 
 /* General padding */
 
-.small-padding {
+.padding-normal {
+  padding: 0.4em;
+}
+
+.padding-smaller {
+  padding: 0.3em;
+}
+
+.padding-small {
   padding: 0.2em;
 }
 
+.padding-tiny {
+  padding: 0.1em;
+}
+
 /* Cards */
 
 .card {
@@ -218,18 +230,24 @@ input[type=file]::file-selector-button {
 
 /* Effects */
 
-.lighter-hover:hover {
+.lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover {
   cursor: pointer;
+}
+
+.lighter-hover:hover {
   background: #424242;
 }
 
-.click-effect:active {
-  transform: scale(0.9);
+.light-hover:hover {
+  background: #696969;
 }
 
 .hover-half-opacity:hover {
   opacity: 0.5;
-  cursor: pointer;
+}
+
+.click-effect:active {
+  transform: scale(0.9);
 }
 
 /* Inputs, the type found in login and register */
-- 
cgit v1.2.3