From a245b50e110f59c36044bac754081c9beb4ef579 Mon Sep 17 00:00:00 2001
From: Jamie Hewitt <jamie.hewitt15@gmail.com>
Date: Thu, 5 Jan 2023 11:26:16 +0000
Subject: [PATCH] Adding share icon to share button on profile page and
 updating styling

---
 src/@images/share.svg                          | 14 ++++++++++++++
 src/components/Profile/Header/Share.module.css |  7 ++++++-
 src/components/Profile/Header/Share.tsx        |  9 ++++++++-
 src/components/Profile/Header/index.tsx        |  3 ++-
 4 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/@images/share.svg

diff --git a/src/@images/share.svg b/src/@images/share.svg
new file mode 100644
index 000000000..1c25d99cd
--- /dev/null
+++ b/src/@images/share.svg
@@ -0,0 +1,14 @@
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 227.216 227.216" xml:space="preserve">
+<path d="M175.897,141.476c-13.249,0-25.11,6.044-32.98,15.518l-51.194-29.066c1.592-4.48,2.467-9.297,2.467-14.317
+	c0-5.019-0.875-9.836-2.467-14.316l51.19-29.073c7.869,9.477,19.732,15.523,32.982,15.523c23.634,0,42.862-19.235,42.862-42.879
+	C218.759,19.229,199.531,0,175.897,0C152.26,0,133.03,19.229,133.03,42.865c0,5.02,0.874,9.838,2.467,14.319L84.304,86.258
+	c-7.869-9.472-19.729-15.514-32.975-15.514c-23.64,0-42.873,19.229-42.873,42.866c0,23.636,19.233,42.865,42.873,42.865
+	c13.246,0,25.105-6.042,32.974-15.513l51.194,29.067c-1.593,4.481-2.468,9.3-2.468,14.321c0,23.636,19.23,42.865,42.867,42.865
+	c23.634,0,42.862-19.23,42.862-42.865C218.759,160.71,199.531,141.476,175.897,141.476z M175.897,15
+	c15.363,0,27.862,12.5,27.862,27.865c0,15.373-12.499,27.879-27.862,27.879c-15.366,0-27.867-12.506-27.867-27.879
+	C148.03,27.5,160.531,15,175.897,15z M51.33,141.476c-15.369,0-27.873-12.501-27.873-27.865c0-15.366,12.504-27.866,27.873-27.866
+	c15.363,0,27.861,12.5,27.861,27.866C79.191,128.975,66.692,141.476,51.33,141.476z M175.897,212.216
+	c-15.366,0-27.867-12.501-27.867-27.865c0-15.37,12.501-27.875,27.867-27.875c15.363,0,27.862,12.505,27.862,27.875
+	C203.759,199.715,191.26,212.216,175.897,212.216z"/>
+</svg>
diff --git a/src/components/Profile/Header/Share.module.css b/src/components/Profile/Header/Share.module.css
index b56b8b9ec..413176927 100644
--- a/src/components/Profile/Header/Share.module.css
+++ b/src/components/Profile/Header/Share.module.css
@@ -1,3 +1,8 @@
 .share {
-  padding: 10px;
+  float: right;
+}
+.icon {
+  display: inline-block;
+  margin-right: calc(var(--spacer) / 5);
+  fill: var(--brand-pink);
 }
diff --git a/src/components/Profile/Header/Share.tsx b/src/components/Profile/Header/Share.tsx
index 18ae2034f..70f9b2d46 100644
--- a/src/components/Profile/Header/Share.tsx
+++ b/src/components/Profile/Header/Share.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react'
 import styles from './Share.module.css'
 import Button from '@shared/atoms/Button'
+import ShareIcon from '@images/share.svg'
 
 export default function Share({
   accountId
@@ -12,7 +13,13 @@ export default function Share({
   }
   return (
     <div className={styles.share}>
-      <Button className={styles.button} onClick={copyLink} style="text">
+      <Button
+        className={styles.button}
+        onClick={copyLink}
+        style="text"
+        size="small"
+      >
+        <ShareIcon role="img" aria-label="Share" className={styles.icon} />
         Share
       </Button>
     </div>
diff --git a/src/components/Profile/Header/index.tsx b/src/components/Profile/Header/index.tsx
index 66c0e88a3..3ec0a525d 100644
--- a/src/components/Profile/Header/index.tsx
+++ b/src/components/Profile/Header/index.tsx
@@ -36,11 +36,12 @@ export default function AccountHeader({
     <div className={styles.grid}>
       <div>
         <Account accountId={accountId} />
-        <Share accountId={accountId} />
+
         <Stats accountId={accountId} />
       </div>
 
       <div>
+        <Share accountId={accountId} />
         <Markdown text={profile?.description} className={styles.description} />
         {isDescriptionTextClamped() ? (
           <span className={styles.more} onClick={toogleShowMore}>