From 3783809bd8346c8ef23c877e2aa136225e3bb053 Mon Sep 17 00:00:00 2001 From: Bodhish Thomas Date: Mon, 30 Sep 2024 22:49:11 -0700 Subject: [PATCH] Update title for sidebar --- care.config.ts | 4 +- public/images/care_logo.svg | 1 + public/images/care_logo_gray.svg | 1 + public/images/care_logo_mark.svg | 1 + src/Components/Common/Avatar.tsx | 111 ++++++++++++++++++ src/Components/Common/Loading.tsx | 2 +- src/Components/Common/Sidebar/Sidebar.tsx | 59 +++++----- src/Components/Common/Sidebar/SidebarItem.tsx | 6 +- .../Common/Sidebar/SidebarUserCard.tsx | 76 ++++++------ src/Routers/AppRouter.tsx | 6 +- src/Utils/utils.ts | 10 ++ tailwind.config.js | 10 +- 12 files changed, 211 insertions(+), 76 deletions(-) create mode 100644 public/images/care_logo.svg create mode 100644 public/images/care_logo_gray.svg create mode 100644 public/images/care_logo_mark.svg create mode 100644 src/Components/Common/Avatar.tsx diff --git a/care.config.ts b/care.config.ts index 4341a03dd48..8c87e976742 100644 --- a/care.config.ts +++ b/care.config.ts @@ -27,11 +27,11 @@ const careConfig = { }, headerLogo: logo(env.REACT_HEADER_LOGO, { - light: "https://cdn.ohc.network/header_logo.png", + light: "/images/care_logo.svg", dark: "https://cdn.ohc.network/header_logo.png", }), mainLogo: logo(env.REACT_MAIN_LOGO, { - light: "https://cdn.ohc.network/light-logo.svg", + light: "/images/care_logo.svg", dark: "https://cdn.ohc.network/black-logo.svg", }), stateLogo: logo(env.REACT_STATE_LOGO), diff --git a/public/images/care_logo.svg b/public/images/care_logo.svg new file mode 100644 index 00000000000..a9392fbae23 --- /dev/null +++ b/public/images/care_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/care_logo_gray.svg b/public/images/care_logo_gray.svg new file mode 100644 index 00000000000..3a8606bef88 --- /dev/null +++ b/public/images/care_logo_gray.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/care_logo_mark.svg b/public/images/care_logo_mark.svg new file mode 100644 index 00000000000..e9f577e0f45 --- /dev/null +++ b/public/images/care_logo_mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Components/Common/Avatar.tsx b/src/Components/Common/Avatar.tsx new file mode 100644 index 00000000000..244163f963a --- /dev/null +++ b/src/Components/Common/Avatar.tsx @@ -0,0 +1,111 @@ +import React from "react"; + +const colors: [string, boolean][] = [ + ["#ff4040", false], + ["#7f2020", false], + ["#cc5c33", false], + ["#734939", false], + ["#bf9c8f", false], + ["#995200", false], + ["#4c2900", false], + ["#f2a200", false], + ["#ffd580", true], + ["#332b1a", false], + ["#4c3d00", false], + ["#ffee00", true], + ["#b0b386", false], + ["#64664d", false], + ["#6c8020", false], + ["#c3d96c", true], + ["#143300", false], + ["#19bf00", false], + ["#53a669", false], + ["#bfffd9", true], + ["#40ffbf", true], + ["#1a332e", false], + ["#00b3a7", false], + ["#165955", false], + ["#00b8e6", false], + ["#69818c", false], + ["#005ce6", false], + ["#6086bf", false], + ["#000e66", false], + ["#202440", false], + ["#393973", false], + ["#4700b3", false], + ["#2b0d33", false], + ["#aa86b3", false], + ["#ee00ff", false], + ["#bf60b9", false], + ["#4d3949", false], + ["#ff00aa", false], + ["#7f0044", false], + ["#f20061", false], + ["#330007", false], + ["#d96c7b", false], +]; + +const stringToInt = (name: string): number => { + const aux = (sum: number, remains: string): number => { + if (remains === "") return sum; + const firstCharacter = remains.slice(0, 1); + const newRemains = remains.slice(1); + return aux(sum + firstCharacter.charCodeAt(0), newRemains); + }; + + return Math.floor(aux(0, name)); +}; + +const toColor = (name: string): [string, string] => { + const index = stringToInt(name) % 42; + const [backgroundColor, blackText] = colors[index]; + return [backgroundColor, blackText ? "#000000" : "#FFFFFF"]; +}; + +const initials = (name: string): string => { + return name + .split(" ") + .slice(0, 2) + .map((word) => word.slice(0, 1)) + .join("") + .toUpperCase(); // Ensure initials are uppercase +}; + +interface AvatarProps { + colors?: [string, string]; + name: string; + className?: string; +} + +const Avatar: React.FC = ({ + colors: propColors, + name, + className, +}) => { + const [bgColor, fgColor] = propColors || toColor(name); + + return ( + + + + {initials(name)} + + + ); +}; + +export { Avatar }; diff --git a/src/Components/Common/Loading.tsx b/src/Components/Common/Loading.tsx index ae9fdfd6df5..212a31e17e2 100644 --- a/src/Components/Common/Loading.tsx +++ b/src/Components/Common/Loading.tsx @@ -1,4 +1,4 @@ -const img = "https://cdn.ohc.network/light-logo.svg"; +const img = "/images/care_logo_gray.svg"; const Loading = () => { return ( diff --git a/src/Components/Common/Sidebar/Sidebar.tsx b/src/Components/Common/Sidebar/Sidebar.tsx index e18c17bcb68..f9f857c00b1 100644 --- a/src/Components/Common/Sidebar/Sidebar.tsx +++ b/src/Components/Common/Sidebar/Sidebar.tsx @@ -12,7 +12,7 @@ import careConfig from "@careConfig"; export const SIDEBAR_SHRINK_PREFERENCE_KEY = "sidebarShrinkPreference"; -const LOGO_COLLAPSE = "/images/logo_collapsed.svg"; +const LOGO_COLLAPSE = "/images/care_logo_mark.svg"; type StatelessSidebarProps = | { @@ -29,7 +29,6 @@ type StatelessSidebarProps = }; const StatelessSidebar = ({ - shrinkable = false, shrinked = false, setShrinked, onItemClick, @@ -111,7 +110,7 @@ const StatelessSidebar = ({ return ( @@ -230,7 +235,7 @@ interface ToggleShrinkProps { const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => (
{ +interface SidebarUserCardProps { + shrinked: boolean; +} + +const SidebarUserCard: React.FC = ({ shrinked }) => { const { t } = useTranslation(); const user = useAuthUser(); const { signOut } = useAuthContext(); return ( -
- - +
+ +
+
+ +
+ {!shrinked && ( + + {formatName(user)} + + )} +
-
- -
-
- - {formatName(user)} - -
- -

{t("sign_out")}

+
+ +
+ + {!shrinked && ( +
+ {t("sign_out")} +
+ )}
diff --git a/src/Routers/AppRouter.tsx b/src/Routers/AppRouter.tsx index f5ca25f45b2..374b75d9bcb 100644 --- a/src/Routers/AppRouter.tsx +++ b/src/Routers/AppRouter.tsx @@ -151,9 +151,11 @@ export default function AppRouter() {
-
{pages}
+
+ {pages} +
diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts index 46832e76228..e4e0b983368 100644 --- a/src/Utils/utils.ts +++ b/src/Utils/utils.ts @@ -106,6 +106,16 @@ export const formatName = (user: { first_name: string; last_name: string }) => { return `${user.first_name} ${user.last_name}`; }; +export const formatDisplayName = (user: { + first_name: string; + last_name: string; + username: string; +}) => { + return user.first_name && user.last_name + ? `${user.first_name} ${user.last_name}` + : user.first_name || user.username || "User"; +}; + export const relativeTime = (time?: DateLike) => { return `${dayjs(time).fromNow()}`; }; diff --git a/tailwind.config.js b/tailwind.config.js index 88c316597e1..d4e3f2fc94c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const colors = require("tailwindcss/colors"); -const gray = { +const secondary = { 50: "#F9FAFB", 100: "#FBFAFC", 200: "#F7F5FA", @@ -38,11 +38,11 @@ module.exports = { 900: "#014737", DEFAULT: "#0d9f6e", }, - secondary: gray, + secondary: secondary, danger: colors.red, warning: colors.amber, alert: colors.violet, - gray, + gray: colors.gray, patient: { comfort: { DEFAULT: colors.slate[200], @@ -61,8 +61,8 @@ module.exports = { fore: colors.red[100], }, unknown: { - DEFAULT: gray[400], - fore: gray[800], + DEFAULT: secondary[400], + fore: secondary[800], }, activelydying: { DEFAULT: colors.red[800],