From 8ca0fe22ffad467ba749becf7e7676b102cd09d0 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Thu, 16 Mar 2023 00:03:09 +0000
Subject: [PATCH] Sticky navbar now
---
daily-thought-frontend/src/components/hero/Hero.tsx | 13 ++++++-------
.../src/components/navigation/NavBar.tsx | 8 ++++----
daily-thought-frontend/src/pages/feed.tsx | 6 +++---
daily-thought-frontend/src/pages/index.tsx | 2 +-
daily-thought-frontend/src/pages/userPost.tsx | 2 +-
5 files changed, 15 insertions(+), 16 deletions(-)
diff --git a/daily-thought-frontend/src/components/hero/Hero.tsx b/daily-thought-frontend/src/components/hero/Hero.tsx
index e754f1aa..34c364f2 100644
--- a/daily-thought-frontend/src/components/hero/Hero.tsx
+++ b/daily-thought-frontend/src/components/hero/Hero.tsx
@@ -1,25 +1,24 @@
export default function Hero() {
return (
- <div className="bg-white">
+ <div className="bg-c-pink">
<div className="relative isolate px-6 pt-14 lg:px-8">
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div className="text-center">
- <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+ <h1 className="text-4xl font-bold tracking-tight text-c-green sm:text-6xl">
Welcome to Daily
</h1>
- <p className="mt-6 text-lg leading-8 text-gray-600">
- Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
- fugiat veniam occaecat fugiat aliqua.
+ <p className="mt-6 text-lg leading-8 text-white">
+ Hello there! Welcome to Daily - a social media plaform focussed on finding the answers to sometimes weird, always wonderful yet totally random daily thoughts.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
- className="rounded-md bg-pink-400 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-white hover:text-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
+ className="rounded-md bg-c-green px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-white hover:text-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
>
Sign Up
</a>
- <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
+ <a href="#" className="text-sm font-semibold leading-6 text-c-green">
Log In <span aria-hidden="true">→</span>
</a>
</div>
diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
index a92db211..74d2c4ea 100644
--- a/daily-thought-frontend/src/components/navigation/NavBar.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, PropsWithChildren } from 'react'
+import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { User } from '@/types/user'
@@ -30,15 +30,15 @@ type NavBarProps = {
const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
children,
user
-}) => {
+}) => {
return (
<>
<div className="min-h-full min-w-full">
- <Disclosure as="nav" className="bg-c-pink">
+ <Disclosure as="nav" className="bg-c-pink fixed w-full">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
- <div className="flex h-16 items-center justify-between">
+ <div className={`flex h-16 items-center justify-between`}>
{user !== null &&
<div className="flex items-center">
diff --git a/daily-thought-frontend/src/pages/feed.tsx b/daily-thought-frontend/src/pages/feed.tsx
index fbb377ee..6aceb2e9 100644
--- a/daily-thought-frontend/src/pages/feed.tsx
+++ b/daily-thought-frontend/src/pages/feed.tsx
@@ -2,6 +2,7 @@ import NavBar from "@/components/navigation/NavBar";
import AnswerCard from "@/components/post/AnswerCard";
import Post from "@/components/post/Post";
import Question from "@/components/question/Question";
+import { useEffect, useState } from "react";
const user = {
Name: 'Tom Cook',
@@ -14,16 +15,15 @@ const user = {
const Feed = () => {
-
return(
<>
<div className="w-full">
<NavBar user={user} />
</div>
- <div className="flex w-full bg-c-pink flex-col items-center py-3">
+ <div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
<div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
- <div className="p-8">
+ <div className={`p-8 bg-c-pink`}>
<h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
</div>
<p className="text-c-green">Most recent answer</p>
diff --git a/daily-thought-frontend/src/pages/index.tsx b/daily-thought-frontend/src/pages/index.tsx
index 1cd9854b..0c2e4d89 100644
--- a/daily-thought-frontend/src/pages/index.tsx
+++ b/daily-thought-frontend/src/pages/index.tsx
@@ -24,7 +24,7 @@ export default function Home() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
- <main>
+ <main className='min-h-screen bg-c-pink'>
<NavBar user={null}>
{user &&
<Hero />
diff --git a/daily-thought-frontend/src/pages/userPost.tsx b/daily-thought-frontend/src/pages/userPost.tsx
index e89c6048..a6099248 100644
--- a/daily-thought-frontend/src/pages/userPost.tsx
+++ b/daily-thought-frontend/src/pages/userPost.tsx
@@ -18,7 +18,7 @@ const UserPost = () => {
<div className="w-full">
<NavBar user={user} />
</div>
- <div className="flex w-full bg-c-pink flex-col items-center py-3">
+ <div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
<div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
<div className="p-8">
<h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
--
GitLab