feat(ui): add critical shadow for comment input validation, set editor popover radius to 14px

packages/app/src/pages/session.tsx

@@ -2100,9 +2100,9 @@ export default function Page() {
                                   <textarea
                                     ref={textarea}
                                     classList={{
-                                      "w-full resize-vertical p-2 rounded-[6px] bg-surface-base border text-text-strong text-12-regular leading-5 focus:outline-none focus:shadow-xs-border-select": true,
-                                      "border-transparent": !draftError(),
-                                      "border-border-critical-base": draftError(),
+                                      "w-full resize-vertical p-2 rounded-[6px] bg-surface-base text-text-strong text-12-regular leading-5 focus:outline-none": true,
+                                      "focus:shadow-xs-border-select": !draftError(),
+                                      "shadow-xs-border-critical-base": draftError(),
                                     }}
                                     rows={3}
                                     placeholder="Add comment"

packages/ui/src/components/line-comment.css

@@ -46,4 +46,5 @@
   width: 380px;
   max-width: min(380px, calc(100vw - 48px));
   padding: 8px;
+  border-radius: 14px;
 }

packages/ui/src/styles/tailwind/index.css

@@ -66,6 +66,7 @@
   --shadow-xs-border-select: var(--shadow-xs-border-select);
   --shadow-xs-border-focus: var(--shadow-xs-border-focus);
   --shadow-xs-border-hover: var(--shadow-xs-border-hover);
+  --shadow-xs-border-critical-base: var(--shadow-xs-border-critical-base);
   --shadow-lg-border-base: var(--shadow-lg-border-base);
 
   --animate-pulse: var(--animate-pulse);

packages/ui/src/styles/theme.css

@@ -76,6 +76,11 @@
   --shadow-xs-border-hover:
     0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
     0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-xs-border-critical-base:
+    0 0 0 1px var(--border-critical-selected, #FC543A);
+  --shadow-xs-border-critical-focus:
+    0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #FC543A),
+  0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
   --shadow-lg-border-base:
     0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),
     0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),