refactor: countdown view redesign

- allow selecting multiple events
- follow selected
- remove past events

apps/client/src/common/components/buttons/Button.module.scss

@@ -1,12 +1,13 @@
 @use '../../../theme/viewerDefs' as *;
 
 .baseButton {
-  height: 2rem;
-  padding-inline: 1em;
   display: flex;
   align-items: center;
   gap: 0.5em;
 
+  width: fit-content;
+  padding-inline: 1em;
+
   border: 1px solid transparent;
   border-radius: 3px;
 
@@ -50,3 +51,11 @@
     opacity: $viewer-opacity-disabled;
   }
 }
+
+.medium {
+  height: 2rem;
+}
+
+.large {
+  height: 3.5rem;
+}

apps/client/src/common/components/buttons/Button.tsx

@@ -6,13 +6,14 @@ import style from './Button.module.scss';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'subtle' | 'primary';
+  size?: 'medium' | 'large';
 }
 
 export default function Button(props: ButtonProps) {
-  const { className, children, variant = 'subtle', ...buttonProps } = props;
+  const { className, children, variant = 'subtle', size = 'medium', ...buttonProps } = props;
 
   return (
-    <button className={cx([style.baseButton, style[variant], className])} type='button' {...buttonProps}>
+    <button className={cx([style.baseButton, style[variant], style[size], className])} type='button' {...buttonProps}>
       {children}
     </button>
   );