shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: glass modal

Browse Source
This commit is contained in:
Henry
2024-03-18 22:40:24 +00:00
parent e058a2db30
commit 7aa64db983
5 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/boards/[...boardId]/components/NewCardForm.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useState, useEffect } from "react";
import { api } from "~/trpc/react";
import { HiXMark } from "react-icons/hi2";
@@ -43,12 +43,18 @@ export function NewCardForm({ listPublicId }: listPublicId) {
},
});
useEffect(() => {
const titleElement: HTMLElement | null =
document?.querySelector<HTMLElement>("#title");
if (titleElement) titleElement.focus();
}, []);
return (
<>
<div className="flex w-full justify-between pb-4">
<h2 className="text-sm font-medium text-dark-1000">New card</h2>
<h2 className="text-sm font-bold text-dark-1000">New card</h2>
<button
className="rounded p-1 hover:bg-dark-300"
className="rounded p-1 hover:bg-dark-300 focus:outline-none"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-dark-900" />

4
src/app/boards/[...boardId]/components/NewListForm.tsx
View File

@@ -39,9 +39,9 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
return (
<>
<div className="flex w-full justify-between pb-4">
<h2 className="text-sm font-medium text-dark-1000">New list</h2>
<h2 className="text-sm font-bold text-dark-1000">New list</h2>
<button
className="rounded p-1 hover:bg-dark-300"
className="rounded p-1 hover:bg-dark-300 focus:outline-none"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-dark-900" />

4
src/app/boards/components/NewBoardForm.tsx
View File

@@ -30,9 +30,9 @@ export function NewBoardForm() {
return (
<>
<div className="flex w-full justify-between pb-4">
<h2 className="text-sm font-medium text-dark-1000">New board</h2>
<h2 className="text-sm font-bold text-dark-1000">New board</h2>
<button
className="rounded p-1 hover:bg-dark-300"
className="rounded p-1 hover:bg-dark-300 focus:outline-none"
onClick={() => closeModal()}
>
<HiXMark size={18} className="text-dark-900" />

2
src/app/components/dashboard.tsx
View File

@@ -5,7 +5,7 @@ import { auth } from "~/server/auth";
import SideNavigation from "./SideNavigation";
import FeedbackButton from "./FeedbackButton";
export default async function Layout(props: { children: React.ReactNode }) {
export default async function Dashboard(props: { children: React.ReactNode }) {
const session = await auth();
if (!session?.user) {

4
src/app/components/modal.tsx
View File

@@ -24,7 +24,7 @@ const Modal: React.FC<Props> = ({ children }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-dark-50 bg-opacity-5 transition-opacity" />
<div className="fixed inset-0 bg-dark-50 bg-opacity-40 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
@@ -38,7 +38,7 @@ const Modal: React.FC<Props> = ({ children }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative mt-[25vh] transform rounded-lg border border-dark-400 bg-dark-100 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
<Dialog.Panel className="shadow-3xl relative mt-[25vh] transform rounded-lg border border-dark-400 bg-dark-100/20 px-4 pb-4 pt-5 text-left backdrop-blur-lg transition-all sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
{children}
</Dialog.Panel>
</Transition.Child>