Merge pull request #97 from poap-xyz/release/v1.6.2

Release v1.6.2
poap-xyz · Aug 9, 2023 · a73ec66 · a73ec66
2 parents f95df0b + 6f4898f
commit a73ec66
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 16 deletions.
diff --git 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
@@ -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 = <OpenNewWindow width={16} height={16} />
+  }
   return (
     <a
       href={href}
@@ -15,12 +19,6 @@ function LinkButton({ title, icon, href, children, external = false, secondary =
             {icon}
           </span>
         )}
-        {external && (
-          <svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg" className="external">
-            <path d="M6.25622 0.0429688C5.84496 0.0429688 5.51157 0.442321 5.51157 0.934947C5.51157 1.42757 5.84496 1.82693 6.25622 1.82693H8.18171L3.49575 7.44005C3.20494 7.78839 3.20494 8.35316 3.49575 8.7015C3.78655 9.04984 4.25803 9.04984 4.54883 8.7015L9.23479 3.08837V5.39484C9.23479 5.88747 9.56818 6.28682 9.97943 6.28682C10.3907 6.28682 10.7241 5.88747 10.7241 5.39484V0.934947C10.7241 0.442321 10.3907 0.0429688 9.97943 0.0429688H6.25622Z" fill="#473e6b" />
-            <path d="M1.78836 1.82693C0.965849 1.82693 0.299072 2.62563 0.299072 3.61088V10.7467C0.299072 11.732 0.965848 12.5307 1.78836 12.5307H7.7455C8.56801 12.5307 9.23479 11.732 9.23479 10.7467V8.07078C9.23479 7.57815 8.9014 7.1788 8.49015 7.1788C8.07889 7.1788 7.7455 7.57815 7.7455 8.07078V10.7467H1.78836V3.61088L4.02229 3.61088C4.43354 3.61088 4.76693 3.21153 4.76693 2.7189C4.76693 2.22628 4.43354 1.82693 4.02229 1.82693H1.78836Z" fill="#473e6b" />
-          </svg>
-        )}
         {children}
       </span>
     </a>

diff --git a/src/components/Stats.js b/src/components/Stats.js
@@ -10,12 +10,7 @@ function Stats({ stats, highlight }) {
         {entries.map(([statName, stat], index) => (
           <div
             key={statName}
-            className={`stat ${highlight === statName ? 'highlight' : 'common'}`}
-            style={{
-              paddingLeft: highlight !== statName && index === 0 ? '.5rem' : undefined,
-              paddingRight: highlight !== statName && index + 1 === entries.length ? '.5rem' : undefined,
-              marginLeft: highlight && highlight !== statName ? '.5rem' : undefined,
-            }}
+            className={`stat ${highlight === statName ? 'highlight' : 'common'}${typeof stat === 'object' && stat.link ? ' with-link' : ''}`}
           >
             <div className="stat-content">
               {typeof stat === 'object'

diff --git 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
               </ButtonExportAddressCsv>,
+              <LinkButton
+                key="moments"
+                title={`View uploaded moments on ${event.name}`}
+                href={`${POAP_MOMENTS_URL}/drop/${event.id}`}
+                external={true}
+                secondary={true}
+                icon={(
+                  <svg style={{ height: '16px', width: '16px' }} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.3069 1.40933H11.9604C11.4851 0.994819 10.9307 0.746114 10.297 0.746114H8.31683C7.84158 0.331606 7.28713 0 6.57426 0H2.53465C1.10891 0.0829016 0 1.24352 0 2.65285V13.3471C0 14.7565 1.10891 16 2.53465 16H6.73267C7.36634 16 8 15.7513 8.47525 15.2539H10.4554C11.0891 15.2539 11.6436 15.0052 12.1188 14.5907H13.4653C14.8119 14.5907 16 13.4301 16 11.9378V4.06218C15.8416 2.65285 14.7327 1.40933 13.3069 1.40933ZM14.3366 12.0207C14.3366 12.601 13.8614 13.0984 13.3069 13.0984H12.8317C12.8317 12.9326 12.9109 12.8497 12.9109 12.6839V3.39896C12.9109 3.23316 12.9109 3.15026 12.8317 2.98446H13.3069C13.8614 2.98446 14.3366 3.48186 14.3366 4.06218V12.0207ZM1.50495 13.4301V2.65285C1.50495 2.07254 1.9802 1.57513 2.53465 1.57513H5.14851H6.57426H6.73267C7.20792 1.57513 7.52475 1.90674 7.68317 2.32124C7.68317 2.40414 7.76238 2.56995 7.76238 2.65285V13.3471C7.76238 13.4301 7.76238 13.5959 7.68317 13.6788C7.52475 14.0933 7.20792 14.4249 6.73267 14.4249H6.49505H5.14851H2.53465C1.90099 14.4249 1.50495 14.0104 1.50495 13.4301ZM9.18812 13.4301V13.1813V2.90155V2.65285C9.18812 2.56995 9.18812 2.40414 9.18812 2.32124H9.9802H10.3762C10.7723 2.32124 11.1683 2.56995 11.3267 2.98446C11.4059 3.15026 11.4059 3.23316 11.4059 3.39896V12.6839C11.4059 12.8497 11.4059 13.0155 11.3267 13.0984C11.1683 13.513 10.7723 13.7617 10.3762 13.7617H9.9802H9.18812C9.18812 13.5959 9.18812 13.513 9.18812 13.4301Z" />
+                  </svg>
+                )}
+              />,
             ]}
           >
             {caching &&

diff --git 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
@@ -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
@@ -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,18 +79,22 @@
   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;
 }
 
 .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
@@ -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;
 }