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.

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

Issue #774 - Update tailwind #1130

Merged
merged 84 commits into from
Apr 17, 2024
Merged
Show file tree
Hide file tree
Changes from 83 commits
Commits
Show all changes
84 commits
Select commit Hold shift + click to select a range
137ab51
Update tailwind to 3.2.7
tiagofilipenunes Mar 15, 2024
dc66a4e
Fix date picker className precedence
tiagofilipenunes Mar 15, 2024
b8f68fb
Fix tab menu class priority using button variant
tiagofilipenunes Mar 15, 2024
0b26fe7
Use class name merger wherever className is passed as prop
tiagofilipenunes Mar 15, 2024
4e364af
Fix fork alert with wrongly set padding
tiagofilipenunes Mar 15, 2024
e3a9320
Fix main menu trade pairs wrongly setting background
tiagofilipenunes Mar 15, 2024
8f15262
Adjust trade settings row className priority
tiagofilipenunes Mar 15, 2024
d4f23ca
Update yarn.lock
tiagofilipenunes Mar 15, 2024
3504675
Update tailwind to 3.3.7
tiagofilipenunes Mar 15, 2024
1992c68
Replace js tailwind config with typescript one
tiagofilipenunes Mar 15, 2024
5f43bce
Upgrade tailwind to 3.4.1
tiagofilipenunes Mar 18, 2024
3a46b68
Replace h-* w-* with size-*
tiagofilipenunes Mar 18, 2024
6e319e8
Update tailwind-merge
tiagofilipenunes Mar 18, 2024
2790933
Resolve tailwind problems
tiagofilipenunes Mar 18, 2024
df3f707
Use new tailwind aria selector
tiagofilipenunes Mar 18, 2024
f48c04c
Merge branch 'main' into issue-#774
tiagofilipenunes Mar 18, 2024
1a39107
[CI] Update Screenshots
tiagofilipenunes Mar 18, 2024
1c9b1d4
Merge branch 'main' into issue-#774
tiagofilipenunes Mar 19, 2024
c541dc2
[CI] Update Screenshots
tiagofilipenunes Mar 19, 2024
b05e11b
Merge branch 'main' into issue-#774
tiagofilipenunes Apr 9, 2024
20d1f1c
[CI] Update Screenshots
tiagofilipenunes Apr 9, 2024
b6eb7a4
Use aria-selected operator instead of a custom styles
tiagofilipenunes Apr 9, 2024
c6dda68
Fixes after review
tiagofilipenunes Apr 9, 2024
c3af897
Remove opacity custom setting as opacity now supports steps of 5
tiagofilipenunes Apr 9, 2024
e6cc4c5
[CI] Update Screenshots
tiagofilipenunes Apr 9, 2024
4f2e9d7
Use cn() in buttonStyles
tiagofilipenunes Apr 10, 2024
b19a76f
Remove text-secondary and clean-up
tiagofilipenunes Apr 10, 2024
7358eff
Remove tooltip important tag
tiagofilipenunes Apr 10, 2024
1bcc38e
Fix tooltip icon sizing and refactor
tiagofilipenunes Apr 10, 2024
c6bf5f2
Fix styling
tiagofilipenunes Apr 10, 2024
9f81203
Clean-up trade settings row
tiagofilipenunes Apr 10, 2024
d199a6f
Remove apply text-secondary from index.css
tiagofilipenunes Apr 10, 2024
75deebb
Fix strategy filter sort
tiagofilipenunes Apr 10, 2024
4194880
Fix styling
tiagofilipenunes Apr 10, 2024
aecd06b
Fix create strategy orders
tiagofilipenunes Apr 10, 2024
a0ef87d
Fix tooltip styling for consistency
tiagofilipenunes Apr 10, 2024
946e043
Fix edit strategy overlap tokens text size
tiagofilipenunes Apr 10, 2024
733104f
Add types to tailwind config
tiagofilipenunes Apr 10, 2024
a8cc4d6
Add custom merge with initial tailwind merge config
tiagofilipenunes Apr 10, 2024
e302824
[CI] Update Screenshots
tiagofilipenunes Apr 10, 2024
c137b43
Remove unnecessary tailwind definitions
tiagofilipenunes Apr 10, 2024
9d4101d
Fix code styling
tiagofilipenunes Apr 10, 2024
03f8cc0
Add text-white/60 to tooltip icon in edit strategy budget
tiagofilipenunes Apr 10, 2024
8007a0d
Fix "Filter&Sort" showing up in mobile view in explorer
tiagofilipenunes Apr 10, 2024
335e06c
Use size in Activity table
tiagofilipenunes Apr 10, 2024
914d1ae
Replace h-x w-x with size-x
tiagofilipenunes Apr 10, 2024
aed941a
Add cn to Input and remove important flags from inputStyles
tiagofilipenunes Apr 10, 2024
0e87345
Remove unnecessary important flags and clean-up
tiagofilipenunes Apr 10, 2024
5b2213b
Add cn to InputRange and inputLimit
tiagofilipenunes Apr 10, 2024
44ff4fc
Simplify tw config and add font weights
tiagofilipenunes Apr 10, 2024
d52856b
Add tw merge unit tests
tiagofilipenunes Apr 10, 2024
0f69f1a
Reformat to remove unnecessary {'x'} to "x"
tiagofilipenunes Apr 10, 2024
d5c5900
[CI] Update Screenshots
tiagofilipenunes Apr 10, 2024
dd27503
Fix calendar styling
tiagofilipenunes Apr 10, 2024
20b76f8
[CI] Update Screenshots
tiagofilipenunes Apr 10, 2024
d47d474
Remove unnecessary important tags
tiagofilipenunes Apr 11, 2024
471e6e0
Change priority in token input merge
tiagofilipenunes Apr 11, 2024
7d6e2f3
Fix Carbon Logo centering
tiagofilipenunes Apr 11, 2024
bbae736
Fix activity icon size
tiagofilipenunes Apr 11, 2024
170b182
Add cn when using switchStyles and labelStyles
tiagofilipenunes Apr 11, 2024
b8ab01d
Replace by size
tiagofilipenunes Apr 11, 2024
1029ac7
Add conflicting class groups to twmerge and clean comments
tiagofilipenunes Apr 11, 2024
1ddd422
Add eslint curly brace presence rule
tiagofilipenunes Apr 11, 2024
726a7d4
Run linter
tiagofilipenunes Apr 11, 2024
3da1f1f
[CI] Update Screenshots
tiagofilipenunes Apr 11, 2024
0485dcd
Fix tailwind config, when animations are redefined, so should all key…
tiagofilipenunes Apr 12, 2024
69ed837
Merge branch 'main' into issue-#774
tiagofilipenunes Apr 15, 2024
b6374ac
Replace with size
tiagofilipenunes Apr 15, 2024
9c7b977
[CI] Update Screenshots
tiagofilipenunes Apr 15, 2024
90494b7
Update tailwind to 3.4.3
tiagofilipenunes Apr 15, 2024
f4d79c2
Update notifications
tiagofilipenunes Apr 15, 2024
5da9251
Add debug notifications
tiagofilipenunes Apr 15, 2024
4d4a43b
Merge branch 'main' into issue-#774
tiagofilipenunes Apr 15, 2024
b585360
Fix tooltip icon sizing
tiagofilipenunes Apr 15, 2024
aa86d19
Adjust calendar styling
tiagofilipenunes Apr 15, 2024
315e4e6
Fix Routing button not showing on mobile
tiagofilipenunes Apr 15, 2024
959a40d
Remove important flags from portfolio
tiagofilipenunes Apr 15, 2024
04ea917
Merge branch 'main' into issue-#774
tiagofilipenunes Apr 15, 2024
827d44c
[CI] Update Screenshots
tiagofilipenunes Apr 15, 2024
3d90519
Change text-secondary to text-white/60 in notifications
tiagofilipenunes Apr 16, 2024
d08e773
Remove secondary color from tailwind and tailwind merge configs
tiagofilipenunes Apr 16, 2024
7db925a
[CI] Update Screenshots
tiagofilipenunes Apr 16, 2024
d19d763
Merge branch 'main' into issue-#774
tiagofilipenunes Apr 17, 2024
3e9059c
[CI] Update Screenshots
tiagofilipenunes Apr 17, 2024
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: 4 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@
"prettier/prettier": [
"warn",
{ "endOfLine": "auto" }
],
"react/jsx-curly-brace-presence": [
"warn",
{ "props": "never", "children":"never" }
]
},
"overrides": [
Expand Down
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ and it is recommended to set VITE_LEGACY_TRADE_BY_SOURCE_RANGE to true in .env t

## Change Colors

The theme is defined in the [`tailwind.config.js`](./tailwind.config.js#L36) file.
The theme is defined in the [`tailwind.config.ts`](./tailwind.config.ts#L36) file.
You can update these colors:

- **background**: used for surfaces
Expand All @@ -169,7 +169,7 @@ To get the oklch value of an hex color you can use this webapp: https://oklch.co

### Background

Background shades are calculated based on hue and chroma. In [`tailwind.config.js`](./tailwind.config.js#L38) you can specify `hue` and `chroma` of the background.
Background shades are calculated based on hue and chroma. In [`tailwind.config.ts`](./tailwind.config.ts#L37) you can specify `hue` and `chroma` of the background.

- `hue`: from 0 (pink) to 360 (pink).
- `chroma`: It's recommended to use 0.01 or 0.02 depending on the hue.
Expand All @@ -186,7 +186,7 @@ All other colors are defined with l,c,h values (see https://oklch.com), and the
}
```

You can change the % of the `lighten` & `darken` function with the [`lightDark`](./tailwind.config.js#L18) function.
You can change the % of the `lighten` & `darken` function with the [`lightDark`](./tailwind.config.ts#L20) function.

# License

Expand Down
Binary file modified e2e/screenshots/simulator/recurring/Recurring limit limit/form.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/simulator/recurring/Recurring limit range/form.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/simulator/recurring/Recurring range limit/form.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/simulator/recurring/Recurring range range/form.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/strategy/overlapping/Overlapping/create/form.jpg
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@
"react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"source-map-explorer": "^2.5.3",
"tailwind-merge": "^1.13.2",
"tailwindcss": "3.1.8",
"tailwind-merge": "^2.2.2",
"tailwindcss": "3.4.3",
"typechain": "^8.1.0",
"typescript": "^5.3.3",
"ua-parser-js": "^1.0.35",
Expand Down Expand Up @@ -124,4 +124,4 @@
"devDependencies": {
"@types/d3": "^7.4.3"
}
}
}
2 changes: 1 addition & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const App = () => {
<>
<NotificationAlerts />
<MainMenu />
<main className="mt-80 mb-16 flex w-full flex-grow flex-col">
<main className="mb-16 mt-80 flex w-full flex-grow flex-col">
<MainContent />
</main>
<Footer />
Expand Down
4 changes: 2 additions & 2 deletions src/components/activity/ActivityExport.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,10 @@ export const ActivityExport: FC<Props> = ({ activities }) => {
return (
<a
href={csvURI}
className="flex items-center gap-8 rounded-full border-2 border-background-800 px-12 py-8 text-12 hover:border-background-700 hover:bg-background-800"
className="border-background-800 text-12 hover:border-background-700 hover:bg-background-800 flex items-center gap-8 rounded-full border-2 px-12 py-8"
download="activities.csv"
>
<IconDownloadFile className="h-14 w-14 text-primary" />
<IconDownloadFile className="text-primary size-14" />
<span>Export</span>
</a>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/activity/ActivityFilter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
form={formId}
name="ids"
value={ids}
icon={<IconSearch className="w-14 text-primary" />}
icon={<IconSearch className="text-primary w-14" />}
label={
ids.length
? `${ids.length} Strategies Selected`
Expand All @@ -116,7 +116,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
form={formId}
name="pairs"
value={pairs}
icon={<IconPair className="w-14 text-primary" />}
icon={<IconPair className="text-primary w-14" />}
label={
pairs.length ? `${pairs.length} Pairs Selected` : 'Filter Pairs'
}
Expand All @@ -133,7 +133,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
form={formId}
name="actions"
value={actions}
icon={<IconSearch className="w-14 text-primary" />}
icon={<IconSearch className="text-primary w-14" />}
label={
actions.length
? `${actions.length} Actions Selected`
Expand Down
14 changes: 7 additions & 7 deletions src/components/activity/ActivityList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const ActivityList: FC<ActivityListProps> = (props) => {
</ul>
{limit < size && (
<>
<p className="mb-16 text-center text-12 text-white/60">
<p className="text-12 mb-16 text-center text-white/60">
{limit} / {size}
</p>
<Button
Expand Down Expand Up @@ -69,10 +69,10 @@ const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
setSearchParams({ actions });
};
return (
<li className="flex flex-col gap-16 rounded border-2 border-background-800">
<li className="border-background-800 flex flex-col gap-16 rounded border-2">
<header className="flex px-16 pt-16">
{!hideIds && <ActivityId activity={activity} size={12} />}
<p className="flex flex-1 items-center justify-end gap-8 font-mono text-12 text-white/60">
<p className="text-12 flex flex-1 items-center justify-end gap-8 font-mono text-white/60">
{activityDateFormatter.format(activity.date)}
<TransactionLink txHash={activity.txHash} className="h-16" />
</p>
Expand All @@ -83,17 +83,17 @@ const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
<ActivityIcon activity={activity} size={24} />
{activityActionName[activity.action]}
</h3>
<p className="font-mono text-12 text-white/60">
<p className="text-12 font-mono text-white/60">
{activityDescription(activity)}
</p>
</button>
</section>
<hr className="border-background-800" />
<table className="w-full table-fixed">
<thead>
<tr className="font-mono text-12 text-white/60">
<th className="px-16 font-weight-400">Buy Budget</th>
<th className="px-16 font-weight-400">Sell Budget</th>
<tr className="text-12 font-mono text-white/60">
<th className="font-weight-400 px-16">Buy Budget</th>
<th className="font-weight-400 px-16">Sell Budget</th>
</tr>
</thead>
<tbody>
Expand Down
10 changes: 5 additions & 5 deletions src/components/activity/ActivityNotification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
return (
<article aria-labelledby={titleId} className="flex gap-16">
<AnimatedActionIcon action={activity.action} />
<div className="flex flex-1 flex-col gap-8 overflow-hidden text-14">
<div className="text-14 flex flex-1 flex-col gap-8 overflow-hidden">
<hgroup>
<h3 className="text-16" id={titleId} data-testid="notif-title">
{activityActionName[activity.action]}
Expand All @@ -32,7 +32,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
<Link
to="/strategy/$id"
params={{ id: activity.strategy.id }}
className="flex items-center font-weight-500"
className="font-weight-500 flex items-center"
>
View Activity
</Link>
Expand All @@ -43,10 +43,10 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
data-testid="notif-close"
aria-label="Remove notification"
>
<IconClose className="h-14 w-14 text-white/80" />
<IconClose className="size-14 text-white/80" />
</button>

<p className="whitespace-nowrap text-12 font-weight-500 text-white/60">
<p className="text-12 font-weight-500 whitespace-nowrap text-white/60">
{unix(notification.timestamp).fromNow(true)}
</p>
</div>
Expand All @@ -59,7 +59,7 @@ export const AnimatedActionIcon = (props: { action: ActivityAction }) => {
return (
<div
className={cn(
'relative grid h-38 w-38 place-items-center rounded-full',
'size-38 relative grid place-items-center rounded-full',
style.icon,
{
'bg-buy/20 text-buy': props.action === 'buy',
Expand Down
2 changes: 1 addition & 1 deletion src/components/activity/ActivitySection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const ActivitySection: FC<ActivityFilterProps> = ({ filters = [] }) => {
const { list: activities, all: allActivities } = useActivity();
const { aboveBreakpoint } = useBreakpoints();
return (
<section className="rounded bg-background-900">
<section className="bg-background-900 rounded">
<header className="grid grid-cols-[auto_1fr] gap-16 px-20 py-24 md:grid-cols-[auto_1fr_auto]">
<h2 className="row-start-1">Activity</h2>
<ActivityFilter
Expand Down
16 changes: 8 additions & 8 deletions src/components/activity/ActivityTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const ActivityTable: FC<ActivityListProps> = (props) => {
return (
<table className={cn('w-full border-collapse', style.table)}>
<thead>
<tr className="border-y border-background-800 font-mono text-14 text-white/60">
<tr className="border-background-800 text-14 border-y font-mono text-white/60">
{!hideIds && <th className={thStyle}>ID</th>}
<th className={thStyle} colSpan={2}>
Action
Expand Down Expand Up @@ -136,7 +136,7 @@ const ActivityRow: FC<ActivityRowProps> = ({ activity, hideIds, index }) => {
</td>
</tr>
<tr
className="font-mono text-12 text-white/60"
className="text-12 font-mono text-white/60"
style={{ animationDelay: `${index * 50}ms` }}
>
{/* ID */}
Expand Down Expand Up @@ -173,7 +173,7 @@ export const ActivityId: FC<ActivityIdProps> = ({ activity, size }) => {
<Link
to="/strategy/$id"
params={{ id: id }}
className="inline-flex items-center gap-4 rounded-full bg-background-800 py-4 px-8"
className="bg-background-800 inline-flex items-center gap-4 rounded-full px-8 py-4"
>
<span className={`text-${size}`}>{getLowestBits(id)}</span>
<TokensOverlap tokens={[base, quote]} size={size + 2} />
Expand All @@ -191,7 +191,7 @@ export const ActivityIcon: FC<ActivityIconProps> = (props) => {
const classes = cn(
'grid place-items-center rounded-full',
iconColor(activity.action),
`h-${size} w-${size}`,
`size-${size}`,
className
);
return (
Expand Down Expand Up @@ -248,12 +248,12 @@ const ActivityPaginator = () => {
};

return (
<tr className="border-t border-background-800 text-14 text-white/80">
<tr className="border-background-800 text-14 border-t text-white/80">
<td className="px-24 py-16" colSpan={3}>
<div className="flex items-center gap-8">
<label>Show results</label>
<select
className="rounded-full border-2 border-background-800 bg-background-900 px-12 py-8"
className="border-background-800 bg-background-900 rounded-full border-2 px-12 py-8"
name="limit"
onChange={changeLimit}
value={limit}
Expand Down Expand Up @@ -285,7 +285,7 @@ const ActivityPaginator = () => {
<IconChevronLeft className="h-12" />
</button>
<p
className="flex gap-8 rounded-full border-2 border-background-800 px-12 py-8"
className="border-background-800 flex gap-8 rounded-full border-2 px-12 py-8"
aria-label="page position"
>
<span className="text-white">{currentPage}</span>
Expand Down Expand Up @@ -327,7 +327,7 @@ const iconColor = (action: ActivityAction) => {
};

const ActionIcon: FC<ActionIconProps> = ({ action, size }) => {
const className = `h-${size} w-${size}`;
const className = `size-${size}`;
if (action === 'create') return <IconCheck className={className} />;
if (action === 'transfer') return <IconTransfer className={className} />;
if (action === 'edit') return <IconEdit className={className} />;
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type Props = JSX.IntrinsicElements['button'] & {

export const Checkbox: FC<Props> = ({ isChecked, setIsChecked, ...attr }) => {
const classNames =
'h-18 w-18 rounded-4 border-2 flex items-center justify-center cursor-pointer';
'size-18 rounded-4 border-2 flex items-center justify-center cursor-pointer';
const borderColor = isChecked
? 'border-primary bg-primary'
: 'border-white/60';
Expand All @@ -21,7 +21,7 @@ export const Checkbox: FC<Props> = ({ isChecked, setIsChecked, ...attr }) => {
className={cn(`${classNames} ${borderColor}`, attr.className)}
onClick={() => setIsChecked(!isChecked)}
>
{isChecked && <IconCheck className="h-10 w-10 text-background-900" />}
{isChecked && <IconCheck className="text-background-900 size-10" />}
</button>
);
};
4 changes: 2 additions & 2 deletions src/components/common/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { ReactComponent as LogoCarbonDeFi } from 'assets/logos/carbondefi.svg';

export const Footer: FC = () => {
return (
<footer className="mb-80 flex items-center border-t border-background-800 bg-black py-24 px-20 md:mb-0">
<footer className="border-background-800 mb-80 flex items-center border-t bg-black px-20 py-24 md:mb-0">
<NewTabLink
aria-label="Powered By CarbonDeFi"
to={externalLinks.carbonHomepage}
className="flex items-center gap-8 whitespace-nowrap text-14 font-weight-500 text-white/60"
className="text-14 font-weight-500 flex items-center gap-8 whitespace-nowrap text-white/60"
>
Powered by
<LogoCarbonDeFi className="w-[114px] text-white" />
Expand Down
12 changes: 6 additions & 6 deletions src/components/common/NotFound.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@ export const NotFound = ({
return (
<section
className={cn(
'relative flex min-h-[500px] flex-col items-center justify-center gap-30 px-20 py-50 text-center',
bordered && 'rounded border-2 border-background-800'
'gap-30 py-50 relative flex min-h-[500px] flex-col items-center justify-center px-20 text-center',
bordered && 'border-background-800 rounded border-2'
)}
>
{showBackButton && (
<button
onClick={() => history.back()}
className="absolute top-8 left-8 rounded-full p-16 hover:bg-white/20"
className="absolute left-8 top-8 rounded-full p-16 hover:bg-white/20"
>
<ForwardArrow className="h-16 w-16 rotate-180" />
<ForwardArrow className="size-16 rotate-180" />
</button>
)}
<div
Expand All @@ -40,14 +40,14 @@ export const NotFound = ({
})}
>
<IconSearch
className={cn('h-32 w-32', {
className={cn('size-32', {
'text-primary': variant === 'info',
'text-error': variant === 'error',
})}
/>
</div>
<h2 className="max-w-[440px] text-[32px] leading-[36px]">{title}</h2>
<p className="max-w-[440px] text-16 text-white/60">{text}</p>
<p className="text-16 max-w-[440px] text-white/60">{text}</p>
</section>
);
};
2 changes: 1 addition & 1 deletion src/components/common/PairLogoName.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const PairLogoName: FC<Props> = ({
return (
<>
<TokensOverlap tokens={[baseToken, quoteToken]} size={30} />
<p className="flex items-center gap-4 font-weight-500">
<p className="font-weight-500 flex items-center gap-4">
{baseToken.symbol}
{baseToken.isSuspicious && (
<WarningWithTooltip tooltipContent={suspiciousTokenTooltipMsg} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/Toaster/Toaster.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const Toaster: FC = () => {
{toaster.toasts.map((toast) => (
<li
key={toast.id}
className="my-5 animate-slideUp rounded-full border border-white/60 bg-background-800 py-8 px-16"
className="animate-slideUp bg-background-800 my-5 rounded-full border border-white/60 px-16 py-8"
>
<output>{toast.content}</output>
</li>
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/TokenInputField/Slippage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ export const Slippage: FC<Props> = ({ slippage }) => {
element={`The slippage is calculated based on the ${selectedFiatCurrency} value difference between the selected source and target tokens.`}
>
<span className={cn('flex flex-1 items-center gap-5', textColor)}>
{slippage?.eq(0) && <IconWarning className="h-12 w-12" />}
{slippage?.eq(0) && <IconWarning className="size-12" />}
{slippage?.gt(0) && <>(+{slippageValue}%)</>}
{slippage?.lt(0) && <>(-{slippageValue}%)</>}
{slippage?.eq(0) && <>Notice: price & slippage are unknown</>}
{slippage.lt(-3) && <IconWarning className="h-12 w-12" />}
{slippage.lt(-3) && <IconWarning className="size-12" />}
</span>
</Tooltip>
);
Expand Down
Loading
Loading