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

Jump to bottom

Add prettier-plugin-tailwindcss to sort tailwindcss classes #393

Closed
wants to merge 4 commits into from
Closed

Add prettier-plugin-tailwindcss to sort tailwindcss classes #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
468d11f
Add prettier-plugin-tailwindcss as a devdependency
portdeveloper Jun 30, 2023
aaaa164
Format code with prettier-plugin-tailwindcss
portdeveloper Jun 30, 2023
ccc86bc
Merge branch 'main' into prettier-plugin-tailwindcss
portdeveloper Jul 5, 2023
a430ff5
Do minor formatting
portdeveloper Jul 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/nextjs/.prettierrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,7 @@
"tabWidth": 2,
"trailingComma": "all",
"importOrder": ["^react$", "^next/(.*)$", "<THIRD_PARTY_MODULES>", "^@heroicons/(.*)$", "^~~/(.*)$"],
"importOrderSortSpecifiers": true
"importOrderSortSpecifiers": true,
"plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
"pluginSearchDirs": false
}
12 changes: 6 additions & 6 deletions packages/nextjs/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ export const Footer = () => {
const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);

return (
<div className="min-h-0 p-5 mb-11 lg:mb-0">
<div className="mb-11 min-h-0 p-5 lg:mb-0">
<div>
<div className="fixed flex justify-between items-center w-full z-20 p-4 bottom-0 left-0 pointer-events-none">
<div className="flex space-x-2 pointer-events-auto">
<div className="pointer-events-none fixed bottom-0 left-0 z-20 flex w-full items-center justify-between p-4">
<div className="pointer-events-auto flex space-x-2">
{nativeCurrencyPrice > 0 && (
<div className="btn btn-primary btn-sm font-normal cursor-auto">
<CurrencyDollarIcon className="h-4 w-4 mr-0.5" />
<div className="btn btn-primary btn-sm cursor-auto font-normal">
<CurrencyDollarIcon className="mr-0.5 h-4 w-4" />
<span>{nativeCurrencyPrice}</span>
</div>
)}
Expand All @@ -30,7 +30,7 @@ export const Footer = () => {
</div>
<div className="w-full">
<ul className="menu menu-horizontal w-full">
<div className="flex justify-center items-center gap-2 text-sm w-full">
<div className="flex w-full items-center justify-center gap-2 text-sm">
<div>
<a
href="https://github.com/scaffold-eth/se-2"
Expand Down
18 changes: 9 additions & 9 deletions packages/nextjs/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const NavLink = ({ href, children }: { href: string; children: React.ReactNode }
passHref
className={`${
isActive ? "bg-secondary shadow-md" : ""
} hover:bg-secondary hover:shadow-md focus:bg-secondary py-1.5 px-3 text-sm rounded-full gap-2`}
} gap-2 rounded-full py-1.5 px-3 text-sm hover:bg-secondary hover:shadow-md focus:bg-secondary`}
>
{children}
</Link>
Expand Down Expand Up @@ -61,12 +61,12 @@ export const Header = () => {
);

return (
<div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
<div className="navbar sticky top-0 z-20 min-h-0 flex-shrink-0 justify-between bg-base-100 px-0 shadow-md shadow-secondary sm:px-2 lg:static">
<div className="navbar-start w-auto lg:w-1/2">
<div className="lg:hidden dropdown" ref={burgerMenuRef}>
<div className="dropdown lg:hidden" ref={burgerMenuRef}>
<label
tabIndex={0}
className={`ml-1 btn btn-ghost ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
className={`btn btn-ghost ml-1 ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
onClick={() => {
setIsDrawerOpen(prevIsOpenState => !prevIsOpenState);
}}
Expand All @@ -76,7 +76,7 @@ export const Header = () => {
{isDrawerOpen && (
<ul
tabIndex={0}
className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
className="dropdown-content menu rounded-box menu-compact mt-3 w-52 bg-base-100 p-2 shadow"
onClick={() => {
setIsDrawerOpen(false);
}}
Expand All @@ -85,18 +85,18 @@ export const Header = () => {
</ul>
)}
</div>
<Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6">
<div className="flex relative w-10 h-10">
<Link href="/" passHref className="ml-4 mr-6 hidden items-center gap-2 lg:flex">
<div className="relative flex h-10 w-10">
<Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
</div>
<div className="flex flex-col">
<span className="font-bold leading-tight">Scaffold-eth</span>
<span className="text-xs">Ethereum dev stack</span>
</div>
</Link>
<ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">{navLinks}</ul>
<ul className="menu menu-horizontal hidden gap-2 px-1 lg:flex lg:flex-nowrap">{navLinks}</ul>
</div>
<div className="navbar-end flex-grow mr-4">
<div className="navbar-end mr-4 flex-grow">
<RainbowKitCustomConnectButton />
<FaucetButton />
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/components/Spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export const Spinner = ({ width, height }: { width?: string; height?: string })
return (
<svg
aria-hidden="true"
className="mr-2 w-6 h-6 text-gray-200 dark:text-gray-300 animate-spin fill-primary-focus"
className="mr-2 h-6 w-6 animate-spin fill-primary-focus text-gray-200 dark:text-gray-300"
style={{
width,
height,
Expand Down
6 changes: 3 additions & 3 deletions packages/nextjs/components/blockexplorer/AddressCodeTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export const AddressCodeTab = ({ bytecode, assembly }: AddressCodeTabProps) => {
return (
<div className="flex flex-col gap-3 p-4">
Bytecode
<div className="mockup-code -indent-5 overflow-y-auto max-h-[500px]">
<div className="mockup-code max-h-[500px] overflow-y-auto -indent-5">
<pre className="px-5">
<code className="whitespace-pre-wrap overflow-auto break-words">{bytecode}</code>
<code className="overflow-auto whitespace-pre-wrap break-words">{bytecode}</code>
</pre>
</div>
Opcodes
<div className="mockup-code -indent-5 overflow-y-auto max-h-[500px]">
<div className="mockup-code max-h-[500px] overflow-y-auto -indent-5">
<pre className="px-5">
<code>{formattedAssembly}</code>
</pre>
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/components/blockexplorer/AddressLogsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export const AddressLogsTab = ({ address }: { address: Address }) => {

return (
<div className="flex flex-col gap-3 p-4">
<div className="mockup-code overflow-auto max-h-[500px]">
<pre className="px-5 whitespace-pre-wrap break-words">
<div className="mockup-code max-h-[500px] overflow-auto">
<pre className="whitespace-pre-wrap break-words px-5">
{contractLogs.map((log, i) => (
<div key={i}>
<strong>Log:</strong> {JSON.stringify(log, replacer, 2)}
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/components/blockexplorer/AddressStorageTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ export const AddressStorageTab = ({ address }: { address: string }) => {
return (
<div className="flex flex-col gap-3 p-4">
{storage.length > 0 ? (
<div className="mockup-code overflow-auto max-h-[500px]">
<pre className="px-5 whitespace-pre-wrap break-words">
<div className="mockup-code max-h-[500px] overflow-auto">
<pre className="whitespace-pre-wrap break-words px-5">
{storage.map((data, i) => (
<div key={i}>
<strong>Storage Slot {i}:</strong> {data}
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/components/blockexplorer/PaginationButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ export const PaginationButton = ({ currentPage, totalItems, setCurrentPage }: Pa
if (isNextButtonDisabled && isPrevButtonDisabled) return null;

return (
<div className="mt-5 justify-end flex gap-3">
<div className="mt-5 flex justify-end gap-3">
<button
className={`btn btn-sm ${prevButtonClass}`}
disabled={isPrevButtonDisabled}
onClick={() => setCurrentPage(currentPage - 1)}
>
<ArrowLeftIcon className="h-4 w-4" />
</button>
<span className="self-center text-primary-content font-medium">Page {currentPage + 1}</span>
<span className="self-center font-medium text-primary-content">Page {currentPage + 1}</span>
<button
className={`btn btn-sm ${nextButtonClass}`}
disabled={isNextButtonDisabled}
Expand Down
6 changes: 3 additions & 3 deletions packages/nextjs/components/blockexplorer/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ export const SearchBar = () => {
};

return (
<form onSubmit={handleSearch} className="flex items-center justify-end mb-5 space-x-3">
<form onSubmit={handleSearch} className="mb-5 flex items-center justify-end space-x-3">
<input
className="border-primary bg-base-100 text-base-content p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-accent"
className="mr-2 w-full rounded-md border-primary bg-base-100 p-2 text-base-content shadow-md focus:outline-none focus:ring-2 focus:ring-accent md:w-1/2 lg:w-1/3"
type="text"
value={searchInput}
placeholder="Search by hash or address"
onChange={e => setSearchInput(e.target.value)}
/>
<button className="btn btn-sm btn-primary" type="submit">
<button className="btn btn-primary btn-sm" type="submit">
Search
</button>
</form>
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/components/blockexplorer/TransactionHash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const TransactionHash = ({ hash }: { hash: string }) => {
</Link>
{addressCopied ? (
<CheckCircleIcon
className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
className="ml-1.5 h-5 w-5 cursor-pointer text-xl font-normal text-sky-600"
aria-hidden="true"
/>
) : (
Expand All @@ -27,7 +27,7 @@ export const TransactionHash = ({ hash }: { hash: string }) => {
}}
>
<DocumentDuplicateIcon
className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
className="ml-1.5 h-5 w-5 cursor-pointer text-xl font-normal text-sky-600"
aria-hidden="true"
/>
</CopyToClipboard>
Expand Down
8 changes: 4 additions & 4 deletions packages/nextjs/components/blockexplorer/TransactionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: Tr

return (
<div className="flex justify-center">
<table className="table table-zebra w-full shadow-lg">
<table className="table-zebra table w-full shadow-lg">
<thead>
<tr>
<th className="bg-primary">Transaction Hash</th>
Expand All @@ -24,10 +24,10 @@ export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: Tr
{isLoading ? (
<tbody>
{[...Array(20)].map((_, rowIndex) => (
<tr key={rowIndex} className="bg-base-200 hover:bg-base-300 transition-colors duration-200 h-12">
<tr key={rowIndex} className="h-12 bg-base-200 transition-colors duration-200 hover:bg-base-300">
{[...Array(7)].map((_, colIndex) => (
<td className="w-1/12" key={colIndex}>
<div className="h-2 bg-gray-200 rounded-full animate-pulse"></div>
<div className="h-2 animate-pulse rounded-full bg-gray-200"></div>
</td>
))}
</tr>
Expand All @@ -49,7 +49,7 @@ export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: Tr
<td className="w-2/12">
{tx.functionName === "0x" ? "" : <span className="mr-1">{tx.functionName}</span>}
{functionCalled !== "0x" && (
<span className="badge badge-primary font-bold text-xs">{functionCalled}</span>
<span className="badge badge-primary text-xs font-bold">{functionCalled}</span>
)}
</td>
<td className="w-1/12">{block.number?.toString()}</td>
Expand Down
26 changes: 13 additions & 13 deletions packages/nextjs/components/example-ui/ContractData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,34 +71,34 @@ export const ContractData = () => {
}, [transitionEnabled, containerRef, greetingRef]);

return (
<div className="flex flex-col justify-center items-center bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] py-10 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
<div className="lg:py-auto flex max-w-[100vw] flex-col items-center justify-center bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] py-10 px-5 sm:px-0 ">
<div
className={`flex flex-col max-w-md bg-base-200 bg-opacity-70 rounded-2xl shadow-lg px-5 py-4 w-full ${
className={`flex w-full max-w-md flex-col rounded-2xl bg-base-200 bg-opacity-70 px-5 py-4 shadow-lg ${
showAnimation ? "animate-zoom" : ""
}`}
>
<div className="flex justify-between w-full">
<div className="flex w-full justify-between">
<button
className="btn btn-circle btn-ghost relative bg-center bg-[url('/assets/switch-button-on.png')] bg-no-repeat"
className="btn btn-ghost btn-circle relative bg-[url('/assets/switch-button-on.png')] bg-center bg-no-repeat"
onClick={() => {
setTransitionEnabled(!transitionEnabled);
}}
>
<div
className={`absolute inset-0 bg-center bg-no-repeat bg-[url('/assets/switch-button-off.png')] transition-opacity ${
className={`absolute inset-0 bg-[url('/assets/switch-button-off.png')] bg-center bg-no-repeat transition-opacity ${
transitionEnabled ? "opacity-0" : "opacity-100"
}`}
/>
</button>
<div className="bg-secondary border border-primary rounded-xl flex">
<div className="p-2 py-1 border-r border-primary flex items-end">Total count</div>
<div className="text-4xl text-right min-w-[3rem] px-2 py-1 flex justify-end font-bai-jamjuree">
<div className="flex rounded-xl border border-primary bg-secondary">
<div className="flex items-end border-r border-primary p-2 py-1">Total count</div>
<div className="flex min-w-[3rem] justify-end px-2 py-1 text-right font-bai-jamjuree text-4xl">
{totalCounter?.toString() || "0"}
</div>
</div>
</div>

<div className="mt-3 border border-primary bg-neutral rounded-3xl text-secondary overflow-hidden text-[116px] whitespace-nowrap w-full uppercase tracking-tighter font-bai-jamjuree leading-tight">
<div className="mt-3 w-full overflow-hidden whitespace-nowrap rounded-3xl border border-primary bg-neutral font-bai-jamjuree text-[116px] uppercase leading-tight tracking-tighter text-secondary">
<div className="relative overflow-x-hidden" ref={containerRef}>
{/* for speed calculating purposes */}
<div className="absolute -left-[9999rem]" ref={greetingRef}>
Expand All @@ -124,7 +124,7 @@ export const ContractData = () => {

<div className="mt-3 flex items-end justify-between">
<button
className={`btn btn-circle btn-ghost border border-primary hover:border-primary w-12 h-12 p-1 bg-neutral flex items-center ${
className={`btn btn-ghost btn-circle flex h-12 w-12 items-center border border-primary bg-neutral p-1 hover:border-primary ${
isRightDirection ? "justify-start" : "justify-end"
}`}
onClick={() => {
Expand All @@ -133,11 +133,11 @@ export const ContractData = () => {
}
}}
>
<div className="border border-primary rounded-full bg-secondary w-2 h-2" />
<div className="h-2 w-2 rounded-full border border-primary bg-secondary" />
</button>
<div className="w-44 p-0.5 flex items-center bg-neutral border border-primary rounded-full">
<div className="flex w-44 items-center rounded-full border border-primary bg-neutral p-0.5">
<div
className="h-1.5 border border-primary rounded-full bg-secondary animate-grow"
className="h-1.5 animate-grow rounded-full border border-primary bg-secondary"
style={{ animationPlayState: showTransition ? "running" : "paused" }}
/>
</div>
Expand Down
28 changes: 14 additions & 14 deletions packages/nextjs/components/example-ui/ContractInteraction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ export const ContractInteraction = () => {
});

return (
<div className="flex bg-base-300 relative pb-10">
<div className="relative flex bg-base-300 pb-10">
<DiamondIcon className="absolute top-24" />
<CopyIcon className="absolute bottom-0 left-36" />
<CopyIcon className="absolute left-36 bottom-0" />
<HareIcon className="absolute right-0 bottom-24" />
<div className="flex flex-col w-full mx-5 sm:mx-8 2xl:mx-20">
<div className="mx-5 flex w-full flex-col sm:mx-8 2xl:mx-20">
<div className={`mt-10 flex gap-2 ${visible ? "" : "invisible"} max-w-2xl`}>
<div className="flex gap-5 bg-base-200 bg-opacity-80 z-0 p-7 rounded-2xl shadow-lg">
<div className="z-0 flex gap-5 rounded-2xl bg-base-200 bg-opacity-80 p-7 shadow-lg">
<span className="text-3xl">👋🏻</span>
<div>
<div>
Expand All @@ -35,50 +35,50 @@ export const ContractInteraction = () => {
</div>
<div className="mt-2">
Check out{" "}
<code className="italic bg-base-300 text-base font-bold [word-spacing:-0.5rem]">
<code className="bg-base-300 text-base font-bold italic [word-spacing:-0.5rem]">
packages / nextjs/pages / example-ui.tsx
</code>{" "}
and its underlying components.
</div>
</div>
</div>
<button
className="btn btn-circle btn-ghost h-6 w-6 bg-base-200 bg-opacity-80 z-0 min-h-0 drop-shadow-md"
className="btn btn-ghost btn-circle z-0 h-6 min-h-0 w-6 bg-base-200 bg-opacity-80 drop-shadow-md"
onClick={() => setVisible(false)}
>
<XMarkIcon className="h-4 w-4" />
</button>
</div>

<div className="flex flex-col mt-6 px-7 py-8 bg-base-200 opacity-80 rounded-2xl shadow-lg border-2 border-primary">
<span className="text-4xl sm:text-6xl text-black">Set a Greeting_</span>
<div className="mt-6 flex flex-col rounded-2xl border-2 border-primary bg-base-200 px-7 py-8 opacity-80 shadow-lg">
<span className="sm:text-6xlx text-4xl text-black">Set a Greeting_</span>

<div className="mt-8 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-5">
<div className="mt-8 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:gap-5">
<input
type="text"
placeholder="Write your greeting here"
className="input font-bai-jamjuree w-full px-5 bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] border border-primary text-lg sm:text-2xl placeholder-white uppercase"
className="input w-full border border-primary bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] px-5 font-bai-jamjuree text-lg uppercase placeholder-white sm:text-2xl"
onChange={e => setNewGreeting(e.target.value)}
/>
<div className="flex rounded-full border border-primary p-1 flex-shrink-0">
<div className="flex flex-shrink-0 rounded-full border border-primary p-1">
<div className="flex rounded-full border-2 border-primary p-1">
<button
className={`btn btn-primary rounded-full capitalize font-normal font-white w-24 flex items-center gap-1 hover:gap-2 transition-all tracking-widest ${
className={`font-white btn btn-primary flex w-24 items-center gap-1 rounded-full font-normal capitalize tracking-widest transition-all hover:gap-2 ${
isLoading ? "loading" : ""
}`}
onClick={() => writeAsync()}
>
{!isLoading && (
<>
Send <ArrowSmallRightIcon className="w-3 h-3 mt-0.5" />
Send <ArrowSmallRightIcon className="mt-0.5 h-3 w-3" />
</>
)}
</button>
</div>
</div>
</div>

<div className="mt-4 flex gap-2 items-start">
<div className="mt-4 flex items-start gap-2">
<span className="text-sm leading-tight">Price:</span>
<div className="badge badge-warning">0.01 ETH + Gas</div>
</div>
Expand Down