Fix various warnings and browser differences, use larger background blur to allow lower quality (improved performance)

Author: davidje13

backend/src/services/RetroService.ts

@@ -10,7 +10,7 @@ import srb, { type Permission } from 'shared-reducer-backend';
 import { type Retro, type RetroSummary } from '../shared/api-entities';
 import { extractRetro } from '../helpers/jsonParsers';
 
-const VALID_SLUG = /^[a-z0-9][a-z0-9_-]*$/;
+const VALID_SLUG = /^[a-z0-9][a-z0-9_\-]*$/;
 const MAX_SLUG_LENGTH = 64;
 
 function validateSlug(slug: string): void {

backend/src/tokens/TokenManager.test.ts

@@ -1,7 +1,7 @@
 import { TokenManager, type KeyPair } from './TokenManager';
 import 'lean-test';
 
-const JWT_PATTERN = /^([a-zA-Z0-9_-]+(\.|$)){3}$/;
+const JWT_PATTERN = /^([a-zA-Z0-9_\-]+(\.|$)){3}$/;
 
 describe('TokenManager', () => {
   const manager = new TokenManager();

frontend/package-lock.json

@@ -5,11 +5,11 @@
   right: 0;
   bottom: 0;
   background: rgba(128, 128, 128, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   z-index: 10;
 
-  animation:
-    0.2s ease popup-fade-in,
-    0.05s 0.2s step-end forwards popup-blur-background;
+  animation: 0.2s ease popup-fade-in;
 
   .popup-content {
     position: absolute;
@@ -54,16 +54,6 @@
   }
 }
 
-@keyframes popup-blur-background {
-  from {
-    backdrop-filter: none;
-  }
-
-  to {
-    backdrop-filter: blur(2px);
-  }
-}
-
 @keyframes popup-float-in {
   from {
     transform: translate(-50%, -50%) scale(0.9);

frontend/src/components/common/Popup.less

@@ -6,7 +6,7 @@ import TickBold from '../../../resources/tick-bold.svg';
 import Cross from '../../../resources/cross.svg';
 
 export const MAX_SLUG_LENGTH = 64;
-const VALID_SLUG_PATTERN = '^[a-z0-9][a-z0-9_-]*$';
+const VALID_SLUG_PATTERN = '^[a-z0-9][a-z0-9_\\-]*$';
 const VALID_SLUG = new RegExp(VALID_SLUG_PATTERN);
 
 enum SlugAvailability {

frontend/src/components/retro-create/SlugEntry.tsx

@@ -376,10 +376,12 @@
           padding: 16px 0;
           margin: -16px 0;
           background: rgba(@beige-back, 0.9);
-          backdrop-filter: blur(2px);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
           @media (prefers-reduced-transparency: reduce) {
             background: @beige-back;
             backdrop-filter: none;
+            -webkit-backdrop-filter: none;
           }
           position: sticky;
           bottom: 0;

frontend/src/components/retro-formats/mood/MoodRetro.less

@@ -44,3 +44,10 @@ button {
 textarea {
   min-width: 0; /* remove FireFox default */
 }
+
+/* match browser defaults */
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: rgba(0, 0, 0, 0.5);
+}