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

@@ -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>

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}`;
+    }
 
 });

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);
 }

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>

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>

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>

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>