From 8d140d0961a106fcb4911b5a8336ca6d93e5e872 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 16 Jul 2020 16:01:39 +0200
Subject: [PATCH] Styled links section in Portal settings

no refs.
- applied basic styles to link section in sidebar of Portal settings
---
 app/components/modal-members-modal-settings.hbs | 14 +++++++-------
 app/styles/layouts/portal-settings.css          | 11 +++++++++++
 public/assets/icons/copy.svg                    |  1 +
 3 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 public/assets/icons/copy.svg

diff --git a/app/components/modal-members-modal-settings.hbs b/app/components/modal-members-modal-settings.hbs
index 833641410..105e46af6 100644
--- a/app/components/modal-members-modal-settings.hbs
+++ b/app/components/modal-members-modal-settings.hbs
@@ -231,28 +231,28 @@
                     {{/if}}
                 </div>
                 <div class="gh-portal-setting-section divider-top">
-                    <h4 class="gh-portal-setting-sectionheading"> Links </h4>
+                    <h4 class="gh-portal-setting-sectionheading">Links</h4>
                     <GhFormGroup>
                         <div class="flex w-100 justify-between items-center">
                             <h4 class="gh-portal-setting-title">Show modal</h4>
                             <div {{action (toggle "isShowModalLink" this)}} class="blue pointer f8"> {{if this.isShowModalLink "Data Attribute" "Link"}} </div>
                         </div>
-                        <div class="flex items-center justify-center mt1 gh-show-modal-link-form">
+                        <div class="flex items-center justify-center mt1 gh-show-modal-link-form relative">
                             <GhTextInput
                                 @value={{this.showModalLinkOrAttribute}}
                                 @type="text"
                                 @disabled={{true}}
                             />
-                            <button type="button" {{action (perform this.copyLinkOrAttribute)}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
+                            <button type="button" {{action (perform this.copyLinkOrAttribute)}} class="gh-portal-setting-copy">
                                 {{#if this.copyLinkOrAttribute.isRunning}}
-                                    {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
+                                    {{svg-jar "check-circle" class="w4 v-mid mr1 stroke-darkgrey"}} Copied
                                 {{else}}
-                                    Copy
+                                    <span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
                                 {{/if}}
                             </button>
                         </div>
-                        <div class="mt1">
-                            <span onclick={{action "switchPreviewPage" "links"}} class="blue pointer f8">Show more...</span>
+                        <div>
+                            <span onclick={{action "switchPreviewPage" "links"}} class="blue pointer f7">Show more</span>
                         </div>
                     </GhFormGroup>
                 </div>
diff --git a/app/styles/layouts/portal-settings.css b/app/styles/layouts/portal-settings.css
index 9f8071214..9eb967d81 100644
--- a/app/styles/layouts/portal-settings.css
+++ b/app/styles/layouts/portal-settings.css
@@ -224,4 +224,15 @@
 
 .gh-portal-button-uploadicon:hover span svg {
     fill: var(--darkgrey);
+}
+
+.gh-portal-setting-copy {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    height: 34px;
+    padding: 3px 8px 5px 9px;
+    border-radius: 2px;
+    background: var(--white);
+    border: 1px solid var(--whitegrey);
 }
\ No newline at end of file
diff --git a/public/assets/icons/copy.svg b/public/assets/icons/copy.svg
new file mode 100644
index 000000000..0956b637c
--- /dev/null
+++ b/public/assets/icons/copy.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.333 1.75c-.42 0-.822.167-1.12.464-.296.297-.463.7-.463 1.12v5.833c0 .42.167.822.464 1.12.297.296.7.463 1.12.463h3.5c.413 0 .75.336.75.75s-.337.75-.75.75h-3.5c-.818 0-1.603-.325-2.18-.903-.58-.579-.904-1.363-.904-2.18V3.333c0-.817.325-1.602.903-2.18C1.731.575 2.516.25 3.333.25h3.5c.818 0 1.602.325 2.18.903.579.578.904 1.363.904 2.18V4.5c0 .414-.336.75-.75.75-.415 0-.75-.336-.75-.75V3.333c0-.42-.167-.822-.464-1.12-.297-.296-.7-.463-1.12-.463h-3.5z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.389 5.25c-.445 0-.806.36-.806.806v7.388c0 .445.361.806.806.806h5.055c.445 0 .806-.36.806-.806V6.056c0-.445-.36-.806-.806-.806H8.39zm-2.306.806c0-1.274 1.033-2.306 2.306-2.306h5.055c1.274 0 2.306 1.032 2.306 2.306v7.388c0 1.274-1.032 2.306-2.306 2.306H8.39c-1.273 0-2.306-1.032-2.306-2.306V6.056z" fill="#000"/></svg>
\ No newline at end of file