frontend: use view dialog component for qrcode detection

Previously it was using the old dialog component, which worked ok
on mobile, but for some reason rendered too big on large screen,
i.e. vertical scrollbar in dialog.

Changed to use View component as dialog. If this works nicely, the
old modificatinos in the previous commits can be dropped.

frontends/web/src/components/view/view.module.css

@@ -75,7 +75,7 @@
     }
     .inner.fit {
         padding-bottom: var(--space-half);
-        padding-top: 2vh;
+        padding-top: 0; /* TODO: was 2vh test passphrase */
     }
 
 }
@@ -248,8 +248,11 @@
     flex-direction: row;
 }
 .dialog .buttons {
-    padding-left: var(--space-default);
-    padding-right: var(--space-default);
+    padding-left: var(--space-half);
+    padding-right: var(--space-half);
+}
+.fit .buttons {
+    margin-top: var(--space-half);
 }
 @media (max-width: 768px) {
     .buttons {

frontends/web/src/hooks/qrcodescanner.ts

@@ -49,7 +49,7 @@ export const useQRScanner = (
             calculateScanRegion: (v) => {
               const videoWidth = v.videoWidth;
               const videoHeight = v.videoHeight;
-              const factor = window.innerWidth > 768 ? 0.5 : 0.333; // increase scan region on desktop
+              const factor = 0.5;
               const size = Math.floor(Math.min(videoWidth, videoHeight) * factor);
               return {
                 x: (videoWidth - size) / 2,

frontends/web/src/routes/account/send/components/dialogs/scan-qr-dialog.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2023 Shift Crypto AG
+ * Copyright 2023-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,39 +15,43 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { Dialog, DialogButtons } from '../../../../../components/dialog/dialog';
+import { useMediaQuery } from '../../../../../hooks/mediaquery';
+import { View, ViewButtons } from '../../../../../components/view/view';
 import { Button } from '../../../../../components/forms';
 import { ScanQRVideo } from '../inputs/scan-qr-video';
 
 type TProps = {
-    activeScanQR: boolean;
-    toggleScanQR: () => void;
-    onChangeActiveScanQR: (active: boolean) => void;
-    parseQRResult: (result: string) => void;
+  activeScanQR: boolean;
+  toggleScanQR: () => void;
+  onChangeActiveScanQR: (active: boolean) => void;
+  parseQRResult: (result: string) => void;
 }
 
 export const ScanQRDialog = ({ parseQRResult, activeScanQR, toggleScanQR, onChangeActiveScanQR }: TProps) => {
   const { t } = useTranslation();
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
+  if (!activeScanQR) {
+    return null;
+  }
   return (
-    <Dialog
-      large
-      fullscreenOnMobile
-      open={activeScanQR}
-      title={t('send.scanQR')}
-      onClose={toggleScanQR}>
+    <View
+      fitContent
+      fullscreen
+      dialog={!isMobile}>
       <ScanQRVideo
         onResult={result => {
           parseQRResult(result);
           onChangeActiveScanQR(false);
         }} />
-      <DialogButtons>
+      <ViewButtons reverseRow>
         <Button
           secondary
           onClick={toggleScanQR}>
           {t('button.back')}
         </Button>
-      </DialogButtons>
-    </Dialog>
+
+      </ViewButtons>
+    </View>
   );
 };