Fix fullscreenTransparent and callout

deltachat · Oct 10, 2024 · bdc4c16 · bdc4c16
1 parent 0b2feed
commit bdc4c16
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 32 deletions.
diff --git a/packages/frontend/scss/login/_login.scss b/packages/frontend/scss/login/_login.scss
@@ -194,3 +194,17 @@ div.delta-form-group {
     }
   }
 }
+
+.delta-progress-bar {
+  &.primary-intent {
+    color: var(--colorPrimary);
+  }
+
+  &.danger-intent {
+    color: var(--colorPrimary);
+  }
+
+  &.success-intent {
+    color: var(--colorPrimary);
+  }
+}
diff --git a/packages/frontend/scss/message/_message-detail.scss b/packages/frontend/scss/message/_message-detail.scss
@@ -3,8 +3,6 @@
 .module-message-detail {
   margin-top: -20px;
 
-  max-height: 55vh;
-
   p {
     white-space: pre-line;
     user-select: text;

diff --git a/packages/frontend/src/components/Callout/styles.module.scss b/packages/frontend/src/components/Callout/styles.module.scss
@@ -1,9 +1,6 @@
 .callout {
   background-color: rgba(0, 0, 0, 0.05);
   font-size: 14px;
-  padding-bottom: 10px;
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-top: 10px;
-  overflow-y: auto;
+  padding: 10x 30px;
+  max-height: 55vh;
 }
diff --git a/packages/frontend/src/components/Dialog/Dialog.tsx b/packages/frontend/src/components/Dialog/Dialog.tsx
@@ -1,24 +1,21 @@
 import classNames from 'classnames'
 import React, { useEffect, useRef } from 'react'
 
-import type { DialogProps } from '../../contexts/DialogContext'
-
 import styles from './styles.module.scss'
 
 const DEFAULT_WIDTH = 500
 
-type Props = React.PropsWithChildren<
-  {
-    canEscapeKeyClose?: boolean
-    canOutsideClickClose?: boolean
-    className?: string
-    fixed?: boolean
-    height?: number
-    width?: number
-    // takes full screen and is transparent
-    unstyled?: boolean
-  } & DialogProps
->
+type Props = React.PropsWithChildren<{
+  onClose?: (result?: any) => void
+  canEscapeKeyClose?: boolean
+  canOutsideClickClose?: boolean
+  className?: string
+  fixed?: boolean
+  height?: number
+  width?: number
+  // takes full screen and is transparent
+  unstyled?: boolean
+}>
 
 const Dialog = React.memo<Props>(
   ({
@@ -28,7 +25,6 @@ const Dialog = React.memo<Props>(
     width = DEFAULT_WIDTH,
     height,
     unstyled = false,
-    fixed,
     ...props
   }) => {
     const dialog = useRef<HTMLDialogElement>(null)
@@ -60,8 +56,8 @@ const Dialog = React.memo<Props>(
       : () => {}
 
     const onClose = (value: any) => {
+      props.onClose && props.onClose(value)
       dialog.current!.style.display = 'none'
-      props.onClose(value)
     }
 
     const onCancel = (ev: React.BaseSyntheticEvent) => {
@@ -92,7 +88,6 @@ const Dialog = React.memo<Props>(
         onCancel={onCancel}
         ref={dialog}
         className={classNames(styles.dialog, props.className, {
-          [styles.fixed]: fixed,
           [styles.unstyled]: unstyled,
         })}
         style={style}

diff --git a/packages/frontend/src/components/Login-Styles.tsx b/packages/frontend/src/components/Login-Styles.tsx
@@ -199,11 +199,13 @@ export const DeltaPasswordInput = React.memo(
 export const DeltaProgressBar = function (
   props: React.PropsWithChildren<{
     progress: number
+    intent?: string
   }>
 ) {
   return (
     <div style={{ marginTop: '20px', marginBottom: '10px' }}>
       <progress
+        className='delta-progress-bar'
         value={props.progress ? props.progress / 1000 : 0}
         max={100}
       ></progress>

diff --git a/packages/frontend/src/components/dialogs/FullscreenAvatar.tsx b/packages/frontend/src/components/dialogs/FullscreenAvatar.tsx
@@ -38,7 +38,7 @@ export default function FullscreenAvatar(
   ])
 
   return (
-    <Dialog fullscreenTransparent onClose={onClose}>
+    <Dialog unstyled onClose={onClose}>
       <div className='attachment-view'>
         <div className='image-container'>
           <TransformWrapper initialScale={1}>

diff --git a/packages/frontend/src/components/dialogs/FullscreenMedia.tsx b/packages/frontend/src/components/dialogs/FullscreenMedia.tsx
@@ -253,7 +253,7 @@ export default function FullscreenMedia(props: Props & DialogProps) {
   if (!msg || !msg.file) return elm
 
   return (
-    <Dialog fullscreenTransparent onClose={onClose}>
+    <Dialog unstyled onClose={onClose}>
       <div className='attachment-view'>{elm}</div>
       {elm && (
         <div className='btn-wrapper no-drag'>

diff --git a/packages/frontend/src/components/screens/AccountSetupScreen.tsx b/packages/frontend/src/components/screens/AccountSetupScreen.tsx
@@ -84,7 +84,7 @@ export default function AccountSetupScreen({
 
   return (
     <ImageBackdrop variant='welcome'>
-      <Dialog canOutsideClickClose={false} onClose={onCancel} fixed>
+      <Dialog canOutsideClickClose={false} onClose={() => {}} fixed>
         <DialogHeader title={tx('login_explain')} />
         <DialogBody>
           <DialogContent>

diff --git a/packages/frontend/src/components/screens/WelcomeScreen/index.tsx b/packages/frontend/src/components/screens/WelcomeScreen/index.tsx
@@ -22,10 +22,6 @@ export default function WelcomeScreen({ selectedAccountId, ...props }: Props) {
   const [hasConfiguredAccounts, setHasConfiguredAccounts] = useState(false)
   const showBackButton = hasConfiguredAccounts
 
-  const onClose = () => {
-    // Prevent user from closing dialog
-  }
-
   useLayoutEffect(() => {
     // Show back button when user has already created and configured accounts.
     // On a fresh DC start we will not have any yet.
@@ -41,7 +37,12 @@ export default function WelcomeScreen({ selectedAccountId, ...props }: Props) {
 
   return (
     <ImageBackdrop variant='welcome'>
-      <Dialog fixed onClose={onClose} width={400} canOutsideClickClose={false}>
+      <Dialog
+        fixed
+        width={400}
+        canEscapeKeyClose={false}
+        canOutsideClickClose={false}
+      >
         {!showInstantOnboarding ? (
           <OnboardingScreen
             onNextStep={() => startInstantOnboardingFlow()}