fix: permissions modal width (#1195)

packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx

@@ -111,7 +111,7 @@ class NoteGroupView extends PureComponent<Props, State> {
 
         {this.viewControllerManager.navigationController.isInFilesView && fileDragNDropContext?.isDraggingFiles && (
           <div className="absolute bottom-8 left-1/2 z-dropdown-menu -translate-x-1/2 rounded bg-info px-5 py-3 text-info-contrast shadow-main">
-            Drop your files to upload them to Standard Notes
+            Drop your files to upload them
           </div>
         )}
 

packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx

@@ -1,58 +1,54 @@
-import { WebApplication } from '@/Application/Application'
 import { SNComponent } from '@standardnotes/snjs'
-import { Component } from 'react'
+import { useCallback } from 'react'
 import Button from '@/Components/Button/Button'
 import ModalDialog from '../Shared/ModalDialog'
 import ModalDialogLabel from '../Shared/ModalDialogLabel'
 import ModalDialogDescription from '../Shared/ModalDialogDescription'
 import ModalDialogButtons from '../Shared/ModalDialogButtons'
 
-interface Props {
+type Props = {
-  application: WebApplication
   callback: (approved: boolean) => void
   dismiss: () => void
   component: SNComponent
   permissionsString: string
 }
 
-class PermissionsModal extends Component<Props> {
+const PermissionsModal = ({ callback, component, dismiss, permissionsString }: Props) => {
-  accept = () => {
+  const accept = useCallback(() => {
-    this.props.callback(true)
+    callback(true)
-    this.props.dismiss()
+    dismiss()
-  }
+  }, [callback, dismiss])
 
-  deny = () => {
+  const deny = useCallback(() => {
-    this.props.callback(false)
+    callback(false)
-    this.props.dismiss()
+    dismiss()
-  }
+  }, [callback, dismiss])
 
-  override render() {
+  return (
-    return (
+    <ModalDialog className="!w-[350px]">
-      <ModalDialog className="w-[350px]">
+      <ModalDialogLabel closeDialog={deny}>Activate Component</ModalDialogLabel>
-        <ModalDialogLabel closeDialog={this.deny}>Activate Component</ModalDialogLabel>
+      <ModalDialogDescription>
-        <ModalDialogDescription>
+        <div className="text-base">
-          <div className="text-base">
+          <strong>{component.displayName}</strong>
-            <strong>{this.props.component.displayName}</strong>
+          {' would like to interact with your '}
-            {' would like to interact with your '}
+          {permissionsString}
-            {this.props.permissionsString}
+        </div>
-          </div>
+        <div className="sk-panel-row">
-          <div className="sk-panel-row">
+          <p className="sk-p">
-            <p className="sk-p">
+            Components use an offline messaging system to communicate. Learn more at{' '}
-              Components use an offline messaging system to communicate. Learn more at{' '}
+            <a href="https://standardnotes.com/permissions" rel="noopener" target="_blank" className="sk-a info">
-              <a href="https://standardnotes.com/permissions" rel="noopener" target="_blank" className="sk-a info">
+              https://standardnotes.com/permissions.
-                https://standardnotes.com/permissions.
+            </a>
-              </a>
+          </p>
-            </p>
+        </div>
-          </div>
+      </ModalDialogDescription>
-        </ModalDialogDescription>
+      <ModalDialogButtons>
-        <ModalDialogButtons>
+        <Button primary fullWidth onClick={accept} className="block">
-          <Button primary fullWidth onClick={this.accept} className="block">
+          Continue
-            Continue
+        </Button>
-          </Button>
+      </ModalDialogButtons>
-        </ModalDialogButtons>
+    </ModalDialog>
-      </ModalDialog>
+  )
-    )
-  }
 }
 
 export default PermissionsModal

packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx

@@ -44,7 +44,6 @@ const PermissionsModalWrapper: FunctionComponent<Props> = ({ application }) => {
 
   return dialog ? (
     <PermissionsModal
-      application={application}
       callback={dialog.callback}
       dismiss={dismissPermissionsDialog}
       component={dialog.component}

packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/ConfirmCustomPackage.tsx

@@ -47,15 +47,12 @@ const ConfirmCustomPackage: FunctionComponent<{
         return (
           <Fragment key={field.value}>
             <Subtitle>{field.label}</Subtitle>
-            <Text className={'wrap'}>{field.value}</Text>
+            <Text className="wrap mb-2">{field.value}</Text>
-            <div className="min-h-2" />
           </Fragment>
         )
       })}
 
-      <div className="min-h-3" />
+      <div className="mt-3 flex flex-row">
-
-      <div className="flex flex-row">
         <Button className="min-w-20" label="Cancel" onClick={() => callback(false)} />
 
         <div className="min-w-3" />