Made a major redesign of feed page style

5 files changed, 90 insertions, 17 deletions

diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
index 093e2f8..aa3c392 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -1,7 +1,7 @@
 #feed-page {
   max-width: 40em;
   margin: 0 auto;
-  border: .5em solid white;
+  border: .5em solid var(--bg-color);
   border-bottom: 0;
   box-sizing: border-box;
   display: flex;
@@ -31,10 +31,21 @@
 }
 
 #posts {
-  max-height: calc(100vh - 3em);
+  max-height: calc(100vh - 3.5em);
   overflow-y: auto;
 }
 
+  /* Hide scrollbar for Chrome, Safari and Opera */
+#posts::-webkit-scrollbar {
+  display: none;
+}
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+#posts {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
 /* Profile bar */
 
 #profile-bar {
@@ -43,9 +54,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+
   box-sizing: border-box;
+  background-color: var(--bg-color);
+
   margin-right: .5em;
   padding-bottom: 1em;
+  padding: .5em;
+  border-radius: .6em;
 }
 
 #profile-bar-profile-pic {
@@ -63,8 +79,12 @@
 
 #top-bar {
   display: flex;
+  width: 95%;
+  margin: 0 auto;
+  margin-bottom: .5em;
 }
 
+
 #top-bar-profile-pic {
   height: 2.5em;
   width: 2.5em;
@@ -79,6 +99,13 @@
 #top-bar-create-post {
   flex: 1;
   font-size: inherit;
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  border: 2px solid var(--bg-color);
+  padding: .5em;
+  border-radius: .6em;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
 #top-bar-open-chat {
@@ -86,6 +113,11 @@
   display: none;
 }
 
+#profile-bar,
+#top-bar > * {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
 /* Elements, that act as buttons */
 
 #profile-bar:hover,
@@ -93,3 +125,12 @@
   cursor: pointer;
 }
 
+/* Can't copy text from */
+
+#profile-bar,
+.vote {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index 3253b54..5d7c86a 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -4,7 +4,7 @@
 </div>
 
 <div id="feed-page" *ngIf="dataArrived">
-	<nav id="profile-bar" class="rounded-border" (click)="goToProfile()">
+	<nav id="profile-bar" (click)="goToProfile()">
 		<img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
 		<div id="profile-bar-name">
 			{{ user.firstName }} {{ user.lastName }}
@@ -16,7 +16,7 @@
 	<div id="feed-content">
 		<nav id="top-bar">
 			<img id="top-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt="" (click)="goToProfile()">
-			<input id="top-bar-create-post" class="rounded-border" type="text" placeholder="What's on your mind?"/>
+			<input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/>
 			<a id="top-bar-open-chat" href="">
 				<img src="assets/images/feed/chat-pic.png" alt=""/>
 			</a>
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
index e53eb2c..4769191 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -1,7 +1,26 @@
 .post {
   display: flex;
-  width: inherit;
-  margin: .5em 0;
+  width: 95%;
+
+  margin: .5em auto;
+  box-sizing: border-box;
+  border: 2px solid var(--card-bg);
+  padding: .5em;
+  background-color: var(--card-bg);
+  border-radius: .6em;
+box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+  /* So the bottom shadow of the last element
+   * doesn't get cut off
+   */
+.post:nth-last-child(1) {
+  margin-bottom: 1.1em;
+}
+
+hr {
+  border: 1px solid black;
+  width: 90%;
 }
 
 /* Author */
@@ -43,22 +62,32 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-right: -.2em;
+  margin-right: -.1em;
+}
+
+.score {
+  flex: 1;
+  display: flex;
+  align-items: center;
 }
 
+
 .vote {
+  display: flex;
+  align-items: center;
   flex: 1;
-  background: white;
+
+  background: var(--card-bg);
   font-size: 1em;
+
+  border: 1px solid var(--card-bg);
   box-sizing: border-box;
-  border: 2px solid white;
-  border-radius: .3em;
-}
+  border-radius: .2em;
 
-.vote:hover {
-  background: lightgray;
-}
+  }
 
-.vote:active {
-  border-color: black;
+.vote:hover {
+  border: 1px solid var(--focus-color);
+  color: var(--focus-color);
+  cursor: pointer;
 }
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index b6fab55..041158f 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1,4 +1,4 @@
-<div class="post rounded-border">
+<div class="post">
 	<div class="content">
 		<div class="author">
 			<img class="round-image" src="assets/images/feed/profile-pic.png">
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index 3d6d2f4..95592a1 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -4,6 +4,7 @@
 :root {
   --bg-color: white;
   --focus-color: forestgreen;
+  --card-bg: white;
 }
 
 html, body {
@@ -12,6 +13,7 @@ html, body {
 }
 body {
   font: 21px sans-serif !important;
+  background-color: var(--bg-color);
 }
 
 input:focus, button:focus {
@@ -68,6 +70,7 @@ input:focus, button:focus {
 
 .input-field {
   width: 100%;
+  background-color: var(--bg-color);
 
   border: 0;
   border-bottom: 1px solid grey;