Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add search & standardize tailwindcss class order #20

Merged
merged 2 commits into from
Oct 25, 2023
+484 −489
Merged

Add search & standardize tailwindcss class order #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d244577
Add search & standardize tailwindcss class order
josephfusco Oct 25, 2023
32330a2
New line at EOF
josephfusco Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:tailwindcss/recommended",
"prettier",
"next"
],
Expand Down Expand Up @@ -39,7 +40,8 @@
],
"react/react-in-jsx-scope": "off",
"@typescript-eslint/no-unused-vars": ["error"],
"react/prop-types": "off"
"react/prop-types": "off",
"tailwindcss/no-custom-classname": "off"
},
"settings": {
"react": {
Expand Down
14 changes: 7 additions & 7 deletions components/DocsSidebarNavigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,22 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
<ul role="list" className="space-y-9">
{navigation.map((section) => (
<li key={section.title}>
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<Link href={section.href}>
<h2 className="font-display font-medium text-slate-900 dark:text-white cursor-pointer">
<h2 className="cursor-pointer font-display font-medium text-slate-900 dark:text-white">
{section.title}
</h2>
</Link>
<div className="inline-flex items-center justify-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-300">
<div className="inline-flex items-center justify-center rounded-full p-2 transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
<button
onClick={() => toggleSection(section.title)}
className="text-slate-900 dark:text-white transition-transform duration-300"
className="text-slate-900 transition-transform duration-300 dark:text-white"
>
<svg
className={clsx(
'transform',
'',
expandedSections[section.title] && 'rotate-90',
'w-4 h-4'
'h-4 w-4'
)}
xmlns="http://www.w3.org/2000/svg"
fill="none"
Expand All @@ -87,7 +87,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
'mt-2 space-y-2 border-l-2 transition-all duration-300',
expandedSections[section.title]
? 'border-slate-100 dark:border-slate-800'
: 'border-transparent hidden',
: 'hidden border-transparent',
'lg:mt-4 lg:space-y-4 lg:border-slate-200'
)}
>
Expand Down
20 changes: 10 additions & 10 deletions components/FeatureTabsLeft.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,16 @@ const FeatureTabsLeft = (layout) => {
<section
id="features"
aria-label="Features of WPGraphQL for ACF"
className="relative overflow-hidden bg-slate-100 dark:bg-slate-800 pb-28 pt-20 sm:py-32"
className="relative overflow-hidden bg-slate-100 pb-28 pt-20 dark:bg-slate-800 sm:py-32"
>
<Container className="relative">
<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
<h2
className="font-display text-3xl tracking-tight text-gray dark:text-white sm:text-4xl md:text-5xl"
className="text-gray font-display text-3xl tracking-tight dark:text-white sm:text-4xl md:text-5xl"
dangerouslySetInnerHTML={{ __html: layout.name }}
/>
<div
className="mt-6 text-lg tracking-tight text-gray dark:text-white"
className="text-gray mt-6 text-lg tracking-tight dark:text-white"
dangerouslySetInnerHTML={{ __html: layout.descripton }}
/>
</div>
Expand All @@ -56,18 +56,18 @@ const FeatureTabsLeft = (layout) => {
<div
key={feature.name}
className={clsx(
'group relative rounded-full px-4 my-2 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
'group relative my-2 rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
selectedIndex === featureIndex
? 'bg-slate-600 dark:bg-slate-800 lg:dark:bg-slate-700 lg:ring-1 lg:ring-inset lg:ring-white/10 group-hover:text-white '
: 'hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700 bg-gray-100 group-hover:text-white',
? 'bg-slate-600 group-hover:text-white dark:bg-slate-800 lg:ring-1 lg:ring-inset lg:ring-white/10 lg:dark:bg-slate-700 '
: 'bg-gray-100 hover:bg-slate-600 group-hover:text-white dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700',
)}
>
<h3>
<Tab
className={clsx(
'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
selectedIndex === featureIndex
? 'text-white dark:text-slate-200 hover:text-white group-hover:text-white dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
? 'text-white hover:text-white group-hover:text-white dark:text-slate-200 dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
: 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200',
)}
>
Expand All @@ -77,9 +77,9 @@ const FeatureTabsLeft = (layout) => {
</h3>
<p
className={clsx(
'mt-2 hidden text-sm lg:block group-hover:text-white dark:group-hover:text-slate-200',
'mt-2 hidden text-sm group-hover:text-white dark:group-hover:text-slate-200 lg:block',
selectedIndex === featureIndex
? 'text-slate-800 lg:text-white dark:text-slate-200'
? 'text-slate-800 dark:text-slate-200 lg:text-white'
: 'text-slate-800',
)}
>
Expand All @@ -93,7 +93,7 @@ const FeatureTabsLeft = (layout) => {
{features.map((feature) => (
<Tab.Panel key={feature.name} unmount={false}>
<div className="relative sm:px-6 lg:hidden">
<div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-slate-200 dark:bg-slate-700 lg:bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
<div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-slate-200 ring-1 ring-inset ring-white/10 dark:bg-slate-700 sm:inset-x-0 sm:rounded-t-xl lg:bg-white/10" />
<p className="relative mx-auto max-w-2xl text-base text-slate-800 dark:text-white sm:text-center">
{feature.featureDescription}
</p>
Expand Down
12 changes: 6 additions & 6 deletions components/FeatureTabsTop.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ function Feature({ feature, isActive, className, ...props }) {
<div
className={clsx(
className,
'p-5 rounded-lg',
'rounded-lg p-5',
!isActive
? 'opacity-75 hover:opacity-100 hover:bg-slate-50 dark:hover:bg-gray-800'
? 'opacity-75 hover:bg-slate-50 hover:opacity-100 dark:hover:bg-gray-800'
: 'bg-slate-100 dark:bg-slate-800',
)}
{...props}
Expand All @@ -26,7 +26,7 @@ function Feature({ feature, isActive, className, ...props }) {
>
{feature.featureSubtitle}
</h3>
<p className="mt-2 font-display text-xl text-left text-slate-900 dark:text-slate-50">
<p className="mt-2 text-left font-display text-xl text-slate-900 dark:text-slate-50">
{feature.name}
</p>
<p className="mt-4 text-sm text-slate-600 dark:text-slate-200">
Expand Down Expand Up @@ -75,7 +75,7 @@ function FeaturesDesktop({ features }) {
feature={{
...feature,
name: (
<Tab className="[&:not(:focus-visible)]:focus:outline-none text-left">
<Tab className="text-left [&:not(:focus-visible)]:focus:outline-none">
<span className="absolute inset-0" />
{feature.name}
</Tab>
Expand All @@ -86,7 +86,7 @@ function FeaturesDesktop({ features }) {
/>
))}
</Tab.List>
<Tab.Panels className="relative mt-20 overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-700 px-14 py-16 xl:px-16">
<Tab.Panels className="relative mt-20 overflow-hidden rounded-xl bg-slate-200 px-14 py-16 dark:bg-slate-700 xl:px-16">
<div className="-mx-5 flex">
{features.map((feature, featureIndex) => (
<Tab.Panel
Expand Down Expand Up @@ -114,7 +114,7 @@ function FeaturesDesktop({ features }) {
</Tab.Panel>
))}
</div>
<div className="pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-inset ring-slate-900/10" />
<div className="rounded-4xl pointer-events-none absolute inset-0 ring-1 ring-inset ring-slate-900/10" />
</Tab.Panels>
</>
)}
Expand Down
6 changes: 3 additions & 3 deletions components/FieldTypesList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ export function FieldTypesList({ data }) {
{contentNodes.nodes.map((fieldType) => (
<div
key={fieldType.uri}
className="group relative flex rounded-2xl bg-zinc-50 dark:bg-gray-800 dark:hover:bg-gray-900 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
className="dark:bg-white/2.5 group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-gray-800 dark:hover:bg-gray-900 dark:hover:shadow-black/5"
>
<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
<div className="relative rounded-2xl px-4 pt-16 pb-4">
<div className="ring-zinc-900/7.5 absolute inset-0 rounded-2xl ring-1 ring-inset group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
<div className="relative rounded-2xl px-4 pb-4 pt-16">
{fieldType?.featuredImage?.node && (
<Image
src={fieldType?.featuredImage?.node.sourceUrl}
Expand Down
12 changes: 6 additions & 6 deletions components/HomepageLayoutsLayoutsFaqs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,18 @@ const HomepageLayoutsLayoutsFaqs = ({ title, description, questions }) => {
<section
id="faq"
aria-labelledby="faq-title"
className="relative overflow-hidden bg-slate-100 dark:bg-slate-800 py-20 sm:py-32"
className="relative overflow-hidden bg-slate-100 py-20 dark:bg-slate-800 sm:py-32"
>
<Container className="relative">
<div className="mx-auto max-w-2xl lg:mx-0 prose dark:prose-invert">
<div className="prose mx-auto max-w-2xl dark:prose-invert lg:mx-0">
<h2
id="faq-title"
className="font-display text-3xl tracking-tight dark:text-slate-200 text-slate-900 sm:text-4xl"
className="font-display text-3xl tracking-tight text-slate-900 dark:text-slate-200 sm:text-4xl"
>
{title}
</h2>
<div
className="mt-4 text-lg tracking-tight dark:text-slate-300 text-slate-700"
className="mt-4 text-lg tracking-tight text-slate-700 dark:text-slate-300"
dangerouslySetInnerHTML={{ __html: description }}
/>
</div>
Expand All @@ -52,11 +52,11 @@ const HomepageLayoutsLayoutsFaqs = ({ title, description, questions }) => {
<ul role="list" className="flex flex-col gap-y-8">
{column.map((faq, faqIndex) => (
<li key={faqIndex}>
<h3 className="font-display text-lg leading-7 dark:text-slate-200 text-slate-900">
<h3 className="font-display text-lg leading-7 text-slate-900 dark:text-slate-200">
{faq.question}
</h3>
<div
className="prose dark:prose-invert mt-4 text-sm dark:text-slate-300 text-slate-700"
className="prose mt-4 text-sm text-slate-700 dark:prose-invert dark:text-slate-300"
dangerouslySetInnerHTML={{ __html: faq.answer }}
/>
</li>
Expand Down
8 changes: 4 additions & 4 deletions components/HomepageLayoutsLayoutsHero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ function TrafficLightsIcon(props) {

const HomepageLayoutsLayoutsHero = (hero) => {
return (
<div className="overflow-hidden bg-white dark:bg-slate-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
<div className="overflow-hidden bg-white dark:-mb-32 dark:mt-[-4.5rem] dark:bg-slate-900 dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
<div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
<div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
<div className="relative z-10 md:text-center lg:text-left">
<div className="relative">
<div
className="inline bg-gradient-to-r from-orange-600 via-orange-500 to-orange-600 dark:from-orange-300 dark:via-orange-600 dark:to-orange-300 bg-clip-text font-display text-5xl tracking-tight text-transparent"
className="inline bg-gradient-to-r from-orange-600 via-orange-500 to-orange-600 bg-clip-text font-display text-5xl tracking-tight text-transparent dark:from-orange-300 dark:via-orange-600 dark:to-orange-300"
dangerouslySetInnerHTML={{ __html: hero.title }}
/>
<div
Expand All @@ -45,7 +45,7 @@ const HomepageLayoutsLayoutsHero = (hero) => {
<div className="relative">
<div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-orange-300 via-orange-300/70 to-orange-300 opacity-10 blur-lg" />
<div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-orange-300 via-orange-300/70 to-orange-300 opacity-10" />
<div className="relative rounded-2xl bg-slate-900 dark:bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
<div className="relative rounded-2xl bg-slate-900 ring-1 ring-white/10 backdrop-blur dark:bg-[#0A101F]/80">
<div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-orange-300/0 via-orange-300/70 to-orange-300/0" />
<div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-orange-400/0 via-orange-400 to-orange-400/0" />
<div className="pl-4 pt-4">
Expand All @@ -55,7 +55,7 @@ const HomepageLayoutsLayoutsHero = (hero) => {
key={hero?.codeFileName || 'query-acf-fields.gql'}
className="flex h-6 rounded-full bg-gradient-to-r from-orange-400/30 via-orange-400 to-orange-400/30 p-px font-medium text-orange-300"
>
<div className="flex items-center rounded-full px-2.5 bg-slate-800">
<div className="flex items-center rounded-full bg-slate-800 px-2.5">
{hero?.codeFileName || null}
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,17 +151,17 @@ const HomepageLayoutsLayoutsSupportedFieldTypes = (data) => {
<section
id="reviews"
aria-labelledby="reviews-title"
className="pb-16 pt-20 sm:pb-24 sm:pt-32 dark:bg-slate-700"
className="pb-16 pt-20 dark:bg-slate-700 sm:pb-24 sm:pt-32"
>
<Container>
<h2
id="reviews-title"
className="text-3xl font-medium tracking-tight mb-5 dark:text-gray-100 text-gray-900 sm:text-center"
className="mb-5 text-3xl font-medium tracking-tight text-gray-900 dark:text-gray-100 sm:text-center"
>
{data.title}
</h2>
<div
className="mt-2 text-lg dark:text-gray-200 text-gray-600 sm:text-center"
className="mt-2 text-lg text-gray-600 dark:text-gray-200 sm:text-center"
dangerouslySetInnerHTML={{ __html: data.description }}
/>

Expand Down
Loading