5 files changed, 25 insertions, 30 deletions
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 12a7670e..8e8ae488 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -247,7 +247,7 @@ export default function SettingPage() {
   ]);
 
   return (
-    <Page noTopPadding>
+    <Page className="cru-primary" noTopPadding>
       {user ? (
         <SettingSection title="settings.subheader.account">
           <RegisterCodeSettingItem />
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCard.tsx b/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
index 83479349..f3743915 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
@@ -5,7 +5,7 @@ import Card from "@/views/common/Card";
 
 import "./TimelinePostCard.css";
 
-export interface TimelinePostEditCardProps {
+interface TimelinePostCardProps {
   className?: string;
   children?: ReactNode;
 }
@@ -13,7 +13,7 @@ export interface TimelinePostEditCardProps {
 export default function TimelinePostCard({
   className,
   children,
-}: TimelinePostEditCardProps) {
+}: TimelinePostCardProps) {
   return (
     <Card className={classNames("timeline-post-card", className)}>
       {children}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostContainer.tsx b/FrontEnd/src/pages/timeline/TimelinePostContainer.tsx
index 4697268b..9dc211b2 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostContainer.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostContainer.tsx
@@ -3,7 +3,7 @@ import classNames from "classnames";
 
 import "./TimelinePostContainer.css";
 
-export interface TimelinePostEditCardProps {
+interface TimelinePostContainerProps {
   className?: string;
   children?: ReactNode;
 }
@@ -11,7 +11,7 @@ export interface TimelinePostEditCardProps {
 export default function TimelinePostContainer({
   className,
   children,
-}: TimelinePostEditCardProps) {
+}: TimelinePostContainerProps) {
   return (
     <div className={classNames("timeline-post-container", className)}>
       {children}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx b/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx
index b0cc763a..cd5a2d8d 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useState, useEffect, ChangeEventHandler } from "react";
 import { useTranslation } from "react-i18next";
 
 import { UiLogicError } from "@/common";
@@ -28,11 +28,10 @@ interface TimelinePostEditTextProps {
   disabled: boolean;
   onChange: (text: string) => void;
   className?: string;
-  style?: React.CSSProperties;
 }
 
-const TimelinePostEditText: React.FC<TimelinePostEditTextProps> = (props) => {
-  const { text, disabled, onChange, className, style } = props;
+function TimelinePostEditText(props: TimelinePostEditTextProps) {
+  const { text, disabled, onChange, className } = props;
 
   return (
     <textarea
@@ -42,25 +41,24 @@ const TimelinePostEditText: React.FC<TimelinePostEditTextProps> = (props) => {
         onChange(event.target.value);
       }}
       className={className}
-      style={style}
     />
   );
-};
+}
 
 interface TimelinePostEditImageProps {
   onSelect: (file: File | null) => void;
   disabled: boolean;
 }
 
-const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
+function TimelinePostEditImage(props: TimelinePostEditImageProps) {
   const { onSelect, disabled } = props;
 
   const { t } = useTranslation();
 
-  const [file, setFile] = React.useState<File | null>(null);
-  const [error, setError] = React.useState<boolean>(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [error, setError] = useState<boolean>(false);
 
-  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  const onInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     setError(false);
     const files = e.target.files;
     if (files == null || files.length === 0) {
@@ -71,7 +69,7 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
       onSelect(null);
     };
@@ -100,7 +98,7 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
       {error ? <div className="text-danger">{t("loadImageError")}</div> : null}
     </>
   );
-};
+}
 
 type PostKind = "text" | "markdown" | "image";
 
@@ -112,27 +110,26 @@ const postKindIconMap: Record<PostKind, string> = {
 
 export interface TimelinePostEditProps {
   className?: string;
-  style?: React.CSSProperties;
   timeline: HttpTimelineInfo;
   onPosted: (newPost: HttpTimelinePostInfo) => void;
 }
 
-const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
+function TimelinePostEdit(props: TimelinePostEditProps) {
   const { timeline, className, onPosted } = props;
 
   const { t } = useTranslation();
 
-  const [process, setProcess] = React.useState<boolean>(false);
+  const [process, setProcess] = useState<boolean>(false);
 
-  const [kind, setKind] = React.useState<Exclude<PostKind, "markdown">>("text");
-  const [showMarkdown, setShowMarkdown] = React.useState<boolean>(false);
+  const [kind, setKind] = useState<Exclude<PostKind, "markdown">>("text");
+  const [showMarkdown, setShowMarkdown] = useState<boolean>(false);
 
-  const [text, setText] = React.useState<string>("");
-  const [image, setImage] = React.useState<File | null>(null);
+  const [text, setText] = useState<string>("");
+  const [image, setImage] = useState<File | null>(null);
 
   const draftTextLocalStorageKey = `timeline.${timeline.owner.username}.${timeline.nameV2}.postDraft.text`;
 
-  React.useEffect(() => {
+  useEffect(() => {
     setText(window.localStorage.getItem(draftTextLocalStorageKey) ?? "");
   }, [draftTextLocalStorageKey]);
 
@@ -262,6 +259,6 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
       )}
     </TimelinePostEditCard>
   );
-};
+}
 
 export default TimelinePostEdit;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.tsx b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
index 2648fa21..07f2e0f0 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.tsx
@@ -18,14 +18,14 @@ import TimelinePostCard from "./TimelinePostCard";
 
 import "./TimelinePostView.css";
 
-export interface TimelinePostViewProps {
+interface TimelinePostViewProps {
   post: HttpTimelinePostInfo;
   className?: string;
   onChanged: (post: HttpTimelinePostInfo) => void;
   onDeleted: () => void;
 }
 
-export function TimelinePostView(props: TimelinePostViewProps) {
+export default function TimelinePostView(props: TimelinePostViewProps) {
   const { post, onDeleted } = props;
 
   const [operationMaskVisible, setOperationMaskVisible] =
@@ -113,5 +113,3 @@ export function TimelinePostView(props: TimelinePostViewProps) {
     </TimelinePostContainer>
   );
 }
-
-export default TimelinePostView;