diff --git a/ds_judgements_public_ui/sass/includes/_copy_to_clipboard_link.scss b/ds_judgements_public_ui/sass/includes/_copy_to_clipboard_link.scss index 55d922c69..c21ea8e6f 100644 --- a/ds_judgements_public_ui/sass/includes/_copy_to_clipboard_link.scss +++ b/ds_judgements_public_ui/sass/includes/_copy_to_clipboard_link.scss @@ -17,6 +17,7 @@ font-size: $typography-sm-text-size; text-align: center; + text-decoration: underline; opacity: 0; background: $color-white; @@ -41,5 +42,12 @@ border-top: 1px solid $color-grey; border-right: 1px solid $color-grey; } + + &--copied { + left: 27px; + width: auto; + color: $color-dark-grey; + text-decoration: none; + } } } diff --git a/ds_judgements_public_ui/sass/includes/_results.scss b/ds_judgements_public_ui/sass/includes/_results.scss index c3aa03eda..dfce371f2 100644 --- a/ds_judgements_public_ui/sass/includes/_results.scss +++ b/ds_judgements_public_ui/sass/includes/_results.scss @@ -18,12 +18,8 @@ &__result-atom-feed-button { display: flex; flex-direction: column; - gap: $space-3; padding-right: $space-6; - @media (min-width: $grid-breakpoint-large) { - } - label { font-family: $font-roboto; font-size: $typography-md-text-size; @@ -37,6 +33,10 @@ height: 33px; margin-right: auto; } + + @media (min-width: $grid-breakpoint-large) { + gap: $space-3; + } } &__result-list-container { diff --git a/ds_judgements_public_ui/static/js/src/modules/copy_link_tooltip.js b/ds_judgements_public_ui/static/js/src/modules/copy_link_tooltip.js index e0fe02fc3..d7eb37766 100644 --- a/ds_judgements_public_ui/static/js/src/modules/copy_link_tooltip.js +++ b/ds_judgements_public_ui/static/js/src/modules/copy_link_tooltip.js @@ -25,9 +25,11 @@ const addCopyLinkTooltip = function (link) { link.addEventListener("click", function (event) { copyLinkToClipboard(event, link.href); tooltip.innerHTML = "Copied!"; + tooltip.classList.add("copy-to-clipboard-link__tooltip--copied"); setTimeout(() => { tooltip.innerHTML = tooltipText; + tooltip.classList.remove("copy-to-clipboard-link__tooltip--copied"); }, 3000); }); };