From 3664db491dafd71a6143588993ca295052c55deb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?=
 <danielvanderwinden@ghost.org>
Date: Tue, 26 Mar 2024 19:38:07 +0100
Subject: [PATCH] Updated social share modal layout (#19925)

- Changed the layout of the modal
- Added a fallback state for the cover image
- Added possibility to copy the publication link
- Correct hover states for social media buttons

---------

Co-authored-by: Ryan Feigenbaum <48868107+royalfig@users.noreply.github.com>
---
 ghost/admin/app/components/modal-share.hbs    | 114 +++++-------
 ghost/admin/app/components/modal-share.js     |  18 +-
 ghost/admin/app/styles/layouts/dashboard.css  | 166 ++++++++++++------
 ghost/admin/public/assets/icons/picture.svg   |   1 +
 .../public/assets/icons/social-facebook.svg   |   2 +-
 .../public/assets/icons/social-linkedin.svg   |   2 +-
 ghost/admin/public/assets/icons/social-x.svg  |   2 +-
 7 files changed, 177 insertions(+), 128 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/picture.svg

diff --git a/ghost/admin/app/components/modal-share.hbs b/ghost/admin/app/components/modal-share.hbs
index 433fc2de62..aa8d4d1711 100644
--- a/ghost/admin/app/components/modal-share.hbs
+++ b/ghost/admin/app/components/modal-share.hbs
@@ -6,97 +6,69 @@
       <span class="hidden">Close</span>
   </a>
 
-  <div class="gh-post-bookmark-container">
-    <div class="gh-post-bookmark">
-      {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
-      {{#if imageUrl}}
-      <div class="gh-post-bookmark-image">
+  <div class="share-card-container">
+    {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}}
+    {{#if imageUrl}}
+      <div class="share-card-image">
         <img src={{imageUrl}} alt="" role="presentation" />
       </div>
-      {{/if}}
-
-      <div class="gh-post-bookmark-content">
-        <div class="gh-post-bookmark-title">
-          {{get-setting "title"}}
-        </div>
-
-        <div class="gh-post-bookmark-text truncate">
-          {{ get-setting "description"}}
-        </div>
-
-        <div class="gh-post-bookmark-details">
-          {{#if (get-setting "icon")}}
-            <div class="gh-site-icon"><img src={{get-setting "icon"}} alt="" role="presentation" /></div>
-          {{/if}}
-
-          <div class="gh-post-bookmark-site-title">
-            {{get-setting "title"}}
-          </div>
-        </div>
-      </div>
-      {{/let}}
+    {{else}}
+    <div class="share-card-image placeholder">
+      {{svg-jar "picture"}}
     </div>
+    {{/if}}
+
+    <div class="share-card-content">
+      <div class="share-card-title">
+        {{get-setting "title"}}
+      </div>
+      <div class="share-card-description">
+        {{ get-setting "description"}}
+      </div>
+    </div>
+    {{/let}}
   </div>
 
-  <span class="tip">You can set your publication icon, cover image and description in <a href="settings/design/edit/?ref=share-modal" title="Adjust settings">Settings</a></span>
 
-  <ul class="gh-share-links">
+  <span class="tip">Set your publication’s cover image and description in <a href="settings/design/edit/?ref=share-modal" title="Adjust settings">Settings</a></span>
+
+  <div class="copy-publication-link">
+    <span>
+      {{ this.config.blogUrl }}
+    </span>
+    <GhTaskButton
+      data-test-button="copy-share-link"
+      @buttonText="Copy"
+      @task={{this.copySiteUrl}}
+      @successText="Copied!"
+      @successClass="gh-share-link-success"
+      @class="gh-share-link" />
+    </div>
+
+  <ul class="share-links">
     <li>
-    {{!-- <GhTaskButton
-            data-test-button="copy-share-link"
-            @buttonText="Copy a link to your publication"
-            @task={{this.copySiteUrl}}
-            @successText="Link copied"
-            @successClass="gh-share-link-success"
-            @class="gh-share-link" /> --}}
-      <a href="http://google.com" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Copy link"> 
-        <div class="gh-share-link-content">
-          <span>
-            {{svg-jar "link" }}
-          </span>
-          Copy a link to your publication
-        </div>
-        <div class="gh-onboarding-item-action">
-          {{svg-jar "arrow-right-tail"}}
-        </div>
+      <a href="{{this.xShareUrl}}" target="_blank" rel="noopener noreferrer" class="share-link" title="Share your publication on X">
+        <span>
+          {{svg-jar "social-x"}}
+        </span>
       </a>
     </li>
     <li>
-      <a href="https://twitter.com/intent/tweet?text=This%20is%20an%20example%20of%20a%20pre-written%20tweet" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on X">
-        <div class="gh-share-link-content">
-          <span>
-            {{svg-jar "social-x"}}
-          </span>
-          Share on X
-        </div>
-        <div class="gh-onboarding-item-action">
-          {{svg-jar "arrow-right-tail"}}
-        </div>
-      </a>
-    </li>
-    <li>
-      <a href="http://facebook.com" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on Facebook">
-        <div class="gh-share-link-content">
+      <a href="{{this.facebookShareUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on Facebook">
+        <div class="share-link-content">
           <span>
             {{svg-jar "social-facebook"}}
           </span>
-          Share on Facebook
-        </div>
-        <div class="gh-onboarding-item-action">
-          {{svg-jar "arrow-right-tail"}}
         </div>
+  
       </a>
     </li>
     <li>
-      <a href="http://linkedin.com" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on LinkedIn">
-        <div class="gh-share-link-content">
+      <a href="{{this.linkedInShareUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on LinkedIn">
+        <div class="share-link-content">
           <span>
             {{svg-jar "social-linkedin"}}
           </span>
-          Share on LinkedIn
-        </div>
-        <div class="gh-onboarding-item-action">
-          {{svg-jar "arrow-right-tail"}}
         </div>
       </a>
     </li>
diff --git a/ghost/admin/app/components/modal-share.js b/ghost/admin/app/components/modal-share.js
index 60a1bdce3e..2975f5037c 100644
--- a/ghost/admin/app/components/modal-share.js
+++ b/ghost/admin/app/components/modal-share.js
@@ -10,6 +10,22 @@ export default ModalComponent.extend({
         copyTextToClipboard(this.config.blogUrl);
         yield timeout(1000);
         return true;
-    })
+    }),
+
+    get encodedUrl() {
+        return encodeURIComponent(this.config.blogUrl);
+    },
+
+    get facebookShareUrl() {
+        return `https://www.facebook.com/sharer/sharer.php?u=${this.encodedUrl}`;
+    },
+
+    get linkedInShareUrl() {
+        return `https://www.linkedin.com/sharing/share-offsite/?url=${this.encodedUrl}`;
+    },
+
+    get xShareUrl() {
+        return `https://twitter.com/intent/tweet?url=${this.encodedUrl}`;
+    }
 
 });
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index c6d7051801..8eb6bee6aa 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -2960,93 +2960,153 @@ Onboarding checklist */
 /* ---------------------------------
 Share publication modal */
 
-.gh-site-preview-container {
-    padding: 24px;
+.share-card-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     border-radius: 6px;
     border: 1px solid var(--whitegrey);
     background: var(--white);
     transition: all .3s ease-in-out;
 }
 
-.gh-post-bookmark {
-    box-shadow: none;
-    border: 1px solid var(--whitegrey);
+.share-card-image {
+    max-height: 196px;
 }
 
-.gh-post-bookmark:hover {
-    box-shadow: none;
-    transform: none;
+.share-card-image img {
+    border-radius: 6px 6px 0 0;
+    object-fit: cover;
+    width: 484px;
+    height: 196px;
 }
 
-.gh-site-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-}
-
-.gh-site-icon img {
-    border-radius: 2px;
-}
-
-.gh-site-image {
+.placeholder {
     width: 100%;
-    height: auto;
-    border-radius: 6px;
-    margin-bottom: 24px;
+    height: 196px;
+    border-radius: 6px 6px 0 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--whitegrey);
 }
 
-.gh-share-links {
+.placeholder svg {
+    width: 40px;
+    height: 40px;
+    stroke: var(--lightgrey);
+}
+
+.share-card-content {
+    padding: 24px;
+    width: 100%;
+}
+
+.share-card-title {
+    font-size: 1.7rem;
+    font-weight: 600;
+}
+
+.copy-publication-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 40px;
+    background: #fafafb;
+    border: 1px solid var(--whitegrey);
+    border-radius: 4px;
+    padding: 8px 16px;
+    min-height: 48px;
+    font-weight: 400;
+    color: var(--darkgrey);
+    transition: all .3s ease-in-out;
+}
+
+.copy-publication-link:hover {
+    border: 1px solid var(--lightgrey);
+}
+
+.copy-publication-link .gh-share-link {
+    font-weight: 600;
+}
+
+.copy-publication-link .gh-share-link-success {
+    color: var(--green);
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.share-links {
     list-style: none;
     padding: 0;
-    margin: 32px 0 0 0;
+    margin: 16px 0 0 0;
+    display: flex;
+    flex-direction: row;
 }
 
-.gh-share-links li {
+.share-links li { 
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--darkgrey);
     line-height: 1.5;
     width: 100%;
+    margin: 0 8px 0 0;
+    vertical-align: middle;
+}
+
+.share-links li:last-child {
     margin: 0;
 }
 
-.gh-share-links li:last-child a {
-    border-bottom: 0 none;
+.share-links li a { 
+    display: block;
+    padding: 20px 0;
+    text-align: center;
+    border: 1px solid var(--whitegrey);
+    border-radius: 4px;
+    transition: all .3s ease-in-out;
 }
 
-.gh-share-link {
-    color: var(--darkgrey);
-    padding: 16px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #ebeef0;
+.share-links li a:hover {
+    box-shadow: 0 2px 4px rgb(0 0 0 / 7%);
 }
 
-a.gh-share-link:hover .gh-onboarding-item-action {
-    transform: translateX(5px);
+.share-links li span {
+    vertical-align: middle;
+    height: 20px;
+    display: block;
 }
 
-.gh-share-link-content {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-}
-
-.gh-share-links li span {
-    display: flex;
-}
-
-.gh-share-links li span svg {
-    width: 16px;
-    height: 16px;
+.share-links li a span svg {
+    width: 20px;
+    height: 20px;
     fill: var(--midgrey);
-    margin: 0 16px 0 0;
-    stroke-width: 1.5;
+}
+
+.share-links svg path.social-facebook_svg__fb {
+    fill: var(--midgrey);
+}
+
+.share-links svg path.social-linkedin_svg__linkedin {
+    fill: var(--midgrey);
+}
+
+.share-links a:hover svg path.social-facebook_svg__fb {
+    fill: #1977f3;
+}
+
+
+.share-links a:hover svg path.social-linkedin_svg__linkedin {
+    fill: #007ebb;
+}
+
+.share-links a:hover svg path.social-x_svg__x {
+    fill: var(--black);
 }
 
 span.tip {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
     font-weight: 400;
     line-height: 1.5;
     padding: 0;
@@ -3056,7 +3116,7 @@ span.tip {
     display: block;
 }
 
-span.tip a {
+span.tip a { 
     text-decoration: underline;
     color: var(--midgrey);
 }
diff --git a/ghost/admin/public/assets/icons/picture.svg b/ghost/admin/public/assets/icons/picture.svg
new file mode 100644
index 0000000000..be5edb3e93
--- /dev/null
+++ b/ghost/admin/public/assets/icons/picture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.625 -0.625 16 16" height="16" width="16" id="picture.svg" stroke="currentColor"><desc>Picture Landscape Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>picture</title><path d="M1.3828124999999998 0.46093749999999994h11.984374999999998s0.9218749999999999 0 0.9218749999999999 0.9218749999999999v11.984374999999998s0 0.9218749999999999 -0.9218749999999999 0.9218749999999999H1.3828124999999998s-0.9218749999999999 0 -0.9218749999999999 -0.9218749999999999V1.3828124999999998s0 -0.9218749999999999 0.9218749999999999 -0.9218749999999999" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"></path><path d="m3.2265624999999996 10.601562499999998 2.1276875 -2.8369166666666663a0.9218749999999999 0.9218749999999999 0 0 1 1.3895729166666666 -0.09894791666666666L7.374999999999999 8.296874999999998l2.0281249999999997 -2.7041666666666666a0.9218749999999999 0.9218749999999999 0 0 1 1.4749999999999999 0l1.6409374999999997 2.1879166666666663" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"></path><path d="M2.7656249999999996 3.9179687499999996a1.1523437499999998 1.1523437499999998 0 1 0 2.3046874999999996 0 1.1523437499999998 1.1523437499999998 0 1 0 -2.3046874999999996 0" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"></path><path d="m0.46093749999999994 10.601562499999998 13.828124999999998 0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"></path></svg>
\ No newline at end of file
diff --git a/ghost/admin/public/assets/icons/social-facebook.svg b/ghost/admin/public/assets/icons/social-facebook.svg
index ceebd7e782..20a4f91b47 100644
--- a/ghost/admin/public/assets/icons/social-facebook.svg
+++ b/ghost/admin/public/assets/icons/social-facebook.svg
@@ -1,5 +1,5 @@
 <svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
   <title>social-facebook</title>
-  <path d="M20 40.004c11.046 0 20-8.955 20-20 0-11.046-8.954-20-20-20s-20 8.954-20 20c0 11.045 8.954 20 20 20z" fill="#1977F3"/>
+  <path d="M20 40.004c11.046 0 20-8.955 20-20 0-11.046-8.954-20-20-20s-20 8.954-20 20c0 11.045 8.954 20 20 20z" fill="#1977f3" class="fb" />
   <path d="m27.785 25.785.886-5.782h-5.546V16.25c0-1.58.773-3.125 3.26-3.125h2.522V8.204s-2.29-.39-4.477-.39c-4.568 0-7.555 2.767-7.555 7.781v4.408h-5.08v5.782h5.08v13.976a20.08 20.08 0 0 0 3.125.242c1.063 0 2.107-.085 3.125-.242V25.785h4.66z" fill="#fff"/>
 </svg>
\ No newline at end of file
diff --git a/ghost/admin/public/assets/icons/social-linkedin.svg b/ghost/admin/public/assets/icons/social-linkedin.svg
index 11f4ccb581..286454af0b 100644
--- a/ghost/admin/public/assets/icons/social-linkedin.svg
+++ b/ghost/admin/public/assets/icons/social-linkedin.svg
@@ -1,6 +1,6 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_537_833)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.77778 16H14.2222C15.2041 16 16 15.2041 16 14.2222V1.77778C16 0.795938 15.2041 0 14.2222 0H1.77778C0.795938 0 0 0.795938 0 1.77778V14.2222C0 15.2041 0.795938 16 1.77778 16Z" fill="#007EBB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.77778 16H14.2222C15.2041 16 16 15.2041 16 14.2222V1.77778C16 0.795938 15.2041 0 14.2222 0H1.77778C0.795938 0 0 0.795938 0 1.77778V14.2222C0 15.2041 0.795938 16 1.77778 16Z" fill="#007ebb" class="linkedin"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7782 13.7777H11.4039V9.73375C11.4039 8.625 10.9826 8.0054 10.105 8.0054C9.15035 8.0054 8.65156 8.65019 8.65156 9.73375V13.7777H6.3634V6.07402H8.65156V7.11171C8.65156 7.11171 9.33955 5.83866 10.9743 5.83866C12.6084 5.83866 13.7782 6.83649 13.7782 8.90022V13.7777ZM3.63362 5.06528C2.85422 5.06528 2.22266 4.42876 2.22266 3.64373C2.22266 2.85869 2.85422 2.22217 3.63362 2.22217C4.41302 2.22217 5.04421 2.85869 5.04421 3.64373C5.04421 4.42876 4.41302 5.06528 3.63362 5.06528ZM2.45211 13.7777H4.83808V6.07402H2.45211V13.7777Z" fill="white"/>
 </g>
 <defs>
diff --git a/ghost/admin/public/assets/icons/social-x.svg b/ghost/admin/public/assets/icons/social-x.svg
index 6fffdb2321..619528e23a 100644
--- a/ghost/admin/public/assets/icons/social-x.svg
+++ b/ghost/admin/public/assets/icons/social-x.svg
@@ -1,3 +1,3 @@
     <svg viewBox="0 0 24 24" aria-hidden="true">
-        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" class="x"></path>
     </svg>
\ No newline at end of file