diff options
Diffstat (limited to 'FrontEnd/src')
| -rw-r--r-- | FrontEnd/src/components/dialog/ConfirmDialog.tsx | 25 | ||||
| -rw-r--r-- | FrontEnd/src/components/dialog/DialogContainer.css | 3 | ||||
| -rw-r--r-- | FrontEnd/src/pages/timeline/Timeline.css | 19 | ||||
| -rw-r--r-- | FrontEnd/src/pages/timeline/TimelineDateLabel.css | 6 | ||||
| -rw-r--r-- | FrontEnd/src/pages/timeline/TimelinePostList.tsx | 1 |
5 files changed, 24 insertions, 30 deletions
diff --git a/FrontEnd/src/components/dialog/ConfirmDialog.tsx b/FrontEnd/src/components/dialog/ConfirmDialog.tsx index 97cad452..8b0a4219 100644 --- a/FrontEnd/src/components/dialog/ConfirmDialog.tsx +++ b/FrontEnd/src/components/dialog/ConfirmDialog.tsx @@ -25,27 +25,24 @@ export default function ConfirmDialog({ <DialogContainer title={title} titleColor={color ?? "danger"} - buttons={[ + buttonsV2={[ { key: "cancel", type: "normal", - props: { - text: "operationDialog.cancel", - color: "secondary", - outline: true, - onClick: closeDialog, - }, + action: "minor", + + text: "operationDialog.cancel", + onClick: closeDialog, }, { key: "confirm", type: "normal", - props: { - text: "operationDialog.confirm", - color: "danger", - onClick: () => { - onConfirm(); - closeDialog(); - }, + action: "major", + text: "operationDialog.confirm", + color: "danger", + onClick: () => { + onConfirm(); + closeDialog(); }, }, ]} diff --git a/FrontEnd/src/components/dialog/DialogContainer.css b/FrontEnd/src/components/dialog/DialogContainer.css index b3c52511..f0d27a66 100644 --- a/FrontEnd/src/components/dialog/DialogContainer.css +++ b/FrontEnd/src/components/dialog/DialogContainer.css @@ -7,6 +7,7 @@ .cru-dialog-container-hr { margin: 1em 0; + border-color: var(--cru-text-minor-color); } .cru-dialog-container-button-row { @@ -16,4 +17,4 @@ .cru-dialog-container-button { margin-left: 1em; -}
\ No newline at end of file +} diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css index 5bf0a7bb..01a6acd6 100644 --- a/FrontEnd/src/pages/timeline/Timeline.css +++ b/FrontEnd/src/pages/timeline/Timeline.css @@ -1,17 +1,19 @@ .timeline-container { + --timeline-background-color: hsl(0, 0%, 95%); --timeline-shadow-color: hsla(0, 0%, 0%, 0.5); --timeline-card-shadow: 2px 1px 10px -2px var(--timeline-shadow-color); - --timeline-post-line-color: hsl(56, 82%, 55%); - --timeline-post-line-shadow: 2px 1px 10px -1px var(--timeline-shadow-color); --timeline-post-card-background-color: hsl(0, 0%, 100%); - --timeline-post-card-shadow: 4px 2px 10px -2px var(--timeline-shadow-color); + --timeline-post-card-shadow: 0px 0px 11px -2px var(--timeline-shadow-color); --timeline-post-card-border-radius: 10px; --timeline-post-text-color: hsl(0, 0%, 0%); + --timeline-datetime-label-background-color: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { - .timeline { - --timeline-post-card-background-color: hsl(0, 0%, 12%); + .timeline-container { + --timeline-background-color: hsl(0, 0%, 0%); + --timeline-post-card-background-color: hsl(0, 0%, 15%); + --timeline-post-card-shadow: none; } } @@ -20,11 +22,7 @@ position: relative; width: 100%; padding-top: 10px; -} - -.timeline-content-image { - max-width: 80%; - max-height: 200px; + background: var(--timeline-background-color); } .timeline-post-item-options-mask { @@ -58,4 +56,3 @@ vertical-align: middle; margin-right: 0.6em; } - diff --git a/FrontEnd/src/pages/timeline/TimelineDateLabel.css b/FrontEnd/src/pages/timeline/TimelineDateLabel.css index 1c66045b..47a4cb44 100644 --- a/FrontEnd/src/pages/timeline/TimelineDateLabel.css +++ b/FrontEnd/src/pages/timeline/TimelineDateLabel.css @@ -1,9 +1,9 @@ .timeline-post-date-badge { display: inline-block; - padding: 0.1em 0.4em; + padding: 0.2em 0.5em; border-radius: 0.4em; - background: #7c7c7c; + background: var(--timeline-datetime-label-background-color); color: white; font-size: 0.8em; margin-left: 5em; -}
\ No newline at end of file +} diff --git a/FrontEnd/src/pages/timeline/TimelinePostList.tsx b/FrontEnd/src/pages/timeline/TimelinePostList.tsx index 7912260a..66262ccd 100644 --- a/FrontEnd/src/pages/timeline/TimelinePostList.tsx +++ b/FrontEnd/src/pages/timeline/TimelinePostList.tsx @@ -53,7 +53,6 @@ export default function TimelinePostList(props: TimelinePostListViewProps) { return ( <div> - <div className="timeline-post-timeline" /> {groupedPosts.map((group) => { return ( <Fragment key={group.date.toDateString()}> |