KTL-1707 Dokka: adjust code area to new design #4051
Conversation
nikpachoo
force-pushed
the
ktl-1707-adjust-code-area
branch
3 times, most recently
from
1664937 to
452ece7
Compare
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/code-block/styles.scss
Outdated
Show resolved
Hide resolved
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/code-block/index.ts
Show resolved
Hide resolved
nikpachoo
force-pushed
the
ktl-1707-adjust-code-area
branch
from
452ece7 to
8e46fde
Compare
nikpachoo
force-pushed
the
ktl-1707-adjust-code-area
branch
from
c451df2 to
8f29739
Compare
| padding: 7px var(--size-s3) 7px var(--size-s2); | ||
| border-radius: var(--size-s1); | ||
| border: 1px solid var(--color-w16); | ||
| background: var(--color-background-page-dt); |
There was a problem hiding this comment.
Could you please check if the background color value for tooltip matches the spec?
Left one is from the figma and right one is the actual one
| cursor: pointer; | ||
|
|
||
| &:hover { | ||
| background: var(--color-w50); |
There was a problem hiding this comment.
we should also add a certain style when this button is tapped on mobile according to design
https://www.figma.com/design/p5V2MV7znMxdVekniseQkA?node-id=22-7008#750370863
| position: relative; | ||
| padding: 12px 16px; | ||
| border-radius: var(--size-s1); | ||
| background-color: var(--color-background-code-block); |
There was a problem hiding this comment.
It seems that this value is correct but for some reason the background of a code block on dark theme differs from design.
The left one is an actual code and the right one is the design from figma.
Probably the background color of the page differs and influences the code block style
| */ | ||
| .symbol:not(.token, .wrapped), code.block { | ||
| display: block; | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
There are some stylelint warnings here that would be good to apply, most of them are regarding the property order and could be autofixed
| const POPUP_TIMEOUT = 1200; | ||
|
|
||
| document.addEventListener('click', function (event) { | ||
| if (!(event.target instanceof Element)) { |
There was a problem hiding this comment.
Do we still need this check? it might be always true
This PR has changes for adjust the code block and the tooltip for copy of code and links:
KTL-1698 Dokka: adjust inline code block
KTL-1704 Dokka: adjust tooltip style
Here's how it looks like.
Code blocks
https://github.com/user-attachments/assets/ed720b20-ae33-486f-8bbf-3c206428fbb1
Links tooltips
https://github.com/user-attachments/assets/95b55a86-c7c7-4c60-9766-f3c56dda6c51