From 9da204b13c881e9834564387f2b2604978930edc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 20:07:17 +0800
Subject: ...

---
 FrontEnd/src/views/user/UserCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'FrontEnd/src/views/user/UserCard.tsx')

diff --git a/FrontEnd/src/views/user/UserCard.tsx b/FrontEnd/src/views/user/UserCard.tsx
index e7e4252e..06bb2143 100644
--- a/FrontEnd/src/views/user/UserCard.tsx
+++ b/FrontEnd/src/views/user/UserCard.tsx
@@ -23,7 +23,7 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
             <div className="align-middle">
               <UserAvatar
                 username={timeline.owner.username}
-                className="avatar small rounded-circle me-3"
+                className="cru-avatar small cru-round me-3"
               />
               {timeline.owner.nickname}
             </div>
-- 
cgit v1.2.3


From 839daa0eac6fdbe84f45e8572e5ab07126b7d67c Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 18:36:47 +0800
Subject: ...

---
 FrontEnd/src/views/about/index.tsx                 |  6 +--
 .../src/views/common/dailog/FullPageDialog.css     | 26 ++++++++++++
 .../src/views/common/dailog/FullPageDialog.tsx     |  9 ++++-
 FrontEnd/src/views/common/index.css                | 47 ++++++++--------------
 .../src/views/timeline-common/CollapseButton.tsx   |  2 +-
 .../timeline-common/TimelinePageCardTemplate.tsx   | 18 ++++-----
 FrontEnd/src/views/timeline/TimelineCard.tsx       |  2 +-
 FrontEnd/src/views/user/UserCard.tsx               |  2 +-
 8 files changed, 64 insertions(+), 48 deletions(-)
 create mode 100644 FrontEnd/src/views/common/dailog/FullPageDialog.css

(limited to 'FrontEnd/src/views/user/UserCard.tsx')

