diff --git a/package.json b/package.json index 4360fef..8ac68a9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@poap-xyz/poap-family", - "version": "1.6.1", + "version": "1.6.2", "author": { "name": "POAP", "url": "https://poap.xyz" diff --git a/src/components/LinkButton.js b/src/components/LinkButton.js index 45191f6..69b1cd9 100644 --- a/src/components/LinkButton.js +++ b/src/components/LinkButton.js @@ -1,6 +1,10 @@ +import { OpenNewWindow } from 'iconoir-react' import '../styles/link-button.css' function LinkButton({ title, icon, href, children, external = false, secondary = false }) { + if (external && !icon) { + icon = + } return ( )} - {external && ( - - - - - )} {children} diff --git a/src/components/Stats.js b/src/components/Stats.js index 0b11ce9..14cdcc6 100644 --- a/src/components/Stats.js +++ b/src/components/Stats.js @@ -10,12 +10,7 @@ function Stats({ stats, highlight }) { {entries.map(([statName, stat], index) => (
{typeof stat === 'object' diff --git a/src/pages/Event.js b/src/pages/Event.js index 55e964f..760cff2 100644 --- a/src/pages/Event.js +++ b/src/pages/Event.js @@ -24,6 +24,7 @@ import Progress from '../components/Progress' import ButtonExportAddressCsv from '../components/ButtonExportAddressCsv' import ButtonAdd from '../components/ButtonAdd' import ButtonExpand from '../components/ButtonExpand' +import LinkButton from '../components/LinkButton' import '../styles/event.css' function Event() { @@ -274,7 +275,8 @@ function Event() { 'moments': metrics && metrics.momentsUploaded > 0 ? { text: formatStat(metrics.momentsUploaded), - link: `${POAP_MOMENTS_URL}/drop/${event.id}`, + title: `Upload moment on ${event.name}`, + link: `${POAP_MOMENTS_URL}/upload?drop=${event.id}`, external: true, } : undefined, @@ -291,6 +293,18 @@ function Event() { > export csv , + + + + )} + />, ]} > {caching && diff --git a/src/styles/button.css b/src/styles/button.css index 06ecb71..1ab5595 100644 --- a/src/styles/button.css +++ b/src/styles/button.css @@ -20,6 +20,8 @@ .button.primary .button-content { background-color: #968cff; color: white; + stroke: white; + fill: white; border-color: #5e58a5; } @@ -30,12 +32,16 @@ .button.secondary:hover .button-content { background-color: #968cff; color: white; + stroke: white; + fill: white; border-color: #5e58a5; } .button.active .button-content { background-color: #968cff; color: white; + stroke: white; + fill: white; font-weight: 700; border-color: #5e58a5; } @@ -44,6 +50,8 @@ background-color: #f5f4ff; border-color: #dddaff; color: lightslategray; + stroke: lightslategray; + fill: lightslategray; opacity: .8; cursor: default; } @@ -63,6 +71,8 @@ cursor: pointer; background-color: white; color: #7c72e2; + stroke: #7c72e2; + fill: #7c72e2; border: .1rem solid #dddaff; font-weight: 700; transition: background-color .3s ease-out,transform .3s ease-out,border-color .3s ease-out; diff --git a/src/styles/event-buttons.css b/src/styles/event-buttons.css index ad93961..b732118 100644 --- a/src/styles/event-buttons.css +++ b/src/styles/event-buttons.css @@ -17,3 +17,7 @@ display: flex; gap: .5rem; } + +.event-buttons .buttons a.link-button.secondary { + margin-top: -.4rem; +} diff --git a/src/styles/link-button.css b/src/styles/link-button.css index 85e3cd3..a4e615c 100644 --- a/src/styles/link-button.css +++ b/src/styles/link-button.css @@ -48,6 +48,8 @@ .link-button.primary .link-button-content { color: white; + stroke: white; + fill: white; background-color: #968cff; border-color: #473e6b; transition: background-color .3s ease-out,transform .3s ease-out,border-color .3s ease-out; @@ -77,6 +79,8 @@ padding: 0 .8rem; background-color: white; color: #7c72e2; + stroke: #7c72e2; + fill: #7c72e2; border: .1rem solid #dddaff; transition: background-color .3s ease-out,transform .3s ease-out,border-color .3s ease-out; } @@ -84,11 +88,13 @@ .link-button.secondary:hover .link-button-content { background-color: #968cff; color: white; + stroke: white; + fill: white; border-color: #5e58a5; } .link-button .link-button-content .link-button-icon { position: relative; top: 2px; - margin-right: .1rem; + margin-right: .25rem; } diff --git a/src/styles/stats.css b/src/styles/stats.css index 3c052f5..91338af 100644 --- a/src/styles/stats.css +++ b/src/styles/stats.css @@ -10,6 +10,18 @@ border-color: #efeeff; } +.stats.highlighted .stat.common { + margin-left: .5rem; +} + +.stats.highlighted .stat.common:first-child { + padding-left: .5rem; +} + +.stats.highlighted .stat.common:last-child { + padding-right: .5rem; +} + .stats .stats-content { margin: -.35rem; display: flex; @@ -29,6 +41,10 @@ background-color: #efeeff; } +.stat.with-link:hover a.stat-name { + text-decoration: underline; +} + .stat .stat-content { display: flex; flex-direction: column; @@ -58,7 +74,7 @@ margin-top: .2rem; } -.stat .stat-name[title] { +.stat span.stat-name[title] { cursor: help; text-decoration: underline dotted; }