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')

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