From dd23135d6ddd78bb3f5499256576b26ce6466b12 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 2 Jul 2022 20:20:40 +0530
Subject: [PATCH] fix: permissions modal width (#1195)

---
 .../NoteGroupView/NoteGroupView.tsx           |  2 +-
 .../PermissionsModal/PermissionsModal.tsx     | 76 +++++++++----------
 .../PermissionsModalWrapper.tsx               |  1 -
 .../Packages/ConfirmCustomPackage.tsx         |  7 +-
 4 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx b/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
index 177cde94a..cd401c110 100644
--- a/packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
+++ b/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>
         )}
 
diff --git a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx b/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx
index 65241e321..0b497f478 100644
--- a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModal.tsx
+++ b/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 {
-  application: WebApplication
+type Props = {
   callback: (approved: boolean) => void
   dismiss: () => void
   component: SNComponent
   permissionsString: string
 }
 
-class PermissionsModal extends Component<Props> {
-  accept = () => {
-    this.props.callback(true)
-    this.props.dismiss()
-  }
+const PermissionsModal = ({ callback, component, dismiss, permissionsString }: Props) => {
+  const accept = useCallback(() => {
+    callback(true)
+    dismiss()
+  }, [callback, dismiss])
 
-  deny = () => {
-    this.props.callback(false)
-    this.props.dismiss()
-  }
+  const deny = useCallback(() => {
+    callback(false)
+    dismiss()
+  }, [callback, dismiss])
 
-  override render() {
-    return (
-      <ModalDialog className="w-[350px]">
-        <ModalDialogLabel closeDialog={this.deny}>Activate Component</ModalDialogLabel>
-        <ModalDialogDescription>
-          <div className="text-base">
-            <strong>{this.props.component.displayName}</strong>
-            {' would like to interact with your '}
-            {this.props.permissionsString}
-          </div>
-          <div className="sk-panel-row">
-            <p className="sk-p">
-              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">
-                https://standardnotes.com/permissions.
-              </a>
-            </p>
-          </div>
-        </ModalDialogDescription>
-        <ModalDialogButtons>
-          <Button primary fullWidth onClick={this.accept} className="block">
-            Continue
-          </Button>
-        </ModalDialogButtons>
-      </ModalDialog>
-    )
-  }
+  return (
+    <ModalDialog className="!w-[350px]">
+      <ModalDialogLabel closeDialog={deny}>Activate Component</ModalDialogLabel>
+      <ModalDialogDescription>
+        <div className="text-base">
+          <strong>{component.displayName}</strong>
+          {' would like to interact with your '}
+          {permissionsString}
+        </div>
+        <div className="sk-panel-row">
+          <p className="sk-p">
+            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">
+              https://standardnotes.com/permissions.
+            </a>
+          </p>
+        </div>
+      </ModalDialogDescription>
+      <ModalDialogButtons>
+        <Button primary fullWidth onClick={accept} className="block">
+          Continue
+        </Button>
+      </ModalDialogButtons>
+    </ModalDialog>
+  )
 }
 
 export default PermissionsModal
diff --git a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx b/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx
index 462af2d47..37412b7db 100644
--- a/packages/web/src/javascripts/Components/PermissionsModal/PermissionsModalWrapper.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/ConfirmCustomPackage.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/ConfirmCustomPackage.tsx
index cbfb59556..51fa3788c 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/ConfirmCustomPackage.tsx
+++ b/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>
-            <div className="min-h-2" />
+            <Text className="wrap mb-2">{field.value}</Text>
           </Fragment>
         )
       })}
 
-      <div className="min-h-3" />
-
-      <div className="flex flex-row">
+      <div className="mt-3 flex flex-row">
         <Button className="min-w-20" label="Cancel" onClick={() => callback(false)} />
 
         <div className="min-w-3" />