Adds new USP component formatting #3138
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
src/pages/docs/platform/index.mdx
Outdated
| meta_description: "An introduction to Ably and its highly-available, scalable platform." | ||
| --- | ||
|
|
||
| import { Banner } from '../../../components/blocks/banners' |
There was a problem hiding this comment.
We shouldn't be using it like this. Have a look at how If component is included in the MDXWrapper, that way you don't need the import at the top of every file that uses the Banner.
https://github.com/ably/docs/blob/main/src/components/Layout/MDXWrapper.tsx
There was a problem hiding this comment.
Cool.. I've added:
import { Banner } from '../blocks/banners';
to src/components/Layout/MDXWrapper.tsx
|
The test failed due to prettier: |
…ly/docs into FTF-522-adds-new-component-from-figma
franrob-projects
temporarily deployed
to
ably-docs-ftf-522-adds--tba6w9
franrob-projects
had a problem deploying
to
ably-docs-ftf-522-adds--tba6w9
franrob-projects
temporarily deployed
to
ably-docs-ftf-522-adds--tba6w9
GregHolmes
left a comment
GregHolmes
left a comment
There was a problem hiding this comment.
Looks good! There are a couple of comments though.
The header of the Aside shouldn't be a header but instead slightly increased and boldened text.
The padding in the class of the Aside is too big compared to the design. I think once these changes are made it'll look clean on the page!
| )} | ||
| > | ||
| <div className="flex-1 mt-1.5 mb-0.25"> | ||
| {headline && <h3 className="ui-text-h3 font-bold text-neutral-1300 mb-3">{headline}</h3>} |
There was a problem hiding this comment.
I don't think this is meant to be a header. From what I recall it was the same size as the text (or ever so slightly bigger than normal text) and boldened. H3 makes it stick out way too much on the page.
There was a problem hiding this comment.
Font size of header text is 16 where normal text is 14.
| {...rest} | ||
| data-type={dataType} | ||
| className={cn( | ||
| 'border-l-[1.5px] px-6 pt-2.5 pb-1.5 my-6 rounded-r-lg w-full', |
There was a problem hiding this comment.
Padding top is currently 0.625rem, which equates to 10px. The design's one is 8px for example.
I think looking at the Figma designs it should be more: 'border-l-[1.5px] px-6 py-2 my-6 rounded-r-lg w-full gap-1',
There was a problem hiding this comment.
yeah impimented that and it looked way off
There was a problem hiding this comment.
I will re-do and see if shows any better but i did have to have a play around to make it look half decent
There was a problem hiding this comment.
direct from design
There was a problem hiding this comment.
alot more space at the bottom
There was a problem hiding this comment.
Maybe it's because you've got the header as a header and not 16font size?
But screenshot below is from design. If the padding and styling is exactly as they've got in Figma, it'll look like this.
There was a problem hiding this comment.
i've revered the others back...
but i've just reducd this:
'border-l-[1px] px-6 py-1 my-6 rounded-r-lg w-full gap-1',
its as close as i can get to the origianal
franrob-projects
temporarily deployed
to
ably-docs-ftf-522-adds--tba6w9
Description
This PR adds the formatting to the VALs needed for the USB call outs. The USB call outs on other branches will be merged here.
I have added just one placeholder USP so that you can have a look. I will delete this in a future
-- fixuponce approved.Checklist