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

refactor(web): sort tailwind css classname #989

Merged
merged 1 commit into from
Mar 31, 2023
Merged

refactor(web): sort tailwind css classname #989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
112 changes: 105 additions & 7 deletions web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,11 @@
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-simple-import-sort": "^10.0.0",
"husky": "^8.0.3",
"install": "^0.13.0",
"lint-staged": "^13.2.0",
"postcss": "^8.4.21",
"prettier": "^2.8.6",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.6",
"tailwindcss": "^3.2.7",
"typescript": "4.9.5",
"vite": "^4.2.1"
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
1 change: 1 addition & 0 deletions web/prettier.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ module.exports = {
tabWidth: 2,
trailingComma: "all",
semi: true,
plugins: [require("prettier-plugin-tailwindcss")],
};
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
10 changes: 5 additions & 5 deletions web/src/components/ChargeButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@ export default function ChargeButton(props: { amount?: number; children: React.R
<ModalBody px="10" pb="10">
<div className="flex flex-col items-center text-xl">
<h2 className="text-second">{t("Balance")}</h2>
<h3 className="text-3xl font-semibold mb-4">
<h3 className="mb-4 text-3xl font-semibold">
{formatPrice(accountQuery.data?.balance)}
</h3>
<p className="text-second mb-2">{t("Recharge amount")}</p>
<p className="mb-2 text-second">{t("Recharge amount")}</p>
<InputGroup>
<InputLeftAddon children="¥" />
<Input
Expand Down Expand Up @@ -107,17 +107,17 @@ export default function ChargeButton(props: { amount?: number; children: React.R
</div>

{createChargeOrder.data?.data?.result?.code_url && (
<div className="flex flex-col items-center text-xl mt-4">
<div className="mt-4 flex flex-col items-center text-xl ">
<h2 className="mb-2">{t("Scan with WeChat")}</h2>
<QRCodeSVG
value={createChargeOrder.data?.data?.result?.code_url}
width={180}
height={180}
/>
<p className="text-base mt-4 text-second ">
<p className="mt-4 text-base text-second ">
{t("Order Number")}：{createChargeOrder.data?.data?.order?.id}
</p>
<p className="text-base mt-1 text-second ">
<p className="mt-1 text-base text-second ">
{t("payment status")}: {phaseStatus}
</p>
</div>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/Content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";

export default function Content(props: { children: React.ReactNode }) {
return <div className="flex-1 flex flex-col overflow-hidden space-y-2">{props.children}</div>;
return <div className="flex flex-1 flex-col space-y-2 overflow-hidden">{props.children}</div>;
}
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 1 addition & 1 deletion web/src/components/DotBadge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function DotBadge({
}
return (
<Box>
<span className={"inline-block w-[6px] h-[6px] rounded-full mr-1 " + bgColor}></span>
<span className={"mr-1 inline-block h-[6px] w-[6px] rounded-full " + bgColor}></span>
<span className={color}>{text}</span>
</Box>
);
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/EditableTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const EditableTable = function (props: {
return (
<>
<div
className={clsx("rounded-t-md relative border border-b-0", {
className={clsx("relative rounded-t-md border border-b-0", {
"border-frostyNightfall-200": !darkMode,
})}
>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
19 changes: 13 additions & 6 deletions web/src/components/Editor/JSONViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,12 +243,19 @@ export default function JSONViewer(props: JSONViewerProps) {
};

return (
<SyntaxHighlighter
language={language}
style={colorMode === "dark" ? JSONViewerDarkStyle : JSONViewerStyle}
customStyle={colorMode === "dark" ? darkTheme : lightTheme}
<div
style={{
maxHeight: 100,
overflow: "hidden",
}}
>
{code}
</SyntaxHighlighter>
<SyntaxHighlighter
language={language}
style={colorMode === "dark" ? JSONViewerDarkStyle : JSONViewerStyle}
customStyle={colorMode === "dark" ? darkTheme : lightTheme}
>
{code}
</SyntaxHighlighter>
</div>
);
}
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 1 addition & 1 deletion web/src/components/FileTypeIcon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function FileTypeIcon(props: { type: string; className?: string }
switch (type) {
case FileType.app:
return (
<Icon viewBox="0 0 22 22" fontSize={24} className={clsx("align-middle ", className)}>
<Icon viewBox="0 0 22 22" fontSize={20} className={clsx("align-middle ", className)}>
<mask
id="mask0_2744_5395"
style={{ maskType: "alpha" }}
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/Grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ function Col(props: {
return (
<div
className={clsx(
"flex flex-col h-full overflow-x-hidden",
style?.width ? "flex-none" : "flex-grow flex-1 overflow-hidden",
"flex h-full flex-col overflow-x-hidden",
style?.width ? "flex-none" : "flex-1 flex-grow overflow-hidden",
className,
)}
style={style}
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/IconText/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function IconText(props: {
return (
<div
onClick={props.onClick}
className={clsx("text-grayIron-600 flex flex-col items-center", {
className={clsx("flex flex-col items-center text-grayIron-600", {
"hover:text-black": !darkMode,
"hover:text-white": darkMode,
})}
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/IconWrap/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function IconWrap(props: {
<Tooltip label={tooltip} placement={placement}>
<Center
onClick={props.onClick}
className={clsx("rounded-full inline-block cursor-pointer ", className, {
className={clsx("inline-block cursor-pointer rounded-full ", className, {
"hover:bg-lafWhite-600": !darkMode && !showBg,
"bg-lafWhite-600": !darkMode && showBg,
"hover:bg-lafDark-300": darkMode && !showBg,
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/InputTag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function InputTag(props: { value: string[]; onChange: (value: str
return (
<div
className={clsx(
"flex items-center p-2 rounded-md ",
"flex items-center rounded-md p-2 ",
darkMode ? "bg-gray-800" : "bg-gray-100",
)}
>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/Panel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Panel = (props: {
style={style}
bg={bg}
onClick={onClick}
className={clsx("rounded px-4 flex flex-col w-full", className)}
className={clsx("flex w-full flex-col rounded px-4", className)}
>
{props.children}
</Box>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
12 changes: 6 additions & 6 deletions web/src/components/Resize/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@ export default function Resize(props: {
{display === "none" ? null : (
<div
className={
type === "x" ? "h-full w-2 cursor-col-resize group" : "h-2 w-full cursor-row-resize"
type === "x" ? "group h-full w-2 cursor-col-resize" : "h-2 w-full cursor-row-resize"
}
{...separatorProps}
>
<Center className="w-full h-full relative">
<Center className="relative h-full w-full">
{type === "x" && width <= 20 ? (
<div
className={clsx(
reverse ? "rounded-l-lg" : "rounded-r-lg",
"w-2 h-[30px] bg-grayIron-300 group-hover:bg-grayIron-400 transition-colors leading-loose text-lafWhite-600",
"h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400",
)}
>
{reverse ? <ChevronLeftIcon fontSize={10} /> : <ChevronRightIcon fontSize={10} />}
Expand All @@ -61,15 +61,15 @@ export default function Resize(props: {
className={clsx(
type === "x" && isDragging ? "h-full " : "h-0",
type === "y" && isDragging ? "w-full " : "w-0",
isDragging ? " border-primary-400 border" : "",
"transition-all absolute z-10 overflow-hidden",
isDragging ? " border border-primary-400" : "",
"absolute z-10 overflow-hidden transition-all",
)}
></div>
<Box
borderColor={borderColor}
className={clsx(
type === "x" ? "h-[18px]" : "w-[18px]",
"border rounded absolute",
"absolute rounded border",
)}
></Box>
</>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
4 changes: 2 additions & 2 deletions web/src/layouts/Auth/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export default function LoginReg() {
return (
<div className={styles.container}>
<div className="absolute top-[120px] left-[120px]">
<div className="text-primary-600 text-[36px]">Welcome to laf !</div>
<div className="text-grayModern-500 text-[20px]">life is short, you need laf.</div>
<div className="text-[36px] text-primary-600">Welcome to laf !</div>
<div className="text-[20px] text-grayModern-500">life is short, you need laf.</div>
</div>
<Outlet />
</div>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/layouts/Basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function BasicLayout() {
<Outlet />
)}
</div>
<div className="text-center fixed -z-10 bottom-0 py-4 w-full">
<div className="fixed bottom-0 -z-10 w-full py-4 text-center">
Made with <AiFillHeart className="inline text-red-500" />️ by laf team
</div>
</div>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion web/src/layouts/Function.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function FunctionLayout() {
currentApp?.phase !== APP_PHASE_STATUS.Deleted ? (
<div
className={clsx(
"absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col justify-center items-center opacity-70 ",
"absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col items-center justify-center opacity-70 ",
darkMode ? "bg-lafDark-100" : "bg-lafWhite-600",
)}
>
LeezQ marked this conversation as resolved.
Show resolved Hide resolved
Expand Down