...

7 files changed, 34 insertions, 45 deletions

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}