aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views')
-rw-r--r--FrontEnd/src/views/common/AppBar.css12
-rw-r--r--FrontEnd/src/views/common/Card.css2
-rw-r--r--FrontEnd/src/views/common/button/Button.css32
-rw-r--r--FrontEnd/src/views/common/button/FlatButton.css16
-rw-r--r--FrontEnd/src/views/common/button/TextButton.css16
-rw-r--r--FrontEnd/src/views/common/dailog/Dialog.css22
-rw-r--r--FrontEnd/src/views/common/dailog/Dialog.tsx30
-rw-r--r--FrontEnd/src/views/common/index.css225
-rw-r--r--FrontEnd/src/views/common/menu/Menu.css35
-rw-r--r--FrontEnd/src/views/common/menu/Menu.tsx (renamed from FrontEnd/src/views/common/Menu.tsx)14
-rw-r--r--FrontEnd/src/views/common/menu/PopupMenu.tsx17
-rw-r--r--FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx2
-rw-r--r--FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx2
-rw-r--r--FrontEnd/src/views/timeline-common/index.css24
14 files changed, 305 insertions, 144 deletions
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index 16572817..e4bdf852 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -7,7 +7,7 @@
top: 0;
left: 0;
right: 0;
- background-color: var(--tl-primary-color);
+ background-color: var(--cru-primary-color);
transition: background-color 1s;
}
@@ -16,16 +16,16 @@
}
.app-bar a {
- color: var(--tl-text-on-primary-r1-color);
+ color: var(--cru-text-on-primary-r1-color);
text-decoration: none;
margin: 0 1em;
transition: color 1s;
}
.app-bar a:hover {
- color: var(--tl-text-on-primary-color);
+ color: var(--cru-text-on-primary-color);
}
.app-bar a.active {
- color: var(--tl-text-on-primary-color);
+ color: var(--cru-text-on-primary-color);
}
.app-bar-brand {
@@ -62,7 +62,7 @@
right: 0;
transform-origin: top;
transition: transform 0.6s, background-color 1s;
- background-color: var(--tl-primary-color);
+ background-color: var(--cru-primary-color);
flex-direction: column;
}
.small-screen .app-bar-main-area.app-bar-collapse {
@@ -89,7 +89,7 @@
margin-left: auto;
font-size: 2em;
margin-right: 1em;
- color: var(--tl-text-on-primary-color);
+ color: var(--cru-text-on-primary-color);
cursor: pointer;
user-select: none;
}
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index fb90bd59..6de0dd8e 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -11,5 +11,5 @@
}
.cru-card:hover {
- border-color: var(--tl-primary-color);
+ border-color: var(--cru-primary-color);
}
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index b6df222f..8b5b74a7 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -8,65 +8,65 @@
}
.cru-button.primary {
- background-color: var(--tl-primary-color);
+ background-color: var(--cru-primary-color);
}
.cru-button.primary:hover {
- background-color: var(--tl-primary-f1-color);
+ background-color: var(--cru-primary-f1-color);
}
.cru-button.primary:active {
- background-color: var(--tl-primary-f2-color);
+ background-color: var(--cru-primary-f2-color);
}
.cru-button.primary.disabled {
- background-color: var(--tl-primary-f3-color);
+ background-color: var(--cru-primary-f3-color);
}
.cru-button.secondary {
- background-color: var(--tl-secondary-color);
+ background-color: var(--cru-secondary-color);
}
.cru-button.secondary:hover {
- background-color: var(--tl-secondary-f1-color);
+ background-color: var(--cru-secondary-f1-color);
}
.cru-button.secondary:active {
- background-color: var(--tl-secondary-f2-color);
+ background-color: var(--cru-secondary-f2-color);
}
.cru-button.secondary.disabled {
- background-color: var(--tl-secondary-f3-color);
+ background-color: var(--cru-secondary-f3-color);
}
.cru-button.success {
- background-color: var(--tl-success-color);
+ background-color: var(--cru-success-color);
}
.cru-button.success:hover {
- background-color: var(--tl-success-f1-color);
+ background-color: var(--cru-success-f1-color);
}
.cru-button.success:active {
- background-color: var(--tl-success-f2-color);
+ background-color: var(--cru-success-f2-color);
}
.cru-button.success.disabled {
- background-color: var(--tl-success-f3-color);
+ background-color: var(--cru-success-f3-color);
}
.cru-button.danger {
- background-color: var(--tl-danger-color);
+ background-color: var(--cru-danger-color);
}
.cru-button.danger:hover {
- background-color: var(--tl-danger-f1-color);
+ background-color: var(--cru-danger-f1-color);
}
.cru-button.danger:active {
- background-color: var(--tl-danger-f2-color);
+ background-color: var(--cru-danger-f2-color);
}
.cru-button.danger.disabled {
- background-color: var(--tl-danger-f3-color);
+ background-color: var(--cru-danger-f3-color);
}
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index c3c0dbb3..986fb061 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -16,33 +16,33 @@
}
.cru-flat-button.primary {
- color: var(--tl-primary-color);
+ color: var(--cru-primary-color);
}
.cru-flat-button.primary.disabled {
- color: var(--tl-primary-l1-color);
+ color: var(--cru-primary-l1-color);
}
.cru-flat-button.secondary {
- color: var(--tl-secondary-color);
+ color: var(--cru-secondary-color);
}
.cru-flat-button.secondary.disabled {
- color: var(--tl-secondary-l1-color);
+ color: var(--cru-secondary-l1-color);
}
.cru-flat-button.success {
- color: var(--tl-success-color);
+ color: var(--cru-success-color);
}
.cru-flat-button.success.disabled {
- color: var(--tl-success-l1-color);
+ color: var(--cru-success-l1-color);
}
.cru-flat-button.danger {
- color: var(--tl-danger-color);
+ color: var(--cru-danger-color);
}
.cru-flat-button.danger.disabled {
- color: var(--tl-danger-l1-color);
+ color: var(--cru-danger-l1-color);
}
diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css
index d267fb38..f5c8aefa 100644
--- a/FrontEnd/src/views/common/button/TextButton.css
+++ b/FrontEnd/src/views/common/button/TextButton.css
@@ -4,33 +4,33 @@
}
.cru-text-button.primary {
- color: var(--tl-primary-color);
+ color: var(--cru-primary-color);
}
.cru-text-button.primary:hover {
- color: var(--tl-primary-l1-color);
+ color: var(--cru-primary-l1-color);
}
.cru-text-button.secondary {
- color: var(--tl-secondary-color);
+ color: var(--cru-secondary-color);
}
.cru-text-button.secondary:hover {
- color: var(--tl-secondary-l1-color);
+ color: var(--cru-secondary-l1-color);
}
.cru-text-button.success {
- color: var(--tl-success-color);
+ color: var(--cru-success-color);
}
.cru-text-button.success:hover {
- color: var(--tl-success-l1-color);
+ color: var(--cru-success-l1-color);
}
.cru-text-button.danger {
- color: var(--tl-danger-color);
+ color: var(--cru-danger-color);
}
.cru-text-button.danger:hover {
- color: var(--tl-danger-l1-color);
+ color: var(--cru-danger-l1-color);
}
diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
index e69de29b..abce04fd 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.css
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
@@ -0,0 +1,22 @@
+.cru-dialog-overlay {
+ position: fixed;
+ z-index: 1040;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(255, 255, 255, 0.92);
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.cru-dialog-container {
+ max-width: 100%;
+
+ border: var(--cru-primary-color) 1px solid;
+ border-radius: 5px;
+ padding: 1.5em;
+ background-color: white;
+}
diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx
index 5a3902c4..ee58080f 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dailog/Dialog.tsx
@@ -1,13 +1,39 @@
import React from "react";
+import ReactDOM from "react-dom";
+
+import "./Dialog.css";
export interface DialogProps {
onClose: () => void;
open?: boolean;
children?: React.ReactNode;
+ disableCloseOnClickOnOverlay?: boolean;
}
export default function Dialog(props: DialogProps): React.ReactElement | null {
- const { open, onClose, children } = props;
+ const { open, onClose, children, disableCloseOnClickOnOverlay } = props;
- return <div>{children}</div>;
+ return open
+ ? ReactDOM.createPortal(
+ <div
+ className="cru-dialog-overlay"
+ onClick={
+ disableCloseOnClickOnOverlay
+ ? undefined
+ : () => {
+ onClose();
+ }
+ }
+ >
+ <div
+ className="cru-dialog-container"
+ onClick={(e) => e.stopPropagation()}
+ >
+ {children}
+ </div>
+ </div>,
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ document.getElementById("portal")!
+ )
+ : null;
}
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index aaaaad58..e2769fe4 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -1,3 +1,152 @@
+:root {
+ --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-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);
+ --cru-text-primary-l3-color: rgb(88, 88, 88);
+ --cru-text-primary-d1-color: rgb(15, 15, 15);
+ --cru-text-primary-d2-color: rgb(14, 14, 14);
+ --cru-text-primary-d3-color: rgb(12, 12, 12);
+ --cru-text-primary-f1-color: rgb(15, 15, 15);
+ --cru-text-primary-f2-color: rgb(14, 14, 14);
+ --cru-text-primary-f3-color: rgb(12, 12, 12);
+ --cru-text-primary-r1-color: rgb(41, 41, 41);
+ --cru-text-primary-r2-color: rgb(65, 65, 65);
+ --cru-text-primary-r3-color: rgb(88, 88, 88);
+ --cru-text-on-primary-color: rgb(255, 255, 255);
+ --cru-text-on-primary-l1-color: rgb(255, 255, 255);
+ --cru-text-on-primary-l2-color: rgb(255, 255, 255);
+ --cru-text-on-primary-l3-color: rgb(255, 255, 255);
+ --cru-text-on-primary-d1-color: rgb(230, 230, 230);
+ --cru-text-on-primary-d2-color: rgb(204, 204, 204);
+ --cru-text-on-primary-d3-color: rgb(179, 179, 179);
+ --cru-text-on-primary-f1-color: rgb(255, 255, 255);
+ --cru-text-on-primary-f2-color: rgb(255, 255, 255);
+ --cru-text-on-primary-f3-color: rgb(255, 255, 255);
+ --cru-text-on-primary-r1-color: rgb(230, 230, 230);
+ --cru-text-on-primary-r2-color: rgb(204, 204, 204);
+ --cru-text-on-primary-r3-color: rgb(179, 179, 179);
+ --cru-text-on-primary-enhance-color: rgb(0, 0, 0);
+ --cru-text-on-primary-enhance-l1-color: rgb(26, 26, 26);
+ --cru-text-on-primary-enhance-l2-color: rgb(51, 51, 51);
+ --cru-text-on-primary-enhance-l3-color: rgb(77, 77, 77);
+ --cru-text-on-primary-enhance-d1-color: rgb(0, 0, 0);
+ --cru-text-on-primary-enhance-d2-color: rgb(0, 0, 0);
+ --cru-text-on-primary-enhance-d3-color: rgb(0, 0, 0);
+ --cru-text-on-primary-enhance-f1-color: rgb(0, 0, 0);
+ --cru-text-on-primary-enhance-f2-color: rgb(0, 0, 0);
+ --cru-text-on-primary-enhance-f3-color: rgb(0, 0, 0);
+ --cru-text-on-primary-enhance-r1-color: rgb(26, 26, 26);
+ --cru-text-on-primary-enhance-r2-color: rgb(51, 51, 51);
+ --cru-text-on-primary-enhance-r3-color: rgb(77, 77, 77);
+ --cru-text-on-secondary-color: rgb(255, 255, 255);
+ --cru-text-on-secondary-l1-color: rgb(255, 255, 255);
+ --cru-text-on-secondary-l2-color: rgb(255, 255, 255);
+ --cru-text-on-secondary-l3-color: rgb(255, 255, 255);
+ --cru-text-on-secondary-d1-color: rgb(230, 230, 230);
+ --cru-text-on-secondary-d2-color: rgb(204, 204, 204);
+ --cru-text-on-secondary-d3-color: rgb(179, 179, 179);
+ --cru-text-on-secondary-f1-color: rgb(255, 255, 255);
+ --cru-text-on-secondary-f2-color: rgb(255, 255, 255);
+ --cru-text-on-secondary-f3-color: rgb(255, 255, 255);
+ --cru-text-on-secondary-r1-color: rgb(230, 230, 230);
+ --cru-text-on-secondary-r2-color: rgb(204, 204, 204);
+ --cru-text-on-secondary-r3-color: rgb(179, 179, 179);
+ --cru-danger-color: rgb(255, 0, 0);
+ --cru-danger-l1-color: rgb(255, 26, 26);
+ --cru-danger-l2-color: rgb(255, 51, 51);
+ --cru-danger-l3-color: rgb(255, 77, 77);
+ --cru-danger-d1-color: rgb(230, 0, 0);
+ --cru-danger-d2-color: rgb(204, 0, 0);
+ --cru-danger-d3-color: rgb(179, 0, 0);
+ --cru-danger-f1-color: rgb(230, 0, 0);
+ --cru-danger-f2-color: rgb(204, 0, 0);
+ --cru-danger-f3-color: rgb(179, 0, 0);
+ --cru-danger-r1-color: rgb(255, 26, 26);
+ --cru-danger-r2-color: rgb(255, 51, 51);
+ --cru-danger-r3-color: rgb(255, 77, 77);
+ --cru-success-color: rgb(0, 128, 0);
+ --cru-success-l1-color: rgb(0, 166, 0);
+ --cru-success-l2-color: rgb(0, 204, 0);
+ --cru-success-l3-color: rgb(0, 243, 0);
+ --cru-success-d1-color: rgb(0, 115, 0);
+ --cru-success-d2-color: rgb(0, 102, 0);
+ --cru-success-d3-color: rgb(0, 90, 0);
+ --cru-success-f1-color: rgb(0, 115, 0);
+ --cru-success-f2-color: rgb(0, 102, 0);
+ --cru-success-f3-color: rgb(0, 90, 0);
+ --cru-success-r1-color: rgb(0, 166, 0);
+ --cru-success-r2-color: rgb(0, 204, 0);
+ --cru-success-r3-color: rgb(0, 243, 0);
+}
+
+.tl-color-primary {
+ color: var(--cru-primary-color);
+}
+
+.tl-color-secondary {
+ color: var(--cru-secondary-color);
+}
+
+.tl-color-success {
+ color: var(--cru-success-color);
+}
+
+.tl-color-danger {
+ color: var(--cru-danger-color);
+}
+
+.icon-button {
+ font-size: 1.4rem;
+ cursor: pointer;
+}
+
+.icon-button.large {
+ font-size: 1.6rem;
+}
+
+.icon-button.primary-enhance {
+ color: var(--cru-primary-enhance-color);
+}
+
.cru-avatar {
width: 60px;
height: 60px;
@@ -49,7 +198,7 @@
left: 0;
right: 0;
z-index: 1;
- background-color: var(--tl-primary-color);
+ background-color: var(--cru-primary-color);
display: flex;
align-items: center;
}
@@ -58,80 +207,6 @@
overflow: scroll;
}
-.cru-menu {
- min-width: 200px;
-}
-
-.cru-menu-item {
- font-size: 1.2em;
- padding: 0.5em 1.5em;
- cursor: pointer;
-}
-.cru-menu-item.color-primary {
- color: #0d6efd;
-}
-.cru-menu-item.color-primary:hover {
- color: white;
- background-color: #0d6efd;
-}
-.cru-menu-item.color-secondary {
- color: #6c757d;
-}
-.cru-menu-item.color-secondary:hover {
- color: white;
- background-color: #6c757d;
-}
-.cru-menu-item.color-success {
- color: #198754;
-}
-.cru-menu-item.color-success:hover {
- color: white;
- background-color: #198754;
-}
-.cru-menu-item.color-info {
- color: #0dcaf0;
-}
-.cru-menu-item.color-info:hover {
- color: white;
- background-color: #0dcaf0;
-}
-.cru-menu-item.color-warning {
- color: #ffc107;
-}
-.cru-menu-item.color-warning:hover {
- color: white;
- background-color: #ffc107;
-}
-.cru-menu-item.color-danger {
- color: #dc3545;
-}
-.cru-menu-item.color-danger:hover {
- color: white;
- background-color: #dc3545;
-}
-.cru-menu-item.color-light {
- color: #f8f9fa;
-}
-.cru-menu-item.color-light:hover {
- color: white;
- background-color: #f8f9fa;
-}
-.cru-menu-item.color-dark {
- color: #212529;
-}
-.cru-menu-item.color-dark:hover {
- color: white;
- background-color: #212529;
-}
-
-.cru-menu-item-icon {
- margin-right: 1em;
-}
-
-.cru-menu-divider {
- border-top: 1px solid #e9ecef;
-}
-
.cru-tab-pages-action-area {
display: flex;
align-items: center;
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
new file mode 100644
index 00000000..0b455baa
--- /dev/null
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -0,0 +1,35 @@
+.cru-menu {
+ min-width: 200px;
+}
+
+.cru-menu-item {
+ font-size: 1.2em;
+ padding: 0.5em 1.5em;
+ cursor: pointer;
+}
+
+.cru-menu-item.color-primary {
+ color: var(--cru-primary-color);
+}
+
+.cru-menu-item.color-primary:hover {
+ color: var(--cru-text-on-primary-color);
+ background-color: var(--cru-primary-color);
+}
+
+.cru-menu-item.color-secondary {
+ color: var(--cru-secondary-color);
+}
+
+.cru-menu-item.color-secondary:hover {
+ color: var(--cru-text-on-secondary-color);
+ background-color: var(--cru-secondary-color);
+}
+
+.cru-menu-item-icon {
+ margin-right: 1em;
+}
+
+.cru-menu-divider {
+ border-top: 1px solid #e9ecef;
+}
diff --git a/FrontEnd/src/views/common/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index a5d2ec2c..7523247d 100644
--- a/FrontEnd/src/views/common/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -64,17 +64,3 @@ const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
};
export default Menu;
-
-export interface PopupMenuProps {
- items: MenuItems;
- children: React.ReactElement;
-}
-
-export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => {
- const [show, setShow] = React.useState<boolean>(false);
- const toggle = (): void => setShow(!show);
-
- // TODO:
-
- return <Menu items={items} onItemClicked={() => setShow(false)} />;
-};
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
new file mode 100644
index 00000000..0d447f09
--- /dev/null
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import Menu, { MenuItems } from "./Menu";
+
+export interface PopupMenuProps {
+ items: MenuItems;
+ children: React.ReactElement;
+}
+
+export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => {
+ const [show, setShow] = React.useState<boolean>(false);
+ const toggle = (): void => setShow(!show);
+
+ // TODO:
+
+ return <Menu items={items} onItemClicked={() => setShow(false)} />;
+};
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index 78057be2..78af1131 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -17,7 +17,7 @@ import CollapseButton from "./CollapseButton";
import { TimelineMemberDialog } from "./TimelineMember";
import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
import ConnectionStatusBadge from "./ConnectionStatusBadge";
-import { MenuItems, PopupMenu } from "../common/Menu";
+import { MenuItems, PopupMenu } from "../common/menu/Menu";
import FullPageDialog from "../common/dailog/FullPageDialog";
import Card from "../common/Card";
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
index 13aacb54..1e6591c0 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx
@@ -16,7 +16,7 @@ import { base64 } from "@/http/common";
import BlobImage from "../common/BlobImage";
import LoadingButton from "../common/button/LoadingButton";
-import { PopupMenu } from "../common/Menu";
+import { PopupMenu } from "../common/menu/Menu";
import Card from "../common/Card";
import MarkdownPostEdit from "./MarkdownPostEdit";
import TimelineLine from "./TimelineLine";
diff --git a/FrontEnd/src/views/timeline-common/index.css b/FrontEnd/src/views/timeline-common/index.css
index b78564a3..70a1646d 100644
--- a/FrontEnd/src/views/timeline-common/index.css
+++ b/FrontEnd/src/views/timeline-common/index.css
@@ -13,19 +13,19 @@
@keyframes timeline-line-node-noncurrent {
to {
- box-shadow: 0 0 20px 3px var(--tl-primary-l1-color);
+ box-shadow: 0 0 20px 3px var(--cru-primary-l1-color);
}
}
@keyframes timeline-line-node-current {
to {
- box-shadow: 0 0 20px 3px var(--tl-primary-enhance-l1-color);
+ box-shadow: 0 0 20px 3px var(--cru-primary-enhance-l1-color);
}
}
@keyframes timeline-line-node-loading {
to {
- box-shadow: 0 0 20px 3px var(--tl-primary-l1-color);
+ box-shadow: 0 0 20px 3px var(--cru-primary-l1-color);
}
}
@@ -79,7 +79,7 @@
.timeline-line .segment {
width: 7px;
- background: var(--tl-primary-color);
+ background: var(--cru-primary-color);
}
.timeline-line .segment.start {
height: 1.8em;
@@ -91,7 +91,7 @@
.timeline-line .segment.current-end {
height: 2em;
flex: 0 0 auto;
- background: linear-gradient(var(--tl-primary-enhance-color), white);
+ background: linear-gradient(var(--cru-primary-enhance-color), white);
}
.timeline-line .node-container {
flex: 0 0 auto;
@@ -103,7 +103,7 @@
width: 20px;
height: 20px;
position: absolute;
- background: var(--tl-primary-color);
+ background: var(--cru-primary-color);
left: -1px;
top: -1px;
border-radius: 50%;
@@ -113,7 +113,7 @@
animation-name: timeline-line-node-noncurrent;
}
.timeline-line .node-loading-edge {
- color: var(--tl-primary-color);
+ color: var(--cru-primary-color);
width: 38px;
height: 38px;
position: absolute;
@@ -125,22 +125,22 @@
}
.timeline-line.current .segment.start {
background: linear-gradient(
- var(--tl-primary-color),
- var(--tl-primary-enhance-color)
+ var(--cru-primary-color),
+ var(--cru-primary-enhance-color)
);
}
.timeline-line.current .segment.end {
- background: var(--tl-primary-enhance-color);
+ background: var(--cru-primary-enhance-color);
}
.timeline-line.current .node {
- background: var(--tl-primary-enhance-color);
+ background: var(--cru-primary-enhance-color);
animation-name: timeline-line-node-current;
}
.timeline-line.loading .node {
- background: var(--tl-primary-color);
+ background: var(--cru-primary-color);
animation-name: timeline-line-node-loading;
}
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 23:21:37 +0000