diff --git a/components/system/components/GlobalCarousel/jumpers/EditInfo.js b/components/system/components/GlobalCarousel/jumpers/EditInfo.js index 35f366a1..c122e5c9 100644 --- a/components/system/components/GlobalCarousel/jumpers/EditInfo.js +++ b/components/system/components/GlobalCarousel/jumpers/EditInfo.js @@ -2,10 +2,8 @@ import * as React from "react"; import * as Styles from "~/common/styles"; import * as System from "~/components/system"; import * as Jumper from "~/components/system/components/fragments/Jumper"; -import * as SVG from "~/common/svg"; import * as Actions from "~/common/actions"; import * as Events from "~/common/custom-events"; -import * as Constants from "~/common/constants"; import * as MobileJumper from "~/components/system/components/fragments/MobileJumper"; import { css } from "@emotion/react"; @@ -22,6 +20,16 @@ const STYLES_EDIT_INFO_INPUT = (theme) => css` color: ${theme.semantic.textBlack}; `; +const STYLES_EDIT_INFO_NOTES_INPUT = (theme) => css` + width: 100%; + max-width: unset; + box-shadow: 0 0 0 1px ${theme.semantic.borderGrayLight4} inset; + border-radius: 12px; + background-color: transparent; + color: ${theme.semantic.textBlack}; + min-height: 120px; +`; + const STYLES_EDIT_INFO_FOOTER = (theme) => css` display: flex; position: absolute; @@ -35,9 +43,8 @@ const STYLES_EDIT_INFO_FOOTER = (theme) => css` const STYLES_EDIT_INFO_FORM = css` flex-grow: 1; - flex-basis: 0; overflow-y: auto; - padding-bottom: 40; + height: 270px; `; function UpdateFileForm({ file, isMobile, onClose }) { @@ -46,19 +53,20 @@ function UpdateFileForm({ file, isMobile, onClose }) { const { getFieldProps, getFormProps, isSubmitting } = useForm({ initialValues: { title: file?.name || "", - description: file?.body || "", + notes: file?.body || "", }, - onSubmit: async ({ title, description }) => { + onSubmit: async ({ title, notes }) => { const response = await Actions.updateFile({ id: file.id, name: title, - body: description, + body: notes, }); + onClose(); Events.hasError(response); }, }); - //NOTE(amine): scroll to the bottom of the form every time the description's textarea resizes + //NOTE(amine): scroll to the bottom of the form every time the notes' textarea resizes const scrollToFormBottom = () => { const form = formRef.current; if (!form) return; @@ -85,13 +93,13 @@ function UpdateFileForm({ file, isMobile, onClose }) {
- Description + Notes
diff --git a/vendor/react-textarea-autosize.js b/vendor/react-textarea-autosize.js index e16f8685..80d98e2d 100644 --- a/vendor/react-textarea-autosize.js +++ b/vendor/react-textarea-autosize.js @@ -1,7 +1,6 @@ import * as React from "react"; import calculateNodeHeight, { purgeCache } from "~/vendor/calculate-node-height"; -import { FocusRing } from "~/components/core/FocusRing"; import { css } from "@emotion/react"; const noop = () => {}; @@ -53,14 +52,12 @@ export default class TextareaAutosize extends React.Component { } return ( - -