4 files changed, 82 insertions, 46 deletions
diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx
index 840c0415..a6a60b3d 100644
--- a/FrontEnd/src/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/views/center/TimelineBoard.tsx
@@ -9,6 +9,7 @@ import { HttpTimelineInfo } from "@/http/timeline";
 import TimelineLogo from "../common/TimelineLogo";
 import UserTimelineLogo from "../common/UserTimelineLogo";
 import LoadFailReload from "../common/LoadFailReload";
+import FlatButton from "../common/button/FlatButton";
 
 interface TimelineBoardItemProps {
   timeline: HttpTimelineInfo;
@@ -231,23 +232,19 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
         {title != null && <h3>{title}</h3>}
         {editable &&
           (editing ? (
-            <div
-              className="flat-button text-primary"
+            <FlatButton
+              text="done"
               onClick={() => {
                 setEditing(false);
               }}
-            >
-              {t("done")}
-            </div>
+            />
           ) : (
-            <div
-              className="flat-button text-primary"
+            <FlatButton
+              text="edit"
               onClick={() => {
                 setEditing(true);
               }}
-            >
-              {t("edit")}
-            </div>
+            />
           ))}
       </div>
       {(() => {
diff --git a/FrontEnd/src/views/center/center.sass b/FrontEnd/src/views/center/center.sass
deleted file mode 100644
index c0dfb9c0..00000000
--- a/FrontEnd/src/views/center/center.sass
+++ /dev/null
@@ -1,36 +0,0 @@
-.timeline-board
-  @extend .cru-card
-  @extend .d-flex
-  @extend .flex-column
-  @extend .py-3
-  min-height: 200px
-  height: 100%
-  position: relative
-
-.timeline-board-header
-  @extend .px-3
-  display: flex
-  align-items: center
-  justify-content: space-between
-
-.timeline-board-item
-  font-size: 1.1em
-  @extend .px-3
-  height: 48px
-  transition: background 0.3s
-  display: flex
-  align-items: center
-  .icon
-    height: 1.3em
-    color: black
-    @extend .me-2
-  &:hover
-    background: $gray-300
-  .right
-    display: flex
-    align-items: center
-    flex-shrink: 0
-  .title
-    white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
diff --git a/FrontEnd/src/views/center/index.css b/FrontEnd/src/views/center/index.css
new file mode 100644
index 00000000..516aba52
--- /dev/null
+++ b/FrontEnd/src/views/center/index.css
@@ -0,0 +1,73 @@
+.timeline-board {
+  min-height: 200px;
+  height: 100%;
+  position: relative;
+}
+
+.timeline-board-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.timeline-board-item {
+  font-size: 1.1em;
+  height: 48px;
+  transition: background 0.3s;
+  display: flex;
+  align-items: center;
+}
+.timeline-board-item .icon {
+  height: 1.3em;
+  color: black;
+}
+.timeline-board-item:hover {
+  background: #dee2e6;
+}
+.timeline-board-item .right {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.timeline-board-item .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.home-timeline-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.home-timeline-list-item-timeline {
+  transition: background 0.8s;
+  animation: 0.8s home-timeline-list-item-timeline-enter;
+}
+.home-timeline-list-item-timeline:hover {
+  background: #e9ecef;
+}
+
+@keyframes home-timeline-list-item-timeline-enter {
+  from {
+    transform: translate(-100%, 0);
+    opacity: 0;
+  }
+}
+.home-timeline-list-item-line {
+  width: 80px;
+  flex-shrink: 0;
+}
+
+@keyframes home-timeline-list-loading-head-animation {
+  from {
+    transform: translate(0, -30px);
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.home-timeline-list-loading-head {
+  animation: 1s infinite home-timeline-list-loading-head-animation;
+}
diff --git a/FrontEnd/src/views/center/index.tsx b/FrontEnd/src/views/center/index.tsx
index 0a2abb2c..28d8b372 100644
--- a/FrontEnd/src/views/center/index.tsx
+++ b/FrontEnd/src/views/center/index.tsx
@@ -9,6 +9,8 @@ import SearchInput from "../common/SearchInput";
 import CenterBoards from "./CenterBoards";
 import TimelineCreateDialog from "./TimelineCreateDialog";
 
+import "./index.css";
+
 const HomePage: React.FC = () => {
   const history = useHistory();