resyle: fix sizes

Balastrong · Oct 5, 2024 · fab47f4 · fab47f4
1 parent eead50a
commit fab47f4
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 26 deletions.
diff --git a/src/app/[userSlug]/page.tsx b/src/app/[userSlug]/page.tsx
@@ -32,23 +32,23 @@ export default async function UserPublicProfile({
   )
 
   return (
-    <main className="flex w-full flex-col gap-4 px-2 lg:flex-row">
+    <div className="flex w-full flex-col gap-12 px-2 lg:flex-row">
       <div className="flex flex-row gap-4 lg:w-60 lg:flex-col">
-        <Avatar className="aspect-square size-28 lg:mx-auto lg:h-auto lg:w-full">
+        <Avatar className="aspect-square size-28 lg:mx-auto lg:size-60">
           <AvatarImage src={`https://github.com/${userSlug}.png`} />
           <AvatarFallback className="text-2xl">{userSlug[0]}</AvatarFallback>
         </Avatar>
         <div className="flex flex-col gap-2 lg:gap-4">
           <div>
-            <h2 className="text-2xl font-medium">{userData?.fullName}</h2>
-            <h3 className="text-xl">{userSlug}</h3>
+            <h2 className="text-xl font-medium">{userData.fullName}</h2>
+            <h3 className="text-lg">{userSlug}</h3>
           </div>
           <div>
             <p>Projects: {publicProjects?.length ?? 0}</p>
           </div>
         </div>
       </div>
-      <div className="flex flex-1 flex-col items-center gap-4 overflow-x-hidden">
+      <div className="flex flex-1 flex-col items-center gap-4 overflow-hidden">
         <h2 className="text-2xl font-medium">Projects on Myntenance</h2>
         <div className="flex w-full flex-col items-center gap-4">
           {(publicProjects ?? []).map((_, i) => (
@@ -62,7 +62,7 @@ export default async function UserPublicProfile({
           ))}
         </div>
       </div>
-    </main>
+    </div>
   )
 }
 

diff --git a/src/app/api/github/actions.ts b/src/app/api/github/actions.ts
@@ -50,9 +50,7 @@ export async function storeRepository(fullName: string) {
     return { message: "Repository stored", error: false }
   } catch (error) {
     const errorMessage =
-      error instanceof Error
-        ? error?.message
-        : (undefined ?? "An error occurred")
+      error instanceof Error ? error?.message : "An error occurred"
 
     return { message: errorMessage, error: true }
   }
@@ -64,14 +62,15 @@ export const getUserRepoStats = unstable_cache(
     userLogin: string,
     repoOwner: string,
     repoName: string,
+    days: number = 365,
   ) => {
     const today = new Date()
     return octokit.rest.repos.listCommits({
       owner: repoOwner,
       repo: repoName,
       author: userLogin,
       per_page: 100,
-      since: new Date(today.setDate(today.getDate() - 365)).toISOString(),
+      since: new Date(today.setDate(today.getDate() - days)).toISOString(),
     })
   },
   undefined,

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
         <Providers>
           <WorkInProgressBanner />
           <Header />
-          <main className="m-auto w-full max-w-[1200px] flex-1 p-4">
+          <main className="m-auto w-full max-w-screen-xl flex-1 p-4">
             {children}
           </main>
         </Providers>

diff --git a/src/components/ActivityCalendar.tsx b/src/components/ActivityCalendar.tsx
@@ -21,6 +21,7 @@ export function ActivityCalendar(props: Props) {
       colorScheme={colorScheme === "dark" ? "dark" : "light"}
       theme={minimalTheme}
       blockSize={10}
+      blockMargin={1.7}
       labels={{
         totalCount: `{{count}} commits in the last ${props.data.length} days`,
       }}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -11,7 +11,7 @@ export default async function Header() {
   } = await createClient().auth.getUser()
 
   return (
-    <header className="m-auto flex w-full max-w-[1200px] items-center justify-between gap-2 p-4">
+    <header className="m-auto flex w-full max-w-screen-xl items-center justify-between gap-2 p-4">
       <Link href="/">
         <h1 className="text-2xl font-semibold">Myntenance</h1>
       </Link>

diff --git a/src/components/PublicProjectCard.tsx b/src/components/PublicProjectCard.tsx
@@ -17,11 +17,8 @@ type Props = {
   }>
 }
 
-export function PublicProjectCard({
-  project,
-  activityPromise: commitsPromise,
-}: Props) {
-  const { data, lastCommit } = use(commitsPromise)
+export function PublicProjectCard({ project, activityPromise }: Props) {
+  const { data, lastCommit } = use(activityPromise)
 
   const order = useMemo(
     () =>
@@ -32,12 +29,12 @@ export function PublicProjectCard({
   )
 
   return (
-    <Card className="w-full" style={{ order }}>
+    <Card className="w-full max-w-fit" style={{ order }}>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Image
-            width={100}
-            height={100}
+            width={40}
+            height={40}
             src={`https://github.com/${project.ownerLogin}.png?size=80`}
             alt={project.ownerLogin}
             className={`size-10 bg-gray-300 ${
@@ -47,12 +44,15 @@ export function PublicProjectCard({
           <a
             href={`https://github.com/${project.ownerLogin}/${project.name}`}
             target="_blank"
+            className="text-nowrap"
           >
-            {project.ownerLogin}/{project.name}
+            <span>{project.ownerLogin}/</span>
+            <wbr />
+            <span>{project.name}</span>
           </a>
         </CardTitle>
       </CardHeader>
-      <CardContent className="flex w-full items-center justify-center">
+      <CardContent>
         <ActivityCalendar data={data} />
       </CardContent>
     </Card>

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
@@ -35,10 +35,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn(
-      "text-xl font-semibold leading-none tracking-tight",
-      className,
-    )}
+    className={cn("text-xl font-semibold leading-none", className)}
     {...props}
   />
 ))