Merge pull request #94 from not-byte/56-uiprojects-create-projects-se…

…ction

fix(dialog): misc fixes regarding dialog

src/UI/Dialog/index.tsx

@@ -1,8 +1,11 @@
 "use client";
+
+import React from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useRef, useEffect } from "react";
 import { redirectToPage } from "./close";
 import DialogContext from "./dialogContext";
+import { FaTimesCircle } from "react-icons/fa";
 
 type Props = {
   title: string;
@@ -54,44 +57,21 @@ export default function Dialog({ title, onClose, onOk, children }: Props) {
       <DialogContext.Provider value={{ closeDialog }}>
         <dialog
           ref={dialogRef}
-          className="fixed inset-0 m-auto w-[90%] max-w-lg p-5 rounded-xl shadow-lg backdrop-blur-sm bg-white/90 dark:bg-gray-800/90 border dark:border-gray-700 transition-all"
+          className="w-[50%] h-[70%] p-16 rounded-xl shadow-lg bg-transparent backdrop-blur-md text-gray-200 border transition-all "
         >
           <div className="flex flex-col">
             <div className="flex items-center justify-between mb-6">
-              <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
+              <h1 className="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-500 hover:text-gray-800 dark:hover:text-white transition-colors"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth="2"
-                  stroke="currentColor"
-                  className="w-6 h-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div className="mb-6 text-gray-600 dark:text-gray-400">
-              {children}
-            </div>
-            <div className="flex justify-end">
-              <button
-                onClick={clickOk}
-                className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded transition-colors"
+                className="rounded-full p-2 inline-flex items-center justify-center text-gray-400 hover:text-white transition-colors"
               >
-                OK
+                <FaTimesCircle className="w-12 h-12" />
               </button>
             </div>
+            <div className="mb-6 text-gray-400">{children}</div>
           </div>
         </dialog>
       </DialogContext.Provider>

src/components/Footer/index.tsx

@@ -124,7 +124,7 @@ const Footer: React.FC = () => {
               </button>
             </form>
             <p className="text-grey text-sm mt-4">
-              Subscribe to our newsletter for the latest updates.
+              Subscribe to receive our newest updates.
             </p>
           </div>
         </div>

src/components/Header/index.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import React, { useState, useEffect } from "react";
 import NotByte from "@/UI/notByte/NotByte";
 
@@ -18,8 +19,8 @@ export default function Header() {
   }, []);
 
   function getSize() {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
+    const width = window?.innerWidth;
+    const height = window?.innerHeight;
     if (width >= 2560 && height >= 1440) {
       return 1024;
     } else if (width >= 1920 && height >= 1080) {

src/components/Navbar/Contact.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useContext } from "react";
-import { create } from "./actions";
+import { create } from "../../lib/server-actions/navbarContact";
 import { ContactSchema } from "@/lib/validators/contact";
 import toast from "react-hot-toast";
 import DialogContext from "@/UI/Dialog/dialogContext";
@@ -40,12 +40,12 @@ export const Contact = () => {
     <form
       action={createContact}
       id="contactForm"
-      className="w-full max-w-lg mx-auto"
+      className="w-full  mx-auto p-20"
     >
       <div className="input-group mb-4">
         <label
           htmlFor="name"
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+          className="block text-md font-medium text-gray-700 dark:text-gray-300 mb-2"
         >
           Name
         </label>
@@ -54,13 +54,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"
+          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"
         />
       </div>
       <div className="input-group mb-4">
         <label
           htmlFor="email"
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+          className="block text-md  font-medium text-gray-700 dark:text-gray-300"
         >
           Email
         </label>
@@ -69,22 +69,22 @@ 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"
+          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"
         />
       </div>
       <div className="input-group mb-4">
         <label
           htmlFor="message"
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+          className="block text-md  font-medium text-gray-700 dark:text-gray-300"
         >
           Message
         </label>
         <textarea
           id="message"
           name="message"
-          rows={4}
+          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"
+          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"
         ></textarea>
       </div>
       <div className="form-actions flex justify-end">

src/components/Navbar/index.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Button } from "@/UI/Button";
 import ThemeSwitch from "../shared/ThemeSwitch-debug";
 import Dialog from "@/UI/Dialog";
-import { onClose, onOk } from "./actions";
+import { onClose, onOk } from "../../lib/server-actions/navbarContact";
 import { Contact } from "./Contact";
 import Logo from "./Logo";
 
@@ -21,7 +21,12 @@ const Navbar = () => {
       <div className="flex justify-center gap-8 items-center">
         <ThemeSwitch />
         <Button className="bg-colors text-lg  rounded-none">
-          <Link href="/?showDialog=y">
+          <Link
+            href={{
+              pathname: "",
+              query: { showDialog: "y" },
+            }}
+          >
             <span>get in touch</span>
           </Link>
         </Button>

src/components/Navbar/actions.ts → src/lib/server-actions/navbarContact.ts

@@ -1,4 +1,5 @@
 "use server";
+
 import { ContactSchema } from "@/lib/validators/contact";
 
 export async function onClose() {