...

6 files changed, 101 insertions, 67 deletions

diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 317d602e..d05336d7 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -17,7 +17,7 @@ import {
 import { getTimelinePostUpdate$ } from "@/services/timeline";
 
 import TimelinePostList from "./TimelinePostList";
-import TimelinePostEdit from "./TimelinePostEdit";
+import TimelinePostEdit from "./TimelinePostCreateView";
 import TimelineCard from "./TimelineCard";
 
 import "./Timeline.css";
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
new file mode 100644
index 00000000..d33d4bb7
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -0,0 +1,31 @@
+.timeline-post-create-card {

+  position: sticky !important;

+  top: 106px;

+  z-index: 100;

+  margin-right: 200px;

+}

+

+.timeline-post-create {

+  display: flex;

+}

+

+.timeline-post-create-edit-area {

+  flex-grow: 1;

+}

+

+.timeline-post-create-edit-text {

+  width: 100%;

+  height: 100%;

+}

+

+.timeline-post-create-image {

+  max-width: 100px;

+  max-height: 100px;

+}

+

+.timeline-post-create-right-area {

+  display: flex;

+  flex-direction: column;

+  align-items: center;

+  margin-left: 1em;

+}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
index cd5a2d8d..52b6c3d3 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostEdit.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
@@ -18,10 +18,12 @@ import BlobImage from "@/views/common/BlobImage";
 import LoadingButton from "@/views/common/button/LoadingButton";
 import PopupMenu from "@/views/common/menu/PopupMenu";
 import MarkdownPostEdit from "./MarkdownPostEdit";
-import TimelinePostEditCard from "./TimelinePostContainer";
+import TimelinePostCard from "./TimelinePostCard";
+import TimelinePostContainer from "./TimelinePostContainer";
 import IconButton from "@/views/common/button/IconButton";
 
-import "./TimelinePostEdit.css";
+import "./TimelinePostCreateView.css";
+import classNames from "classnames";
 
 interface TimelinePostEditTextProps {
   text: string;
@@ -87,7 +89,7 @@ function TimelinePostEditImage(props: TimelinePostEditImageProps) {
       {file != null && !error && (
         <BlobImage
           blob={file}
-          className="timeline-post-edit-image"
+          className="timeline-post-create-image"
           onLoad={() => onSelect(file)}
           onError={() => {
             onSelect(null);
@@ -192,45 +194,51 @@ function TimelinePostEdit(props: TimelinePostEditProps) {
   };
 
   return (
-    <TimelinePostEditCard className={className}>
-      {showMarkdown ? (
-        <MarkdownPostEdit
-          className="cru-fill-parent"
-          onClose={() => setShowMarkdown(false)}
-          owner={timeline.owner.username}
-          timeline={timeline.nameV2}
-          onPosted={onPosted}
-          onPostError={onPostError}
-        />
-      ) : (
-        <div className="row">
-          <div className="col px-1 py-1">
-            {(() => {
-              if (kind === "text") {
-                return (
-                  <TimelinePostEditText
-                    className="cru-fill-parent timeline-post-edit"
-                    text={text}
-                    disabled={process}
-                    onChange={(t) => {
-                      setText(t);
-                      window.localStorage.setItem(draftTextLocalStorageKey, t);
-                    }}
-                  />
-                );
-              } else if (kind === "image") {
-                return (
-                  <TimelinePostEditImage
-                    onSelect={setImage}
-                    disabled={process}
-                  />
-                );
-              }
-            })()}
-          </div>
-          <div className="col col-auto align-self-end m-1">
-            <div className="d-block cru-text-center mt-1 mb-2">
+    <TimelinePostContainer
+      className={classNames(className, "timeline-post-create-container")}
+    >
+      <TimelinePostCard className="timeline-post-create-card">
+        {showMarkdown ? (
+          <MarkdownPostEdit
+            className="cru-fill-parent"
+            onClose={() => setShowMarkdown(false)}
+            owner={timeline.owner.username}
+            timeline={timeline.nameV2}
+            onPosted={onPosted}
+            onPostError={onPostError}
+          />
+        ) : (
+          <div className="timeline-post-create">
+            <div className="timeline-post-create-edit-area">
+              {(() => {
+                if (kind === "text") {
+                  return (
+                    <TimelinePostEditText
+                      className="timeline-post-create-edit-text"
+                      text={text}
+                      disabled={process}
+                      onChange={(text) => {
+                        setText(text);
+                        window.localStorage.setItem(
+                          draftTextLocalStorageKey,
+                          text,
+                        );
+                      }}
+                    />
+                  );
+                } else if (kind === "image") {
+                  return (
+                    <TimelinePostEditImage
+                      onSelect={setImage}
+                      disabled={process}
+                    />
+                  );
+                }
+              })()}
+            </div>
+            <div className="timeline-post-create-right-area">
               <PopupMenu
+                containerClassName="timeline-post-create-kind-select"
                 items={(["text", "image", "markdown"] as const).map((kind) => ({
                   type: "button",
                   text: `timeline.post.type.${kind}`,
@@ -244,20 +252,21 @@ function TimelinePostEdit(props: TimelinePostEditProps) {
                   },
                 }))}
               >
-                <IconButton large icon={postKindIconMap[kind]} />
+                <IconButton color="primary" icon={postKindIconMap[kind]} />
               </PopupMenu>
+              <LoadingButton
+                onClick={() => void onSend()}
+                color="primary"
+                disabled={!canSend}
+                loading={process}
+              >
+                {t("timeline.send")}
+              </LoadingButton>
             </div>
-            <LoadingButton
-              onClick={() => void onSend()}
-              disabled={!canSend}
-              loading={process}
-            >
-              {t("timeline.send")}
-            </LoadingButton>
           </div>
-        </div>
-      )}
-    </TimelinePostEditCard>
+        )}
+      </TimelinePostCard>
+    </TimelinePostContainer>
   );
 }
 
diff --git a/FrontEnd/src/pages/timeline/TimelinePostEdit.css b/FrontEnd/src/pages/timeline/TimelinePostEdit.css
deleted file mode 100644
index 9b7629e2..00000000
--- a/FrontEnd/src/pages/timeline/TimelinePostEdit.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.timeline-post-edit {

-  position: sticky !important;

-  top: 106px;

-  z-index: 100;

-}

-

-.timeline-post-edit-image {

-  max-width: 100px;

-  max-height: 100px;

-}

diff --git a/FrontEnd/src/pages/timeline/TimelinePostView.css b/FrontEnd/src/pages/timeline/TimelinePostView.css
index 229b4a7a..c95427e5 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostView.css
@@ -9,6 +9,10 @@
   height: 2em;
 }
 
+.timeline-post-author-nickname {
+  margin: 0 1em;
+}
+
 .timeline-post-edit-button {
   float: right;
 }
@@ -23,5 +27,5 @@
 }
 
 .timeline-post-content {
-  white-space: pre-line;
+  margin-top: 0.5em;
 }
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
index 8d929383..2f73116a 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -4,9 +4,9 @@
 }
 
 .cru-loading-button:disabled {
-  color: var(--cru-key-2-color);
-  border-color: var(--cru-key-2-color);
-  cursor: auto;
+  color: var(--cru-surface-on-color);
+  border-color: var(--cru-surface-on-color);
+  cursor: not-allowed;
 }
 
 .cru-loading-button-spinner {