From 508c60bb8634470cc8792ba96b3183cb169c8739 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 7 Jul 2022 16:04:44 +0200
Subject: [PATCH] Adjusted shadows

---
 apps/comments-ui/src/components/AddForm.js |  6 +++---
 apps/comments-ui/tailwind.config.js        | 12 ++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/comments-ui/src/components/AddForm.js b/apps/comments-ui/src/components/AddForm.js
index ba6e1fea92..3ad2645e5b 100644
--- a/apps/comments-ui/src/components/AddForm.js
+++ b/apps/comments-ui/src/components/AddForm.js
@@ -52,12 +52,12 @@ const AddForm = (props) => {
     };
 
     return (
-        <form onSubmit={submitForm} onClick={handleFocus} className={`comment-form transition duration-200 border border-neutral-150 hover:border-neutral-200 rounded-md px-3 pt-3 pb-2 -m-3 shadow-lg shadow-neutral-50 hover:shadow-xl hover:shadow-neutral-100 ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
+        <form onSubmit={submitForm} onClick={handleFocus} className={`comment-form transition duration-200 hover:border-neutral-200 rounded-md p-3 -m-3 mt-14 shadow-lg hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
             <div className="w-full relative">
                 <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
                     <div className="relative w-full">
                         <textarea
-                            className={`transition-[height] pl-[56px] ${focused ? 'mt-8' : 'mt-0'} duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans text-[16.5px] mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
+                            className={`transition-[height] pl-[56px] ${focused ? 'mt-8' : 'mt-0'} duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans text-[16.5px] leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-11 hover:border-slate-300'}`}
                             value={message}
                             onChange={handleChange}
                             onFocus={handleFocus}
@@ -66,7 +66,7 @@ const AddForm = (props) => {
                             placeholder='Join the discussion'
                         />
                         <button
-                            className={`transition-[opacity] duration-150 absolute -right-3 bottom-2 rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`}
+                            className={`transition-[opacity] duration-150 absolute -right-[9px] bottom-[2px] rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`}
                             type="submit">
                             Add comment
                         </button>
diff --git a/apps/comments-ui/tailwind.config.js b/apps/comments-ui/tailwind.config.js
index 493a644072..ef755bd37c 100644
--- a/apps/comments-ui/tailwind.config.js
+++ b/apps/comments-ui/tailwind.config.js
@@ -100,6 +100,18 @@ module.exports = {
             wide: '.018em',
             wider: '.05em',
             widest: '.1em'
+        },
+        boxShadow: {
+            lg: [
+                '0px 0px 1px rgba(0, 0, 0, 0.12)', 
+                '0px 4px 8px rgba(0, 0, 0, 0.04)', 
+                '0px 8px 48px rgba(0, 0, 0, 0.05)'
+            ],
+            xl: [
+                '0px 0px 1px rgba(0, 0, 0, 0.12)', 
+                '0px 13px 20px rgba(0, 0, 0, 0.04)', 
+                '0px 14px 57px rgba(0, 0, 0, 0.06)'
+            ]
         }
     },
     content: [