From 69624c2a75f04375793d31203e63b8a1797749bf Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 19:29:45 +0200
Subject: Added an hr to feed and profile components, styled properly

---
 src/app/components/feed/feed.component.css        | 2 +-
 src/app/components/feed/feed.component.html       | 1 +
 src/app/components/profile/profile.component.html | 1 +
 src/styles.css                                    | 6 ++++++
 4 files changed, 9 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
index baa96d5..372792c 100644
--- a/src/app/components/feed/feed.component.css
+++ b/src/app/components/feed/feed.component.css
@@ -1,6 +1,6 @@
 #create-post {
   width: 100%;
-  margin: 1em 0;
+  margin-top: 1em;
 }
 
 #new-post-message {
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index a8290a1..3b5b69b 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -23,6 +23,7 @@
 			Post
 		</button>
 	</form>
+	<hr class="card-hr">
 	<section id="posts" (scroll)="onScroll($event)">
 		<div id="no-posts-msg" *ngIf="posts.length === 0">
 			None of your friends have posted anything yet!<br>
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 38f15e4..4bb6752 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -47,6 +47,7 @@
 			</span>
 		</div>
 	</section>
+	<hr class="card-hr">
 	<section>
 		<div *ngIf="userPosts.length === 0">
 			{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
diff --git a/src/styles.css b/src/styles.css
index 0f60fd0..66fedf7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -254,6 +254,12 @@ input[type=file]::file-selector-button {
   }
 }
 
+.card-hr {
+  width: calc(100% - 1em);
+  border: 1px solid var(--fg-color);
+  background-color: var(--fg-color);
+}
+
 /* Effects */
 
 .lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover {
-- 
cgit v1.2.3