From db4cba536f0c5d55e9ed04edb91ddeed5c2dc772 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Sun, 3 Nov 2024 19:26:10 -0500
Subject: [PATCH] add style to the form

---
 assets/tailwind-output.css                    | 502 ++++++++++++------
 .../new-request-form/NewRequestForm.tsx       |  10 +-
 .../new-request-form/fields/DropDown.tsx      |  12 +-
 src/modules/new-request-form/fields/Input.tsx |   4 +-
 .../new-request-form/fields/Tagger.tsx        |  13 +-
 .../fields/attachments/Attachments.tsx        |  16 +-
 .../fields/textarea/TextArea.tsx              |  26 +-
 styles/index.scss                             |   5 +-
 styles/main.css                               |  32 +-
 styles/request-form.scss                      |   3 +
 templates/new_request_page.hbs                |  13 +-
 11 files changed, 417 insertions(+), 219 deletions(-)
 create mode 100644 styles/request-form.scss

diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index 5fcd9c304..18ebd87d5 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -1,4 +1,6 @@
-*, ::before, ::after {
+*,
+::before,
+::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -8,19 +10,19 @@
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -28,28 +30,28 @@
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
 }
 
 ::backdrop {
@@ -62,19 +64,19 @@
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -82,28 +84,28 @@
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+  --tw-contain-size: ;
+  --tw-contain-layout: ;
+  --tw-contain-paint: ;
+  --tw-contain-style: ;
 }
 
 /*
@@ -130,7 +132,7 @@
 
 ::before,
 ::after {
-  --tw-content: '';
+  --tw-content: "";
 }
 
 /*
@@ -152,9 +154,10 @@ html,
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-     tab-size: 4;
+  tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -197,7 +200,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 /*
@@ -243,7 +246,8 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -344,9 +348,9 @@ select {
 */
 
 button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
