aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--FrontEnd/src/pages/timeline/ConnectionStatusBadge.css12
-rw-r--r--FrontEnd/src/pages/timeline/Timeline.css4
-rw-r--r--FrontEnd/src/pages/timeline/Timeline.tsx2
-rw-r--r--FrontEnd/src/pages/timeline/TimelineCard.css5
-rw-r--r--FrontEnd/src/pages/timeline/TimelineCard.tsx1
-rw-r--r--FrontEnd/src/pages/timeline/TimelinePostCreateView.css4
-rw-r--r--FrontEnd/src/views/common/Card.css8
-rw-r--r--FrontEnd/src/views/common/Card.tsx9
-rw-r--r--FrontEnd/src/views/common/button/Button.css2
-rw-r--r--FrontEnd/src/views/common/button/LoadingButton.css8
-rw-r--r--FrontEnd/src/views/common/menu/Menu.css8
-rw-r--r--FrontEnd/src/views/common/menu/Menu.tsx6
-rw-r--r--FrontEnd/src/views/common/menu/PopupMenu.css4
-rw-r--r--FrontEnd/src/views/common/menu/PopupMenu.tsx8
-rw-r--r--FrontEnd/src/views/common/theme.css4
15 files changed, 52 insertions, 33 deletions
diff --git a/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css b/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css
index 7fe83b9b..fc01484e 100644
--- a/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css
+++ b/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css
@@ -2,8 +2,8 @@
font-size: 0.8em;
border-radius: 5px;
padding: 0.1em 1em;
- background-color: #eaf2ff;
}
+
.connection-status-badge::before {
width: 10px;
height: 10px;
@@ -12,11 +12,13 @@
content: "";
margin-right: 0.6em;
}
+
.connection-status-badge.success {
- color: #006100;
+ color: var(--cru-create-color);
}
+
.connection-status-badge.success::before {
- background-color: #006100;
+ background-color: var(--cru-create-color);
}
.connection-status-badge.warning {
@@ -28,9 +30,9 @@
}
.connection-status-badge.danger {
- color: #fd1616;
+ color: var(--cru-danger-color);
}
.connection-status-badge.danger::before {
- background-color: #fd1616;
+ background-color: var(--cru-danger-color);
}
diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index ba5f7b04..656374e9 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -1,5 +1,6 @@
-.timeline {
+.timeline-container {
--timeline-shadow-color: #00000080;
+ --timeline-card-shadow: 2px 1px 10px -2px var(--timeline-shadow-color);
--timeline-post-line-color: #eadd2c;
--timeline-post-line-shadow: 2px 1px 10px -1px var(--timeline-shadow-color);
--timeline-post-card-background-color: hsl(0, 0%, 100%);
@@ -18,6 +19,7 @@
z-index: 0;
position: relative;
width: 100%;
+ padding-top: 10px;
}
@keyframes timeline-line-node {
diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 3c9d73bf..73e621c1 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -156,7 +156,7 @@ export function Timeline(props: TimelineProps) {
return <div className={className}>Error.</div>;
}
return (
- <div>
+ <div className="timeline-container">
{timeline && (
<TimelineCard
timeline={timeline}
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.css b/FrontEnd/src/pages/timeline/TimelineCard.css
index 1bffe980..cf2704a9 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.css
+++ b/FrontEnd/src/pages/timeline/TimelineCard.css
@@ -4,6 +4,7 @@
top: 56px;
right: 0;
margin: 0.5em;
+ box-shadow: var(--timeline-card-shadow);
}
@media (min-width: 576px) {
@@ -15,13 +16,13 @@
.timeline-card-title {
display: inline-block;
vertical-align: middle;
- color: var(--cru-key-container-on-color);
+ color: var(--cru-text-primary-color);
margin: 0.5em 1em;
}
.timeline-card-title-name {
margin-inline-start: 1em;
- color: var(--cru-surface-on-variant-color);
+ color: var(--cru-text-secondary-color);
}
.timeline-card-user {
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.tsx b/FrontEnd/src/pages/timeline/TimelineCard.tsx
index b287c620..d002a1b9 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineCard.tsx
@@ -124,6 +124,7 @@ export default function TimelineCard(props: TimelinePageCardProps) {
return (
<Card
color="secondary"
+ noBackground
className={`timeline-card timeline-card-${
collapse ? "collapse" : "expand"
}`}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index f54c5103..2a433860 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -18,7 +18,9 @@
height: 100%;
background-color: var(--cru-background-color);
color: var(--cru-text-primary-color);
- border: 1px solid transparent;
+ border: 1px solid var(--cru-text-primary-color);
+ padding: 0.5em;
+ border-radius: 5px;
}
.timeline-post-create-edit-text:hover {
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index f391abc8..301910c6 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,6 +1,10 @@
.cru-card {
border-radius: var(--cru-card-border-radius);
- border: 1px solid var(--cru-card-border-color);
+ border: 2px solid var(--cru-card-border-color);
background-color: var(--cru-card-background-color);
transition: all 0.3s;
-} \ No newline at end of file
+}
+
+.cru-card-no-background {
+ background-color: var(--cru-background-color);
+}
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index e1af13a9..fb29f728 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -7,10 +7,12 @@ import "./Card.css";
interface CardProps extends ComponentPropsWithoutRef<"div"> {
containerRef?: Ref<HTMLDivElement>;
color?: ThemeColor;
+ noBackground?: boolean;
}
export default function Card({
color,
+ noBackground,
className,
children,
containerRef,
@@ -19,7 +21,12 @@ export default function Card({
return (
<div
ref={containerRef}
- className={classNames("cru-card", `cru-card-${color ?? "primary"}`, className)}
+ className={classNames(
+ "cru-card",
+ `cru-card-${color ?? "primary"}`,
+ noBackground && "cru-card-no-background",
+ className,
+ )}
{...otherProps}
>
{children}
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index b5a4e2f5..da13c47b 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -57,7 +57,7 @@
border-color: var(--cru-button-active-color);
}
-.cru-button.outline:not(.cru-loading-button):disabled {
+.cru-button.outline:disabled {
color: var(--cru-button-disabled-color);
border-color: var(--cru-button-disabled-color);
cursor: auto;
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
index 0a7e4a3a..63e8948b 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -3,12 +3,6 @@
align-items: center;
}
-.cru-loading-button:disabled {
- color: var(--cru-surface-on-color);
- border-color: var(--cru-surface-on-color);
- cursor: not-allowed;
-}
-
.cru-loading-button-spinner {
margin-left: 0.5em;
-} \ No newline at end of file
+}
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index db0b7432..9b0f55bf 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -7,12 +7,12 @@
padding: 0.5em 1.5em;
cursor: pointer;
transition: all 0.5s;
- color: var(--cru-key-color);
+ color: var(--cru-button-normal-color);
}
.cru-menu-item:hover {
- color: var(--cru-key-on-color);
- background-color: var(--cru-key-color);
+ color: white;
+ background-color: var(--cru-button-normal-color);
}
.cru-menu-item-icon {
@@ -21,5 +21,5 @@
.cru-menu-divider {
border-width: 0;
- border-top: 1px solid var(--cru-key-color);
+ border-top: 1px solid var(--cru-button-normal-color);
} \ No newline at end of file
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index a9ebfedf..65cd55b4 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -21,6 +21,7 @@ export type MenuItem =
export type MenuItems = MenuItem[];
export type MenuProps = {
+ color?: ThemeColor;
items: MenuItems;
onItemClicked?: () => void;
className?: string;
@@ -28,6 +29,7 @@ export type MenuProps = {
};
export default function Menu({
+ color,
items,
onItemClicked,
className,
@@ -37,7 +39,7 @@ export default function Menu({
return (
<div
- className={classNames("cru-menu cru-primary", className)}
+ className={classNames(`cru-menu cru-button-${color ?? "primary"}`, className)}
style={style}
>
{items.map((item, index) => {
@@ -48,7 +50,7 @@ export default function Menu({
return (
<div
key={index}
- className={`cru-menu-item cru-${color ?? "primary"}`}
+ className={`cru-menu-item cru-button-${color ?? "primary"}`}
onClick={() => {
onClick();
onItemClicked?.();
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
index 38171ffd..b8dfe265 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -1,6 +1,6 @@
.cru-popup-menu-menu-container {
z-index: 1040;
border-radius: 5px;
- border: var(--cru-primary-color) 1px solid;
- background-color: var(--cru-surface-color);
+ border: var(--cru-button-normal-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 7ac12755..035f5602 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -7,9 +7,12 @@ import { useClickOutside } from "@/utilities/hooks";
import Menu, { MenuItems } from "./Menu";
+import { ThemeColor } from "../common";
+
import "./PopupMenu.css";
export interface PopupMenuProps {
+ color?: ThemeColor;
items: MenuItems;
children?: ReactNode;
containerClassName?: string;
@@ -17,6 +20,7 @@ export interface PopupMenuProps {
}
export default function PopupMenu({
+ color,
items,
children,
containerClassName,
@@ -48,7 +52,9 @@ export default function PopupMenu({
createPortal(
<div
ref={setPopperElement}
- className="cru-popup-menu-menu-container"
+ className={`cru-popup-menu-menu-container cru-button-${
+ color ?? "primary"
+ }`}
style={styles.popper}
{...attributes.popper}
>
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index c8819b19..f672d7a8 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -6,8 +6,6 @@
--cru-border-radius: 4px;
--cru-card-border-radius: 4px;
-
- --cru-secondary-text-color: var(--cru-surface-on-color);
}
/* theme colors */
@@ -55,7 +53,7 @@
--cru-button-danger-hover-color: hsl(0, 100%, 60%);
--cru-button-danger-focus-color: hsl(0, 100%, 60%);
--cru-button-danger-active-color: hsl(0, 100%, 70%);
- --cru-button-disabled-color: hsl(0, 0, 80%);
+ --cru-button-disabled-color: hsl(0, 0%, 50%);
/* push button colors */
--cru-push-button-text-color: #ffffff;
--cru-push-button-disabled-text-color: hsl(0, 0, 80%);
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 16:01:59 +0000