console: Fix modal styling

TheThingsNetwork · Sep 11, 2024 · 7b50257 · 7b50257
1 parent fa211dc
commit 7b50257
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 6 deletions.
diff --git a/pkg/webui/components/modal/modal.styl b/pkg/webui/components/modal/modal.styl
@@ -28,7 +28,7 @@
     max-height: 80vh
 
     +media-query-min($bp.sm)
-      min-width: 500px
+      min-width: 385px
       max-width: 780px
 
     +media-query($bp.sm)

diff --git a/pkg/webui/components/qr-modal-button/index.js b/pkg/webui/components/qr-modal-button/index.js
@@ -60,7 +60,12 @@ const QRModalButton = props => {
       ) : (
         <>
           <QR onChange={handleRead} />
-          <Message content={m.scanContinue} values={{ qrScanDoc: QrScanDoc }} component="span" />
+          <Message
+            content={m.scanContinue}
+            values={{ qrScanDoc: QrScanDoc }}
+            component="span"
+            className="c-text-neutral-light"
+          />
         </>
       )}
     </div>

diff --git a/pkg/webui/components/qr/input/video/index.js b/pkg/webui/components/qr/input/video/index.js
@@ -234,7 +234,7 @@ const Video = props => {
           data-test-id="webcam-feed"
         />
       ) : (
-        <Spinner center>
+        <Spinner center inline className="mb-cs-xl">
           <Message className={style.msg} content={m.fetchingCamera} />
         </Spinner>
       )}

diff --git a/pkg/webui/components/qr/qr.styl b/pkg/webui/components/qr/qr.styl
@@ -36,5 +36,5 @@
   width: 100%
   max-height: 75vh
 
-.msg
-  color: var(--c-bg-neutral-min)
+  +media-query($bp.xl)
+    max-height: 47vh
diff --git a/pkg/webui/components/qr/require-permission.js b/pkg/webui/components/qr/require-permission.js
@@ -112,7 +112,7 @@ const RequirePermission = props => {
   if (!allow || videoError) {
     return (
       <div className={style.captureWrapper}>
-        <ErrorMessage style={{ color: '#fff' }} content={m.permissionDeniedError} />
+        <ErrorMessage content={m.permissionDeniedError} />
         <br />
         <Button
           className="mt-cs-m"