+input:where([type="button"]),
+input:where([type="reset"]),
+input:where([type="submit"]) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -393,7 +397,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -486,7 +490,8 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-moz-placeholder, textarea::-moz-placeholder {
+input::-moz-placeholder,
+textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -982,32 +987,42 @@ video {
 
 .translate-x-1 {
   --tw-translate-x: 0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .translate-y-0 {
   --tw-translate-y: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .translate-y-4 {
   --tw-translate-y: 1rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .translate-y-\[-50\%\] {
   --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .select-all {
   -webkit-user-select: all;
-     -moz-user-select: all;
-          user-select: all;
+  -moz-user-select: all;
+  user-select: all;
 }
 
 .resize {
@@ -1135,6 +1150,10 @@ video {
   border-top-right-radius: 1.25rem;
 }
 
+.\!border-0 {
+  border-width: 0px !important;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1156,15 +1175,19 @@ video {
 }
 
 .border-\[top\2c left\2c right\2c bottom\] {
-  border-color: top,left,right,bottom;
+  border-color: top, left, right, bottom;
 }
 
 .border-dark-surface-3 {
-  border-color: rgba(255,255,255,0.12);
+  border-color: rgba(255, 255, 255, 0.12);
 }
 
 .border-light-surface-3 {
-  border-color: rgba(34,34,34,0.05);
+  border-color: rgba(34, 34, 34, 0.05);
+}
+
+.\!bg-light-surface-3 {
+  background-color: rgba(34, 34, 34, 0.05) !important;
 }
 
 .bg-dark-accent-1 {
@@ -1220,11 +1243,11 @@ video {
 }
 
 .bg-dark-surface-3 {
-  background-color: rgba(255,255,255,0.12);
+  background-color: rgba(255, 255, 255, 0.12);
 }
 
 .bg-dark-surface-3-hovered {
-  background-color: rgba(255,255,255,0.16);
+  background-color: rgba(255, 255, 255, 0.16);
 }
 
 .bg-light-accent-1 {
@@ -1303,11 +1326,11 @@ video {
 }
 
 .bg-light-surface-3 {
-  background-color: rgba(34,34,34,0.05);
+  background-color: rgba(34, 34, 34, 0.05);
 }
 
 .bg-scrim {
-  background-color: rgba(0,0,0,0.60);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .bg-white {
@@ -1316,51 +1339,51 @@ video {
 }
 
 .fill-dark-accent-1 {
-  fill: #FC74FE;
+  fill: #fc74fe;
 }
 
 .fill-dark-blue-vibrant {
-  fill: #0C8911;
+  fill: #0c8911;
 }
 
 .fill-dark-brown-vibrant {
-  fill: #85754A;
+  fill: #85754a;
 }
 
 .fill-dark-green-base {
-  fill: #0C8911;
+  fill: #0c8911;
 }
 
 .fill-dark-neutral-1 {
-  fill: #FFFFFF;
+  fill: #ffffff;
 }
 
 .fill-dark-neutral-2 {
-  fill: #9B9B9B;
+  fill: #9b9b9b;
 }
 
 .fill-dark-orange-vibrant {
-  fill: #FF4D00;
+  fill: #ff4d00;
 }
 
 .fill-dark-pink-vibrant {
-  fill: #FC74FE;
+  fill: #fc74fe;
 }
 
 .fill-light-accent-1 {
-  fill: #F50DB4;
+  fill: #f50db4;
 }
 
 .fill-light-blue-vibrant {
-  fill: #0047FF;
+  fill: #0047ff;
 }
 
 .fill-light-brown-vibrant {
-  fill: #85754A;
+  fill: #85754a;
 }
 
 .fill-light-green-base {
-  fill: #0C8911;
+  fill: #0c8911;
 }
 
 .fill-light-neutral-1 {
@@ -1368,15 +1391,15 @@ video {
 }
 
 .fill-light-neutral-2 {
-  fill: #7D7D7D;
+  fill: #7d7d7d;
 }
 
 .fill-light-orange-vibrant {
-  fill: #FF4D00;
+  fill: #ff4d00;
 }
 
 .fill-light-pink-vibrant {
-  fill: #F50DB4;
+  fill: #f50db4;
 }
 
 .p-2 {
@@ -1526,42 +1549,63 @@ video {
 
 .ordinal {
   --tw-ordinal: ordinal;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
 }
 
 .slashed-zero {
   --tw-slashed-zero: slashed-zero;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
 }
 
 .lining-nums {
   --tw-numeric-figure: lining-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
 }
 
 .oldstyle-nums {
   --tw-numeric-figure: oldstyle-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
 }
 
 .proportional-nums {
   --tw-numeric-spacing: proportional-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
 }
 
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
 }
 
 .diagonal-fractions {
   --tw-numeric-fraction: diagonal-fractions;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
 }
 
 .stacked-fractions {
   --tw-numeric-fraction: stacked-fractions;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero)
+    var(--tw-numeric-figure) var(--tw-numeric-spacing)
+    var(--tw-numeric-fraction);
+}
+
+.\!text-light-neutral-1 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
 }
 
 .text-dark-accent-1 {
@@ -1681,20 +1725,28 @@ video {
 
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
+    0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-dark-medium {
-  --tw-shadow: 0px 10px 15px -3px rgba(18, 18, 23, 0.54), 0px 4px 6px -2px rgba(18, 18, 23, 0.40);
-  --tw-shadow-colored: 0px 10px 15px -3px var(--tw-shadow-color), 0px 4px 6px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0px 10px 15px -3px rgba(18, 18, 23, 0.54),
+    0px 4px 6px -2px rgba(18, 18, 23, 0.4);
+  --tw-shadow-colored: 0px 10px 15px -3px var(--tw-shadow-color),
+    0px 4px 6px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-light-medium {
-  --tw-shadow: 0px 6px 15px -3px rgba(18, 18, 23, 0.18), 0px 2px 6px -2px rgba(18, 18, 23, 0.17);
-  --tw-shadow-colored: 0px 6px 15px -3px var(--tw-shadow-color), 0px 2px 6px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0px 6px 15px -3px rgba(18, 18, 23, 0.18),
+    0px 2px 6px -2px rgba(18, 18, 23, 0.17);
+  --tw-shadow-colored: 0px 6px 15px -3px var(--tw-shadow-color),
+    0px 2px 6px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .outline {
@@ -1702,44 +1754,71 @@ video {
 }
 
 .ring {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+    calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
 }
 
 .blur {
   --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .grayscale {
   --tw-grayscale: grayscale(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .invert {
   --tw-invert: invert(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .sepia {
   --tw-sepia: sepia(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
+    var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .backdrop-filter {
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
+    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
+    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
 }
 
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+    -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+    backdrop-filter;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+    backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1751,7 +1830,8 @@ video {
 }
 
 .transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1792,6 +1872,15 @@ video {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.heading-1 {
+  font-family: var(--font-basel-grotesk);
+  font-size: 3.25rem;
+  font-weight: 485;
+  line-height: 3.75rem;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .heading-2 {
   font-family: var(--font-basel-grotesk);
   font-size: 2.25rem;
@@ -1925,6 +2014,80 @@ video {
   }
 }
 
+.ck.ck-editor__main > .ck-editor__editable,
+.ck.ck-toolbar {
+  border-width: 0px !important;
+  background-color: rgba(34, 34, 34, 0.05) !important;
+}
+
+.ck.ck-editor__main > .ck-editor__editable:where(.dark, .dark *),
+.ck.ck-toolbar:where(.dark, .dark *) {
+  background-color: rgba(255, 255, 255, 0.12) !important;
+}
+
+.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
+  border-width: 0px !important;
+}
+
+:not(.ck.ck-content p) .ck.ck-content p {
+  --tw-text-opacity: 1 !important;
+  color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 1rem !important;
+  font-weight: 485 !important;
+  line-height: 1/5rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+:not(.ck.ck-content p) .ck.ck-content p:where(.dark, .dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
+}
+
+.custom-hint {
+  --tw-text-opacity: 1 !important;
+  color: rgb(125 125 125 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 0.875rem !important;
+  font-weight: 485 !important;
+  line-height: 1/25rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.custom-hint:where(.dark, .dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(155 155 155 / var(--tw-text-opacity)) !important;
+}
+
+.custom-title {
+  --tw-text-opacity: 1 !important;
+  color: rgb(34 34 34 / var(--tw-text-opacity)) !important;
+  font-family: var(--font-basel-grotesk) !important;
+  font-size: 1.5rem !important;
+  font-weight: 485 !important;
+  line-height: 2rem !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.custom-title:where(.dark, .dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+}
+
+.custom-form-field-layout {
+  display: flex;
+  flex-direction: column;
+}
+
+.custom-form-field-layout > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .placeholder\:text-light-pink-vibrant::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(245 13 180 / var(--tw-text-opacity));
@@ -1976,11 +2139,11 @@ video {
 }
 
 .hover\:bg-light-surface-3:hover {
-  background-color: rgba(34,34,34,0.05);
+  background-color: rgba(34, 34, 34, 0.05);
 }
 
 .hover\:bg-light-surface-3-hovered:hover {
-  background-color: rgba(34,34,34,0.09);
+  background-color: rgba(34, 34, 34, 0.09);
 }
 
 .hover\:text-light-pink-vibrant:hover {
@@ -2017,7 +2180,7 @@ video {
 }
 
 .data-\[active\]\:bg-light-surface-3[data-active] {
-  background-color: rgba(34,34,34,0.05);
+  background-color: rgba(34, 34, 34, 0.05);
 }
 
 .data-\[active\]\:text-light-neutral-1[data-active] {
@@ -2027,7 +2190,9 @@ video {
 
 .group[data-checked] .group-data-\[checked\]\:translate-x-8 {
   --tw-translate-x: 2rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 @media (min-width: 768px) {
@@ -2206,7 +2371,11 @@ video {
 }
 
 .dark\:border-dark-surface-3:where(.dark, .dark *) {
-  border-color: rgba(255,255,255,0.12);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.dark\:\!bg-light-surface-3:where(.dark, .dark *) {
+  background-color: rgba(34, 34, 34, 0.05) !important;
 }
 
 .dark\:bg-dark-accent-1:where(.dark, .dark *) {
@@ -2224,7 +2393,7 @@ video {
 }
 
 .dark\:bg-dark-brown-fade-80:where(.dark, .dark *) {
-  background-color: rgba(35,30,15,0.80);
+  background-color: rgba(35, 30, 15, 0.8);
 }
 
 .dark\:bg-dark-green-light:where(.dark, .dark *) {
@@ -2232,7 +2401,7 @@ video {
 }
 
 .dark\:bg-dark-orange-fade-80:where(.dark, .dark *) {
-  background-color: rgba(55,27,12,0.80);
+  background-color: rgba(55, 27, 12, 0.8);
 }
 
 .dark\:bg-dark-orange-light:where(.dark, .dark *) {
@@ -2240,7 +2409,7 @@ video {
 }
 
 .dark\:bg-dark-pink-fade-80:where(.dark, .dark *) {
-  background-color: rgba(54,26,55,0.80);
+  background-color: rgba(54, 26, 55, 0.8);
 }
 
 .dark\:bg-dark-pink-light:where(.dark, .dark *) {
@@ -2264,39 +2433,44 @@ video {
 }
 
 .dark\:bg-dark-surface-3:where(.dark, .dark *) {
-  background-color: rgba(255,255,255,0.12);
+  background-color: rgba(255, 255, 255, 0.12);
 }
 
 .dark\:fill-dark-accent-1:where(.dark, .dark *) {
-  fill: #FC74FE;
+  fill: #fc74fe;
 }
 
 .dark\:fill-dark-blue-vibrant:where(.dark, .dark *) {
-  fill: #0C8911;
+  fill: #0c8911;
 }
 
 .dark\:fill-dark-brown-vibrant:where(.dark, .dark *) {
-  fill: #85754A;
+  fill: #85754a;
 }
 
 .dark\:fill-dark-green-base:where(.dark, .dark *) {
-  fill: #0C8911;
+  fill: #0c8911;
 }
 
 .dark\:fill-dark-neutral-1:where(.dark, .dark *) {
-  fill: #FFFFFF;
+  fill: #ffffff;
 }
 
 .dark\:fill-dark-neutral-2:where(.dark, .dark *) {
-  fill: #9B9B9B;
+  fill: #9b9b9b;
 }
 
 .dark\:fill-dark-orange-vibrant:where(.dark, .dark *) {
-  fill: #FF4D00;
+  fill: #ff4d00;
 }
 
 .dark\:fill-dark-pink-vibrant:where(.dark, .dark *) {
-  fill: #FC74FE;
+  fill: #fc74fe;
+}
+
+.dark\:\!text-dark-neutral-1:where(.dark, .dark *) {
+  --tw-text-opacity: 1 !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
 }
 
 .dark\:text-dark-accent-1:where(.dark, .dark *) {
@@ -2349,7 +2523,15 @@ video {
   color: rgb(33 201 94 / var(--tw-text-opacity));
 }
 
-.dark\:placeholder\:text-dark-pink-vibrant:where(.dark, .dark *)::-moz-placeholder {
+.dark\:text-light-neutral-1:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(34 34 34 / var(--tw-text-opacity));
+}
+
+.dark\:placeholder\:text-dark-pink-vibrant:where(
+    .dark,
+    .dark *
+  )::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(252 116 254 / var(--tw-text-opacity));
 }
@@ -2370,11 +2552,11 @@ video {
 }
 
 .dark\:hover\:bg-dark-surface-3:hover:where(.dark, .dark *) {
-  background-color: rgba(255,255,255,0.12);
+  background-color: rgba(255, 255, 255, 0.12);
 }
 
 .dark\:hover\:bg-dark-surface-3-hovered:hover:where(.dark, .dark *) {
-  background-color: rgba(255,255,255,0.16);
+  background-color: rgba(255, 255, 255, 0.16);
 }
 
 .hover\:dark\:bg-dark-accent-2:where(.dark, .dark *):hover {
@@ -2393,7 +2575,7 @@ video {
 }
 
 .group:hover .group-hover\:dark\:fill-dark-neutral-1:where(.dark, .dark *) {
-  fill: #FFFFFF;
+  fill: #ffffff;
 }
 
 .group:hover .dark\:group-hover\:text-dark-neutral-1:where(.dark, .dark *) {
@@ -2417,7 +2599,7 @@ video {
 }
 
 .dark\:data-\[active\]\:bg-dark-surface-3[data-active]:where(.dark, .dark *) {
-  background-color: rgba(255,255,255,0.12);
+  background-color: rgba(255, 255, 255, 0.12);
 }
 
 .dark\:data-\[active\]\:text-dark-neutral-1[data-active]:where(.dark, .dark *) {
diff --git a/src/modules/new-request-form/NewRequestForm.tsx b/src/modules/new-request-form/NewRequestForm.tsx
index dc5304c3c..67624fc83 100644
--- 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
index 3bd6349a1..2f5245024 100644
--- 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
index bfb8a7013..15afcab4d 100644
--- 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
index ab2753823..019bc070a 100644
--- 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
index 1acef32e8..3e7b68673 100644
--- 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
index 787a53816..fd09a254d 100644
--- 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,18 +45,18 @@ 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)}
@@ -70,6 +64,12 @@ export function TextArea({
         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
index cef3e47f7..94c22967a 100644
--- 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
index 9541e509c..3aa9f924a 100644
--- 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
new file mode 100644
index 000000000..912c876da
--- /dev/null
+++ 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
index 68a82bac0..ecde2ba47 100644
--- 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>