search

use-ink / contracts-ui

Web application for deploying wasm smart contracts on Substrate chains that include the FRAME contracts pallet
https://contracts-ui.substrate.io/
GNU General Public License v3.0
62 stars 48 forks source link

refactor: cleanup tailwind classes #476

Closed peetzweg closed 1 year ago

peetzweg commented 1 year ago

Closes #459.

I've installed this new prettier plugin from tailwind itself, which sorts the tailwind classes. It helped me indentifying similar class patterns, which could be abstracted into their own class. https://github.com/paritytech/contracts-ui/blob/0f9273c90601f14f7cbacf85973cf025442c017c/package.json#L89

Haven't abstracted much of it. I thought typography would be a good usecase for some base styles and maybe some components but it's hard to see proper patterns in the typography inside the app, although everything looks cohesive. 🤔

Do you @statictype see any typography categories in the codebase? I thought about something like text-body text-label text-section. As we are often defining text-gray-[200,300,400] and dark mode colors as well. I can't see a pattern in it just yet.

These are the only two I abstracted: https://github.com/paritytech/contracts-ui/blob/0f9273c90601f14f7cbacf85973cf025442c017c/src/ui/styles/base-typography.css#L3-L11

netlify[bot] commented 1 year ago

Deploy Preview for contracts-ui ready!

Name Link
Latest commit a40cc91f93eaa9c4c9eeccaf65e18b573558e039
Latest deploy log https://app.netlify.com/sites/contracts-ui/deploys/645a496e24c67f0008bbaf8e
Deploy Preview https://deploy-preview-476--contracts-ui.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

statictype commented 1 year ago

LGTM! the formatting changes made the PR big enough, we can merge it now and extract more patterns in the future.

peetzweg commented 1 year ago

@statictype this pr needs a new approval as I needed to resolve conflicts with the this PR https://github.com/paritytech/contracts-ui/pull/474. Both touched a lot of common files.