feat: account history component style and code revamp

[abdulhaseeb13mar]

fixes #120

i have opened this PR, for now it is not responsive for tab and mobile. will be working on it's responsiveness in the coming days

[netlify]

✅ Deploy Preview for chipper-sunburst-578cfe ready!

Name	Link
🔨 Latest commit	bdd0280
🔍 Latest deploy log	https://app.netlify.com/sites/chipper-sunburst-578cfe/deploys/651d07feaa82ba0007e2be2b
😎 Deploy Preview	https://deploy-preview-128--chipper-sunburst-578cfe.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[EvgeniiaVak]

I tried to have an open order and the order count indicator is drawn on the second row (my window width is 1470px here):

Is it possible to show them on the same row?

[abdulhaseeb13mar]

I tried to have an open order and the order count indicator is drawn on the second row (my window width is 1470px here):
Is it possible to show them on the same row?

@EvgeniiaVak i have fixed it, you can check now

[EvgeniiaVak]

Border radii should probably be 0 for both the count indicator and the cancel button on hover to look consistent with the rest of the styling, which is quite rectangular. Strange that they are not absent by default on the button, we have it in the tailwind config for all the buttons.

The cancel button (when without hover) looks a little bit out of place - shifted to the right, 🤔 maybe moving the cancel button a little bit (e.g. use negative padding? what can go wrong? 😆 ). Or maybe remove the on hover at all, or only underline on hover? I vote for only underlining, with no bg changes.

Other differences from figma:

1. all headers are uppercase
2. cancel is red
3. the selected tab has accent color

I committed in this branch also, someone else needs to review my latest commits.

[EvgeniiaVak]

@nguvictor reviewed (thanks), so approving this PR.