Skip to content

Commit

Permalink
fix: improve styling and make screenshot button look right. Also addr…
Browse files Browse the repository at this point in the history 
…ess review comments
  • Loading branch information
@Traxmaxx
Traxmaxx committed Oct 11, 2023
1 parent eccb270 commit a6bdfe6
Show file tree
Hide file tree
Showing 3 changed files with 306 additions and 143 deletions.
312 changes: 181 additions & 131 deletions dashboard/components/feedback-widget/FeedbackWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,56 +192,13 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
value={description}
required
/>
<div className="mt-4 w-full flex-1">
<a
className="mb-1 block w-32 cursor-pointer text-xs text-primary"
onClick={() => takeScreenshot()}
>
Take a screenshot
</a>
<FileUploader
disabled={
fileAttachement !== null ||
isSendingFeedback ||
isTakingScreenCapture
}
handleChange={uploadFile}
name="attachement"
types={FILE_TYPES}
fileOrFiles={fileAttachement}
hoverTitle="drop here"
maxSize={MAX_FILE_SIZE_MB}
onTypeError={(err: string) =>
setToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
onSizeError={(err: string) =>
setToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
dropMessageStyle={{
width: '508px',
height: '96px',
position: 'absolute',
background: '#F4F9F9',
top: 20,
left: 2,
display: 'flex',
flexGrow: 2,
opacity: 1,
zIndex: 20,
color: '#008484',
fontSize: 14
}}
>
<div className="mt-4 h-full w-full">
<div className="flex basis-1/2 items-stretch justify-stretch gap-2">
{fileAttachement === null && (
<div className="h-full w-full cursor-pointer rounded border-2 border-dashed border-black-170 px-6 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100">
<div
onClick={() => takeScreenshot()}
className="w-[50%] 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"
Expand All @@ -251,133 +208,226 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.5 17V11L7.5 13"
d="M2.25 9V6.5C2.25 4.01 4.26 2 6.75 2H9.25"
stroke="#0C1717"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M9.5 11L11.5 13"
d="M15.25 2H17.75C20.24 2 22.25 4.01 22.25 6.5V9"
stroke="#0C1717"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22.5 10V15C22.5 20 20.5 22 15.5 22H9.5C4.5 22 2.5 20 2.5 15V9C2.5 4 4.5 2 9.5 2H14.5"
d="M22.25 16V17.5C22.25 19.99 20.24 22 17.75 22H16.25"
stroke="#0C1717"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22.5 10H18.5C15.5 10 14.5 9 14.5 6V2L22.5 10Z"
d="M9.25 22H6.75C4.26 22 2.25 19.99 2.25 17.5V15"
stroke="#0C1717"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{isTakingScreenCapture ? (
<p>Taking screencapture...</p>
) : (
<p>
Drag and drop or{' '}
<span className="cursor-pointer text-primary">
choose a file
</span>
</p>
)}

<p>
{isTakingScreenCapture
? 'Taking screencapture...'
: 'Capture current screen'}
</p>
</div>
)}
{fileAttachement !== null && (
<div className="relative h-full w-full flex-1 rounded border-2 border-[#B6EAEA] px-6 py-5 text-center text-xs transition">
<div className="flex h-full w-full items-center justify-items-center gap-2">
<FileUploader
classes={
fileAttachement === null
? `grow cursor-pointer rounded border-2 border-dashed border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100 w-[50%]`
: ` flex-1 rounded border-2 border-[#B6EAEA] px-6 py-5 text-center text-xs transition w-full`
}
disabled={
fileAttachement !== null ||
isSendingFeedback ||
isTakingScreenCapture
}
handleChange={uploadFile}
name="attachement"
types={FILE_TYPES}
fileOrFiles={fileAttachement}
hoverTitle="drop here"
maxSize={MAX_FILE_SIZE_MB}
onTypeError={(err: string) =>
setToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
onSizeError={(err: string) =>
setToast({
hasError: true,
title: 'File upload failed',
message: err
})
}
dropMessageStyle={{
width: '100%',
height: '100%',
position: 'absolute',
background: '#F4F9F9',
top: 0,
right: 2,
display: 'flex',
flexGrow: 2,
opacity: 1,
zIndex: 20,
color: '#008484',
fontSize: 14,
border: 'none'
}}
>
{fileAttachement === null && (
<div className="">
<svg
width="40"
height="40"
viewBox="0 0 40 40"
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="M35 11.6666V28.3333C35 33.3333 32.5 36.6666 26.6667 36.6666H13.3333C7.5 36.6666 5 33.3333 5 28.3333V11.6666C5 6.66659 7.5 3.33325 13.3333 3.33325H26.6667C32.5 3.33325 35 6.66659 35 11.6666Z"
d="M9.5 17V11L7.5 13"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M24.167 7.5V10.8333C24.167 12.6667 25.667 14.1667 27.5003 14.1667H30.8337"
d="M9.5 11L11.5 13"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.333 21.6667H19.9997"
d="M22.5 10V15C22.5 20 20.5 22 15.5 22H9.5C4.5 22 2.5 20 2.5 15V9C2.5 4 4.5 2 9.5 2H14.5"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M13.333 28.3333H26.6663"
d="M22.5 10H18.5C15.5 10 14.5 9 14.5 6V2L22.5 10Z"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div className="flex-1 text-left">
<p>{fileAttachement.name}</p>
<p className="text-black-400">
{(fileAttachement.size / (1024 * 1024)).toFixed(2)}
MB
</p>
</div>
<p>
Drag and drop or{' '}
<span className="cursor-pointer text-primary">
choose a file
</span>
</p>
</div>
<a
onClick={e => {
e.preventDefault();
if (!isSendingFeedback && !isTakingScreenCapture)
setFileAttachement(null);
return false;
}}
className="absolute right-4 top-4 block h-4 w-4 cursor-pointer"
aria-disabled={
isTakingScreenCapture || isSendingFeedback
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
)}
{fileAttachement !== null && (
<div className="relative h-full w-full">
<div className="flex h-full w-full items-center justify-items-center gap-2">
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M35 11.6666V28.3333C35 33.3333 32.5 36.6666 26.6667 36.6666H13.3333C7.5 36.6666 5 33.3333 5 28.3333V11.6666C5 6.66659 7.5 3.33325 13.3333 3.33325H26.6667C32.5 3.33325 35 6.66659 35 11.6666Z"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M24.167 7.5V10.8333C24.167 12.6667 25.667 14.1667 27.5003 14.1667H30.8337"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.333 21.6667H19.9997"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.333 28.3333H26.6663"
stroke="#0C1717"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div className="flex-1 text-left">
<p>{fileAttachement.name}</p>
<p className="text-black-400">
{(fileAttachement.size / (1024 * 1024)).toFixed(
2
)}
MB
</p>
</div>
</div>
<a
onClick={e => {
e.preventDefault();
if (!isSendingFeedback && !isTakingScreenCapture)
setFileAttachement(null);
return false;
}}
className="absolute right-4 top-4 block h-4 w-4 cursor-pointer"
aria-disabled={
isTakingScreenCapture || isSendingFeedback
}
>
<path
d="M4.66602 12.079L11.3327 5.41235"
stroke="#0C1717"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.3327 12.079L4.66602 5.41235"
stroke="#0C1717"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</a>
</div>
)}
</FileUploader>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
>
<path
d="M4.66602 12.079L11.3327 5.41235"
stroke="#0C1717"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.3327 12.079L4.66602 5.41235"
stroke="#0C1717"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</a>
</div>
)}
</FileUploader>
</div>
</div>
<div className="mt-4 flex justify-between">
<p className="text-xs text-black-400">
Expand Down
Loading

0 comments on commit a6bdfe6

Please sign in to comment.