Skip to content

Commit

Permalink
Merge pull request #1188 from gokuljs/pr-1166
Browse files Browse the repository at this point in the history 
fix: fix for Leave feedback modal exceeds screen height
  • Loading branch information
@mlabouardy
mlabouardy authored Nov 14, 2023
2 parents 0312702 + 78d8eea commit b028a2f
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 138 deletions.
284 changes: 146 additions & 138 deletions dashboard/components/feedback-widget/FeedbackWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,149 +161,157 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
id={FEEDBACK_MODAL_ID}
>
<div className="w-[546px]">
<h3 className="text-lg font-bold text-black-900">
Describe your issue
</h3>
<p className="text-base text-black-400">
By providing details of the issue you’ve encountered and outlining
the steps to reproduce it, we’ll be able to give you better
support.
</p>
<form onSubmit={uploadFeedback} className="mt-4">
<Input
disabled={isSendingFeedback}
type="email"
label="Your email"
name="email"
action={change => {
updateEmail(change.email);
}}
value={email}
required
/>
<textarea
disabled={isSendingFeedback}
rows={13}
placeholder={textAreaPlaceholder}
className="peer mt-4 w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary"
onChange={event => updateDescription(event?.target?.value)}
value={description}
required
/>
<div className="mt-4 h-[96px] max-h-[96px] w-full">
<div className="flex h-full basis-1/2 items-stretch justify-stretch gap-2">
{fileAttachement === null && (
<>
<div
onClick={() => takeScreenshot()}
className="flex-1 grow cursor-pointer rounded border-2 border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100"
>
<svg
className="mb-2 inline-block"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<div className="fixed left-0 top-0 p-8 border-b border-gray-200">
<h3 className="text-lg font-bold text-black-900">
Describe your issue
</h3>
<p className="text-base text-black-400">
By providing details of the issue you’ve encountered and
outlining the steps to reproduce it, we’ll be able to give you
better support.
</p>
</div>
<div className="mt-[130px] h-[420px] overflow-y-auto overflow-x-hidden pl-[16px] pr-[16px] pt-[1px] pb-[10px]">
<form onSubmit={uploadFeedback}>
<Input
disabled={isSendingFeedback}
type="email"
label="Your email"
name="email"
action={change => {
updateEmail(change.email);
}}
value={email}
required
/>
<textarea
disabled={isSendingFeedback}
rows={13}
placeholder={textAreaPlaceholder}
className="peer mt-4 w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary"
onChange={event => updateDescription(event?.target?.value)}
value={description}
required
/>
<div className="mt-4 h-[96px] max-h-[96px] w-full">
<div className="flex h-full basis-1/2 items-stretch justify-stretch gap-2">
{fileAttachement === null && (
<>
<div
onClick={() => takeScreenshot()}
className="flex-1 grow cursor-pointer rounded border-2 border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100"
>
<path
d="M2.25 9V6.5C2.25 4.01 4.26 2 6.75 2H9.25"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.25 2H17.75C20.24 2 22.25 4.01 22.25 6.5V9"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.25 16V17.5C22.25 19.99 20.24 22 17.75 22H16.25"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.25 22H6.75C4.26 22 2.25 19.99 2.25 17.5V15"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<svg
className="mb-2 inline-block"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.25 9V6.5C2.25 4.01 4.26 2 6.75 2H9.25"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.25 2H17.75C20.24 2 22.25 4.01 22.25 6.5V9"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.25 16V17.5C22.25 19.99 20.24 22 17.75 22H16.25"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.25 22H6.75C4.26 22 2.25 19.99 2.25 17.5V15"
stroke="#0C1717"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>

<p>
{isTakingScreenCapture
? 'Taking screencapture...'
: 'Capture current screen'}
</p>
</div>
<span className="self-center justify-self-center text-sm text-black-400">
or
</span>
</>
)}
<div className="flex-1 grow">
<Upload
multiple={false}
fileOrFiles={fileAttachement}
handleChange={uploadFile}
onClose={() => setFileAttachement(null)}
disabled={
fileAttachement !== null ||
isSendingFeedback ||
isTakingScreenCapture
}
onTypeError={(err: string) =>
showToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
onSizeError={(err: string) =>
showToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
/>
<p>
{isTakingScreenCapture
? 'Taking screencapture...'
: 'Capture current screen'}
</p>
</div>
<span className="self-center justify-self-center text-sm text-black-400">
or
</span>
</>
)}
<div className="flex-1 grow">
<Upload
multiple={false}
fileOrFiles={fileAttachement}
handleChange={uploadFile}
onClose={() => setFileAttachement(null)}
disabled={
fileAttachement !== null ||
isSendingFeedback ||
isTakingScreenCapture
}
onTypeError={(err: string) =>
showToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
onSizeError={(err: string) =>
showToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
/>
</div>
</div>
</div>
</div>
<div className="mt-4 flex justify-between">
<p className="text-xs text-black-400">
Need in depth assistance?
<br />
Email us at{' '}
<a
href="mailto:support@tailwarden.com"
className="text-primary"
>
support@tailwarden.com
</a>
.
</p>
<div className="flex gap-2">
<Button
size="xs"
disabled={isSendingFeedback}
style="ghost"
onClick={() => closeFeedbackModal()}
>
Cancel
</Button>
<Button type="submit" size="xs" disabled={isSendingFeedback}>
{isSendingFeedback ? `Sending...` : `Send Feedback`}
</Button>
<div className="mt-4 flex justify-between">
<p className="text-xs text-black-400">
Need in depth assistance?
<br />
Email us at{' '}
<a
href="mailto:support@tailwarden.com"
className="text-primary"
>
support@tailwarden.com
</a>
.
</p>
<div className="flex gap-2">
<Button
size="xs"
disabled={isSendingFeedback}
style="ghost"
onClick={() => closeFeedbackModal()}
>
Cancel
</Button>
<Button
type="submit"
size="xs"
disabled={isSendingFeedback}
>
{isSendingFeedback ? `Sending...` : `Send Feedback`}
</Button>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</Modal>
</>
Expand Down
6 changes: 6 additions & 0 deletions dashboard/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,9 @@
font-size: 16px;
padding: 5px 9px;
}

#feedback-modal-modal {
max-height: 80vh;
padding-right: 16px;
padding-left: 16px;
}

0 comments on commit b028a2f

Please sign in to comment.