From 2bbe65ce3ea8ce0339606c44c66ad0a37cb58678 Mon Sep 17 00:00:00 2001
From: strNophix <nvdpoel01@gmail.com>
Date: Thu, 29 Sep 2022 15:21:02 +0200
Subject: [PATCH] Default state of client view is logged out

---
 client/src/components/BrowseLayout.tsx |  2 +-
 client/src/components/NavBar.tsx       | 25 +++++++++++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/src/components/BrowseLayout.tsx b/client/src/components/BrowseLayout.tsx
index 4867c8e..d35c4ac 100644
--- a/client/src/components/BrowseLayout.tsx
+++ b/client/src/components/BrowseLayout.tsx
@@ -13,7 +13,7 @@ function BrowseLayout() {
       <main className="flex-1 flex flex-row overflow-hidden">
         <div className="bg-neutral-800 w-60 flex flex-col">
           <div className="flex flex-row justify-between p-2 items-center">
-            <p className="uppercase font-semibold text-sm">Followed channels</p>
+            <p className="uppercase font-semibold text-sm">Trending channels</p>
             <Button variant="subtle" className="p-2">
               <ArrowLeftIcon className="w-4 h-4" />
             </Button>
diff --git a/client/src/components/NavBar.tsx b/client/src/components/NavBar.tsx
index 4404d82..0cff89b 100644
--- a/client/src/components/NavBar.tsx
+++ b/client/src/components/NavBar.tsx
@@ -1,5 +1,6 @@
-import { TvIcon } from "@heroicons/react/24/outline";
+import { TvIcon, UserIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
+import Button from "./Button";
 import Input from "./Input";
 
 const NavBar: FC = () => {
@@ -7,12 +8,13 @@ const NavBar: FC = () => {
     <nav className="bg-zinc-800 w-screen font-semibold">
       <div className="flex flex-row justify-between items-center mx-2">
         <div className="basis-1/4">
-          <ul className="flex flex-row space-x-3 items-center">
+          <ul className="flex flex-row space-x-9 items-center">
             <li>
               <TvIcon className="w-6 h-6" />
             </li>
-            <li>Following</li>
-            <li>Browse</li>
+            <li>
+              <p className="text-lg">Browse</p>
+            </li>
           </ul>
         </div>
         <div className="basis-2/4">
@@ -22,9 +24,20 @@ const NavBar: FC = () => {
         </div>
         <div className="basis-1/4">
           <ul className="justify-end flex flex-row space-x-3 items-center">
-            <li>Hello</li>
             <li>
-              <div className="w-8 h-8 rounded-full bg-yellow-300" />
+              <Button className="text-sm px-3 py-2 bg-neutral-700">
+                Log In
+              </Button>
+            </li>
+            <li>
+              <Button className="text-sm px-3 py-2 bg-violet-500">
+                Sign Up
+              </Button>
+            </li>
+            <li>
+              <Button variant="subtle" className="p-1">
+                <UserIcon className="h-5 w-5 inline-block" />
+              </Button>
             </li>
           </ul>
         </div>