diff --git a/apps/spotlight/src/layouts/Layout.astro b/apps/spotlight/src/layouts/Layout.astro index 4b87ba984..c01a78b83 100644 --- a/apps/spotlight/src/layouts/Layout.astro +++ b/apps/spotlight/src/layouts/Layout.astro @@ -52,7 +52,7 @@ const context = getAppContext(); {title} - +
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss index 80694aff2..b71bb3230 100644 --- a/packages/design/sass/styles.scss +++ b/packages/design/sass/styles.scss @@ -1,6 +1,10 @@ @forward "uswds-theme"; @forward "uswds"; +html { + scroll-behavior: smooth; +} + h1 { font-size: 2.5em; @@ -94,6 +98,10 @@ main { .usa-button, .usa-menu-btn { background-color: #54278f; + + &:hover { + background-color: #783cb9; + } } .usa-header, @@ -145,12 +153,12 @@ nav { padding-top: 2.6rem; } } -.previewForm { +.previewForm { padding-left: 1rem; - + >fieldset { margin-bottom: 10em; - + >legend { border-bottom: 1px #DCDEE0 solid; font-size: 2rem; @@ -288,6 +296,12 @@ iframe:focus { cursor: pointer; } + .usa-button { + background: #e7e3fa; + margin: 0; + padding: 2px; + } + .usa-icon { height: 1.75em; width: 1.75em; @@ -339,9 +353,15 @@ iframe:focus { .settingsContainer { background: #e7e3fa; padding: 30px; + position: -webkit-sticky; /* Safari */ + top: 10px; h2 { margin-top: 0; + font-size: 1.2em; + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; } .formRowEditFields { @@ -350,8 +370,18 @@ iframe:focus { } } - .usa-buttom { + .usa-button { + width: 100%; + padding: 1rem 1.25rem; margin: 20px 0 0; + + &.close-button { + background-color: #76766a; + + &:hover { + background-color: #929285; + } + } } } @@ -399,6 +429,34 @@ iframe:focus { } } +@media screen and (max-width: 879px) { + .editFormContentWrapper { + .grid-col { + width: 100%; + } + + .usa-button{ + margin-left: 0; + } + + .grid-col-4 { + position: static; + } + + .settingsContainer { + position: fixed; + top: 15%; + left: 50%; + transform: translate(-50%, 0); + width: 90%; + margin: 0 auto; + height: auto; + box-shadow: 1px 4px 12px #76766a; + } + } +} + + @media screen and (max-width: 480px) { .usa-legend, .usa-label { diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx index 9a613f276..7dd2a3677 100644 --- a/packages/design/src/Form/index.tsx +++ b/packages/design/src/Form/index.tsx @@ -89,7 +89,6 @@ export default function Form({ updatePrompt(allFormData); }, [allFormData]); */ - console.log(JSON.stringify(prompt, null, 2)); return (
diff --git a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx index 6e809d817..8b08b4c87 100644 --- a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx @@ -2,9 +2,9 @@ import React, { useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { - getFormElementConfig, updateElement, type FormElementMap, + getFormElementConfig, } from '@atj/forms'; import { FormEditUIContext } from '../../config'; import { usePreviewContext } from './context'; @@ -32,7 +32,6 @@ export const FormElementEdit = ({ return (
-

Editing {selectedElement.id}...

{ diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx index e0b597a04..0cb014bbc 100644 --- a/packages/design/src/FormManager/FormEdit/Preview.tsx +++ b/packages/design/src/FormManager/FormEdit/Preview.tsx @@ -112,40 +112,30 @@ const createPatternPreviewComponent = ( ? 'form-group-row field-selected' : 'form-group-row'; - // console.log("Current Selected ID:", selectedId); - // console.log("Prompt ID:", prompt); - - // console.log("setSelectedId : ", setSelectedId ); - // console.log("Is Selected:", isSelected); - // console.log("Class Names:", divClassNames); return ( -
+ ); diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx index eaa9973ea..d6fb7d5fa 100644 --- a/packages/design/src/FormManager/FormEdit/index.tsx +++ b/packages/design/src/FormManager/FormEdit/index.tsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; +import { FormDefinition } from '@atj/forms'; import { type FormService } from '@atj/form-service'; import { type FormEditUIContext } from '../../config'; import { PreviewContextProvider, usePreviewContext } from './context'; import { FormElementEdit } from './FormElementEdit'; import { PreviewForm } from './Preview'; -import { FormDefinition } from '@atj/forms'; export default function FormEdit({ context, @@ -22,11 +22,16 @@ export default function FormEdit({ return 'Form not found'; } const form = result.data; + return (

Edit form

Your form has been imported for web delivery.

+ formService.saveForm(formId, form)} + />{' '} formService.saveForm(formId, form)} @@ -48,7 +53,7 @@ const EditForm = ({ saveForm(form); }, [form]); return ( -
+
diff --git a/packages/design/src/config/edit/InputElementEdit.tsx b/packages/design/src/config/edit/InputElementEdit.tsx index a1d51612a..497651f02 100644 --- a/packages/design/src/config/edit/InputElementEdit.tsx +++ b/packages/design/src/config/edit/InputElementEdit.tsx @@ -13,7 +13,7 @@ const InputElementEdit: FormElementEditComponent = ({
> = ({ className={classNames('usa-label', { 'usa-label--error': pattern.error, })} - htmlFor="input-error" + htmlFor={`input-${pattern.inputId}`} + id={`input-message-${pattern.inputId}`} > {pattern.label}