Skip to content

Commit

Permalink
Merge pull request #6 from ryandotfurrer/4_make-site-more-responsive
Browse files Browse the repository at this point in the history
Make site more responsive
  • Loading branch information
bmorrisondev authored May 4, 2024
2 parents ce3ff7c + cddd52a commit 44158a4
Show file tree
Hide file tree
Showing 9 changed files with 361 additions and 277 deletions.
29 changes: 18 additions & 11 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,33 @@
@tailwind utilities;

body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0px 0px 20px 0px;
font-family: "Open Sans", sans-serif;
line-height: 1.5;
color: #fefefe;
@apply bg-[#111111];
@apply bg-[#111] text-zinc-200;
}

p {
padding-bottom: 1rem !important;
h1,
h2,
h3,
h4,
h5,
h6 {
@apply text-balance font-extrabold leading-tight tracking-tight text-zinc-50;
}

h1 {
@apply text-4xl pb-3 mb-2 !important;
@apply text-4xl md:text-5xl lg:text-6xl tracking-tighter;
}

h2 {
@apply text-2xl !important;
@apply text-3xl md:text-4xl lg:text-5xl;
}

h3 {
@apply text-2xl pb-1 mb-2 !important;
}
@apply text-2xl md:text-3xl lg:text-4xl;
}

.debug {
/* Used to help debug CSS layout issues */
outline: 1px solid red;
}
23 changes: 11 additions & 12 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ClerkProvider, UserButton } from '@clerk/nextjs'
import { ClerkProvider, UserButton } from "@clerk/nextjs";
import Navbar from "./lib/components/Navbar";
import Footer from "./lib/components/Footer";
import { Toaster } from "react-hot-toast";
import PHProvider from './lib/PHProvider'
import PHProvider from "./lib/PHProvider";
import PostHogPageView from "./lib/PostHogPageView";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "fullstack.chat",
description: "A safe space for developers of all backgrounds to learn, grow, and build friendships.",
description:
"A safe space for developers of all backgrounds to learn, grow, and build friendships.",
};

