Skip to content

Commit

Permalink
switch to use secondary and some suggestions
Browse files Browse the repository at this point in the history
  • Loading branch information
@UdaySagar-Git
UdaySagar-Git committed Dec 5, 2024
1 parent b4979e5 commit fe109e8
Show file tree
Hide file tree
Showing 9 changed files with 78 additions and 61 deletions.
20 changes: 10 additions & 10 deletions src/components/Common/DiscussionNotesEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,8 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
<div className="relative">
<div
className={classNames(
"rounded-t-lg border border-x-gray-300 bg-white shadow-sm transition-all duration-200",
isPreviewMode && "bg-gray-50",
"rounded-t-lg border border-x-secondary-300 bg-white shadow-sm transition-all duration-200",
isPreviewMode && "bg-secondary-50",
className,
)}
>
Expand All @@ -181,7 +181,7 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
/>
)}
{fileUpload.files.length > 0 && (
<div className="flex flex-wrap gap-3 border-t border-gray-200 bg-gray-50/50 px-3 py-1">
<div className="flex flex-wrap gap-3 border-t border-secondary-200 bg-secondary-50/50 px-3 py-1">
{fileUpload.files.map((file, index) => (
<FilePreviewCard
key={index}
Expand All @@ -195,18 +195,18 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
</div>

{/* toolbar*/}
<div className="flex items-center space-x-1 rounded-b-md border border-gray-300 bg-gray-100 pl-2 sm:space-x-2">
<label className="tooltip cursor-pointer rounded bg-gray-200/50 p-1 text-gray-700">
<div className="flex items-center space-x-1 rounded-b-md border border-secondary-300 bg-secondary-100 pl-2 sm:space-x-2">
<label className="tooltip cursor-pointer rounded bg-secondary-200/50 p-1 text-secondary-700">
<CareIcon icon="l-paperclip" className="text-lg" />
<span className="tooltip-text tooltip-top -translate-x-4">
Attach File
</span>
<fileUpload.Input multiple />
</label>
<div className="mx-2 h-6 border-l border-gray-400"></div>
<div className="mx-2 h-6 border-l border-secondary-400"></div>
<button
onClick={() => fileUpload.handleCameraCapture()}
className="tooltip rounded bg-gray-200/50 p-1"
className="tooltip rounded bg-secondary-200/50 p-1"
>
<CareIcon icon="l-camera" className="text-lg" />
<span className="tooltip-text tooltip-top -translate-x-1/2">
Expand All @@ -215,17 +215,17 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
</button>
<button
onClick={() => fileUpload.handleAudioCapture()}
className="tooltip rounded bg-gray-200/50 p-1"
className="tooltip rounded bg-secondary-200/50 p-1"
>
<CareIcon icon="l-microphone" className="text-lg" />
<span className="tooltip-text tooltip-top -translate-x-1/2">
Audio
</span>
</button>
<div className="mx-2 h-6 border-l border-gray-400"></div>
<div className="mx-2 h-6 border-l border-secondary-400"></div>
<button
onClick={handleMentionButtonClick}
className="tooltip rounded bg-gray-200/50 p-1"
className="tooltip rounded bg-secondary-200/50 p-1"
>
<CareIcon icon="l-at" className="text-lg" />
<span className="tooltip-text tooltip-top -translate-x-1/2">
Expand Down
10 changes: 5 additions & 5 deletions src/components/Common/FilePreviewCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function FilePreviewCard({
return (
<div
className={classNames(
"relative mt-1 h-20 w-20 cursor-pointer overflow-hidden rounded-lg bg-gray-100 shadow-sm transition-all duration-200 hover:bg-gray-200/50",
"relative mt-1 h-20 w-20 cursor-pointer overflow-hidden rounded-lg bg-secondary-100 shadow-sm transition-all duration-200 hover:bg-secondary-200/50",
onClick && "cursor-pointer",
)}
onClick={onClick}
Expand All @@ -61,7 +61,7 @@ export function FilePreviewCard({
e.stopPropagation();
onRemove(index);
}}
className="absolute right-0 top-0 z-10 h-5 w-5 rounded-full bg-gray-300 text-gray-800 transition-colors duration-200 hover:bg-gray-400 hover:text-white"
className="absolute right-0 top-0 z-10 h-5 w-5 rounded-full bg-secondary-300 text-secondary-800 transition-colors duration-200 hover:bg-secondary-400 hover:text-white"
>
<CareIcon
icon="l-times-circle"
Expand Down Expand Up @@ -91,17 +91,17 @@ export function FilePreviewCard({
icon={isPlaying ? "l-pause" : "l-play"}
className="h-6 w-6 text-primary-600"
/>
<span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-gray-600">
<span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-secondary-600">
{fileName}
</span>
</div>
) : (
<div className="flex h-full w-full flex-col items-center justify-center p-2">
<CareIcon
icon={icons[fileType]}
className="shrink-0 text-2xl text-gray-600"
className="shrink-0 text-2xl text-secondary-600"
/>
<span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-gray-600">
<span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-secondary-600">
{fileName}
</span>
</div>
Expand Down
48 changes: 26 additions & 22 deletions src/components/Common/MentionDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,30 +61,25 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
if (document.activeElement !== editorRef.current) {
return;
}

if (event.key === KEYS.ENTER && filteredUsers.length > 0) {
event.preventDefault();
if (selectedIndex !== null) {
onSelect({
id: filteredUsers[selectedIndex].id.toString(),
username: filteredUsers[selectedIndex].username + " ",
});
} else {
onSelect({
id: filteredUsers[0].id.toString(),
username: filteredUsers[0].username + " ",
});
}
const selectedUser =
selectedIndex !== null
? filteredUsers[selectedIndex]
: filteredUsers[0];

onSelect({
id: selectedUser.id.toString(),
username: selectedUser.username + " ",
});
} else if (event.key === KEYS.ESCAPE) {
event.preventDefault();
onSelect({ id: "", username: "" });
} else if (event.key === KEYS.ARROW_DOWN) {
event.preventDefault();
setSelectedIndex((prevIndex) => {
if (prevIndex === null) return 0;
return Math.min(filteredUsers.length - 1, prevIndex + 1);
});
} else if (event.key === KEYS.ARROW_UP) {
event.preventDefault();
setSelectedIndex((prevIndex) => {
if (prevIndex === null) return filteredUsers.length - 1;
return Math.max(0, prevIndex - 1);
Expand All @@ -111,17 +106,22 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
role="listbox"
aria-label="User mentions"
>
{loading && (
<div className="p-2 text-gray-500" role="status" aria-live="polite">
{loading ? (
<div
className="p-2 text-secondary-500"
role="status"
aria-live="polite"
>
<span className="inline-block animate-spin">⌛</span> Loading users...
</div>
)}
{filteredUsers.length > 0 && !loading ? (
) : filteredUsers.length > 0 ? (
filteredUsers.map((user, index) => (
<div
key={user.id}
className={`flex cursor-pointer items-center gap-2 p-2 ${
index === selectedIndex ? "bg-gray-100" : "hover:bg-gray-100"
index === selectedIndex
? "bg-secondary-100"
: "hover:bg-secondary-100"
}`}
role="option"
aria-selected={index === selectedIndex}
Expand All @@ -143,8 +143,12 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
</div>
))
) : (
<div className="p-2 text-gray-500" role="status" aria-live="polite">
No users found
<div
className="p-2 text-secondary-500"
role="status"
aria-live="polite"
>
{filter ? "No matching users found" : "Type to search users"}
</div>
)}
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Common/NotePreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ import { UserBareMinimum } from "@/components/Users/models";
import { formatDisplayName } from "@/Utils/utils";

const UserCard = ({ user }: { user: UserBareMinimum }) => (
<div className="z-10 flex w-56 items-center space-x-3 rounded-lg bg-gray-200 px-3 pb-3 shadow-lg">
<div className="z-10 flex w-56 items-center space-x-3 rounded-lg bg-secondary-200 px-3 pb-3 shadow-lg">
<Avatar
name={formatDisplayName(user)}
imageUrl={user.read_profile_picture_url}
className="h-12 w-12 rounded-full text-black/50"
/>
<div className="space-y-0">
<h3 className="text-sm font-semibold text-gray-800">
<h3 className="text-sm font-semibold text-secondary-800">
{user.first_name} {user.last_name}
</h3>
<p className="text-xs text-gray-500">@{user.username}</p>
<p className="text-xs text-gray-500">{user.user_type}</p>
<p className="text-xs text-secondary-500">@{user.username}</p>
<p className="text-xs text-secondary-500">{user.user_type}</p>
</div>
</div>
);
Expand Down Expand Up @@ -99,7 +99,7 @@ const NotePreview = ({
}}
>
<UserCard user={mentionedUsersMap[hoveredUserData.username]} />
<div className="absolute left-2 -bottom-1 h-4 w-4 rotate-45 transform bg-gray-200"></div>
<div className="absolute left-2 -bottom-1 h-4 w-4 rotate-45 transform bg-secondary-200"></div>
</div>
)}
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/Facility/DoctorNoteReplyPreviewCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const DoctorNoteReplyPreviewCard = ({
return children;
}
return (
<div className="mt-3 flex flex-col rounded-lg border border-gray-300 bg-gray-200/50 pt-2 text-gray-800">
<div className="mt-3 flex flex-col rounded-lg border border-secondary-300 bg-secondary-200/50 pt-2 text-secondary-800">
<div className="flex flex-col">
<div className="flex justify-between pl-3">
<div className="flex gap-2">
Expand All @@ -36,17 +36,17 @@ const DoctorNoteReplyPreviewCard = ({
/>
<div>
<div>
<span className="text-sm font-semibold text-gray-700">
<span className="text-sm font-semibold text-secondary-700">
{parentNote.created_by_object?.first_name || "Unknown"}{" "}
{parentNote.created_by_object?.last_name}
</span>
{parentNote.user_type && (
<span className="pl-2 text-sm text-gray-700">
<span className="pl-2 text-sm text-secondary-700">
{`(${USER_TYPES_MAP[parentNote.user_type]})`}
</span>
)}
</div>
<div className="text-xs text-gray-600">
<div className="text-xs text-secondary-600">
<div className="tooltip inline">
<span className="tooltip-text tooltip-bottom">
{formatDateTime(parentNote.created_date)}
Expand All @@ -66,12 +66,12 @@ const DoctorNoteReplyPreviewCard = ({
>
<CareIcon
icon="l-times"
className="m-1 rounded-full bg-gray-400 p-1 text-white hover:bg-gray-500"
className="m-1 rounded-full bg-secondary-400 p-1 text-white hover:bg-secondary-500"
/>
</button>
)}
</div>
<div className="max-h-14 overflow-hidden pb-2 pl-14 text-sm text-gray-700">
<div className="max-h-14 overflow-hidden pb-2 pl-14 text-sm text-secondary-700">
<NotePreview initialNote={parentNote.note} />
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Facility/PatientNoteCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ const PatientNoteCard = ({
<audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
<div
className={classNames(
"group flex flex-col rounded-lg border border-gray-300 bg-white px-3 py-1 text-gray-800",
"group flex flex-col rounded-lg border border-secondary-300 bg-white px-3 py-1 text-secondary-800",
note.user_type === "RemoteSpecialist" && "border-primary-400",
)}
>
Expand Down Expand Up @@ -163,7 +163,7 @@ const PatientNoteCard = ({
onClick={() => {
setIsEditing(true);
}}
className="bg-gray-100 p-2"
className="bg-secondary-100 p-2"
>
<CareIcon icon="l-pen" className="h-4 w-4" />
</ButtonV2>
Expand All @@ -174,7 +174,7 @@ const PatientNoteCard = ({
onClick={() => {
setReplyTo && setReplyTo(note);
}}
className="bg-gray-100 p-2"
className="bg-secondary-100 p-2"
>
<CareIcon icon="l-corner-up-left-alt" className="h-4 w-4" />
</ButtonV2>
Expand Down Expand Up @@ -207,7 +207,7 @@ const PatientNoteCard = ({
</div>
</div>
) : (
<div className="text-xs text-gray-600">
<div className="text-xs text-secondary-600">
<div className="tooltip inline">
<span className="tooltip-text tooltip-bottom">
{formatDateTime(note.created_date)}
Expand Down Expand Up @@ -258,7 +258,7 @@ const PatientNoteCard = ({
if (allowThreadView && setThreadViewNote)
setThreadViewNote(note.id);
}}
className={`pl-11 text-sm text-gray-700 ${allowThreadView ? "cursor-pointer" : ""}`}
className={`pl-11 text-sm text-secondary-700 ${allowThreadView ? "cursor-pointer" : ""}`}
>
<NotePreview
initialNote={noteField}
Expand All @@ -280,8 +280,8 @@ const PatientNoteCard = ({
/>
))}
</div>
{mode == "thread-view" && note.replies.length > 0 && (
<div className="mt-2 flex items-center text-xs text-gray-500">
{mode == "thread-view" && note.child_notes.length > 0 && (
<div className="mt-2 flex items-center text-xs text-secondary-500">
<CareIcon icon="l-corner-down-right" className="h-3 w-3" />
{note.child_notes.length}{" "}
{note.child_notes.length === 1 ? "Reply" : "Replies"}
Expand Down
10 changes: 6 additions & 4 deletions src/components/Facility/PatientNotesDetailedView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ const PatientNotesDetailedView = (props: Props) => {
}

return (
<div className="flex w-full flex-col overflow-hidden rounded-lg border border-gray-300 bg-white sm:w-[500px]">
<div className="flex w-full flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white sm:w-[500px]">
{state && (
<div className="flex h-full flex-col">
<div className="px-3 pt-2">
Expand All @@ -150,7 +150,7 @@ const PatientNotesDetailedView = (props: Props) => {
<div className="flex items-center justify-between px-4 py-2">
<h4 className="text-lg text-slate-600">Replies</h4>
{state.child_notes.length > 0 && (
<div className="text-sm text-gray-500">
<div className="text-sm text-secondary-500">
{state.child_notes.length}{" "}
{state.child_notes.length > 1 ? "replies" : "reply"}
</div>
Expand Down Expand Up @@ -185,9 +185,11 @@ const PatientNotesDetailedView = (props: Props) => {
<div className="flex flex-col items-center gap-2">
<CareIcon
icon="l-comment-alt"
className="text-4xl text-gray-400"
className="text-4xl text-secondary-400"
/>
<h4 className="text-lg text-gray-500">No replies yet</h4>
<h4 className="text-lg text-secondary-500">
No replies yet
</h4>
</div>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Patient/PatientNotes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,8 @@ const PatientNotes = (props: PatientNotesProps) => {
}}
backUrl={`/facility/${facilityId}/patient/${patientId}`}
>
<div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-gray-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
<div className="absolute inset-x-0 top-0 z-10 flex bg-gray-200 text-sm shadow-md">
<div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
<div className="absolute inset-x-0 top-0 z-10 flex bg-secondary-200 text-sm shadow-md">
{keysOf(PATIENT_NOTES_THREADS).map((current) => (
<button
id={`patient-note-tab-${current}`}
Expand Down
11 changes: 11 additions & 0 deletions src/hooks/useFileManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,10 +225,21 @@ export default function useFileManager(
const urlCache = new Map<string, { url: string; timestamp: number }>();
const CACHE_DURATION = 5 * 60 * 1000; // 5 min

const cleanExpiredCache = () => {
const now = Date.now();
for (const [key, value] of urlCache.entries()) {
if (now - value.timestamp >= CACHE_DURATION) {
urlCache.delete(key);
}
}
};

const getSignedUrl = async (file: FileUploadModel) => {
const cacheKey = `${file.id}-${file.associating_id}`;
const cached = urlCache.get(cacheKey);

cleanExpiredCache();

if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
return cached.url;
}
Expand Down

0 comments on commit fe109e8

Please sign in to comment.