Skip to content

Commit 34d268e

Browse files
tedsparetedspare
committed
Standardize icon size and subtle color
1 parent 275fd83 commit 34d268e

14 files changed

+96
-93
lines changed

‎src/app/(rest)/blog/[slug]/page.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { Metadata } from 'next'
2-
import Link from 'next/link'
32
import { formatDate } from '~/lib/utils/date'
43
import { getPost, getPostSlugs } from '~/lib/utils/posts'
5-
import { Button } from '~/ui/button'
4+
import { CTA } from '~/ui/cta'
65
import { CustomImage } from '~/ui/custom-image'
6+
import { NextPost } from '~/ui/next-post'
77

88
export const dynamicParams = false
99

@@ -54,11 +54,8 @@ export default async function Page({ params }: Props) {
5454
{metadata.subtitle ? <h3 className="text-secondary">{metadata.subtitle}</h3> : null}
5555
</div>
5656
<Post />
57-
<div className="mt-8 flex items-center justify-center">
58-
<Link href="/contact">
59-
<Button>Get in touch</Button>
60-
</Link>
61-
</div>
57+
<CTA />
58+
<NextPost date={metadata.date} />
6259
</article>
6360
</div>
6461
</div>

‎src/app/(rest)/blog/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { getPostMetadata } from '~/lib/utils/posts'
2-
import { Card } from './card'
2+
import { Card } from '~/ui/card'
33

44
export default async function Page() {
55
const posts = await getPostMetadata()

‎src/app/(rest)/contact/contact-form.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const ContactForm = () => {
4141
</div>
4242
<Button type="submit" disabled={pending || !!state?.success} className="w-full">
4343
<p>Submit</p>
44-
<div className="ml-auto flex items-center gap-0.5">
44+
<div className="ml-auto hidden items-center gap-0.5 sm:flex">
4545
<kbd>⌘</kbd>
4646
<kbd>⏎</kbd>
4747
</div>

‎src/app/(rest)/newsletter/newsletter-form.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const NewsletterForm = ({ className }: { className?: string }) => {
2626
variant="icon"
2727
className="-translate-y-1/2 absolute top-1/2 right-2"
2828
>
29-
<Arrow className="h-5 w-5" />
29+
<Arrow />
3030
</Button>
3131
</div>
3232
)}

‎src/app/(rest)/newsletter/newsletter-list.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const NewsletterList = ({ newsletters }: { newsletters: Newsletter[] }) =
2626
<Link
2727
href={`/newsletter/${newsletter.slug}`}
2828
key={newsletter.slug}
29-
className="overflow-hidden p-4 transition-colors hover:bg-subtle"
29+
className="overflow-hidden p-4 hover:bg-subtle"
3030
>
3131
<div className="flex flex-col gap-2">
3232
<h2>{newsletter.title}</h2>

‎src/app/content.tsx

-39
This file was deleted.

‎src/app/globals.css

+7-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
--secondary: #666;
66
--background: #f5f0ec;
77
--negative: #222;
8-
--subtle: #ddd;
8+
--subtle: #0000001a; /* black/10 */
99
--danger: red;
1010
}
1111

@@ -15,7 +15,7 @@
1515
--secondary: #999;
1616
--background: black;
1717
--negative: #ddd;
18-
--subtle: #222;
18+
--subtle: #ffffff1a; /* white/10 */
1919
--danger: red;
2020
}
2121
}
@@ -99,6 +99,10 @@
9999
section {
100100
@apply space-y-4;
101101
}
102+
103+
button svg {
104+
@apply size-4;
105+
}
102106
}
103107

