aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--FrontEnd/src/palette.ts6
-rw-r--r--FrontEnd/src/views/common/index.css78
-rw-r--r--FrontEnd/src/views/common/menu/Menu.css2
-rw-r--r--FrontEnd/src/views/common/menu/PopupMenu.css1
-rw-r--r--FrontEnd/src/views/common/menu/PopupMenu.tsx35
-rw-r--r--FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx2
-rw-r--r--FrontEnd/src/views/timeline/TimelineCard.tsx12
-rw-r--r--FrontEnd/src/views/user/UserCard.tsx8
8 files changed, 77 insertions, 67 deletions
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"
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 18:48:32 +0000