From f5dfd52f6efece2f4cad227044ecf4dd66301bbc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Aug 2023 21:36:58 +0800
Subject: ...

---
 FrontEnd/src/components/index.css | 100 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 FrontEnd/src/components/index.css

(limited to 'FrontEnd/src/components/index.css')

diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
new file mode 100644
index 00000000..a8f5e9a5
--- /dev/null
+++ b/FrontEnd/src/components/index.css
@@ -0,0 +1,100 @@
+@import "./theme.css";
+
+* {
+  box-sizing: border-box;
+  margin-inline: 0;
+  margin-block: 0;
+}
+
+body {
+  font-family: var(--cru-default-font-family);
+  background: var(--cru-body-background-color);
+  color: var(--cru-text-primary-color);
+  line-height: 1.2;
+}
+
+.cru-page {
+  padding: var(--cru-page-padding);
+}
+
+.cru-page-no-top-padding {
+  padding-top: 0;
+}
+
+.cru-text-center {
+  text-align: center;
+}
+
+.cru-text-end {
+  text-align: end;
+}
+
+.cru-float-left {
+  float: left;
+}
+
+.cru-float-right {
+  float: right;
+}
+
+.cru-align-text-bottom {
+  vertical-align: text-bottom;
+}
+
+.cru-align-middle {
+  vertical-align: middle;
+}
+
+.cru-clearfix::after {
+  clear: both;
+}
+
+.cru-fill-parent {
+  width: 100%;
+  height: 100%;
+}
+
+.cru-avatar {
+  width: 60px;
+  height: 60px;
+}
+
+.cru-avatar.large {
+  width: 100px;
+  height: 100px;
+}
+
+.cru-avatar.small {
+  width: 40px;
+  height: 40px;
+}
+
+.cru-round {
+  border-radius: 50%;
+}
+
+.cru-tab-pages-action-area {
+  display: flex;
+  align-items: center;
+}
+
+.alert-container {
+  position: fixed;
+  z-index: 1070;
+}
+
+@media (min-width: 576px) {
+  .alert-container {
+    bottom: 0;
+    right: 0;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .alert-container {
+    bottom: 0;
+    right: 0;
+    left: 0;
+    text-align: center;
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 9c69024cf5961c3c71fb58e4237f09a513d195b1 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Aug 2023 00:30:35 +0800
Subject: Minor buttons

---
 FrontEnd/src/components/button/Button.tsx          |  4 +--
 FrontEnd/src/components/button/ButtonRowV2.tsx     | 14 ++++----
 FrontEnd/src/components/button/FlatButton.tsx      |  4 +--
 FrontEnd/src/components/button/IconButton.tsx      |  4 +--
 FrontEnd/src/components/button/LoadingButton.tsx   |  4 +--
 FrontEnd/src/components/common.ts                  |  2 ++
 FrontEnd/src/components/dialog/FullPageDialog.tsx  |  4 +--
 FrontEnd/src/components/dialog/OperationDialog.tsx | 39 +++++++++-------------
 FrontEnd/src/components/index.css                  |  2 +-
 FrontEnd/src/components/theme.css                  | 23 ++++++++++---
 FrontEnd/src/pages/setting/index.css               |  4 +--
 FrontEnd/src/pages/timeline/TimelineCard.css       |  4 +--
 .../src/pages/timeline/TimelinePostCreateView.css  |  4 +--
 13 files changed, 62 insertions(+), 50 deletions(-)

(limited to 'FrontEnd/src/components/index.css')

diff --git a/FrontEnd/src/components/button/Button.tsx b/FrontEnd/src/components/button/Button.tsx
index 6c38e130..30ea8c11 100644
--- a/FrontEnd/src/components/button/Button.tsx
+++ b/FrontEnd/src/components/button/Button.tsx
@@ -1,12 +1,12 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { Text, useC, ThemeColor } from "../common";
+import { Text, useC, ClickableColor } from "../common";
 
 import "./Button.css";
 
 interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
-  color?: ThemeColor;
+  color?: ClickableColor;
   text?: Text;
   outline?: boolean;
   buttonRef?: Ref<HTMLButtonElement> | null;
diff --git a/FrontEnd/src/components/button/ButtonRowV2.tsx b/FrontEnd/src/components/button/ButtonRowV2.tsx
index 5129e7f1..a54425cc 100644
--- a/FrontEnd/src/components/button/ButtonRowV2.tsx
+++ b/FrontEnd/src/components/button/ButtonRowV2.tsx
@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { Text, ThemeColor } from "../common";
+import { Text, ClickableColor } from "../common";
 
 import Button from "./Button";
 import FlatButton from "./FlatButton";
@@ -10,10 +10,12 @@ import LoadingButton from "./LoadingButton";
 
 import "./ButtonRow.css";
 
+type ButtonAction = "major" | "minor";
+
 interface ButtonRowV2ButtonBase {
   key: string | number;
-  action?: "primary" | "secondary";
-  color?: ThemeColor;
+  action?: ButtonAction;
+  color?: ClickableColor;
   disabled?: boolean;
   onClick?: () => void;
 }
@@ -76,9 +78,9 @@ export default function ButtonRowV2({
       {buttons.map((button) => {
         const { key, action, color, disabled, onClick } = button;
 
-        const realAction = action ?? "primary";
+        const realAction: ButtonAction = action ?? "minor";
         const realColor =
-          color ?? (realAction === "primary" ? "primary" : "secondary");
+          color ?? (realAction === "major" ? "primary" : "minor");
 
         const commonProps = { key, color: realColor, disabled, onClick };
         const newClassName = classNames(
@@ -95,7 +97,7 @@ export default function ButtonRowV2({
               <Button
                 {...commonProps}
                 text={text}
-                outline={outline ?? realAction !== "primary"}
+                outline={outline ?? realAction !== "major"}
                 {...props}
                 className={newClassName}
               />
diff --git a/FrontEnd/src/components/button/FlatButton.tsx b/FrontEnd/src/components/button/FlatButton.tsx
index 9f074dd6..aad02e76 100644
--- a/FrontEnd/src/components/button/FlatButton.tsx
+++ b/FrontEnd/src/components/button/FlatButton.tsx
@@ -1,12 +1,12 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { Text, useC, ThemeColor } from "../common";
+import { Text, useC, ClickableColor } from "../common";
 
 import "./FlatButton.css";
 
 interface FlatButtonProps extends ComponentPropsWithoutRef<"button"> {
-  color?: ThemeColor;
+  color?: ClickableColor;
   text?: Text;
   buttonRef?: Ref<HTMLButtonElement> | null;
 }
diff --git a/FrontEnd/src/components/button/IconButton.tsx b/FrontEnd/src/components/button/IconButton.tsx
index 95c58887..e0862167 100644
--- a/FrontEnd/src/components/button/IconButton.tsx
+++ b/FrontEnd/src/components/button/IconButton.tsx
@@ -1,13 +1,13 @@
 import { ComponentPropsWithoutRef } from "react";
 import classNames from "classnames";
 
-import { ThemeColor } from "../common";
+import { ClickableColor } from "../common";
 
 import "./IconButton.css";
 
 interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
-  color?: ThemeColor | "grayscale";
+  color?: ClickableColor;
   large?: boolean;
   disabled?: boolean; // TODO: Not implemented
 }
diff --git a/FrontEnd/src/components/button/LoadingButton.tsx b/FrontEnd/src/components/button/LoadingButton.tsx
index d9d41ddb..9d65a2b3 100644
--- a/FrontEnd/src/components/button/LoadingButton.tsx
+++ b/FrontEnd/src/components/button/LoadingButton.tsx
@@ -1,12 +1,12 @@
 import classNames from "classnames";
 
-import { I18nText, ThemeColor, useC } from "../common";
+import { I18nText, ClickableColor, useC } from "../common";
 import Spinner from "../Spinner";
 
 import "./LoadingButton.css";
 
 interface LoadingButtonProps extends React.ComponentPropsWithoutRef<"button"> {
-  color?: ThemeColor;
+  color?: ClickableColor;
   text?: I18nText;
   loading?: boolean;
 }
diff --git a/FrontEnd/src/components/common.ts b/FrontEnd/src/components/common.ts
index 835a8b4a..48473269 100644
--- a/FrontEnd/src/components/common.ts
+++ b/FrontEnd/src/components/common.ts
@@ -12,6 +12,8 @@ export const themeColors = [
 
 export type ThemeColor = (typeof themeColors)[number];
 
+export type ClickableColor = ThemeColor | "grayscale" | "minor";
+
 export { breakpoints } from "./breakpoints";
 
 export * as geometry from "~src/utilities/geometry";
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index 6368fc0a..cba57e21 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -38,7 +38,7 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
         <div
           className={classnames(
             "cru-full-page-content-container",
-            contentContainerClassName
+            contentContainerClassName,
           )}
         >
           {children}
@@ -46,7 +46,7 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
       </div>
     </CSSTransition>,
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    document.getElementById("portal")!
+    document.getElementById("portal")!,
   );
 };
 
diff --git a/FrontEnd/src/components/dialog/OperationDialog.tsx b/FrontEnd/src/components/dialog/OperationDialog.tsx
index 4b4ceb36..6ca4d0a0 100644
--- a/FrontEnd/src/components/dialog/OperationDialog.tsx
+++ b/FrontEnd/src/components/dialog/OperationDialog.tsx
@@ -8,7 +8,7 @@ import {
   Initializer as InputInitializer,
   InputConfirmValueDict,
 } from "../input";
-import { ButtonRow } from "../button";
+import { ButtonRowV2 } from "../button";
 import Dialog from "./Dialog";
 import DialogContainer from "./DialogContainer";
 import { useDialogController } from "./DialogProvider";
@@ -140,7 +140,7 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
   }
 
   let body: ReactNode;
-  let buttons: ComponentProps<typeof ButtonRow>["buttons"];
+  let buttons: ComponentProps<typeof ButtonRowV2>["buttons"];
 
   if (step.type === "input" || step.type === "process") {
     const isProcessing = step.type === "process";
@@ -161,25 +161,19 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
     buttons = [
       {
         key: "cancel",
-        type: "normal",
-        props: {
-          text: "operationDialog.cancel",
-          color: "secondary",
-          outline: true,
-          onClick: close,
-          disabled: isProcessing,
-        },
+        text: "operationDialog.cancel",
+        onClick: close,
+        disabled: isProcessing,
       },
       {
         key: "confirm",
         type: "loading",
-        props: {
-          text: "operationDialog.confirm",
-          color,
-          loading: isProcessing,
-          disabled: hasErrorAndDirty,
-          onClick: onConfirm,
-        },
+        action: "major",
+        text: "operationDialog.confirm",
+        color,
+        loading: isProcessing,
+        disabled: hasErrorAndDirty,
+        onClick: onConfirm,
       },
     ];
   } else {
@@ -207,18 +201,17 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
       {
         key: "ok",
         type: "normal",
-        props: {
-          text: "operationDialog.ok",
-          color: "primary",
-          onClick: close,
-        },
+        action: "major",
+        color: "create",
+        text: "operationDialog.ok",
+        onClick: close,
       },
     ];
   }
 
   return (
     <Dialog color={color}>
-      <DialogContainer title={title} titleColor={color} buttons={buttons}>
+      <DialogContainer title={title} titleColor={color} buttonsV2={buttons}>
         {body}
       </DialogContainer>
     </Dialog>
diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
index a8f5e9a5..eb1f5b46 100644
--- a/FrontEnd/src/components/index.css
+++ b/FrontEnd/src/components/index.css
@@ -9,7 +9,7 @@
 body {
   font-family: var(--cru-default-font-family);
   background: var(--cru-body-background-color);
-  color: var(--cru-text-primary-color);
+  color: var(--cru-text-major-color);
   line-height: 1.2;
 }
 
diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index 67340b6f..bd7805cf 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -34,16 +34,16 @@
 :root {
   --cru-background-color: hsl(0 0% 100%);
   --cru-container-background-color: hsl(0 0% 97%);
-  --cru-text-primary-color: hsl(0 0% 0%);
-  --cru-text-secondary-color: hsl(0 0% 38%);
+  --cru-text-major-color: hsl(0 0% 0%);
+  --cru-text-minor-color: hsl(0 0% 38%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --cru-background-color: hsl(0 0% 0%);
     --cru-container-background-color: hsl(0 0% 2%);
-    --cru-text-primary-color: hsl(0 0% 100%);
-    --cru-text-secondary-color: hsl(0 0% 85%);
+    --cru-text-major-color: hsl(0 0% 100%);
+    --cru-text-minor-color: hsl(0 0% 85%);
   }
 }
 
@@ -87,11 +87,19 @@
   --cru-clickable-grayscale-hover-color: hsl(0 0% 92%);
   --cru-clickable-grayscale-focus-color: hsl(0 0% 92%);
   --cru-clickable-grayscale-active-color: hsl(0 0% 88%);
+  --cru-clickable-minor-normal-color: hsl(0 0% 30%);
+  --cru-clickable-minor-hover-color: hsl(0 0% 40%);
+  --cru-clickable-minor-focus-color: hsl(0 0% 40%);
+  --cru-clickable-minor-active-color: hsl(0 0% 45%);
   --cru-clickable-disabled-color: hsl(0 0% 50%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --cru-clickable-minor-normal-color: hsl(0 0% 74%);
+    --cru-clickable-minor-hover-color: hsl(0 0% 82%);
+    --cru-clickable-minor-focus-color: hsl(0 0% 82%);
+    --cru-clickable-minor-active-color: hsl(0 0% 90%);
     --cru-clickable-grayscale-normal-color: hsl(0 0% 0%);
     --cru-clickable-grayscale-hover-color: hsl(0 0% 10%);
     --cru-clickable-grayscale-focus-color: hsl(0 0% 10%);
@@ -134,6 +142,13 @@
   --cru-clickable-active-color: var(--cru-clickable-grayscale-active-color);
 }
 
+.cru-clickable-minor {
+  --cru-clickable-normal-color: var(--cru-clickable-minor-normal-color);
+  --cru-clickable-hover-color: var(--cru-clickable-minor-hover-color);
+  --cru-clickable-focus-color: var(--cru-clickable-minor-focus-color);
+  --cru-clickable-active-color: var(--cru-clickable-minor-active-color);
+}
+
 /* button colors */
 :root {
   /* push button colors */
diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css
index a8a44524..19e7cff4 100644
--- a/FrontEnd/src/pages/setting/index.css
+++ b/FrontEnd/src/pages/setting/index.css
@@ -38,7 +38,7 @@
 }
 
 .setting-item-label-sub {
-  color: var(--cru-text-secondary-color);
+  color: var(--cru-text-minor-color);
 }
 
 .setting-item-value-area {
@@ -50,7 +50,7 @@
 }
 
 .register-code {
-  background: var(--cru-text-primary-color);
+  background: var(--cru-text-major-color);
   color: var(--cru-background-color);
   border-radius: 3px;
   padding: 0.2em;
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.css b/FrontEnd/src/pages/timeline/TimelineCard.css
index ab1a1fd0..29e59b62 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.css
+++ b/FrontEnd/src/pages/timeline/TimelineCard.css
@@ -17,13 +17,13 @@
 .timeline-card-title {
   display: inline-block;
   vertical-align: middle;
-  color: var(--cru-text-primary-color);
+  color: var(--cru-text-major-color);
   margin: 0.5em 1em;
 }
 
 .timeline-card-title-name {
   margin-inline-start: 1em;
-  color: var(--cru-text-secondary-color);
+  color: var(--cru-text-minor-color);
 }
 
 .timeline-card-user {
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index 5986e566..252340f6 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -17,8 +17,8 @@
   width: 100%;
   height: 100%;
   background-color: var(--cru-background-color);
-  color: var(--cru-text-primary-color);
-  border: 1px solid var(--cru-text-primary-color);
+  color: var(--cru-text-major-color);
+  border: 1px solid var(--cru-text-major-color);
   padding: 0.5em;
   border-radius: 5px;
 }
-- 
cgit v1.2.3


From c1f79460d57a4daba75bdc34b7b7a3ea2d7254b3 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 14 Sep 2023 18:58:44 +0800
Subject: Fix mobile post create.

---
 FrontEnd/src/components/index.css                  |   2 +-
 FrontEnd/src/pages/timeline/Timeline.css           | 145 ---------------------
 FrontEnd/src/pages/timeline/Timeline.tsx           |   4 +-
 FrontEnd/src/pages/timeline/TimelineInfoCard.css   |   2 +-
 .../src/pages/timeline/TimelinePostCreateView.css  |  12 +-
 5 files changed, 15 insertions(+), 150 deletions(-)

(limited to 'FrontEnd/src/components/index.css')

diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
index eb1f5b46..32e762cb 100644
--- a/FrontEnd/src/components/index.css
+++ b/FrontEnd/src/components/index.css
@@ -97,4 +97,4 @@ body {
     left: 0;
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index 5325af98..5bf0a7bb 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -22,146 +22,6 @@
   padding-top: 10px;
 }
 
-@keyframes timeline-line-node {
-  to {
-    box-shadow: 0 0 20px 3px var(--cru-primary-l1-color);
-  }
-}
-
-@keyframes timeline-line-node-current {
-  to {
-    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(--cru-primary-l1-color);
-  }
-}
-
-@keyframes timeline-line-node-loading-edge {
-  from {
-    transform: rotate(0turn);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@keyframes timeline-top-loading-enter {
-  from {
-    transform: translate(0, -100%);
-  }
-}
-
-@keyframes timeline-post-enter {
-  from {
-    transform: translate(0, 100%);
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.timeline-top-loading-enter {
-  animation: 1s timeline-top-loading-enter;
-}
-
-.timeline-line {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 30px;
-  position: absolute;
-  z-index: 1;
-  left: 2em;
-  top: 0;
-  bottom: 0;
-  transition: left 0.5s;
-}
-
-@media (max-width: 575.98px) {
-  .timeline-line {
-    left: 1em;
-  }
-}
-
-.timeline-line .segment {
-  width: 12px;
-  background: var(--cru-primary-color);
-}
-
-.timeline-line .segment.start {
-  height: 1.8em;
-  flex: 0 0 auto;
-}
-
-.timeline-line .segment.end {
-  flex: 1 1 auto;
-}
-
-.timeline-line .segment.current-end {
-  height: 2em;
-  flex: 0 0 auto;
-  background: linear-gradient(var(--cru-primary-enhance-color), white);
-}
-
-.timeline-line .node-container {
-  flex: 0 0 auto;
-  position: relative;
-  width: 18px;
-  height: 18px;
-}
-
-.timeline-line .node {
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  background: var(--cru-primary-color);
-  left: -3px;
-  top: -3px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  z-index: 1;
-  animation: 1s infinite alternate;
-  animation-name: timeline-line-node;
-}
-
-.timeline-line .node-loading-edge {
-  color: var(--cru-primary-color);
-  width: 38px;
-  height: 38px;
-  position: absolute;
-  left: -10px;
-  top: -10px;
-  box-sizing: border-box;
-  z-index: 2;
-  animation: 1.5s linear infinite timeline-line-node-loading-edge;
-}
-
-.timeline-line.current .segment.start {
-  background: linear-gradient(var(--cru-primary-color),
-      var(--cru-primary-enhance-color));
-}
-
-.timeline-line.current .segment.end {
-  background: var(--cru-primary-enhance-color);
-}
-
-.timeline-line.current .node {
-  background: var(--cru-primary-enhance-color);
-  animation-name: timeline-line-node-current;
-}
-
-.timeline-line.loading .node {
-  background: var(--cru-primary-color);
-  animation-name: timeline-line-node-loading;
-}
-
 .timeline-content-image {
   max-width: 80%;
   max-height: 200px;
@@ -199,8 +59,3 @@
   margin-right: 0.6em;
 }
 
-
-.timeline-top {
-  position: sticky;
-  top: 56px;
-}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 4fe5c521..1d8e28d5 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import classnames from "classnames";
+import classNames from "classnames";
 import { HubConnectionState } from "@microsoft/signalr";
 
 import {
@@ -166,7 +166,7 @@ export function Timeline(props: TimelineProps) {
         />
       )}
       {posts && (
-        <div className={classnames("timeline", className)}>
+        <div className={classNames("timeline", className)}>
           {timeline?.postable && (
             <TimelinePostEdit timeline={timeline} onPosted={updatePosts} />
           )}
diff --git a/FrontEnd/src/pages/timeline/TimelineInfoCard.css b/FrontEnd/src/pages/timeline/TimelineInfoCard.css
index 29e59b62..afcb6409 100644
--- a/FrontEnd/src/pages/timeline/TimelineInfoCard.css
+++ b/FrontEnd/src/pages/timeline/TimelineInfoCard.css
@@ -60,4 +60,4 @@
 
 .timeline-card-button {
   margin: 0 0.2em;
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index 252340f6..e483ca17 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -5,6 +5,16 @@
   margin-right: 200px;
 }
 
+@media (max-width: 576px) {
+  .timeline-post-create-container {
+    padding-top: 60px;
+  }
+
+  .timeline-post-create-card{
+    margin-right: 0;
+  }
+}
+
 .timeline-post-create {
   display: flex;
 }
@@ -41,4 +51,4 @@
   flex-direction: column;
   align-items: center;
   margin-left: 1em;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3


From aef14be13c3bd9e93eeea598dbfbf707ba98d448 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 14 Sep 2023 23:47:16 +0800
Subject: ...

---
 FrontEnd/src/components/Page.css                   |  8 +++
 FrontEnd/src/components/Page.tsx                   |  2 +
 FrontEnd/src/components/index.css                  | 66 +++-------------------
 FrontEnd/src/components/menu/Menu.tsx              | 14 ++---
 FrontEnd/src/components/menu/PopupMenu.tsx         |  3 +-
 FrontEnd/src/components/tab/TabBar.css             | 18 ++----
 FrontEnd/src/components/tab/TabPages.css           |  3 +
 FrontEnd/src/components/theme.css                  |  4 +-
 FrontEnd/src/pages/timeline/edit/ImagePostEdit.css |  3 +-
 FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx | 10 ++--
 .../src/pages/timeline/edit/MarkdownPostEdit.css   | 34 ++++-------
 .../src/pages/timeline/edit/MarkdownPostEdit.tsx   |  3 +-
 .../src/pages/timeline/edit/PlainTextPostEdit.css  | 19 ++-----
 .../pages/timeline/edit/TimelinePostCreateView.css |  8 ++-
 .../pages/timeline/edit/TimelinePostCreateView.tsx |  2 +
 15 files changed, 71 insertions(+), 126 deletions(-)
 create mode 100644 FrontEnd/src/components/Page.css

(limited to 'FrontEnd/src/components/index.css')

diff --git a/FrontEnd/src/components/Page.css b/FrontEnd/src/components/Page.css
new file mode 100644
index 00000000..b22d83af
--- /dev/null
+++ b/FrontEnd/src/components/Page.css
@@ -0,0 +1,8 @@
+.cru-page {
+  padding: var(--cru-page-padding);
+}
+
+.cru-page-no-top-padding {
+  padding-top: 0;
+}
+
diff --git a/FrontEnd/src/components/Page.tsx b/FrontEnd/src/components/Page.tsx
index 86fdb2f5..8c9febcc 100644
--- a/FrontEnd/src/components/Page.tsx
+++ b/FrontEnd/src/components/Page.tsx
@@ -1,6 +1,8 @@
 import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
+import "./Page.css";
+
 interface PageProps extends ComponentPropsWithoutRef<"div"> {
   noTopPadding?: boolean;
   pageRef?: Ref<HTMLDivElement>;
diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
index 32e762cb..de156e0e 100644
--- a/FrontEnd/src/components/index.css
+++ b/FrontEnd/src/components/index.css
@@ -13,69 +13,17 @@ body {
   line-height: 1.2;
 }
 
-.cru-page {
-  padding: var(--cru-page-padding);
+textarea {
+  transition: border-color 0.3s;
+  border-color: var(--cru-text-minor-color);
 }
 
-.cru-page-no-top-padding {
-  padding-top: 0;
+textarea:hover {
+  border-color: var(--cru-clickable-primary-hover-color);
 }
 
-.cru-text-center {
-  text-align: center;
-}
-
-.cru-text-end {
-  text-align: end;
-}
-
-.cru-float-left {
-  float: left;
-}
-
-.cru-float-right {
-  float: right;
-}
-
-.cru-align-text-bottom {
-  vertical-align: text-bottom;
-}
-
-.cru-align-middle {
-  vertical-align: middle;
-}
-
-.cru-clearfix::after {
-  clear: both;
-}
-
-.cru-fill-parent {
-  width: 100%;
-  height: 100%;
-}
-
-.cru-avatar {
-  width: 60px;
-  height: 60px;
-}
-
-.cru-avatar.large {
-  width: 100px;
-  height: 100px;
-}
-
-.cru-avatar.small {
-  width: 40px;
-  height: 40px;
-}
-
-.cru-round {
-  border-radius: 50%;
-}
-
-.cru-tab-pages-action-area {
-  display: flex;
-  align-items: center;
+textarea:focus {
+  border-color: var(--cru-clickable-primary-normal-color);
 }
 
 .alert-container {
diff --git a/FrontEnd/src/components/menu/Menu.tsx b/FrontEnd/src/components/menu/Menu.tsx
index c01c6cfb..1a196a69 100644
--- a/FrontEnd/src/components/menu/Menu.tsx
+++ b/FrontEnd/src/components/menu/Menu.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { MouseEvent, CSSProperties } from "react";
 import classNames from "classnames";
 
 import { useC, Text, ThemeColor } from "../common";
@@ -15,21 +15,21 @@ export type MenuItem =
       text: Text;
       icon?: string;
       color?: ThemeColor;
-      onClick: () => void;
+      onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     };
 
 export type MenuItems = MenuItem[];
 
 export type MenuProps = {
   items: MenuItems;
-  onItemClicked?: () => void;
+  onItemClick?: (e: MouseEvent<HTMLButtonElement>) => void;
   className?: string;
   style?: CSSProperties;
 };
 
 export default function Menu({
   items,
-  onItemClicked,
+  onItemClick,
   className,
   style,
 }: MenuProps) {
@@ -46,9 +46,9 @@ export default function Menu({
             <button
               key={index}
               className={`cru-menu-item cru-clickable-${color ?? "primary"}`}
-              onClick={() => {
-                onClick();
-                onItemClicked?.();
+              onClick={(e) => {
+                onClick?.(e);
+                onItemClick?.(e);
               }}
             >
               {icon != null && <Icon color={color} icon={icon} />}
diff --git a/FrontEnd/src/components/menu/PopupMenu.tsx b/FrontEnd/src/components/menu/PopupMenu.tsx
index 9d90799d..7ac2abfe 100644
--- a/FrontEnd/src/components/menu/PopupMenu.tsx
+++ b/FrontEnd/src/components/menu/PopupMenu.tsx
@@ -58,8 +58,9 @@ export default function PopupMenu({
           >
             <Menu
               items={items}
-              onItemClicked={() => {
+              onItemClick={(e) => {
                 setShow(false);
+                e.stopPropagation();
               }}
             />
           </div>,
diff --git a/FrontEnd/src/components/tab/TabBar.css b/FrontEnd/src/components/tab/TabBar.css
index 09d48c59..dc6970c7 100644
--- a/FrontEnd/src/components/tab/TabBar.css
+++ b/FrontEnd/src/components/tab/TabBar.css
@@ -1,30 +1,24 @@
 .cru-tab-bar {
-  border-bottom: var(--cru-clickable-normal-color) 1px solid;
   display: flex;
 }
 
 .cru-tab-bar-tab-area {
   display: flex;
   align-items: center;
-  gap: 0.5em;
-  border: var(--cru-clickable-normal-color) 1px solid;
-  border-bottom: none;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  padding: 0.2em 0.5em;
+  border: var(--cru-clickable-normal-color) 1.6px solid;
+  border-radius: 3px;
+  overflow: hidden;
 }
 
 .cru-tab-bar-item {
-  color: var(--cru-clickable-normal-color);
-  transition: all 0.5s;
-  border-radius: 5px;
+  color: var(--cru-text-minor-color);
+  transition: all 0.2s;
   cursor: pointer;
   padding: 0.3em 1em;
 }
 
 .cru-tab-bar-item:hover {
-  color: var(--cru-push-button-text-color);
-  background-color: var(--cru-clickable-normal-color);
+  color: var(--cru-clickable-normal-color);
 }
 
 .cru-tab-bar-item.active {
diff --git a/FrontEnd/src/components/tab/TabPages.css b/FrontEnd/src/components/tab/TabPages.css
index e69de29b..c07d042e 100644
--- a/FrontEnd/src/components/tab/TabPages.css
+++ b/FrontEnd/src/components/tab/TabPages.css
@@ -0,0 +1,3 @@
+.cru-tab-page-container {
+  padding-top: 0.5em;
+}
diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index 487ab959..4727d6dd 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -1,5 +1,5 @@
 :root {
-  --cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --cru-default-font-family: 'Segoe UI', 'DengXian', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --cru-page-padding: 1em 2em;
 
   --cru-border-radius: 4px;
@@ -197,4 +197,4 @@
 .cru-card-danger {
   --cru-card-background-color: var(--cru-card-background-danger-color);
   --cru-card-border-color: var(--cru-card-border-danger-color)
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css
index df7a6af6..232681c8 100644
--- a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css
+++ b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.css
@@ -1,4 +1,5 @@
-.timeline-edit-image {
+.timeline-edit-image-image {
   max-width: 100px;
   max-height: 100px;
 }
+
diff --git a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx
index 4676e45a..c62c8ee5 100644
--- a/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx
+++ b/FrontEnd/src/pages/timeline/edit/ImagePostEdit.tsx
@@ -2,6 +2,8 @@ import classNames from "classnames";
 
 import BlobImage from "~/src/components/BlobImage";
 
+import "./ImagePostEdit.css";
+
 interface TimelinePostEditImageProps {
   file: File | null;
   onChange: (file: File | null) => void;
@@ -13,9 +15,7 @@ export default function ImagePostEdit(props: TimelinePostEditImageProps) {
   const { file, onChange, disabled, className } = props;
 
   return (
-    <div
-      className={classNames("timeline-edit-image-container", className)}
-    >
+    <div className={classNames("timeline-edit-image-container", className)}>
       <input
         type="file"
         accept="image/*"
@@ -28,9 +28,9 @@ export default function ImagePostEdit(props: TimelinePostEditImageProps) {
             onChange(files[0]);
           }
         }}
-        className="mx-3 my-1"
+        className="timeline-edit-image-input"
       />
-      {file && <BlobImage src={file} className="timeline-edit-image" />}
+      {file && <BlobImage src={file} className="timeline-edit-image-image" />}
     </div>
   );
 }
diff --git a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css
index 33a77943..c5b41b40 100644
--- a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css
+++ b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.css
@@ -1,34 +1,24 @@
-.timeline-markdown-post-edit-page {
-  overflow: auto;
-  max-height: 300px;
+.timeline-edit-markdown-tab-page {
+  min-height: 8em;
+  display: flex;
 }
 
-.timeline-post-create-markdown-edit-area {
-  border: 1px solid var(--cru-clickable-primary-normal-color);
-  border-top: none;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  padding: 0.6em;
+.timeline-edit-markdown-text {
+  width: 100%;
 }
 
-.timeline-post-create-markdown-edit-area:hover {
-  border: 1px solid var(--cru-clickable-primary-normal-color);
-  border-top: none;
+.timeline-edit-markdown-images {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.timeline-markdown-post-edit-image-container {
-  position: relative;
-  text-align: center;
-  margin-bottom: 1em;
+.timeline-edit-markdown-images img {
+  max-width: 100%;
+  max-height: 200px;
 }
 
-.timeline-markdown-post-edit-image {
+.timeline-edit-markdown-preview img {
   max-width: 100%;
   max-height: 200px;
 }
 
-.timeline-markdown-post-edit-image-delete-button {
-  position: absolute;
-  right: 10px;
-  top: 2px;
-}
diff --git a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx
index 0dfaf33e..692221fd 100644
--- a/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/pages/timeline/edit/MarkdownPostEdit.tsx
@@ -27,7 +27,7 @@ class MarkedRenderer extends marked.Renderer {
       }
     }
 
-    return this.image(href, title, text);
+    return super.image(href, title, text);
   }
 }
 
@@ -136,6 +136,7 @@ export function MarkdownPostEdit({
   return (
     <TabPages
       className={className}
+      pageContainerClassName="timeline-edit-markdown-tab-page"
       dense
       pages={[
         {
diff --git a/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css b/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css
index 4a608304..d1a61793 100644
--- a/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css
+++ b/FrontEnd/src/pages/timeline/edit/PlainTextPostEdit.css
@@ -1,19 +1,12 @@
-.timeline-edit-plain-text-input {
+.timeline-edit-plain-text-container {
   width: 100%;
   height: 100%;
-  background-color: var(--cru-background-color);
-  color: var(--cru-text-major-color);
-  border: 1px solid var(--cru-text-major-color);
-  padding: 0.5em;
-  border-radius: 5px;
-  transition: border-color 0.5s;
-}
-
-.timeline-edit-plain-text-input:hover {
-  border-color: var(--cru-clickable-secondary-normal-color);
 }
 
-.timeline-edit-plain-text-input:focus {
-  border-color: var(--cru-clickable-secondary-normal-color);
+.timeline-edit-plain-text-input {
+  width: 100%;
+  height: 100%;
+  padding: 0.5em;
+  border-radius: 4px;
 }
 
diff --git a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css
index 5e93d9f2..6efe93e9 100644
--- a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.css
@@ -10,7 +10,7 @@
     padding-top: 60px;
   }
 
-  .timeline-post-create-card{
+  .timeline-post-create-card {
     margin-right: 0;
   }
 }
@@ -23,11 +23,13 @@
   flex-grow: 1;
 }
 
-
-
 .timeline-post-create-right-area {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-left: 1em;
 }
+
+.timeline-post-create-send {
+  margin-top: auto;
+}
diff --git a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx
index 0de75ccd..c0a80ad0 100644
--- a/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx
+++ b/FrontEnd/src/pages/timeline/edit/TimelinePostCreateView.tsx
@@ -104,6 +104,7 @@ function TimelinePostEdit(props: TimelinePostEditProps) {
           throw new UiLogicError();
         }
         requestDataList = await mdBuild();
+        break;
       default:
         throw new UiLogicError("Unknown content type.");
     }
@@ -174,6 +175,7 @@ function TimelinePostEdit(props: TimelinePostEditProps) {
               <IconButton color="primary" icon={postKindIconMap[kind]} />
             </PopupMenu>
             <LoadingButton
+              className="timeline-post-create-send"
               onClick={() => void onSend()}
               color="primary"
               disabled={!canSend}
-- 
cgit v1.2.3


From bdc69c18c1986544497b6974ffe5d8e073e4be6d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 14 Sep 2023 18:58:44 +0800
Subject: ...

---
 FrontEnd/cspell.json                               |   3 +-
 FrontEnd/src/components/hooks/index.ts             |   1 +
 .../components/hooks/useAutoUnsubscribePromise.tsx |  23 +++
 FrontEnd/src/components/index.css                  |   1 +
 .../src/pages/timeline/TimelineDeleteDialog.tsx    |  11 +-
 .../src/pages/timeline/TimelinePostContentView.tsx | 190 ---------------------
 FrontEnd/src/pages/timeline/TimelinePostView.tsx   |   2 +-
 FrontEnd/src/pages/timeline/view/ImagePostView.css |   0
 FrontEnd/src/pages/timeline/view/ImagePostView.tsx |  38 +++++
 .../src/pages/timeline/view/MarkdownPostView.css   |   4 +
 .../src/pages/timeline/view/MarkdownPostView.tsx   |  60 +++++++
 .../src/pages/timeline/view/PlainTextPostView.css  |   0
 .../src/pages/timeline/view/PlainTextPostView.tsx  |  50 ++++++
 .../timeline/view/TimelinePostContentView.tsx      |  37 ++++
 14 files changed, 221 insertions(+), 199 deletions(-)
 create mode 100644 FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx
 delete mode 100644 FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
 create mode 100644 FrontEnd/src/pages/timeline/view/ImagePostView.css
 create mode 100644 FrontEnd/src/pages/timeline/view/ImagePostView.tsx
 create mode 100644 FrontEnd/src/pages/timeline/view/MarkdownPostView.css
 create mode 100644 FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
 create mode 100644 FrontEnd/src/pages/timeline/view/PlainTextPostView.css
 create mode 100644 FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
 create mode 100644 FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx

(limited to 'FrontEnd/src/components/index.css')

diff --git a/FrontEnd/cspell.json b/FrontEnd/cspell.json
index a2e150c9..1d9c118a 100644
--- a/FrontEnd/cspell.json
+++ b/FrontEnd/cspell.json
@@ -7,6 +7,7 @@
   "words": [
     "languagedetector",
     "popperjs",
-    "signalr"
+    "signalr",
+    "webp"
   ]
 }
diff --git a/FrontEnd/src/components/hooks/index.ts b/FrontEnd/src/components/hooks/index.ts
index 771b0e2a..98ce729e 100644
--- a/FrontEnd/src/components/hooks/index.ts
+++ b/FrontEnd/src/components/hooks/index.ts
@@ -2,3 +2,4 @@ export { useMobile } from "./responsive";
 export { default as useClickOutside } from "./useClickOutside";
 export { default as useScrollToBottom } from "./useScrollToBottom";
 export { default as useWindowLeave } from "./useWindowLeave";
+export { default as useAutoUnsubscribePromise } from "./useAutoUnsubscribePromise";
diff --git a/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx b/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx
new file mode 100644
index 00000000..78e21151
--- /dev/null
+++ b/FrontEnd/src/components/hooks/useAutoUnsubscribePromise.tsx
@@ -0,0 +1,23 @@
+import { useEffect, DependencyList } from "react";
+
+export default function useAutoUnsubscribePromise<T>(
+  promiseGenerator: () => Promise<T> | null | undefined,
+  resultHandler: (data: T) => void,
+  dependencies?: DependencyList | undefined,
+) {
+  useEffect(() => {
+    let subscribe = true;
+    const promise = promiseGenerator();
+    if (promise) {
+      void promise.then((data) => {
+        if (subscribe) {
+          resultHandler(data);
+        }
+      });
+
+      return () => {
+        subscribe = false;
+      };
+    }
+  }, dependencies);
+}
diff --git a/FrontEnd/src/components/index.css b/FrontEnd/src/components/index.css
index de156e0e..83b48318 100644
--- a/FrontEnd/src/components/index.css
+++ b/FrontEnd/src/components/index.css
@@ -16,6 +16,7 @@ body {
 textarea {
   transition: border-color 0.3s;
   border-color: var(--cru-text-minor-color);
+  background: var(--cru-background-color);
 }
 
 textarea:hover {
diff --git a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
index 630ce4ca..d1af364b 100644
--- a/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineDeleteDialog.tsx
@@ -1,20 +1,17 @@
-import * as React from "react";
 import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
 
 import { getHttpTimelineClient, HttpTimelineInfo } from "~src/http/timeline";
 
-import OperationDialog from "~src/components/dialog/OperationDialog";
+import { OperationDialog } from "~src/components/dialog";
 
 interface TimelineDeleteDialog {
   timeline: HttpTimelineInfo;
 }
 
-const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
+export default function TimelineDeleteDialog({ timeline }: TimelineDeleteDialog) {
   const navigate = useNavigate();
 
-  const { timeline } = props;
-
   return (
     <OperationDialog
       title="timeline.deleteDialog.title"
@@ -24,7 +21,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
           i18nKey="timeline.deleteDialog.inputPrompt"
           values={{ name: timeline.nameV2 }}
         >
-          0<code className="mx-2">1</code>2
+          0<code>1</code>2
         </Trans>
       }
       inputs={{
@@ -54,4 +51,4 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
   );
 };
 
-export default TimelineDeleteDialog;
+TimelineDeleteDialog;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx b/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
deleted file mode 100644
index 6c0d7387..00000000
--- a/FrontEnd/src/pages/timeline/TimelinePostContentView.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import * as React from "react";
-import classnames from "classnames";
-import { marked } from "marked";
-
-import { UiLogicError } from "~src/common";
-
-import { HttpNetworkError } from "~src/http/common";
-import { getHttpTimelineClient, HttpTimelinePostInfo } from "~src/http/timeline";
-
-import { useUser } from "~src/services/user";
-
-import Skeleton from "~src/components/Skeleton";
-import LoadFailReload from "~src/components/LoadFailReload";
-
-const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
-  const { post, className, style } = props;
-
-  const [text, setText] = React.useState<string | null>(null);
-  const [error, setError] = React.useState<"offline" | "error" | null>(null);
-
-  const [reloadKey, setReloadKey] = React.useState<number>(0);
-
-  React.useEffect(() => {
-    let subscribe = true;
-
-    setText(null);
-    setError(null);
-
-    void getHttpTimelineClient()
-      .getPostDataAsString(post.timelineOwnerV2, post.timelineNameV2, post.id)
-      .then(
-        (data) => {
-          if (subscribe) setText(data);
-        },
-        (error) => {
-          if (subscribe) {
-            if (error instanceof HttpNetworkError) {
-              setError("offline");
-            } else {
-              setError("error");
-            }
-          }
-        },
-      );
-
-    return () => {
-      subscribe = false;
-    };
-  }, [post.timelineOwnerV2, post.timelineNameV2, post.id, reloadKey]);
-
-  if (error != null) {
-    return (
-      <LoadFailReload
-        className={className}
-        style={style}
-        onReload={() => setReloadKey(reloadKey + 1)}
-      />
-    );
-  } else if (text == null) {
-    return <Skeleton />;
-  } else {
-    return (
-      <div className={className} style={style}>
-        {text}
-      </div>
-    );
-  }
-};
-
-const ImageView: React.FC<TimelinePostContentViewProps> = (props) => {
-  const { post, className, style } = props;
-
-  useUser();
-
-  return (
-    <img
-      src={getHttpTimelineClient().generatePostDataUrl(
-        post.timelineOwnerV2,
-        post.timelineNameV2,
-        post.id,
-      )}
-      className={classnames(className, "timeline-content-image")}
-      style={style}
-    />
-  );
-};
-
-const MarkdownView: React.FC<TimelinePostContentViewProps> = (props) => {
-  const { post, className, style } = props;
-
-  const [markdown, setMarkdown] = React.useState<string | null>(null);
-  const [error, setError] = React.useState<"offline" | "error" | null>(null);
-
-  const [reloadKey, setReloadKey] = React.useState<number>(0);
-
-  React.useEffect(() => {
-    let subscribe = true;
-
-    setMarkdown(null);
-    setError(null);
-
-    void getHttpTimelineClient()
-      .getPostDataAsString(post.timelineOwnerV2, post.timelineNameV2, post.id)
-      .then(
-        (data) => {
-          if (subscribe) setMarkdown(data);
-        },
-        (error) => {
-          if (subscribe) {
-            if (error instanceof HttpNetworkError) {
-              setError("offline");
-            } else {
-              setError("error");
-            }
-          }
-        },
-      );
-
-    return () => {
-      subscribe = false;
-    };
-  }, [post.timelineOwnerV2, post.timelineNameV2, post.id, reloadKey]);
-
-  const markdownHtml = React.useMemo<string | null>(() => {
-    if (markdown == null) return null;
-    return marked.parse(markdown, {
-      mangle: false,
-      headerIds: false,
-    });
-  }, [markdown]);
-
-  if (error != null) {
-    return (
-      <LoadFailReload
-        className={className}
-        style={style}
-        onReload={() => setReloadKey(reloadKey + 1)}
-      />
-    );
-  } else if (markdown == null) {
-    return <Skeleton />;
-  } else {
-    if (markdownHtml == null) {
-      throw new UiLogicError("Markdown is not null but markdown html is.");
-    }
-    return (
-      <div
-        className={classnames(className, "markdown-container")}
-        style={style}
-        dangerouslySetInnerHTML={{
-          __html: markdownHtml,
-        }}
-      />
-    );
-  }
-};
-
-export interface TimelinePostContentViewProps {
-  post: HttpTimelinePostInfo;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const viewMap: Record<string, React.FC<TimelinePostContentViewProps>> = {
-  "text/plain": TextView,
-  "text/markdown": MarkdownView,
-  "image/png": ImageView,
-  "image/jpeg": ImageView,
-  "image/gif": ImageView,
-  "image/webp": ImageView,
-};
-
-const TimelinePostContentView: React.FC<TimelinePostContentViewProps> = (
-  props,
-) => {
-  const { post, className, style } = props;
-
-  const type = post.dataList[0].kind;
-
-  if (type in viewMap) {
-    const View = viewMap[type];
-    return <View post={post} className={className} style={style} />;
-  } else {
-    // TODO: i18n
-    console.error("Unknown post type", post);
-    return <div>Error, unknown post type!</div>;
-  }
-};
-
-export default TimelinePostContentView;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.tsx b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
index b09fe6f8..4f0460ff 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
@@ -11,7 +11,7 @@ import UserAvatar from "~src/components/user/UserAvatar";
 import { DialogProvider, useDialog } from "~src/components/dialog";
 import FlatButton from "~src/components/button/FlatButton";
 import ConfirmDialog from "~src/components/dialog/ConfirmDialog";
-import TimelinePostContentView from "./TimelinePostContentView";
+import TimelinePostContentView from "./view/TimelinePostContentView";
 import IconButton from "~src/components/button/IconButton";
 
 import TimelinePostContainer from "./TimelinePostContainer";
diff --git a/FrontEnd/src/pages/timeline/view/ImagePostView.css b/FrontEnd/src/pages/timeline/view/ImagePostView.css
new file mode 100644
index 00000000..e69de29b
diff --git a/FrontEnd/src/pages/timeline/view/ImagePostView.tsx b/FrontEnd/src/pages/timeline/view/ImagePostView.tsx
new file mode 100644
index 00000000..85179475
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/ImagePostView.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import classNames from "classnames";
+
+import {
+  HttpTimelinePostInfo,
+  getHttpTimelineClient,
+} from "~src/http/timeline";
+
+import "./ImagePostView.css";
+
+interface ImagePostViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+export default function ImagePostView({ post, className }: ImagePostViewProps) {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (post) {
+      setUrl(
+        getHttpTimelineClient().generatePostDataUrl(
+          post.timelineOwnerV2,
+          post.timelineNameV2,
+          post.id,
+        ),
+      );
+    } else {
+      setUrl(null);
+    }
+  }, [post]);
+
+  return (
+    <div className={classNames("timeline-view-image-container", className)}>
+      <img src={url ?? undefined} className="timeline-view-image" />
+    </div>
+  );
+}
diff --git a/FrontEnd/src/pages/timeline/view/MarkdownPostView.css b/FrontEnd/src/pages/timeline/view/MarkdownPostView.css
new file mode 100644
index 00000000..48a893eb
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/MarkdownPostView.css
@@ -0,0 +1,4 @@
+.timeline-view-markdown img {
+  max-width: 100%;
+  max-height: 200px;
+}
diff --git a/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
new file mode 100644
index 00000000..caf6eef0
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
@@ -0,0 +1,60 @@
+import { useMemo, useState } from "react";
+import { marked } from "marked";
+import classNames from "classnames";
+
+import {
+  HttpTimelinePostInfo,
+  getHttpTimelineClient,
+} from "~src/http/timeline";
+
+import { useAutoUnsubscribePromise } from "~src/components/hooks";
+import Skeleton from "~src/components/Skeleton";
+
+import "./MarkdownPostView.css";
+
+interface MarkdownPostViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+export default function MarkdownPostView({
+  post,
+  className,
+}: MarkdownPostViewProps) {
+  const [markdown, setMarkdown] = useState<string | null>(null);
+
+  useAutoUnsubscribePromise(
+    () => {
+      if (post) {
+        return getHttpTimelineClient().getPostDataAsString(
+          post.timelineOwnerV2,
+          post.timelineNameV2,
+          post.id,
+        );
+      }
+    },
+    setMarkdown,
+    [post],
+  );
+
+  const markdownHtml = useMemo<string | null>(() => {
+    if (markdown == null) return null;
+    return marked.parse(markdown, {
+      mangle: false,
+      headerIds: false,
+    });
+  }, [markdown]);
+
+  return (
+    <div className={classNames("timeline-view-markdown-container", className)}>
+      {markdownHtml == null ? (
+        <Skeleton />
+      ) : (
+        <div
+          className="timeline-view-markdown"
+          dangerouslySetInnerHTML={{ __html: markdownHtml }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/FrontEnd/src/pages/timeline/view/PlainTextPostView.css b/FrontEnd/src/pages/timeline/view/PlainTextPostView.css
new file mode 100644
index 00000000..e69de29b
diff --git a/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx b/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
new file mode 100644
index 00000000..b964187d
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import classNames from "classnames";
+
+import {
+  HttpTimelinePostInfo,
+  getHttpTimelineClient,
+} from "~src/http/timeline";
+
+import Skeleton from "~src/components/Skeleton";
+import { useAutoUnsubscribePromise } from "~src/components/hooks";
+
+import "./PlainTextPostView.css";
+
+interface PlainTextPostViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+export default function PlainTextPostView({
+  post,
+  className,
+}: PlainTextPostViewProps) {
+  const [text, setText] = useState<string | null>(null);
+
+  useAutoUnsubscribePromise(
+    () => {
+      if (post) {
+        return getHttpTimelineClient().getPostDataAsString(
+          post.timelineOwnerV2,
+          post.timelineNameV2,
+          post.id,
+        );
+      }
+    },
+    setText,
+    [post],
+  );
+
+  return (
+    <div
+      className={classNames("timeline-view-plain-text-container", className)}
+    >
+      {text == null ? (
+        <Skeleton />
+      ) : (
+        <div className="timeline-view-plain-text">{text}</div>
+      )}
+    </div>
+  );
+}
diff --git a/FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx b/FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx
new file mode 100644
index 00000000..851a9a33
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/view/TimelinePostContentView.tsx
@@ -0,0 +1,37 @@
+import ImagePostView from "./ImagePostView";
+import MarkdownPostView from "./MarkdownPostView";
+import PlainTextPostView from "./PlainTextPostView";
+
+import type { HttpTimelinePostInfo } from "~src/http/timeline";
+
+interface TimelinePostContentViewProps {
+  post?: HttpTimelinePostInfo;
+  className?: string;
+}
+
+const viewMap: Record<string, React.FC<TimelinePostContentViewProps>> = {
+  "text/plain": PlainTextPostView,
+  "text/markdown": MarkdownPostView,
+  "image/png": ImagePostView,
+  "image/jpeg": ImagePostView,
+  "image/gif": ImagePostView,
+  "image/webp": ImagePostView,
+};
+
+export default function TimelinePostContentView({
+  post,
+  className,
+}: TimelinePostContentViewProps) {
+  if (post == null) {
+    return <div />;
+  }
+
+  const type = post.dataList[0].kind;
+
+  if (type in viewMap) {
+    const View = viewMap[type];
+    return <View post={post} className={className} />;
+  }
+
+  return <div>Unknown post type.</div>;
+}
-- 
cgit v1.2.3