add style to the form

sanctuarycomputer · Nov 4, 2024 · db4cba5 · db4cba5
1 parent 3624731
commit db4cba5
Show file tree

Hide file tree

Showing 11 changed files with 417 additions and 219 deletions.
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
diff --git a/src/modules/new-request-form/NewRequestForm.tsx b/src/modules/new-request-form/NewRequestForm.tsx
@@ -1,5 +1,5 @@
 import type { AnswerBot, Field, RequestForm } from "./data-types";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Input } from "./fields/Input";
 import { TextArea } from "./fields/textarea/TextArea";
 import { DropDown } from "./fields/DropDown";
@@ -164,12 +164,6 @@ export function NewRequestForm({
           </Anchor>
         </StyledParagraph>
       )}
-      <StyledParagraph aria-hidden="true">
-        {t(
-          "new-request-form.required-fields-info",
-          "Fields marked with an asterisk (*) are required."
-        )}
-      </StyledParagraph>
       <Form
         ref={formRefCallback}
         action={action}
@@ -231,6 +225,7 @@ export function NewRequestForm({
                   onChange={(value) => handleChange(field, value)}
                 />
               );
+            // Issue description
             case "description":
               return (
                 <>
@@ -304,6 +299,7 @@ export function NewRequestForm({
               );
             case "multiselect":
               return <MultiSelect field={field} />;
+            // Issue type
             case "tagger":
               return (
                 <Tagger

diff --git a/src/modules/new-request-form/fields/DropDown.tsx b/src/modules/new-request-form/fields/DropDown.tsx
@@ -30,14 +30,7 @@ export function DropDown({ field, onChange }: DropDownProps): JSX.Element {
   }, [wrapperRef, required]);
 
   return (
-    <GardenField>
-      <Label>
-        {label}
-        {required && <Span aria-hidden="true">*</Span>}
-      </Label>
-      {description && (
-        <Hint dangerouslySetInnerHTML={{ __html: description }} />
-      )}
+    <GardenField className="custom-form-field-layout">
       <Combobox
         ref={wrapperRef}
         inputProps={{ name, required }}
@@ -68,6 +61,9 @@ export function DropDown({ field, onChange }: DropDownProps): JSX.Element {
         ))}
       </Combobox>
       {error && <Message validation="error">{error}</Message>}
+      {description && (
+        <Hint dangerouslySetInnerHTML={{ __html: description }} />
+      )}
     </GardenField>
   );
 }
diff --git a/src/modules/new-request-form/fields/Input.tsx b/src/modules/new-request-form/fields/Input.tsx
@@ -27,10 +27,10 @@ export function Input({ field, onChange }: InputProps): JSX.Element {
 
   return (
     <GardenField>
-      <Label>
+      <div>
         {label}
         {required && <Span aria-hidden="true">*</Span>}
-      </Label>
+      </div>
       {description && (
         <Hint dangerouslySetInnerHTML={{ __html: description }} />
       )}

diff --git a/src/modules/new-request-form/fields/Tagger.tsx b/src/modules/new-request-form/fields/Tagger.tsx
@@ -60,14 +60,11 @@ export function Tagger({ field, onChange }: TaggerProps): JSX.Element {
   };
 
   return (
-    <GardenField>
-      <Label>
+    <GardenField className="custom-form-field-layout">
+      <Label className="custom-title">
         {label}
         {required && <Span aria-hidden="true">*</Span>}
       </Label>
-      {description && (
-        <Hint dangerouslySetInnerHTML={{ __html: description }} />
-      )}
       <Combobox
         ref={wrapperRef}
         inputProps={{ required, name }}
@@ -105,6 +102,12 @@ export function Tagger({ field, onChange }: TaggerProps): JSX.Element {
         )}
       </Combobox>
       {error && <Message validation="error">{error}</Message>}
+      {description && (
+        <Hint
+          className="custom-hint"
+          dangerouslySetInnerHTML={{ __html: description }}
+        />
+      )}
     </GardenField>
   );
 }
