Preview Sites: Add Clear button for expired sites with related styling
#913
Conversation
| <Button | ||
| variant="link" | ||
| onClick={ () => removeSnapshot( snapshot ) } | ||
| className={ '!text-a8c-gray-70 hover:!text-a8c-red-50' } |
There was a problem hiding this comment.
This is the same styling as we use for the Disconnect button on the Sync tab:
(including red color on hover)
We can, of course, change this: e.g. use blue or red link color and adjust the hover as well.
There was a problem hiding this comment.
At the end I changed the color of the Clear button to text-a8c-blueberry (83a21d0) - to match it with the design in Figma.
I have also kept the red color on hover.
| <div | ||
| className={ cx( | ||
| 'text-[13px] leading-5 line-clamp-1 break-all', | ||
| isExpired && 'line-through' |
There was a problem hiding this comment.
Let's make it text-a8c-gray-70 when expired.
There was a problem hiding this comment.
Looking at the design (RToz6tIuQ7nlZrikBte4GU-fi-6541_2932), it is using text-[#757575] color when expired:
→ Made the change in f4f7d88:
But if you like, we can still make it text-a8c-gray-70 instead. 🙂
Thank you, Antonio! I think sorting by the updated field is a good idea indeed. I have added it in 710737e. |
| <div | ||
| className={ cx( | ||
| 'text-[13px] leading-5 line-clamp-1 break-all', | ||
| isExpired && 'line-through text-[#757575]' |
There was a problem hiding this comment.
I've investigated if we have the color text-a8c-gray-700 - #757575 , but it seems we don't have it. I've tried updating automattic/color-studio but the new version 4.1.0 doesn't include it either.
I think it's ok to leave it as it is, since we are using that color in the rest of the app, but we could consider adding a new variable in tailwind config.
Something like:
a8cToTailwindColors[ ${ PREFIX }-gray-700 ] = '#757575'; // Gray 700
There was a problem hiding this comment.
That's a great idea! Thanks! I have added the variable and replaced all occurrences of #757575 in the latest commit: 323002b.
Related issues
Proposed Changes
Clearbutton for expired sites with related stylingTesting Instructions
STUDIO_QUICK_DEPLOYS=true npm start./Library/Application Support/Studio/appdata-v1.jsonfile (this is just to get back the preview site record after you finish testing)datetimestamp to "pretend" the site is already expired:I used
1639191025952in my tests.Clearbutton / link. It should remove the preview site from the list.appdata-v1.jsonfile.npm test src/modules/preview-site/components/tests/preview-site-row.test.tsxshould pass.Pre-merge Checklist