Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI(contact): styled contact dialog #97

Merged
merged 1 commit into from
Jun 3, 2024
Merged

UI(contact): styled contact dialog #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/UI/Dialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Navbar/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navbar/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading