Styling changes

- make ability to click items during facilitation more obvious
- do not blur popup background until end of animation (performance)
- increase size of invite QR code as much as possible

Author: davidje13

src/frontend/src/components/common/Popup.less

@@ -6,9 +6,8 @@
   bottom: 0;
   background: rgba(128, 128, 128, 0.5);
   z-index: 10;
-  backdrop-filter: blur(2px);
 
-  animation: 0.2s ease popup-fade-in;
+  animation: 0.2s ease popup-fade-in, 0.05s 0.2s step-end forwards popup-blur-background;
 
   .popup-content {
     position: absolute;
@@ -34,18 +33,31 @@
       font-size: 1.5em;
       text-align: center;
       margin-bottom: 16px;
+
+      &.hidden {
+        /* still visible to screen readers due to aria-labelledby */
+        display: none;
+      }
     }
   }
 }
 
 @keyframes popup-fade-in {
   from {
     opacity: 0;
-    backdrop-filter: none;
   }
 
   to {
     opacity: 1;
+  }
+}
+
+@keyframes popup-blur-background {
+  from {
+    backdrop-filter: none;
+  }
+
+  to {
     backdrop-filter: blur(2px);
   }
 }

src/frontend/src/components/common/Popup.tsx

@@ -4,12 +4,15 @@ import useParameterlessCallback from '../../hooks/useParameterlessCallback';
 import useListener from '../../hooks/useListener';
 import './Popup.less';
 
+export interface PopupData {
+  title: string;
+  hideTitle?: boolean;
+  content: React.ReactNode;
+  keys?: Record<string, () => void>;
+}
+
 interface PropsT {
-  data: null | {
-    title: string;
-    content: React.ReactNode;
-    keys?: Record<string, () => void>;
-  };
+  data: PopupData | null;
   onClose?: () => void;
 }
 
@@ -66,7 +69,7 @@ export default ({
       contentRef={setModal}
       aria={{ labelledby: 'modal-heading' }}
     >
-      <h1 id="modal-heading">{ data.title }</h1>
+      <h1 id="modal-heading" className={data.hideTitle ? 'hidden' : ''}>{ data.title }</h1>
       { data.content }
     </Modal>
   );

src/frontend/src/components/retro-formats/mood/categories/MoodItem.less

@@ -171,6 +171,16 @@
 
 .has-focused .mood-item:not(.focused):not(.editing):not(.done) {
   opacity: 0.7;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+
+  .message:not(:disabled)  {
+    cursor: pointer;
+  }
+}
+
+.multi-column.has-focused .mood-item:not(.focused):not(.editing):not(.done):hover {
+  transform: translate(0, -1px);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 
 .archive .mood-item.done {

src/frontend/src/components/retro/InvitePopup.less

@@ -18,12 +18,14 @@
 
   .qr-code {
     display: block;
-    width: 350px;
-    max-width: ~"calc(min(100%, 50vh))";
+    width: ~"calc(80vh - 52px - 3.2em)";
+    min-width: 350px;
+    max-width: ~"calc(100vw - 96px)";
     margin: 0 auto;
   }
 
   .dialog-options {
+    margin-top: 0;
     text-align: center;
   }
 

src/frontend/src/components/retro/RetroPage.tsx

@@ -8,7 +8,7 @@ import type { Retro } from 'refacto-entities';
 import type { RetroPagePropsT } from '../RetroRouter';
 import ArchivePopup from './ArchivePopup';
 import Header from '../common/Header';
-import Popup from '../common/Popup';
+import Popup, { PopupData } from '../common/Popup';
 import useBoundCallback from '../../hooks/useBoundCallback';
 import useWindowSize from '../../hooks/env/useWindowSize';
 import { clearCovered } from '../../actions/retro';
@@ -76,7 +76,7 @@ export default memo(({
     (OPTIONS.enableMobileFacilitation.read(retro.options))
   );
 
-  let archivePopup = null;
+  let archivePopup: PopupData | null = null;
   if (retroDispatch && archivePopupVisible) {
     archivePopup = {
       title: 'Create Archive',
@@ -93,10 +93,11 @@ export default memo(({
     };
   }
 
-  let invitePopup = null;
+  let invitePopup: PopupData | null = null;
   if (invitePopupVisible) {
     invitePopup = {
       title: 'Invite',
+      hideTitle: true,
       content: (<InvitePopup onClose={hideInvitePopup} />),
       keys: {
         Enter: hideInvitePopup,