github/pse.dev
1
1
Fork 0
mirror of https://github.com/privacy-scaling-explorations/pse.dev.git synced 2026-04-23 03:01:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 🚨 Fix linter errors for tailwind class order and negative values

Browse Source
This commit is contained in:
thebeyondr
2023-09-20 16:28:50 -05:00
parent aa160b313e
commit 822bf4aa9e
17 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/about/page.tsx
View File

@@ -16,8 +16,8 @@ const PrincipleContent = ({
height = 300,
}: PrincipleContentProps) => {
return (
<div className="grid grid-cols-1 gap-6 py-4 md:gap-2 md:mb-8 md:py-6 md:items-center md:grid-cols-2">
<div className="py-6 m-auto md:py-0">
<div className="grid grid-cols-1 gap-6 py-4 md:mb-8 md:grid-cols-2 md:items-center md:gap-2 md:py-6">
<div className="m-auto py-6 md:py-0">
<Image
width={width}
height={height}
@@ -25,7 +25,7 @@ const PrincipleContent = ({
alt="principle image"
/>
</div>
<span className="flex flex-col gap-4 font-sans text-lg leading-7 break-words">
<span className="flex flex-col gap-4 break-words font-sans text-lg leading-7">
{children}
</span>
</div>
@@ -35,12 +35,12 @@ export default function AboutPage() {
return (
<div className="bg-anakiwa-200">
<div className="bg-second-gradient">
<div className="container grid grid-cols-1 lg:grid-cols-[1fr_300px] lg:gap-2 py-10 mx-auto gap-16 lg:py-20">
<div className="container mx-auto grid grid-cols-1 gap-16 py-10 lg:grid-cols-[1fr_300px] lg:gap-2 lg:py-20">
<div className="flex flex-col gap-8 lg:w-4/5">
<h6 className="text-4xl font-bold break-words md:py-4 md:text-5xl text-tuatara-950 font-display">
<h6 className="break-words font-display text-4xl font-bold text-tuatara-950 md:py-4 md:text-5xl">
Collective experimentation of cryptography.
</h6>
<span className="font-sans text-base font-normal text-tuatara-950 leading-[27px]">
<span className="font-sans text-base font-normal leading-[27px] text-tuatara-950">
PSE is a multi-disciplinary research and development lab supported
by the Ethereum Foundation. We create open source infrastructure,
tools and educational resources for building cryptography into
@@ -58,8 +58,8 @@ export default function AboutPage() {
</div>
</div>
<div className="flex flex-col gap-4 px-8 py-16 md:py-24 md:px-32">
<h6 className="text-4xl uppercase font-display">Pse principles</h6>
<div className="flex flex-col gap-4 px-8 py-16 md:px-32 md:py-24">
<h6 className="font-display text-4xl uppercase">Pse principles</h6>
<Accordion
type="multiple"
items={[

2
app/layout.tsx
View File

@@ -66,7 +66,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
</Script>
<head />
<body className={"min-h-screen bg-background antialiased"}>
<div className="relative flex flex-col min-h-screen">
<div className="relative flex min-h-screen flex-col">
<SiteHeader />
<div className="flex-1">{children}</div>
<SiteFooter />

10
app/not-found.tsx
View File

@@ -17,10 +17,10 @@ export default function NotFound() {
>
<head />
<body className="min-h-screen">
<div className="relative flex flex-col h-screen bg-anakiwa-50">
<div className="relative flex h-screen flex-col bg-anakiwa-50">
<SiteHeader />
<div className="container m-auto">
<div className="flex flex-col -mt-16 gap-7">
<div className="-mt-16 flex flex-col gap-7">
<div className="flex flex-col items-center justify-center gap-3 text-center">
<div className="flex flex-col gap-2">
<Image
@@ -28,14 +28,14 @@ export default function NotFound() {
height={80}
src="/icons/404-search.svg"
alt="emotion sad"
className="w-12 h-12 mx-auto md:w-24 md:h-24 text-anakiwa-400"
className="mx-auto h-12 w-12 text-anakiwa-400 md:h-24 md:w-24"
/>
<span className="text-5xl font-bold text-anakiwa-400 md:text-8xl font-display">
<span className="font-display text-5xl font-bold text-anakiwa-400 md:text-8xl">
404
</span>
</div>
<div className="flex flex-col gap-5">
<span className="text-2xl font-bold md:text-6xl text-tuatara-950 font-display">
<span className="font-display text-2xl font-bold text-tuatara-950 md:text-6xl">
Oops! Page not found
</span>
<span className="font-sans text-base font-normal md:text-lg">

10
app/projects/[id]/page.tsx
View File

@@ -73,8 +73,8 @@ function DiscoverMoreProjects({ project }: ProjectProps) {
const suggestedProject = getSuggestedProjects()
return (
<div className="flex flex-col items-center justify-center w-full px-6 py-32 gap-14 md:px-0 bg-anakiwa-200">
<h2 className="text-3xl font-bold text-center">Discover more</h2>
<div className="flex w-full flex-col items-center justify-center gap-14 bg-anakiwa-200 px-6 py-32 md:px-0">
<h2 className="text-center text-3xl font-bold">Discover more</h2>
<div className="flex flex-col gap-5 md:flex-row">
{suggestedProject?.map((project: ProjectInterface) => (
<ProjectCard project={project} />
@@ -143,7 +143,7 @@ export default function ProjectDetailPage({ params }: PageProps) {
<p className="text-slate-600">{currProject.tldr}</p>
</div>
</div>
<div className="flex flex-col items-center justify-center w-full gap-5 px-6 py-10 bg-anakiwa-100 md:px-0">
<div className="flex w-full flex-col items-center justify-center gap-5 bg-anakiwa-100 px-6 py-10 md:px-0">
<div className="w-full md:w-[700px]">
<div className="relative flex items-center justify-center overflow-hidden rounded-lg">
<Image
@@ -153,13 +153,13 @@ export default function ProjectDetailPage({ params }: PageProps) {
alt={`${currProject.name} banner`}
width={1200}
height={630}
className="object-cover w-full rounded-t-lg"
className="w-full rounded-t-lg object-cover"
/>
</div>
<div className="mt-8">
<ProjectTags project={currProject} />
</div>
<div className="flex flex-col w-full gap-5 pt-10 text-base font-normal leading-relaxed">
<div className="flex w-full flex-col gap-5 pt-10 text-base font-normal leading-relaxed">
<Markdown>{currProject.description}</Markdown>
</div>
<div className="py-16">

6
app/projects/page.tsx
View File

@@ -14,10 +14,10 @@ export default function ProjectsPage() {
return (
<section>
<div className="bg-anakiwa-200">
<div className="container py-10 mx-auto lg:py-20">
<div className="container mx-auto py-10 lg:py-20">
<div className="flex flex-col justify-between gap-10">
<div>
<h1 className="text-4xl font-bold md:text-5xl font-display text-tuatara-950">
<h1 className="font-display text-4xl font-bold text-tuatara-950 md:text-5xl">
Explore the project library
</h1>
<p className="p-2"></p>
@@ -26,7 +26,7 @@ export default function ProjectsPage() {
developer tools, protocols and proof-of-concept applications.
</p>
</div>
<div className=" bg-anakiwa-500 w-20 h-[1px]"></div>
<div className=" h-[1px] w-20 bg-anakiwa-500"></div>
<ProjectFiltersBar />
</div>
</div>

8
components/project/project-card.tsx
View File

@@ -64,12 +64,12 @@ export default function ProjectCard({
alt={`${name} banner`}
width={1200}
height={630}
className="object-cover w-full rounded-t-lg"
className="w-full rounded-t-lg object-cover"
/>
)}
<div className="flex flex-col justify-between h-full gap-5 p-5 bg-white rounded-b-lg">
<div className="flex h-full flex-col justify-between gap-5 rounded-b-lg bg-white p-5">
<div className="flex flex-col justify-start gap-2">
<div className="flex gap-2 mb-2">
<div className="mb-2 flex gap-2">
{tags?.themes?.map((theme, index) => {
const { label } = ThemesButtonMapping?.[theme]
const icon = TagsIconMapping?.[theme]
@@ -88,7 +88,7 @@ export default function ProjectCard({
<p className="text-slate-900/80">{tldr}</p>
</div>
{showLinks && (
<div className="flex items-center justify-start gap-2 mr-auto">
<div className="mr-auto flex items-center justify-start gap-2">
{Object.entries(links ?? {})?.map(([website, url], index) => {
return (
<ProjectLink

4
components/project/project-detail-tags.tsx
View File

@@ -29,7 +29,7 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
const { label, icon } = ThemesStatusMapping?.[project?.projectStatus] ?? {}
return (
<div className="flex flex-col gap-4 mt-8">
<div className="mt-8 flex flex-col gap-4">
{Object.entries(FilterLabelMapping).map(([key, label]) => {
const keyTags = project?.tags?.[key as ProjectFilter]
const hasItems = keyTags && keyTags?.length > 0
@@ -40,7 +40,7 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
hasItems && (
<div>
<TagsWrapper label={label}>
<div className="flex gap-[6px] flex-wrap">
<div className="flex flex-wrap gap-[6px]">
{keyTags?.map((tag) => {
return (
<Link href={`/projects?${key}=${tag}`}>

2
components/project/project-extra-links.tsx
View File

@@ -61,7 +61,7 @@ const ExtraLinkItems = ({ id, links = [] }: ExtraLinkItemsProps) => {
<Link
href={url}
target="_blank"
className="flex items-center gap-1 overflow-hidden font-sans font-normal duration-200 ease-in-out border-b-2 border-transparent cursor-pointer text-tuatara-950 hover:border-orange"
className="flex cursor-pointer items-center gap-1 overflow-hidden border-b-2 border-transparent font-sans font-normal text-tuatara-950 duration-200 ease-in-out hover:border-orange"
>
{label}
<Icons.externalUrl />

10
components/project/project-filters-bar.tsx
View File

@@ -88,7 +88,7 @@ const FilterButtons = ({
)
return (
<div className="relative grid grid-cols-3 col-span-1 gap-2 md:gap-4 md:col-span-2 after:content-none md:after:content-[''] after:absolute after:h-11 after:w-[1px] after:bg-anakiwa-500 after:-right-[25px]">
<div className="relative col-span-1 grid grid-cols-3 gap-2 after:absolute after:right-[-25px] after:h-11 after:w-[1px] after:bg-anakiwa-500 after:content-none md:col-span-2 md:gap-4 md:after:content-['']">
{Object.entries(ThemesButtonMapping).map(([key, { label, icon }]) => {
const isActive = activeFilters?.themes?.includes(key)
const variant = isActive ? "blue" : "white"
@@ -132,7 +132,7 @@ export default function ProjectFiltersBar() {
useProjectFiltersState.setState({
activeFilters: queryStringToObject(searchParams),
})
}, [])
}, [searchParams])
useEffect(() => {
const count = Object.values(activeFilters).reduce((acc, curr) => {
@@ -269,9 +269,9 @@ export default function ProjectFiltersBar() {
<span className="text-lg font-medium">
What do you want to do today?
</span>
<div className="grid items-center justify-between grid-cols-1 gap-3 md:gap-12 md:grid-cols-5">
<div className="grid grid-cols-1 items-center justify-between gap-3 md:grid-cols-5 md:gap-12">
<FilterButtons />
<div className="grid grid-cols-[1fr_auto] col-span-1 gap-2 md:gap-3 md:col-span-3">
<div className="col-span-1 grid grid-cols-[1fr_auto] gap-2 md:col-span-3 md:gap-3">
<Input
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setSearchQuery(e?.target?.value)
@@ -297,7 +297,7 @@ export default function ProjectFiltersBar() {
<button
disabled={!hasActiveFilters}
onClick={clearAllFilters}
className="hidden bg-transparent cursor-pointer md:block text-primary opacity-85 hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none"
className="opacity-85 hidden cursor-pointer bg-transparent text-primary hover:opacity-100 disabled:pointer-events-none disabled:opacity-50 md:block"
>
<div className="flex items-center gap-2 border-b-2 border-black">
<span className="text-sm font-medium">Clear all</span>

2
components/project/project-link.tsx
View File

@@ -25,7 +25,7 @@ export function ProjectLink({ website, url }: ProjectLinkProps) {
target="_blank"
rel="noopener noreferrer"
>
<div className="px-4 py-1 rounded bg-[#F5F5F6]">
<div className="rounded bg-[#F5F5F6] px-4 py-1">
<Image
src={image}
alt={`${website}Vector`}

6
components/project/project-list.tsx
View File

@@ -9,11 +9,11 @@ import ProjectCard from "./project-card"
const NoResults = () => {
return (
<div className="flex flex-col gap-2 pt-24 pb-40 text-center">
<div className="flex flex-col gap-2 pb-40 pt-24 text-center">
<div className="mx-auto">
<Image className="w-9 h-9" src={NoResultIcon} alt="no result icon" />
<Image className="h-9 w-9" src={NoResultIcon} alt="no result icon" />
</div>
<span className="text-2xl font-bold font-display text-tuatara-950">
<span className="font-display text-2xl font-bold text-tuatara-950">
No results found.
</span>
<span className="text-lg font-normal text-tuatara-950">

2
components/site-header-mobile.tsx
View File

@@ -30,7 +30,7 @@ export function SiteHeaderMobile() {
/>
{header && (
<div
className="fixed inset-0 flex justify-end bg-black opacity-50 z-5"
className="z-5 fixed inset-0 flex justify-end bg-black opacity-50"
onClick={() => setHeader(false)}
></div>
)}

8
components/ui/accordion.tsx
View File

@@ -30,12 +30,12 @@ const Accordion = ({
>
{items?.map(({ label, children, value }) => (
<RadixAccordion.Item className="group" value={value}>
<RadixAccordion.Trigger className="flex items-center justify-between w-full py-6 border-t border-t-black ring-0 focus:outline-none">
<span className="font-sans text-base md:text-xl font-bold text-black uppercase tracking-[3.36px] md:tracking-[4.2px] block text-left">
<RadixAccordion.Trigger className="flex w-full items-center justify-between border-t border-t-black py-6 ring-0 focus:outline-none">
<span className="block text-left font-sans text-base font-bold uppercase tracking-[3.36px] text-black md:text-xl md:tracking-[4.2px]">
{label}
</span>
<div
className={`md:invisible group-hover:visible duration-50 group-data-[state=open]:hidden`}
className={`duration-50 group-hover:visible group-data-[state=open]:hidden md:invisible`}
>
<Icons.plus className="w-4 md:w-8" />
</div>
@@ -43,7 +43,7 @@ const Accordion = ({
<Icons.minus className="w-4 md:w-8" />
</div>
</RadixAccordion.Trigger>
<RadixAccordion.Content className="group-data-[state=open]:animate-slide-down group-data-[state=closed]:animate-slide-up transition-transform overflow-hidden">
<RadixAccordion.Content className="overflow-hidden transition-transform group-data-[state=closed]:animate-slide-up group-data-[state=open]:animate-slide-down">
{children}
</RadixAccordion.Content>
</RadixAccordion.Item>

2
components/ui/badge.tsx
View File

@@ -9,7 +9,7 @@ export default function Badge({ value, children }: BadgeProps) {
return (
<div className="relative">
<div className="absolute flex items-center justify-center min-w-4 h-4 m-auto rounded-full bg-anakiwa-950 -top-[5px] -right-[5px] px-[6px]">
<div className="min-w-4 absolute right-[-5px] top-[-5px] m-auto flex h-4 items-center justify-center rounded-full bg-anakiwa-950 px-[6px]">
<span className="text-xs text-white">{value}</span>
</div>
{children}

4
components/ui/checkbox.tsx
View File

@@ -18,7 +18,7 @@ const Checkbox = ({ label, name, checked, ...props }: CheckboxProps) => {
<CheckboxComponent.Root
{...props}
checked={checked}
className="ease-in duration-100 flex items-center justify-center w-[14px] h-[14px] bg-white border-2 border-solid rounded-[1.5px] cursor-pointer aria-checked:bg-black aria-checked:border-black border-tuatara-200"
className="flex h-[14px] w-[14px] cursor-pointer items-center justify-center rounded-[1.5px] border-2 border-solid border-tuatara-200 bg-white duration-100 ease-in aria-checked:border-black aria-checked:bg-black"
id={name}
>
<CheckboxComponent.Indicator className="text-white">
@@ -27,7 +27,7 @@ const Checkbox = ({ label, name, checked, ...props }: CheckboxProps) => {
</CheckboxComponent.Root>
{label && (
<label
className="pl-3 font-sans text-base font-normal break-all cursor-pointer"
className="cursor-pointer break-all pl-3 font-sans text-base font-normal"
htmlFor={name}
>
{label}

10
components/ui/dropdown.tsx
View File

@@ -37,13 +37,13 @@ const Dropdown = ({
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild disabled={disabled}>
<button
className={cn("focus:outline-none ring-0", {
className={cn("ring-0 focus:outline-none", {
"opacity-70 cursor-not-allowed": disabled,
})}
aria-label="dropdown menu"
>
<div className="flex items-center gap-1">
<span className="text-sm font-medium break-words text-tuatara-950">
<span className="break-words text-sm font-medium text-tuatara-950">
{label}
</span>
<Icons.arrowDown />
@@ -53,7 +53,7 @@ const Dropdown = ({
<DropdownMenu.Portal>
<DropdownMenu.Content
className="min-w-[136px] max-h-[250px] overflow-scroll border border-tuatara-200 rounded-md bg-white py-2"
className="max-h-[250px] min-w-[136px] overflow-scroll rounded-md border border-tuatara-200 bg-white py-2"
sideOffset={5}
>
{items?.map((item, index) => {
@@ -62,7 +62,7 @@ const Dropdown = ({
<DropdownMenu.Item
key={index}
className={cn(
"relative py-3 px-5 w-full font-sans text-sm cursor-pointer hover:font-medium focus:outline-none ring-0 hover:text-anakiwa-500 text-duration-200",
"text-duration-200 relative w-full cursor-pointer px-5 py-3 font-sans text-sm ring-0 hover:font-medium hover:text-anakiwa-500 focus:outline-none",
{
"text-tuatara-950 font-normal": !active,
"text-anakiwa-500 font-medium": active,
@@ -71,7 +71,7 @@ const Dropdown = ({
onSelect={() => onSelectCallback(item)}
>
{active && (
<div className="bg-anakiwa-500 w-[3px] absolute left-0 top-0 bottom-0"></div>
<div className="absolute inset-y-0 left-0 w-[3px] bg-anakiwa-500"></div>
)}
{item.label}
</DropdownMenu.Item>

4
components/ui/modal.tsx
View File

@@ -56,7 +56,7 @@ const Modal = ({
<Dialog.Content className={cn(modalContentVariants({ size }))}>
{title && (
<Dialog.Title>
<ModalContent className="text-center border-b border-b-tuatara-200">
<ModalContent className="border-b border-b-tuatara-200 text-center">
{title}
</ModalContent>
</Dialog.Title>
@@ -74,7 +74,7 @@ const Modal = ({
<Dialog.Close>
<button
className="absolute inline-flex w-5 cursor-pointer right-4 top-4"
className="absolute right-4 top-4 inline-flex w-5 cursor-pointer"
aria-label="Close"
>
<Icons.close />