export default function RootLayout({
Expand All @@ -24,16 +25,14 @@ export default function RootLayout({
<ClerkProvider>
<html lang="en">
<PHProvider>
<body className={inter.className}>
<Toaster/>
<body
className={`${inter.className} px-4 py-8 max-w-screen-lg xl:px-0 mx-auto`}
>
<Toaster />
<PostHogPageView />
<div className="flex justify-center text-white md:mx-0 m-2">
<div className="flex flex-col w-full max-w-[960px] px-2">
<Navbar />
{ children }
<Footer />
</div>
</div>
<Navbar />
<main>{children}</main>
<Footer />
</body>
</PHProvider>
</html>
Expand Down
10 changes: 5 additions & 5 deletions src/app/lib/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react'
import React from "react";

function Footer() {
return (
<div className="my-2 flex justify-center">
©{(new Date()).getFullYear()} fullstack.chat
<div className="py-4 flex justify-center">
©{new Date().getFullYear()} fullstack.chat
</div>
)
);
}

export default Footer
export default Footer;
66 changes: 39 additions & 27 deletions src/app/lib/components/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,45 @@
'use client'
"use client";

import React, { useState } from 'react';
import Link from 'next/link';
import React, { useState } from "react";
import Link from "next/link";

import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai"
import { SignIn, SignInButton, UserProfile, useUser, UserButton, SignedIn, SignedOut } from '@clerk/nextjs';
import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";
import {
SignIn,
SignInButton,
UserProfile,
useUser,
UserButton,
SignedIn,
SignedOut,
} from "@clerk/nextjs";

function Navbar() {
const [isMenuShown, setIsMenuShown] = useState(false);
const [isMenuShown, setIsMenuShown] = useState(false);

return (
<nav className="flex item-center align-center justify-between py-4 px-4">
<div className="w-[80px]">
<Link href="/">
<img alt="fullstack.chat logo" src="/assets/images/logo-2.png" className="logo max-h-[40px]" />
</Link>
</div>
<div className="container flex flex-col h-full justify-end gap-10 text-2xl md:flex-row md:h-auto md:gap-8 md:text-lg items-center">
<Link href="/profiles">Profiles</Link>
<SignedIn>
<Link href="/me">My Profile</Link>
<UserButton />
</SignedIn>
<SignedOut>
<Link href="/sign-in">Sign In</Link>
</SignedOut>
</div>
return (
<nav className="flex items-center pb-12">
<div className="max-w-16 md:max-w-24 mr-auto">
<Link href="/">
<img
alt="fullstack.chat logo"
src="/assets/images/logo-2.png"
className="logo"
/>
</Link>
</div>
<div className="flex gap-4 lg:text-lg">
<Link href="/profiles">Profiles</Link>
<SignedIn>
<Link href="/me">My Profile</Link>
<UserButton />
</SignedIn>
<SignedOut>
<Link href="/sign-in">Sign In</Link>
</SignedOut>
</div>

{/* <div className="container flex flex-col h-full justify-end gap-10 text-2xl md:flex-row md:h-auto md:gap-8 md:text-lg">
{/* <div className="container flex flex-col h-full justify-end gap-10 text-2xl md:flex-row md:h-auto md:gap-8 md:text-lg">
{ isSignedIn ?
<>
<Link href="/profile">Profile</Link>
Expand All @@ -37,7 +49,7 @@ function Navbar() {
}
</div> */}

{/* {!isMenuShown && (
{/* {!isMenuShown && (
<button
className="md:hidden text-white text-3xl"
onClick={() => setIsMenuShown(true)}
Expand Down Expand Up @@ -83,8 +95,8 @@ function Navbar() {
Login
</button>
</div> */}
</nav>
);
</nav>
);
}

export default Navbar;
30 changes: 13 additions & 17 deletions src/app/lib/components/UiCard.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
import React, { ReactNode } from 'react'
import React, { ReactNode } from "react";

type Props = {
title?: string
children: ReactNode
className?: string
outerClassName?: string
}
title?: string;
children: ReactNode;
className?: string;
outerClassName?: string;
};

function UiCard({ title, children, className, outerClassName }: Props) {
return (
<div className={`bg-gradient-to-tl from-[#1B1923] border-t-2 border-[#222222] rounded-xl p-3 ${outerClassName}`}>
{ title && (
<div className="mb-2 font-semibold">
{ title }
</div>
)}
<div className={className}>
{ children }
</div>
<div
className={`bg-gradient-to-tl from-[#1B1923] border-t-2 border-[#222222] rounded-xl p-4 ${outerClassName}`}
>
{title && <p className="mb-2 text-white font-semibold">{title}</p>}
<div className={className}>{children}</div>
</div>
)
);
}

export default UiCard
export default UiCard;
33 changes: 18 additions & 15 deletions src/app/lib/components/UserProfileCard.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
import React from 'react'
import { UserInfo } from '../models'
import UiCard from './UiCard'
import Image from 'next/image'
import React from "react";
import { UserInfo } from "../models";
import UiCard from "./UiCard";
import Image from "next/image";

type Params = {
userInfo: UserInfo
}
userInfo: UserInfo;
};

function UserProfileCard({ userInfo }: Params) {
return (
<UiCard>
<UiCard className="mx-auto space-y-4 grid place-items-center">
<Image
src={userInfo.imageUrl || '/images/default-profile.png'}
src={userInfo.imageUrl || "/images/default-profile.png"}
width={75}
height={75}
alt={''}
className='rounded-full' />
<div className='font-bold'>{ userInfo.displayName }</div>
<div className='text-sm'>@{ userInfo.username }</div>
<div className=''>{ userInfo.tagline }</div>
alt={""}
className="rounded-full"
/>
<header className="text-center">
<p className="font-bold">{userInfo.displayName}</p>
<p className="text-sm">@{userInfo.username}</p>
</header>
<p className="text-center">{userInfo.tagline}</p>
</UiCard>
)
);
}

export default UserProfileCard
export default UserProfileCard;
Loading

0 comments on commit 44158a4

Please sign in to comment.