Skip to content

Commit 1fe8261

Browse files
jasonbahljasonbahl
authored
Merge pull request #50 from wp-graphql/rebrand
feat: rebrand
2 parents 0e77cb3 + 833925e commit 1fe8261

24 files changed

+96
-70
lines changed

‎possibleTypes.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/fonts/inter/InterVariable-Italic.ttf

873 KB
Binary file not shown.

‎public/fonts/inter/InterVariable.ttf

843 KB
Binary file not shown.

‎public/fonts/lora/Lora-Italic-VariableFont_wght.ttf

214 KB
Binary file not shown.

‎public/fonts/lora/Lora-VariableFont_wght.ttf

206 KB
Binary file not shown.

‎src/components/Docs/DocsNav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function DocsNav({ docsNavData }) {
1313
if (children.length > 0) {
1414
acc.push(
1515
<div key={key}>
16-
<h3 className="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
16+
<h3 className="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200 font-lora">
1717
{key}
1818
</h3>
1919
<ul className="mb-6 space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800">

‎src/components/Docs/DocsNavSideBar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function DocsSidebar({ children, className }) {
99
<Popover>
1010
{({ open }) => (
1111
<>
12-
<Popover.Button className="z-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 bg-slate-300 dark:bg-slate-800 fixed right-[4rem] bottom-[4rem]">
12+
<Popover.Button className="z-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 bg-navy dark:bg-slate-200 fixed right-[4rem] bottom-[4rem]">
1313
{!open ? (
1414
<>
1515
<span className="sr-only">Open Docs Nav menu</span>

‎src/components/HomePage/HomepageCta.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Link from "next/link"
22

33
export default function HomepageCta() {
44
return (
5-
<div className="bg-slate-200 dark:bg-slate-900">
5+
<div className="bg-white dark:bg-navy">
66
<div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
77
<h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">
88
<span className="block">Boost your productivity</span>

‎src/components/HomePage/HomepageFeatures.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import Image from "next/image"
33
export default function HomepageFeatures() {
44
return (
55
<>
6-
<div className="relative bg-white dark:bg-slate-800 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
6+
<div className="relative bg-white dark:bg-navy pt-16 overflow-hidden sm:pt-24 lg:pt-32">
77
<div className="mx-auto max-w-md px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8 lg:max-w-7xl">
88
<div>
9-
<h2 className="subtitle">
9+
<h2 className="subtitle font-sans">
1010
Efficient Data Fetching
1111
</h2>
12-
<p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl">
12+
<p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl font-lora">
1313
Query what you need. Get exactly that.
1414
</p>
1515
<p className="mt-5 max-w-prose mx-auto text-xl text-navy dark:text-gray-100">
@@ -31,13 +31,13 @@ export default function HomepageFeatures() {
3131
</div>
3232
</div>
3333
</div>
34-
<div className="relative bg-slate-200 dark:bg-slate-900 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
34+
<div className="relative bg-blue-100 dark:bg-slate-900 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
3535
<div className="mx-auto max-w-md px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8 lg:max-w-7xl">
3636
<div>
37-
<h2 className="subtitle">
37+
<h2 className="subtitle font-sans">
3838
Nested Resources
3939
</h2>
40-
<p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl">
40+
<p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl font-lora">
4141
Fetch many resources in a single request
4242
</p>
4343
<p className="mt-5 max-w-prose mx-auto text-xl text-navy dark:text-gray-100">

‎src/components/HomePage/HomepageFrameworks.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Image from "next/image"
33
/* This example requires Tailwind CSS v2.0+ */
44
export default function HomepageFrameworks() {
55
return (
6-
<div className="bg-slate-200 dark:bg-slate-600 pt-12 sm:pt-16">
6+
<div className="bg-blue-100 dark:bg-blue pt-12 sm:pt-16">
77
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
88
<div className="max-w-4xl mx-auto text-center">
99
<h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">
@@ -16,9 +16,9 @@ export default function HomepageFrameworks() {
1616
</p>
1717
</div>
1818
</div>
19-
<div className="mt-10 pb-12 bg-white dark:bg-slate-800 sm:pb-16">
19+
<div className="mt-10 pb-12 bg-white dark:bg-navy sm:pb-16">
2020
<div className="relative">
21-
<div className="absolute inset-0 h-1/2 bg-slate-200 dark:bg-slate-600" />
21+
<div className="absolute inset-0 h-1/2 bg-blue-100 dark:bg-blue" />
2222
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2323
<div className="max-w-4xl mx-auto">
2424
<dl className="rounded-lg bg-white dark:bg-slate-900 shadow-lg sm:grid sm:grid-cols-4">

‎src/components/HomePage/HomepageHero.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import Link from "next/link"
33

44
export default function HomepageHero() {
55
return (
6-
<div className="bg-white dark:bg-slate-800">
6+
<div className="bg-white dark:bg-navy">
77
<div className="max-w-8xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
8-
<div className="bg-slate-200 dark:bg-slate-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
8+
<div className="dark:bg-slate-900 bg-slate-100 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
99
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
1010
<div className="lg:self-center">
1111
<h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">

‎src/components/HomePage/HomepageTrust.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Image from "next/image"
33
/* This example requires Tailwind CSS v2.0+ */
44
export default function HomePageTrust() {
55
return (
6-
<div className="bg-slate-100 dark:bg-slate-800">
6+
<div className="bg-purple-200 dark:bg-purple-800">
77
<div className="max-w-8xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
88
<h2 className="text-center text-3xl tracking-tight font-extrabold text-navy dark:text-white sm:text-4xl">
99
{`Who's Using WPGraphQL?`}

‎src/components/Preview/RecipePreview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function RecipePreview({ recipe }) {
2828

2929
<div className="text-base font-medium leading-6">
3030
<Link href={recipe.uri}>
31-
<a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
31+
<a className="btn-primary-sm">
3232
<span className="pr-2">View Recipe →</span>
3333
</a>
3434
</Link>

‎src/components/Site/SiteFooter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { socialFooterLinks } from "data/social"
33
export default function Footer() {
44
const year = new Date().getFullYear()
55
return (
6-
<footer className="border-t border-slate-200 dark:border-slate-200/5 pt-10 pb-28">
6+
<footer className="border-t border-slate-200 dark:border-slate-200/5 py-10">
77
<div className="max-w-7xl mx-auto px-10 flex flex-col gap-6 justify-between md:flex-row text-slate-500">
88
<div className="flex justify-center space-x-6 md:order-2">
99
{socialFooterLinks.map((item) => (

‎src/components/Site/SiteHeader.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export default function SiteHeader() {
7373
<Popover
7474
className={
7575
scrolled
76-
? `relative bg-white sticky top-0 z-50 shadow-xl dark:bg-slate-800`
77-
: `relative bg-white sticky top-0 z-50 dark:bg-slate-800 border-b-2 border-b-gray-100 dark:border-b-slate-800`
76+
? `relative bg-white sticky top-0 z-50 shadow-xl dark:bg-navy`
77+
: `relative bg-white sticky top-0 z-50 dark:bg-navy border-b-2 border-b-gray-100 dark:border-b-navy`
7878
}
7979
as={"header"}
8080
>
@@ -107,7 +107,7 @@ export default function SiteHeader() {
107107
</svg>
108108
</SearchButton>
109109
<ThemeToggle />
110-
<Popover.Button className="bg-white rounded-md p-2 ml-3 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 dark:bg-slate-900">
110+
<Popover.Button className="bg-white rounded-md p-2 ml-3 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500 dark:bg-navy">
111111
<span className="sr-only">Open menu</span>
112112
<MenuIcon className="h-6 w-6" aria-hidden="true" />
113113
</Popover.Button>
@@ -134,7 +134,7 @@ export default function SiteHeader() {
134134
open
135135
? "text-gray-900 dark:text-white"
136136
: "text-gray-700 dark:text-gray-100",
137-
"group bg-white dark:bg-slate-800 rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200"
137+
"group bg-white dark:bg-navy rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200"
138138
)}
139139
>
140140
<span>{item.label}</span>
@@ -158,7 +158,7 @@ export default function SiteHeader() {
158158
>
159159
<Popover.Panel className="absolute z-50 -ml-4 mt-3 transform w-screen max-w-md lg:max-w-2xl lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
160160
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
161-
<div className="relative grid gap-6 bg-white dark:bg-slate-700 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
161+
<div className="relative grid gap-6 bg-white dark:bg-slate-900 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
162162
{item.children?.map((menuItem) => {
163163
let icon = getIconNameFromMenuItem(menuItem)
164164

@@ -169,12 +169,12 @@ export default function SiteHeader() {
169169
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100 dark:hover:bg-slate-600"
170170
>
171171
{icon && (
172-
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
172+
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gradient-build text-white sm:h-12 sm:w-12">
173173
<DynamicHeroIcon icon={icon} />
174174
</div>
175175
)}
176176
<div className="ml-4">
177-
<p className="text-base font-medium text-gray-900 dark:text-gray-200">
177+
<p className="text-base font-medium text-gray-900 dark:text-gray-200 font-lora">
178178
{menuItem.label}
179179
</p>
180180
<p className="mt-1 text-sm text-gray-700 dark:text-slate-100">
@@ -271,7 +271,7 @@ export default function SiteHeader() {
271271
className="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50 dark:hover:bg-slate-900"
272272
>
273273
<a className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100 dark:hover:bg-slate-600">
274-
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-600 text-white">
274+
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gradient-build text-white">
275275
<DynamicHeroIcon icon={icon} />
276276
</div>
277277
<div className="ml-4 text-base font-medium text-gray-900 dark:text-white">

‎src/components/Site/ThemeToggle.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ export default function ThemeToggle({ panelClassName = "mt-4" }) {
203203
className={clsx(
204204
"py-1 px-2 flex items-center cursor-pointer",
205205
selected && "text-sky-500",
206-
active && "bg-slate-50 dark:bg-slate-600/30"
206+
active && "bg-slate-50 dark:bg-slate-900"
207207
)}
208208
>
209209
<Icon selected={selected} className="w-6 h-6 mr-2" />

‎src/pages/_document.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ export default class Document extends NextDocument {
8181
/>
8282
</Head>
8383
<body
84-
className={clsx("antialiased text-slate-500 dark:text-slate-400", {
85-
"bg-white dark:bg-slate-900":
84+
className={clsx("antialiased text-slate-500 dark:text-slate-400 font-inter", {
85+
"bg-white dark:bg-navy":
8686
!this.props.dangerousAsPath.startsWith("/examples/"),
8787
})}
8888
>

‎src/pages/developer-reference.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,18 @@ export default function DeveloperReference() {
5151
</header>
5252
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
5353
{references.map((reference, i) => (
54-
<div key={i} className="box-shadow bg-slate-200 dark:bg-slate-800 rounded-lg drop-shadow-lg p-5 pb-7">
55-
{ reference?.icon && <div className="flex h-12 w-12 items-center justify-center rounded-md bg-purple text-white"><reference.icon className="h-6 w-6" aria-hidden="true" /></div> }
54+
<div key={i} className="box-shadow bg-slate-200 dark:bg-slate-900 rounded-lg drop-shadow-lg p-5 pb-7">
55+
{ reference?.icon && <div className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-build text-white"><reference.icon className="h-6 w-6" aria-hidden="true" /></div> }
5656
<h3 className="">{reference.name}</h3>
5757
<p>{reference.description}</p>
58-
<a
59-
className="bg-slate-500 hover:bg-slate-400 text-white dark:text-white font-bold py-2 px-4 rounded inline-flex items-center border-b-0"
60-
href={reference.link}
61-
target="_blank"
62-
rel="noreferrer"
63-
>Visit {reference.name}</a>
58+
<div className="not-prose">
59+
<a
60+
className="btn-primary-sm"
61+
href={reference.link}
62+
target="_blank"
63+
rel="noreferrer"
64+
>Visit {reference.name}</a>
65+
</div>
6466
</div>
6567
))}
6668
</div>

‎src/styles/globals.css

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,25 @@ html {
99
@tailwind components;
1010
@tailwind utilities;
1111

12+
@font-face {
13+
font-family: 'Lora';
14+
src: url('/fonts/lora/Lora-VariableFont_wght.ttf') format('truetype');
15+
font-weight: normal;
16+
font-style: normal;
17+
}
18+
19+
@font-face {
20+
font-family: 'Inter';
21+
src: url('/fonts/inter/InterVariable.ttf') format('truetype');
22+
font-weight: normal;
23+
font-style: normal;
24+
}
25+
26+
h1, h2 {
27+
font-family: 'Lora', serif;
28+
}
29+
30+
1231
/* Regular buttons */
1332
.btn-primary {
1433
@apply mt-8 bg-blue text-white border border-transparent rounded-full shadow px-5 py-3 inline-flex items-center text-base font-medium hover:bg-blue-500 hover:shadow-lg transition-all duration-300;
@@ -28,10 +47,10 @@ html {
2847
}
2948

3049
.subtitle {
31-
@apply text-base font-semibold tracking-wider text-navy dark:text-purple-400 uppercase;
50+
@apply text-base font-semibold tracking-wider text-purple-600 dark:text-purple-400 uppercase;
3251
}
3352

3453
/* Apply margin left to all adjacent "buttons", excluding the first button */
3554
[class*='btn-'] + [class*='btn-'] {
3655
@apply ml-4;
37-
}
56+
}

‎src/wp-templates/archive-post.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function ArchivePost({ data }) {
77

88
return (
99
<SiteLayout>
10-
<main className="content px-6 max-w-lg mx-auto lg:max-w-5xl">
10+
<main className="content px-6 max-w-lg mx-auto md:max-w-5xl mb-10">
1111
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
1212
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-navy dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
1313
Blog

‎src/wp-templates/archive.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function Archive({ data }) {
3434
/>
3535
</p>
3636
</header>
37-
<main className="content relative pt-10 max-w-3xl mx-auto">
37+
<main className="content relative pt-10 max-w-3xl mx-auto mb-10">
3838
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
3939
{archive?.contentNodes?.nodes?.map((node) => {
4040
switch (node.__typename) {

‎src/wp-templates/category.js

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,25 @@ export default function Category({ data }) {
1616
const { category } = data
1717

1818
return (
19-
<>
20-
<SiteLayout>
21-
<main className="content divide-y divide-gray-200 dark:divide-gray-700 max-w-lg mx-auto lg:max-w-8xl">
22-
<div className="space-y-2 pt-6 pb-8 md:space-y-5 ">
23-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
24-
Category: {category?.name ?? null}
25-
</h1>
26-
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
27-
{category?.description ?? null}
28-
</p>
29-
</div>
30-
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
31-
{category?.posts?.nodes?.map((post) => (
32-
<li key={post.id} className="py-12">
33-
<PostPreview post={post} />
34-
</li>
35-
))}
36-
</ul>
37-
</main>
38-
</SiteLayout>
39-
</>
19+
<SiteLayout>
20+
<main className="content px-6 max-w-lg mx-auto md:max-w-5xl mb-10">
21+
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
22+
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-navy dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
23+
Category: {category?.name ?? null}
24+
</h1>
25+
<p className="text-lg leading-7 text-navy dark:text-white">
26+
{category?.description ?? null}
27+
</p>
28+
</div>
29+
<ul className="grid gap-8 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 auto-rows-fr">
30+
{category?.posts?.nodes?.map((post, index) => (
31+
<li key={post.id} className={`flex w-full ${index === 0 ? "xl:col-span-2" : ""}`}>
32+
<PostPreview post={post} isLatest={index === 0} />
33+
</li>
34+
))}
35+
</ul>
36+
</main>
37+
</SiteLayout>
4038
)
4139
}
4240

0 commit comments

Comments
 (0)