Merge pull request #102 from poap-xyz/release/v1.6.5

Release v1.6.5
poap-xyz · Aug 9, 2023 · c73fe09 · c73fe09
2 parents 59fb2d9 + d086247
commit c73fe09
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poap-xyz/poap-family",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "author": {
     "name": "POAP",
     "url": "https://poap.xyz"

diff --git a/src/components/ButtonGroup.js b/src/components/ButtonGroup.js
@@ -1,8 +1,8 @@
 import '../styles/button-group.css'
 
-function ButtonGroup({ children, right = false }) {
+function ButtonGroup({ children, right = false, vertical = false }) {
   return (
-    <div className={`button-group${right ? ' right' : ''}`}>
+    <div className={`button-group${right ? ' right' : ''}${vertical ? ' vertical' : ''}`}>
       {children}
     </div>
   )

diff --git a/src/components/ButtonMenu.js b/src/components/ButtonMenu.js
@@ -0,0 +1,17 @@
+import ButtonGroup from './ButtonGroup'
+import '../styles/button-menu.css'
+
+function ButtonMenu({ primary, buttons }) {
+  return (
+    <div className="button-menu">
+      <div className="button-menu-primary">{primary}</div>
+      <div className="button-menu-content">
+        <ButtonGroup vertical={true}>
+          {buttons}
+        </ButtonGroup>
+      </div>
+    </div>
+  )
+}
+
+export default ButtonMenu
diff --git a/src/pages/Event.js b/src/pages/Event.js
@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
+import { Upload } from 'iconoir-react'
 import { formatStat } from '../utils/number'
 import { formatDateAgo } from '../utils/date'
 import { HTMLContext } from '../stores/html'
@@ -24,6 +25,7 @@ import Progress from '../components/Progress'
 import ButtonExportAddressCsv from '../components/ButtonExportAddressCsv'
 import ButtonAdd from '../components/ButtonAdd'
 import ButtonExpand from '../components/ButtonExpand'
+import ButtonMenu from '../components/ButtonMenu'
 import LinkButton from '../components/LinkButton'
 import '../styles/event.css'
 
@@ -275,8 +277,8 @@ function Event() {
               'moments': metrics && metrics.momentsUploaded > 0
                 ? {
                   text: formatStat(metrics.momentsUploaded),
-                  title: `Upload moment on ${event.name}`,
-                  link: `${POAP_MOMENTS_URL}/upload?drop=${event.id}`,
+                  title: `View uploaded moments on ${event.name}`,
+                  link: `${POAP_MOMENTS_URL}/drop/${event.id}`,
                   external: true,
                 }
                 : undefined,
@@ -293,17 +295,36 @@ function Event() {
               >
                 export csv
               </ButtonExportAddressCsv>,
-              <LinkButton
+              <ButtonMenu
                 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>
+                primary={(
+                  <LinkButton
+                    key="view-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>
+                    )}
+                  >
+                    Moments
+                  </LinkButton>
                 )}
+                buttons={[
+                  <LinkButton
+                    key="upload-moment"
+                    title={`Upload a moment on ${event.name}`}
+                    href={`${POAP_MOMENTS_URL}/upload?drop=${event.id}`}
+                    external={true}
+                    secondary={true}
+                    icon={<Upload />}
+                  >
+                    Publish
+                  </LinkButton>,
+                ]}
               />,
             ]}
           >

diff --git a/src/styles/button-group.css b/src/styles/button-group.css
@@ -10,7 +10,7 @@
   flex-direction: row-reverse;
 }
 
-.button-group .button-expand a {
-  position: relative;
-  top: 0;
+.button-group.vertical {
+  flex-direction: column;
+  gap: .5rem;
 }
diff --git a/src/styles/button-menu.css b/src/styles/button-menu.css
@@ -0,0 +1,32 @@
+.button-menu {
+  background-color: white;
+}
+
+.button-menu .button-menu-content {
+  position: absolute;
+  height: 0;
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top center;
+  overflow: hidden;
+}
+
+.button-menu:hover .button-menu-content {
+  height: auto;
+  opacity: 1;
+  transform: scaleY(1);
+  animation: fade .5s linear forwards;
+}
+
+@keyframes fade {
+  from {
+    height: 0;
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  to {
+    height: auto;
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
diff --git a/src/styles/event-buttons.css b/src/styles/event-buttons.css
@@ -1,7 +1,7 @@
 .event-buttons {
   display: flex;
   justify-content: flex-start;
-  align-items: baseline;
+  align-items: center;
   gap: .5rem;
 }
 
@@ -17,7 +17,3 @@
   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
@@ -61,7 +61,6 @@
 
 .link-button.secondary {
   margin: 0;
-  top: .4rem;
 }
 
 .link-button.secondary::before {