Merge pull request #97 from not-byte/28-uicontact-form-proper-dialog-…

…styling

UI(contact): styled contact dialog

src/UI/Dialog/index.tsx

@@ -51,18 +51,18 @@ export default function Dialog({ title, onClose, children }: Props) {
       <DialogContext.Provider value={{ closeDialog }}>
         <dialog
           ref={dialogRef}
-          className="w-[50%] h-[70%] p-16 rounded-xl shadow-lg bg-transparent backdrop-blur-md text-gray-200 border transition-all "
+          className="w-full p-4 lg:w-[75%] xl:w-[50%] lg:px-16 lg:py-12 rounded-xl shadow-lg bg-transparent backdrop-blur-md text-gray-200 border border-grey-light transition-all "
         >
           <div className="flex flex-col">
             <div className="flex items-center justify-between mb-6">
-              <h1 className="text-6xl font-semibold text-gradient-colors">
+              <h1 className=" text-4xl md:text-6xl font-semibold text-gradient-colors">
                 {title}
               </h1>
               <button
                 onClick={closeDialog}
-                className="rounded-full p-2 inline-flex items-center justify-center text-gray-400 hover:text-white transition-colors"
+                className="rounded-full p-1 inline-flex items-center justify-center text-gray-400 hover:text-white transition-colors"
               >
-                <FaTimesCircle className="w-12 h-12" />
+                <FaTimesCircle className="w-8 h-8" />
               </button>
             </div>
             <div className="mb-6 text-gray-400">{children}</div>

src/components/Navbar/Contact.tsx

@@ -43,12 +43,12 @@ export const Contact = () => {
     <form
       action={createContact}
       id="contactForm"
-      className="w-full  mx-auto p-20"
+      className="w-full mx-auto px-8 md:px-20"
     >
       <div className="input-group mb-4">
         <label
           htmlFor="name"
-          className="block text-md font-medium text-gray-700 dark:text-gray-300 mb-2"
+          className="block text-md font-medium text-grey-darker dark:text-grey-lighter mb-2"
         >
           Name
         </label>
@@ -57,13 +57,13 @@ export const Contact = () => {
           id="name"
           required
           name="name"
-          className="mt-1 p-2 w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:bg-darkModeColors dark:focus:border-blue-300"
+          className="mt-1 p-2 w-full border-gray-300 rounded-md shadow-sm text-black transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-[rgba(240,132,97,1.00)] focus:border-[rgba(240,132,97,1.00)]"
         />
       </div>
       <div className="input-group mb-4">
         <label
           htmlFor="email"
-          className="block text-md  font-medium text-gray-700 dark:text-gray-300"
+          className="block text-md font-medium text-grey-darker dark:text-grey-lighter"
         >
           Email
         </label>
@@ -72,13 +72,13 @@ export const Contact = () => {
           id="email"
           name="email"
           required
-          className="mt-1 p-2 w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:bg-darkModeColors dark:focus:border-blue-300"
+          className="mt-1 p-2 w-full border-gray-300 rounded-md shadow-sm text-black transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-[rgba(129,81,156,1.00)] focus:border-[rgba(129,81,156,1.00)]"
         />
       </div>
       <div className="input-group mb-4">
         <label
           htmlFor="message"
-          className="block text-md  font-medium text-gray-700 dark:text-gray-300"
+          className="block text-md font-medium text-grey-darker dark:text-grey-lighter"
         >
           Message
         </label>
@@ -87,7 +87,7 @@ export const Contact = () => {
           name="message"
           rows={8}
           required
-          className="mt-1 p-2 w-full border-gray-300 dark:border-gray-600 rounded-md shadow-sm dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:bg-darkModeColors dark:focus:border-blue-300"
+          className="mt-1 p-2 w-full border-gray-300 rounded-md shadow-sm text-black transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-[rgba(234,86,87,1.00)] focus:border-[rgba(234,86,87,1.00)]"
         ></textarea>
       </div>
       <div className="form-actions flex justify-end">

src/components/Navbar/button.tsx

@@ -11,7 +11,7 @@ export const FormButton = () => {
     <Button
       isLoading={pending}
       type="submit"
-      className="px-4 py-2 bg-blue-500 hover:bg-colors text-white font-bold rounded-md transition-colors duration-200"
+      className="px-4 py-2 hover:bg-colors text-white font-bold rounded-md transition-colors duration-200"
     >
       Send Message
     </Button>