Fix player token box animation and notification

Author: Neraste

src/components/settings/Tokens.jsx

@@ -34,15 +34,6 @@ function PlayerTokenBoxDisplay({ playerToken, karaoke }) {
     setConfirmDisplayed(false)
   }, [])
 
-  const doConfirm = useCallback(
-    () => {
-      clearConfirm()
-      dispatch(revokePlayerToken(karaoke.id))
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [karaoke]
-  )
-
   return (
     <div className="player-token-box-display flow">
       <TokenWidget token={playerToken.key} />
@@ -60,12 +51,17 @@ function PlayerTokenBoxDisplay({ playerToken, karaoke }) {
             exit: 150,
           }}
         >
-          <ConfirmationBar onConfirm={doConfirm} onCancel={clearConfirm} />
+          <ConfirmationBar
+            onConfirm={() => {
+              dispatch(revokePlayerToken(karaoke.id))
+            }}
+            onCancel={clearConfirm}
+          />
         </CSSTransitionLazy>
         <Notification
           alterationResponse={responseOfRevokePlayerToken}
-          pendingMessage={false}
-          successfulMessage={false}
+          pendingMessage={null}
+          successfulMessage={null}
           failedMessage="Unable to revoke player token"
         />
         <button className="control primary" onClick={displayConfirm}>
@@ -92,6 +88,12 @@ function PlayerTokenBoxCreate({ karaoke }) {
     <div className="player-token-box-create flow">
       <p>Create a token that can be used to authenticate the player.</p>
       <div className="controls notifiable">
+        <Notification
+          alterationResponse={responseOfCreatePlayerToken}
+          pendingMessage={null}
+          successfulMessage={null}
+          failedMessage="Unable to create player token"
+        />
         <button
           className="control primary"
           onClick={() => {
@@ -101,12 +103,6 @@ function PlayerTokenBoxCreate({ karaoke }) {
           Create player token
         </button>
       </div>
-      <Notification
-        alterationResponse={responseOfCreatePlayerToken}
-        pendingMessage={false}
-        successfulMessage={false}
-        failedMessage="Unable to create player token"
-      />
     </div>
   )
 }
@@ -230,16 +226,16 @@ export default function Tokens() {
               onCancel={clearConfirm}
             />
           </CSSTransitionLazy>
+          <Notification
+            alterationResponse={responseOfRevokeToken}
+            pendingMessage={null}
+            successfulMessage={null}
+            failedMessage="Unable to revoke token"
+          />
           <button className="control primary" onClick={displayConfirm}>
             Revoke token
           </button>
         </div>
-        <Notification
-          alterationResponse={responseOfRevokeToken}
-          pendingMessage={null}
-          successfulMessage={null}
-          failedMessage="Unable to revoke token"
-        />
       </div>
       <IsPlaylistManager user={user}>
         <PlayerTokenBox />

src/style/components/settings/_tokens.scss

@@ -9,24 +9,30 @@
 
 #tokens {
   .token-box {
+    // approximate min and max height
+    $token-player-min-height: calc(
+      1.25em + sizes.$row-height + sizes.$gap-vertical
+    );
+    $token-player-max-height: calc(
+      3 * sizes.$row-height + 2 * sizes.$gap-vertical
+    );
+
     .token-player-enter {
-      // approximate min and max height
-      height: calc(2em + sizes.$row-height + sizes.$gap-vertical);
+      height: $token-player-min-height;
       overflow-y: hidden;
 
       &.token-player-enter-active {
-        height: 2 * sizes.$row-height + 2 * sizes.$gap-vertical;
+        height: $token-player-max-height;
         transition: height 300ms ease-out;
       }
     }
 
     .token-player-exit {
-      // approximate min and max height
-      height: 2 * sizes.$row-height + 2 * sizes.$gap-vertical;
+      height: $token-player-max-height;
       overflow-y: hidden;
 
       &.token-player-exit-active {
-        height: calc(2em + sizes.$row-height + sizes.$gap-vertical);
+        height: $token-player-min-height;
         transition: height 150ms ease-out;
       }
     }