Skip to content

Commit

Permalink
Refine styles of Profiles page and make more mobile friendly
Browse files Browse the repository at this point in the history
  • Loading branch information
ryandotfurrer committed May 4, 2024
1 parent 744f71a commit cddd52a
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 23 deletions.
1 change: 1 addition & 0 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,6 @@ h3 {
}

.debug {
/* Used to help debug CSS layout issues */
outline: 1px solid red;
}
2 changes: 1 addition & 1 deletion src/app/lib/components/UiCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ type Props = {
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}`}
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>
Expand Down
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;
4 changes: 2 additions & 2 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function Home() {
<h2 className="font-normal uppercase text-lg lg:text-xl">
Our Mission:
</h2>
<p className="text-pretty text-2xl lg:text-3xl font-extrabold leading-tight tracking-tight md:text-balance">
<p className="text-balance text-2xl lg:text-3xl font-extrabold leading-tight tracking-tight max-w-prose">
Create a safe space for developers of all backgrounds to learn, grow,
and build friendships.
</p>
Expand All @@ -37,7 +37,7 @@ export default function Home() {
</UiCard>
</div>

<div className="mx-4 my-10 flex items-center justify-center">
<div className="py-10 flex items-center justify-center">
<JoinButton />
</div>
</div>
Expand Down
14 changes: 9 additions & 5 deletions src/app/profiles/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,20 @@ function Profiles() {
}, []);

return (
<main className="flex flex-col gap-4">
<h1>Profiles</h1>
<div>Members of our amazing community:</div>
<section className="space-y-8">
<header className="flex flex-col gap-2">
<h1>Profiles</h1>
<p className="lg:text-lg text-balance md:max-w-prose">
Members of our amazing community:
</p>
</header>
{isLoading && <LoadingView />}
<div className="grid grid-cols-3 gap-4">
<div className="grid md:grid-cols-3 gap-4">
{profiles.map((p, i) => (
<UserProfileCard key={i} userInfo={p} />
))}
</div>
</main>
</section>
);
}

Expand Down

0 comments on commit cddd52a

Please sign in to comment.