104108
@layer components {
@@ -324,7 +328,7 @@
324328
/* Codeblocks */
325329

326330
code {
327-
@apply bg-black/10 dark:bg-white/10 rounded py-0.5 px-1.5 text-[13px];
331+
@apply bg-subtle rounded py-0.5 px-1.5 text-[13px];
328332
}
329333

330334
code[data-theme] {

‎src/app/page.tsx

+2-32
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Link from 'next/link'
44
import { usePostHog } from 'posthog-js/react'
55
import { useFold } from '~/lib/hooks/use-fold'
66
import { cn } from '~/lib/utils/cn'
7-
import { Button } from '~/ui/button'
7+
import { CTA } from '~/ui/cta'
88
import { Footer } from '~/ui/footer'
99
import { Albertsons } from '~/ui/logos/albertsons'
1010
import { Cal } from '~/ui/logos/cal'
@@ -28,7 +28,6 @@ const Section = ({ children, className }: { children: React.ReactNode; className
2828
export default function Page() {
2929
const posthog = usePostHog()
3030
const { isBelowFold } = useFold()
31-
const hook = "We don't have a sales team. Let's talk."
3231

3332
return (
3433
<div className="flex flex-col items-center">
@@ -80,37 +79,8 @@ export default function Page() {
8079
</div>
8180
<Testimonials />
8281
<Partners />
83-
<div className="flex flex-col gap-8">
84-
<h2 className="max-w-2xl text-7xl">{hook}</h2>
85-
<div className="flex items-center gap-4">
86-
<Link
87-
href="/blog/introducing-rubric-labs"
88-
onClick={() =>
89-
posthog.capture('read_more.clicked', {
90-
body: 'Read our founding story',
91-
hook,
92-
href: '/blog/introducing-rubric-labs'
93-
})
94-
}
95-
>
96-
<Button variant="ghost">Read our founding story</Button>
97-
</Link>
98-
<Link
99-
href="/contact"
100-
onClick={() =>
101-
posthog.capture('contact_us.clicked', {
102-
body: 'Get in touch',
103-
hook,
104-
href: '/contact'
105-
})
106-
}
107-
>
108-
<Button>Get in touch</Button>
109-
</Link>
110-
</div>
111-
</div>
82+
<CTA />
11283
</Section>
113-
11484
<Footer />
11585
</div>
11686
)

‎src/ui/button.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { cn } from '~/lib/utils/cn'
22

33
const variants = {
4-
default:
5-
'bg-black/10 dark:bg-subtle dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20 rounded-full',
4+
default: 'bg-subtle dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20 rounded-full',
65
outline:
76
'border-subtle border dark:enabled:hover:border-white/20 enabled:hover:border-black/20 rounded-full',
87
ghost: 'dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20 rounded-full',

‎src/app/(rest)/blog/card.tsx ‎src/ui/card.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ export const Card = ({
1919
<Link
2020
href={`/blog/${post.slug}`}
2121
key={post.slug}
22-
className={cn('group col-span-1 space-y-2', className)}
22+
className={cn('group col-span-1 space-y-2 no-underline', className)}
2323
>
2424
<div className="relative aspect-square w-full">
2525
<CustomImage
2626
src={imgSrc}
2727
alt={imgAlt}
28-
className="object-cover grayscale transition-all duration-300 group-hover:grayscale-0"
28+
className="object-cover grayscale transition-all group-hover:grayscale-0"
2929
/>
3030
</div>
31-
<p className="max-w-full pt-4 text-lg">{post.title}</p>
31+
<p className="max-w-full pt-4 text-lg group-hover:text-primary">{post.title}</p>
3232
<div className="flex items-center gap-4 text-sm">
3333
<p>{post.category}</p>
3434
<p className="text-secondary">{formatDate(post.date)}</p>

‎src/ui/codeblock.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export const CodeBlock = ({ children, ...props }: { children: React.ReactElement
1616
{children}
1717
</pre>
1818
<Button
19-
className="absolute top-2 right-2 w-fit text-center opacity-0 transition-opacity group-hover:opacity-100"
20-
variant="link"
19+
className="absolute top-1 right-1 opacity-0 transition-opacity group-hover:opacity-100"
20+
variant="icon"
2121
size="sm"
2222
onClick={() => handleCopy(preRef.current?.textContent || 'Code not found')}
2323
>

‎src/ui/cta.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use client'
2+
3+
import Link from 'next/link'
4+
import { usePostHog } from 'posthog-js/react'
5+
import { Button } from './button'
6+
import { Arrow } from './icons/arrow'
7+
8+
export const CTA = () => {
9+
const hook = "We don't have a sales team. Let's talk."
10+
const posthog = usePostHog()
11+
12+
return (
13+
<div className="flex flex-col gap-8">
14+
<h2 className="max-w-2xl text-7xl">{hook}</h2>
15+
<div className="flex items-center gap-4">
16+
<Link
17+
href="/contact"
18+
onClick={() =>
19+
posthog.capture('contact_us.clicked', {
20+
body: 'Get in touch',
21+
hook,
22+
href: '/contact'
23+
})
24+
}
25+
>
26+
<Button>Get in touch</Button>
27+
</Link>
28+
<Link
29+
href="/blog/introducing-rubric-labs"
30+
onClick={() =>
31+
posthog.capture('read_more.clicked', {
32+
body: 'Read our founding story',
33+
hook,
34+
href: '/blog/introducing-rubric-labs'
35+
})
36+
}
37+
>
38+
<Button variant="ghost">
39+
Read our founding story
40+
<Arrow />
41+
</Button>
42+
</Link>
43+
</div>
44+
</div>
45+
)
46+
}

‎src/ui/next-post.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { getPostMetadata } from '~/lib/utils/posts'
2+
import { Card } from '~/ui/card'
3+
4+
export const NextPost = async ({ date }: { date: string }) => {
5+
const posts = await getPostMetadata()
6+
7+
const otherPosts = posts.filter(post => post.date < date)
8+
if (otherPosts.length < 2)
9+
otherPosts.push(
10+
...posts
11+
.filter(post => post.date > date)
12+
.reverse()
13+
.slice(0, 2)
14+
)
15+
16+
return (
17+
<div className="flex flex-col gap-8 py-16">
18+
<h2>Keep reading</h2>
19+
<div className="grid max-w-4xl gap-8 sm:grid-cols-2">
20+
{otherPosts.slice(0, 2).map(post => (
21+
<Card key={post.slug} post={post} imgSrc={post.bannerImageUrl} imgAlt={post.title} />
22+
))}
23+
</div>
24+
</div>
25+
)
26+
}

‎src/ui/scroll-button.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const ScrollButton = ({ className }: { className?: string }) => {
2121
}}
2222
>
2323
<p className="text-base">{body}</p>
24-
<Arrow className="size-4 rotate-90" />
24+
<Arrow className="rotate-90" />
2525
</Button>
2626
)
2727
}

0 commit comments

Comments
 (0)