navbar and post/feed styling

src/App.css

@@ -1,5 +1,5 @@
 /*****
-* Order of styling contents:
+* Order of contents:
 *
 * Google fonts import
 * Universal styles
@@ -8,8 +8,6 @@
 * Feed styles
 *****/
 
-
-
 /* Google Fonts imports: */
 
 @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Indie+Flower&family=Open+Sans&display=swap');
@@ -20,15 +18,23 @@
 .App {
   display: flex;
   flex-direction: column;
+  background-color: #FFE9F3;
   align-items: center;
   margin: 0;
   padding: 0;
 }
 
+.loading-message {
+  color:rgb(111, 30, 151);
+  font-family: 'Indie Flower', sans-serif;
+  height: 100vh;
+}
+
 /* Navbar */
 
 .navbar {
   display: inline-flex;
+  position: fixed;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
@@ -36,20 +42,40 @@
   height: 5rem;
   background-color: rgb(111, 30, 151);
   border-bottom: 1px solid black;
+  z-index: 9;
 }
 
 .nav-title {
+  display: inline-flex;
   color: orchid;
-  padding-left: 1rem;
+  padding-left: 1.5rem;
   font-family: 'Open Sans', sans-serif;
 }
 
+.nav-searchbar {
+  display: inline-flex;
+  position: relative;
+  color: darkorchid;
+  padding-left: 0.7rem;
+  border-radius: 8px;
+  right: 5rem;
+  height: 40%;
+  width: 35rem;
+}
+
+.nav-searchbar::placeholder {
+  color: darkorchid;
+}
+
 /* Sidebar */
 
 .sidebar-button {
   border: transparent;
   background-color: orchid;
-  height: 100%;
+  text-align: center;
+  height: 3.5rem;
+  border-radius: 15px;
+  margin-right: 1rem;
   width: 6rem;
 }
 
@@ -69,6 +95,7 @@
   top: 5rem;
   padding: 1.5rem;
   transition: right 0.6s ease-out;
+  z-index: 9;
 }
 
 .sidebar-hidden {
@@ -88,6 +115,8 @@
 
 .content-container {
   display: inline-flex;
+  position: relative;
+  top: 5rem;
   flex-direction: row;
 }
 

src/features/posts/Feed.js

@@ -114,7 +114,7 @@ export default function Feed() {
 
     return (
         <>
-        {feed ? feed : <h1>Loading cats for you...</h1>}
+        {feed ? feed : <h1 className="loading-message">Loading cats for you...</h1>}
         </>
     );
 }

src/features/posts/Post.css

@@ -1,39 +1,81 @@
+/* Universal styling */
+
 .post-body {
     display: inline-flex;
     flex-direction: column;
     width: 75%;
-    padding: 2rem;
-    border: 1px solid black;
+    padding: 1rem 2rem;
+    border-radius: 10px;
+    background-color: #bbd8d3;
     margin: 3rem 0;
 }
 
-.image-placeholder {
-    display: inline-flex;
-    background-color: grey;
-    width: 30%;
-    height: 15rem;
-}
+/* Title */
 
 .title {
     font-size: 2rem;
+    color:darkorchid;
+    text-decoration: none;
+    margin-bottom: 1rem;
 }
 
+.title:visited {
+    color: orchid;
+}
+
+/* Media */
+
 img, video {
     max-height: 45rem;
     object-fit: contain;
 }
 
+/* Metadata */
+
 .post-metadata {
     display: inline-flex;
+    margin-top: 1rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid gray;
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
 }
 
+.post-metadata * {
+    background-color:rgb(250, 206, 248);
+    border-color: transparent;
+    text-decoration: none;
+    border-radius: 8px;
+    padding: 5px 8px;
+}
+
 .post-text {
     font-size: 1.2rem;
 }
 
+.post-subreddit {
+    color: rgb(111, 30, 151);
+}
+
+.post-subreddit:visited {
+    color: orchid;
+}
+
+.num-comments {
+    display: inline-flex;
+    background-color: rgb(250, 206, 248);
+    border-color: transparent;
+    border-radius: 8px;
+    padding: 5px 8px;
+}
+
+.num-comments:active {
+    background-color: darkorchid;
+}
+
+/* Handles comment styles on toggle */
+
 .comments-visible {
     display: flex;
     flex-direction: column;

src/features/posts/Post.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
-import { fetchComments } from "./postsSlice";
 import Discussion from "../discussion/Discussion";
 import './Post.css';
 
@@ -87,13 +86,15 @@ export default function Post({data, key}) {
             : ''}
 
             <div className="post-metadata">
-                <a href={`https://www.reddit.com${permalink}`}>
+                <p className="user">{author ? 'u/' + author : 'u/username'}</p>
+                <a className="post-subreddit" href={`https://www.reddit.com/r/${subreddit}`}>
                     {subreddit ? 'r/' + subreddit  : ''}
                 </a>
-                
-                <p className="user">{author ? 'u/' + author : 'u/username'}</p>
+                {ups ? <p>{ups} upvotes</p> : null}
                 <p className="time-posted">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
-                <button className="num-comments" onClick={handleClick}>{comments ? visible + comments : 'no'} comments</button>
+                <button className="num-comments" onClick={handleClick}>
+                    {comments ? visible + comments + ' comments' : 'no comments'}
+                </button>
             </div>
 
             <div className={commentStyle}>

src/features/searchBar/searchBar.js

@@ -18,7 +18,7 @@ export default function SearchBar() {
 
     return (
         <>
-        <input type="text" className="searchbar" placeholder="Search posts" value={term ? term : ''} onChange={handleChange} />
+        <input type="text" className="nav-searchbar" placeholder="Search posts" value={term ? term : ''} onChange={handleChange} />
         </>
     );
 }