diff --git a/FrontEnd/src/views/about/index.tsx b/FrontEnd/src/views/about/index.tsx
index 8a358014..11618086 100644
--- a/FrontEnd/src/views/about/index.tsx
+++ b/FrontEnd/src/views/about/index.tsx
@@ -77,11 +77,11 @@ const AboutPage: React.FC = () => {
             <div>
               <p>
                 <small>{t("about.author.fullname")}</small>
-                <span className="tl-color-primary">杨宇千</span>
+                <span className="cru-color-primary">杨宇千</span>
               </p>
               <p>
                 <small>{t("about.author.nickname")}</small>
-                <span className="tl-color-primary">crupest</span>
+                <span className="cru-color-primary">crupest</span>
               </p>
               <p>
                 <small>{t("about.author.introduction")}</small>
@@ -105,7 +105,7 @@ const AboutPage: React.FC = () => {
         <h4>{t("about.site.title")}</h4>
         <p>
           <Trans i18nKey="about.site.content">
-            0<span className="tl-color-primary">1</span>2<b>3</b>4
+            0<span className="cru-color-primary">1</span>2<b>3</b>4
             <a href="#author-info">5</a>6
           </Trans>
         </p>
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css
new file mode 100644
index 00000000..65f16041
--- /dev/null
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css
@@ -0,0 +1,26 @@
+.cru-full-page {
+  position: fixed;
+  z-index: 1030;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  padding-top: 56px;
+}
+
+.cru-full-page-top-bar {
+  height: 56px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background-color: var(--cru-primary-color);
+  display: flex;
+  align-items: center;
+}
+
+.cru-full-page-content-container {
+  overflow: scroll;
+}
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 88c90bbc..72c9b269 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -1,6 +1,9 @@
 import React from "react";
+import { createPortal } from "react-dom";
 import classnames from "classnames";
 
+import "./FullPageDialog.css";
+
 export interface FullPageDialogProps {
   show: boolean;
   onBack: () => void;
@@ -13,7 +16,7 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
   children,
   contentContainerClassName,
 }) => {
-  return (
+  return createPortal(
     <div
       className="cru-full-page"
       style={{ display: show ? undefined : "none" }}
@@ -32,7 +35,9 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
       >
         {children}
       </div>
-    </div>
+    </div>,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("portal")!
   );
 };
 
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index cb1cccd4..d7501f98 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -120,22 +120,34 @@
   --cru-success-r3-color: rgb(0, 243, 0);
 }
 
-.tl-color-primary {
+.cru-color-primary {
   color: var(--cru-primary-color);
 }
 
-.tl-color-secondary {
+.cru-color-secondary {
   color: var(--cru-secondary-color);
 }
 
-.tl-color-success {
+.cru-color-success {
   color: var(--cru-success-color);
 }
 
-.tl-color-danger {
+.cru-color-danger {
   color: var(--cru-danger-color);
 }
 
+.cru-text-end {
+  text-align: end;
+}
+
+.cru-float-right {
+  float: right;
+}
+
+.cru-clearfix::after {
+  clear: both;
+}
+
 .icon-button {
   font-size: 1.4rem;
   cursor: pointer;
@@ -182,33 +194,6 @@
   width: 50%;
 }
 
-.cru-full-page {
-  position: fixed;
-  z-index: 1031;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: white;
-  padding-top: 56px;
-}
-
-.cru-full-page-top-bar {
-  height: 56px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  background-color: var(--cru-primary-color);
-  display: flex;
-  align-items: center;
-}
-
-.cru-full-page-content-container {
-  overflow: scroll;
-}
-
 .cru-tab-pages-action-area {
   display: flex;
   align-items: center;
diff --git a/FrontEnd/src/views/timeline-common/CollapseButton.tsx b/FrontEnd/src/views/timeline-common/CollapseButton.tsx
index 12a3b710..31976228 100644
--- a/FrontEnd/src/views/timeline-common/CollapseButton.tsx
+++ b/FrontEnd/src/views/timeline-common/CollapseButton.tsx
@@ -12,7 +12,7 @@ const CollapseButton: React.FC<{
       onClick={onClick}
       className={classnames(
         collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
-        "text-primary icon-button",
+        "cru-color-primary icon-button",
         className
       )}
       style={style}
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index 75f2d400..f57fda2e 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -54,11 +54,11 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
       <small className="mt-1 d-block">
         {t(timelineVisibilityTooltipTranslationMap[timeline.visibility])}
       </small>
-      <div className="text-end mt-2">
+      <div className="mt-2 cru-text-end">
         <i
           className={classnames(
             timeline.isHighlight ? "bi-star-fill" : "bi-star",
-            "icon-button text-yellow me-3"
+            "icon-button cru-color-primary me-3"
           )}
           onClick={
             user?.hasHighlightTimelineAdministrationPermission
@@ -81,7 +81,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           <i
             className={classnames(
               timeline.isBookmark ? "bi-bookmark-fill" : "bi-bookmark",
-              "icon-button text-yellow me-3"
+              "icon-button cru-color-primary me-3"
             )}
             onClick={() => {
               getHttpBookmarkClient()
@@ -98,12 +98,12 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           />
         ) : null}
         <i
-          className={"icon-button bi-people text-primary me-3"}
+          className={"icon-button bi-people cru-color-primary me-3"}
           onClick={() => setDialog("member")}
         />
         {manageItems != null ? (
-          <PopupMenu items={manageItems}>
-            <i className="icon-button bi-three-dots-vertical text-primary" />
+          <PopupMenu items={manageItems} containerClassName="d-inline">
+            <i className="icon-button bi-three-dots-vertical cru-color-primary" />
           </PopupMenu>
         ) : null}
       </div>
@@ -113,10 +113,10 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
   return (
     <>
       <Card
-        className={classnames("p-2 clearfix", className)}
+        className={classnames("p-2 cru-clearfix", className)}
         style={{ zIndex: collapse ? 1029 : 1031 }}
       >
-        <div className="float-end d-flex align-items-center">
+        <div className="cru-float-right ms-3 d-flex align-items-center">
           <ConnectionStatusBadge status={connectionStatus} className="me-2" />
           <CollapseButton collapse={collapse} onClick={toggleCollapse} />
         </div>
@@ -129,7 +129,7 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
             {content}
           </FullPageDialog>
         ) : (
-          <div style={{ display: collapse ? "none" : "block" }}>{content}</div>
+          <div style={{ display: collapse ? "none" : "inline" }}>{content}</div>
         )}
       </Card>
       {(() => {
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
index 86063843..311aa112 100644
--- a/FrontEnd/src/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -18,7 +18,7 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
       <TimelinePageCardTemplate
         infoArea={
           <>
-            <h3 className="tl-color-primary d-inline-block align-middle">
+            <h3 className="cru-color-primary d-inline-block align-middle">
               {timeline.title}
               <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>
diff --git a/FrontEnd/src/views/user/UserCard.tsx b/FrontEnd/src/views/user/UserCard.tsx
index 06bb2143..8a532512 100644
--- a/FrontEnd/src/views/user/UserCard.tsx
+++ b/FrontEnd/src/views/user/UserCard.tsx
@@ -16,7 +16,7 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
       <TimelinePageCardTemplate
         infoArea={
           <>
-            <h3 className="tl-color-primary d-inline-block align-middle">
+            <h3 className="cru-color-primary d-inline-block align-middle">
               {timeline.title}
               <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>
-- 
cgit v1.2.3


From bb7a017dba4c466eaf167627b3605cf539b1e516 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 19:00:13 +0800
Subject: ...

---
 FrontEnd/src/palette.ts                            |  6 +-
 FrontEnd/src/views/common/index.css                | 78 +++++++++++-----------
 FrontEnd/src/views/common/menu/Menu.css            |  2 +-
 FrontEnd/src/views/common/menu/PopupMenu.css       |  1 +
 FrontEnd/src/views/common/menu/PopupMenu.tsx       | 35 +++++-----
 .../timeline-common/TimelinePageCardTemplate.tsx   |  2 +-
 FrontEnd/src/views/timeline/TimelineCard.tsx       | 12 ++--
 FrontEnd/src/views/user/UserCard.tsx               |  8 ++-
 8 files changed, 77 insertions(+), 67 deletions(-)

(limited to 'FrontEnd/src/views/user/UserCard.tsx')

diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts
index fb54f042..ca1f76cf 100644
--- a/FrontEnd/src/palette.ts
+++ b/FrontEnd/src/palette.ts
@@ -90,7 +90,7 @@ export function generatePalette(options: {
     primaryEnhance == null
       ? lightenBy(p, 0.3).saturate(0.3)
       : Color(primaryEnhance);
-  const s = secondary == null ? p.rotate(90) : Color(secondary);
+  const s = secondary == null ? Color("gray") : Color(secondary);
 
   return {
     primary: generatePaletteColor(p.toString()),
@@ -130,8 +130,8 @@ export function generatePaletteCSS(palette: Palette): string {
 
 const paletteSubject: BehaviorSubject<Palette | null> =
   new BehaviorSubject<Palette | null>(
-    generatePalette({ primary: "rgb(0, 123, 255)" })
-    // null
+    // generatePalette({ primary: "rgb(0, 123, 255)" })
+    null
   );
 
 export const palette$: Observable<Palette | null> =
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index d7501f98..4a860e95 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -1,45 +1,45 @@
 :root {
   --cru-background-color: #f8f9fa;
 
-  --cru-primary-color: rgb(255, 105, 0);
-  --cru-primary-l1-color: rgb(255, 120, 26);
-  --cru-primary-l2-color: rgb(255, 135, 51);
-  --cru-primary-l3-color: rgb(255, 150, 77);
-  --cru-primary-d1-color: rgb(230, 95, 0);
-  --cru-primary-d2-color: rgb(204, 84, 0);
-  --cru-primary-d3-color: rgb(179, 74, 0);
-  --cru-primary-f1-color: rgb(230, 95, 0);
-  --cru-primary-f2-color: rgb(204, 84, 0);
-  --cru-primary-f3-color: rgb(179, 74, 0);
-  --cru-primary-r1-color: rgb(255, 120, 26);
-  --cru-primary-r2-color: rgb(255, 135, 51);
-  --cru-primary-r3-color: rgb(255, 150, 77);
-  --cru-primary-enhance-color: rgb(255, 150, 77);
-  --cru-primary-enhance-l1-color: rgb(255, 161, 94);
-  --cru-primary-enhance-l2-color: rgb(255, 171, 112);
-  --cru-primary-enhance-l3-color: rgb(255, 182, 130);
-  --cru-primary-enhance-d1-color: rgb(255, 131, 43);
-  --cru-primary-enhance-d2-color: rgb(255, 111, 10);
-  --cru-primary-enhance-d3-color: rgb(232, 96, 0);
-  --cru-primary-enhance-f1-color: rgb(255, 161, 94);
-  --cru-primary-enhance-f2-color: rgb(255, 171, 112);
-  --cru-primary-enhance-f3-color: rgb(255, 182, 130);
-  --cru-primary-enhance-r1-color: rgb(255, 131, 43);
-  --cru-primary-enhance-r2-color: rgb(255, 111, 10);
-  --cru-primary-enhance-r3-color: rgb(232, 96, 0);
-  --cru-secondary-color: rgb(23, 255, 0);
-  --cru-secondary-l1-color: rgb(46, 255, 26);
-  --cru-secondary-l2-color: rgb(69, 255, 51);
-  --cru-secondary-l3-color: rgb(92, 255, 77);
-  --cru-secondary-d1-color: rgb(20, 230, 0);
-  --cru-secondary-d2-color: rgb(18, 204, 0);
-  --cru-secondary-d3-color: rgb(16, 179, 0);
-  --cru-secondary-f1-color: rgb(20, 230, 0);
-  --cru-secondary-f2-color: rgb(18, 204, 0);
-  --cru-secondary-f3-color: rgb(16, 179, 0);
-  --cru-secondary-r1-color: rgb(46, 255, 26);
-  --cru-secondary-r2-color: rgb(69, 255, 51);
-  --cru-secondary-r3-color: rgb(92, 255, 77);
+  --cru-primary-color: rgb(0, 123, 255);
+  --cru-primary-l1-color: rgb(26, 136, 255);
+  --cru-primary-l2-color: rgb(51, 149, 255);
+  --cru-primary-l3-color: rgb(77, 163, 255);
+  --cru-primary-d1-color: rgb(0, 111, 230);
+  --cru-primary-d2-color: rgb(0, 98, 204);
+  --cru-primary-d3-color: rgb(0, 86, 179);
+  --cru-primary-f1-color: rgb(0, 111, 230);
+  --cru-primary-f2-color: rgb(0, 98, 204);
+  --cru-primary-f3-color: rgb(0, 86, 179);
+  --cru-primary-r1-color: rgb(26, 136, 255);
+  --cru-primary-r2-color: rgb(51, 149, 255);
+  --cru-primary-r3-color: rgb(77, 163, 255);
+  --cru-primary-enhance-color: rgb(77, 163, 255);
+  --cru-primary-enhance-l1-color: rgb(94, 172, 255);
+  --cru-primary-enhance-l2-color: rgb(112, 181, 255);
+  --cru-primary-enhance-l3-color: rgb(130, 190, 255);
+  --cru-primary-enhance-d1-color: rgb(43, 145, 255);
+  --cru-primary-enhance-d2-color: rgb(10, 128, 255);
+  --cru-primary-enhance-d3-color: rgb(0, 112, 232);
+  --cru-primary-enhance-f1-color: rgb(94, 172, 255);
+  --cru-primary-enhance-f2-color: rgb(112, 181, 255);
+  --cru-primary-enhance-f3-color: rgb(130, 190, 255);
+  --cru-primary-enhance-r1-color: rgb(43, 145, 255);
+  --cru-primary-enhance-r2-color: rgb(10, 128, 255);
+  --cru-primary-enhance-r3-color: rgb(0, 112, 232);
+  --cru-secondary-color: rgb(128, 128, 128);
+  --cru-secondary-l1-color: rgb(141, 141, 141);
+  --cru-secondary-l2-color: rgb(153, 153, 153);
+  --cru-secondary-l3-color: rgb(166, 166, 166);
+  --cru-secondary-d1-color: rgb(115, 115, 115);
+  --cru-secondary-d2-color: rgb(102, 102, 102);
+  --cru-secondary-d3-color: rgb(90, 90, 90);
+  --cru-secondary-f1-color: rgb(115, 115, 115);
+  --cru-secondary-f2-color: rgb(102, 102, 102);
+  --cru-secondary-f3-color: rgb(90, 90, 90);
+  --cru-secondary-r1-color: rgb(141, 141, 141);
+  --cru-secondary-r2-color: rgb(153, 153, 153);
+  --cru-secondary-r3-color: rgb(166, 166, 166);
   --cru-text-primary-color: rgb(17, 17, 17);
   --cru-text-primary-l1-color: rgb(41, 41, 41);
   --cru-text-primary-l2-color: rgb(65, 65, 65);
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index 0b455baa..e0ea2cad 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -3,7 +3,7 @@
 }
 
 .cru-menu-item {
-  font-size: 1.2em;
+  font-size: 1em;
   padding: 0.5em 1.5em;
   cursor: pointer;
 }
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
index 8f8fd20e..658532d3 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -1,4 +1,5 @@
 .cru-popup-menu-menu-container {
+  z-index: 1040;
   border-radius: 5px;
   border: var(--cru-primary-color) 1px solid;
   background-color: var(--cru-background-color);
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 851f3bee..d7b81f49 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import React from "react";
+import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
 import Menu, { MenuItems } from "./Menu";
@@ -57,21 +58,25 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
       >
         {children}
       </div>
-      {show ? (
-        <div
-          ref={setPopperElement}
-          className="cru-popup-menu-menu-container"
-          style={styles.popper}
-          {...attributes.popper}
-        >
-          <Menu
-            items={items}
-            onItemClicked={() => {
-              setShow(false);
-            }}
-          />
-        </div>
-      ) : null}
+      {show
+        ? createPortal(
+            <div
+              ref={setPopperElement}
+              className="cru-popup-menu-menu-container"
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <Menu
+                items={items}
+                onItemClicked={() => {
+                  setShow(false);
+                }}
+              />
+            </div>,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            document.getElementById("portal")!
+          )
+        : null}
     </>
   );
 };
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index f57fda2e..4802ca93 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -23,7 +23,7 @@ import FullPageDialog from "../common/dailog/FullPageDialog";
 import Card from "../common/Card";
 
 export interface TimelineCardTemplateProps extends TimelinePageCardProps {
-  infoArea: React.ReactElement;
+  infoArea: React.ReactNode;
   manageItems?: MenuItems;
   dialog: string | "property" | "member" | null;
   setDialog: (dialog: "property" | "member" | null) => void;
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
index 311aa112..56057560 100644
--- a/FrontEnd/src/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -20,16 +20,18 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
           <>
             <h3 className="cru-color-primary d-inline-block align-middle">
               {timeline.title}
-              <small className="ms-3 text-secondary">{timeline.name}</small>
+              <small className="ms-3 cru-color-secondary">
+                {timeline.name}
+              </small>
             </h3>
-            <div className="align-middle">
+            <div>
               <UserAvatar
                 username={timeline.owner.username}
-                className="avatar small rounded-circle me-3"
+                className="cru-avatar small cru-round me-3"
               />
               {timeline.owner.nickname}
-              <small className="ms-3 text-secondary">
-                src{timeline.owner.username}
+              <small className="ms-3 cru-color-secondary">
+                @{timeline.owner.username}
               </small>
             </div>
           </>
diff --git a/FrontEnd/src/views/user/UserCard.tsx b/FrontEnd/src/views/user/UserCard.tsx
index 8a532512..739d26ee 100644
--- a/FrontEnd/src/views/user/UserCard.tsx
+++ b/FrontEnd/src/views/user/UserCard.tsx
@@ -16,11 +16,13 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
       <TimelinePageCardTemplate
         infoArea={
           <>
-            <h3 className="cru-color-primary d-inline-block align-middle">
+            <h3 className="cru-color-primary d-inline-block">
               {timeline.title}
-              <small className="ms-3 text-secondary">{timeline.name}</small>
+              <small className="ms-3 cru-color-secondary">
+                {timeline.name}
+              </small>
             </h3>
-            <div className="align-middle">
+            <div>
               <UserAvatar
                 username={timeline.owner.username}
                 className="cru-avatar small cru-round me-3"
-- 
cgit v1.2.3