marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve modals rounded corners

Browse source
This commit is contained in:
Chris Veleris 2025-07-23 16:27:05 +03:00 • committed by Chris
parent cc7a6bfc7a
commit c65ea55a01
8 changed files with 26 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/components/Area/AreaModal.tsx
View file

@ -164,7 +164,7 @@ const AreaModal: React.FC<AreaModalProps> = ({
>
<div className="flex flex-col h-full sm:min-h-[400px] sm:max-h-[90vh]">
{/* Main Form Section */}
<div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
<div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
<div className="flex-1 relative">
<div
className="absolute inset-0 overflow-y-auto overflow-x-hidden"
@ -176,7 +176,7 @@ const AreaModal: React.FC<AreaModalProps> = ({
>
<fieldset className="h-full flex flex-col">
{/* Area Title Section - Always Visible */}
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4 sm:rounded-t-lg">
<input
ref={nameInputRef}
type="text"
@ -221,7 +221,7 @@ const AreaModal: React.FC<AreaModalProps> = ({
</div>
{/* Action Buttons - Below border with custom layout */}
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
{/* Left side: Delete and Cancel */}
<div className="flex items-center space-x-3">
{area &&

15
frontend/components/Inbox/InboxItemDetail.tsx
View file

@ -20,7 +20,7 @@ interface InboxItemDetailProps {
item: InboxItem;
onProcess: (id: number) => void;
onDelete: (id: number) => void;
onUpdate?: (id: number, content: string) => Promise<void>;
onUpdate?: (id: number) => Promise<void>;
openTaskModal: (task: Task, inboxItemId?: number) => void;
openProjectModal: (project: Project | null, inboxItemId?: number) => void;
openNoteModal: (note: Note | null, inboxItemId?: number) => void;
@ -401,9 +401,16 @@ const InboxItemDetail: React.FC<InboxItemDetailProps> = ({
>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-4 py-2 gap-2">
<div className="flex-1">
<p className="text-base font-medium text-gray-900 dark:text-gray-300 break-words">
<button
onClick={() => {
if (onUpdate && item.id !== undefined) {
onUpdate(item.id);
}
}}
className="text-base font-medium text-gray-900 dark:text-gray-300 break-words text-left cursor-pointer w-full"
>
{cleanedContent || item.content}
</p>
</button>
{/* Tags and Projects display - TaskHeader style */}
{(hashtags.length > 0 || projectRefs.length > 0) && (
@ -498,7 +505,7 @@ const InboxItemDetail: React.FC<InboxItemDetailProps> = ({
<button
onClick={() => {
if (onUpdate && item.id !== undefined) {
onUpdate(item.id, item.content);
onUpdate(item.id);
}
}}
className={`p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-opacity ${isHovered ? 'opacity-100' : 'opacity-0'}`}

6
frontend/components/Note/NoteModal.tsx
View file

@ -363,7 +363,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
>
<div className="flex flex-col h-full sm:min-h-[800px] sm:max-h-[90vh]">
{/* Main Form Section */}
<div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
<div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
<div className="flex-1 relative">
<div
className="absolute inset-0 overflow-y-auto overflow-x-hidden"
@ -380,7 +380,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
>
<fieldset className="h-full flex flex-col">
{/* Note Title Section - Always Visible */}
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4 sm:rounded-t-lg">
<input
ref={titleInputRef}
type="text"
@ -621,7 +621,7 @@ const NoteModal: React.FC<NoteModalProps> = ({
</div>
{/* Action Buttons - Below border with custom layout */}
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
{/* Left side: Delete and Cancel */}
<div className="flex items-center space-x-3">
{note && note.id && onDelete && (

6
frontend/components/Project/ProjectModal.tsx
View file

@ -426,7 +426,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
>
<div className="flex flex-col h-full sm:min-h-[500px] sm:max-h-[80vh]">
{/* Main Form Section */}
<div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
<div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-lg">
<div className="flex-1 relative">
<div
className="absolute inset-0 overflow-y-auto overflow-x-hidden"
@ -441,7 +441,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
>
<fieldset className="h-full flex flex-col">
{/* Project Title Section - Always Visible */}
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
<div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4 sm:rounded-t-lg">
<input
ref={nameInputRef}
type="text"
@ -825,7 +825,7 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
</div>
{/* Action Buttons - Below border with custom layout */}
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
{/* Left side: Delete and Cancel */}
<div className="flex items-center space-x-3">
{project && project.id && onDelete && (

4
frontend/components/Tag/TagModal.tsx
View file

@ -159,7 +159,7 @@ const TagModal: React.FC<TagModalProps> = ({
>
<div className="flex flex-col h-auto">
{/* Main Form Section */}
<div className="bg-white dark:bg-gray-800">
<div className="bg-white dark:bg-gray-800 sm:rounded-t-lg">
<form
onSubmit={(e) => {
e.preventDefault();
@ -189,7 +189,7 @@ const TagModal: React.FC<TagModalProps> = ({
</div>
{/* Action Buttons - Below border with custom layout */}
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-b-lg">
{/* Left side: Delete and Cancel */}
<div className="flex items-center space-x-3">
{tag && tag.id && onDelete && (

2
frontend/components/Task/TaskForm/TaskTitleSection.tsx
View file

@ -26,7 +26,7 @@ const TaskTitleSection: React.FC<TaskTitleSectionProps> = ({
const { t } = useTranslation();
return (
<div className="px-4 py-4 border-b border-gray-200 dark:border-gray-700">
<div className="px-4 py-4 border-b border-gray-200 dark:border-gray-700 sm:rounded-tl-lg">
<input
type="text"
id={`task_name_${taskId}`}

4
frontend/components/Task/TaskModal.tsx
View file

@ -501,7 +501,7 @@ const TaskModal: React.FC<TaskModalProps> = ({
<div className="flex flex-col lg:flex-row h-full sm:min-h-[600px] sm:max-h-[90vh]">
{/* Main Form Section */}
<div
className={`flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 ${
className={`flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800 sm:rounded-l-lg ${
isTimelineExpanded ? 'lg:pr-2' : ''
}`}
>
@ -921,7 +921,7 @@ const TaskModal: React.FC<TaskModalProps> = ({
</div>
{/* Action Buttons - Below border with custom layout */}
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
<div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between sm:rounded-bl-lg">
{/* Left side: Delete and Cancel */}
<div className="flex items-center space-x-3">
{task.id && (

2
frontend/components/Task/TimelinePanel.tsx
View file

@ -22,7 +22,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
isExpanded
? 'w-full lg:w-80 opacity-100'
: 'w-0 lg:w-12 opacity-0 lg:opacity-100'
} border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 flex flex-col transition-all duration-300 overflow-hidden`}
} border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 sm:rounded-r-lg flex flex-col transition-all duration-300 overflow-hidden`}
>
{/* Collapsed state - envelope icon */}
{!isExpanded && (