diff --git a/src/modules/new-request-form/fields/attachments/Attachments.tsx b/src/modules/new-request-form/fields/attachments/Attachments.tsx
@@ -181,10 +181,14 @@ export function Attachments({ field }: AttachmentProps): JSX.Element {
   };
 
   return (
-    <GardenField>
-      <Label>{label}</Label>
+    <div className="custom-form-field-layout">
+      <Label className="custom-title">{label}</Label>
       {error && <Message validation="error">{error}</Message>}
-      <FileUpload {...getRootProps()} isDragging={isDragActive}>
+      <FileUpload
+        {...getRootProps()}
+        isDragging={isDragActive}
+        className="!border-0 !bg-light-surface-3 dark:!bg-light-surface-3"
+      >
         {isDragActive ? (
           <span>
             {t(
@@ -193,10 +197,10 @@ export function Attachments({ field }: AttachmentProps): JSX.Element {
             )}
           </span>
         ) : (
-          <span>
+          <span className="label-2 !text-light-neutral-1 dark:!text-dark-neutral-1">
             {t(
               "new-request-form.attachments.choose-file-label",
-              "Choose a file or drag and drop here"
+              "Add file or drop files here"
             )}
           </span>
         )}
@@ -222,6 +226,6 @@ export function Attachments({ field }: AttachmentProps): JSX.Element {
             />
           )
       )}
-    </GardenField>
+    </div>
   );
 }
diff --git a/src/modules/new-request-form/fields/textarea/TextArea.tsx b/src/modules/new-request-form/fields/textarea/TextArea.tsx
@@ -20,12 +20,6 @@ interface TextAreaProps {
   onChange: (value: string) => void;
 }
 
-const StyledField = styled(GardenField)`
-  .ck.ck-editor {
-    margin-top: ${(props) => props.theme.space.xs};
-  }
-`;
-
 const StyledMessage = styled(Message)`
   .ck.ck-editor + & {
     margin-top: ${(props) => props.theme.space.xs};
@@ -51,25 +45,31 @@ export function TextArea({
   });
 
   return (
-    <StyledField>
-      <Label>
+    <div className="custom-form-field-layout">
+      <Label className="custom-title">
         {label}
         {required && <Span aria-hidden="true">*</Span>}
       </Label>
-      {description && (
-        <Hint dangerouslySetInnerHTML={{ __html: description }} />
-      )}
+      {/* using ck.ck-reset classname for styling */}
       <Textarea
         ref={ref}
         name={name}
-        defaultValue={value as string}
+        defaultValue={
+          value && value !== "" ? (value as string) : "Describe your issue."
+        }
         validation={error ? "error" : undefined}
         required={required}
         onChange={(e) => onChange(e.target.value)}
         rows={6}
         isResizable
       />
       {error && <StyledMessage validation="error">{error}</StyledMessage>}
-    </StyledField>
+      {description && (
+        <Hint
+          className="custom-hint"
+          dangerouslySetInnerHTML={{ __html: description }}
+        />
+      )}
+    </div>
   );
 }
diff --git a/styles/index.scss b/styles/index.scss
@@ -1,2 +1,3 @@
-@import 'normalize';
-@import 'main.css';
+@import "normalize";
+@import "request-form.css";
+@import "main.css";
diff --git a/styles/main.css b/styles/main.css
@@ -1,8 +1,8 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
-@import '../assets/types.css';
+@import "../assets/types.css";
 
 .site-max-width {
   max-width: 1440px;
@@ -15,3 +15,27 @@
 .page-wrapper {
   @apply p-margin-mobile pb-margin-web sm:px-margin-web sm:pb-[7.5rem] mt-nav-h;
 }
+
+.ck.ck-editor__main > .ck-editor__editable,
+.ck.ck-toolbar {
+  @apply !bg-light-surface-3 dark:!bg-dark-surface-3 !border-0;
+}
+.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
+  @apply !border-0;
+}
+
+:not(.ck.ck-content p) .ck.ck-content p {
+  @apply !body-2 dark:!text-dark-neutral-2 !text-light-neutral-2;
+}
+
+.custom-hint {
+  @apply !body-3 dark:!text-dark-neutral-2 !text-light-neutral-2;
+}
+
+.custom-title {
+  @apply !heading-3 dark:!text-dark-neutral-1 !text-light-neutral-1;
+}
+
+.custom-form-field-layout {
+  @apply flex flex-col space-y-3;
+}
diff --git a/styles/request-form.scss b/styles/request-form.scss
@@ -0,0 +1,3 @@
+.ck.ck-editor__main > .ck-editor__editable {
+  @apply !bg-light-surface-3 dark:!bg-dark-surface-3;
+}
diff --git a/templates/new_request_page.hbs b/templates/new_request_page.hbs
@@ -1,17 +1,6 @@
 <div class="container-divider"></div>
 <div class="container">
-  <div class="sub-nav">
-    {{breadcrumbs}}
-    <div class="search-container">
-      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
-        <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
-        <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
-      </svg>
-      {{search submit=false}}
-    </div>
-  </div>
-
-  <h1>
+  <h1 class="heading-1 text-light-neutral-1 dark:text-dark-neutral-1 mb-12">
     {{t 'submit_a_request'}}
   </h1>