oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

Adding share icon to share button on profile page and updating styling

Browse Source
This commit is contained in:
Jamie Hewitt 2023-01-05 11:26:16 +00:00
parent 2344fc74bf
commit a245b50e11
4 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/@images/share.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 1.4 KiB

7
src/components/Profile/Header/Share.module.css
View File

@ -1,3 +1,8 @@
.share { .share {
padding: 10px; float: right;
}
.icon {
display: inline-block;
margin-right: calc(var(--spacer) / 5);
fill: var(--brand-pink);
} }

9
src/components/Profile/Header/Share.tsx
View File

@ -1,6 +1,7 @@
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import styles from './Share.module.css' import styles from './Share.module.css'
import Button from '@shared/atoms/Button' import Button from '@shared/atoms/Button'
import ShareIcon from '@images/share.svg'
export default function Share({ export default function Share({
accountId accountId
@ -12,7 +13,13 @@ export default function Share({
} }
return ( return (
<div className={styles.share}> <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 Share
</Button> </Button>
</div> </div>

3
src/components/Profile/Header/index.tsx
View File

@ -36,11 +36,12 @@ export default function AccountHeader({
<div className={styles.grid}> <div className={styles.grid}>
<div> <div>
<Account accountId={accountId} /> <Account accountId={accountId} />
<Share accountId={accountId} />
<Stats accountId={accountId} /> <Stats accountId={accountId} />
</div> </div>
<div> <div>
<Share accountId={accountId} />
<Markdown text={profile?.description} className={styles.description} /> <Markdown text={profile?.description} className={styles.description} />
{isDescriptionTextClamped() ? ( {isDescriptionTextClamped() ? (
<span className={styles.more} onClick={toogleShowMore}> <span className={styles.more} onClick={toogleShowMore}>