improve style

packages/app/src/components/PostCreator/index.jsx

@@ -122,6 +122,8 @@ export default class PostCreator extends React.Component {
                 console.error(error)
                 antd.message.error(error)
 
+                req.onError(error)
+
                 return false
             })
 
@@ -134,7 +136,8 @@ export default class PostCreator extends React.Component {
 
     removeAttachment = (file_uid) => {
         this.setState({
-            postAttachments: this.state.postAttachments.filter((file) => file.uid !== file_uid)
+            postAttachments: this.state.postAttachments.filter((file) => file.uid !== file_uid),
+            fileList: this.state.fileList.filter((file) => file.uid !== file_uid)
         })
     }
 
@@ -187,7 +190,6 @@ export default class PostCreator extends React.Component {
 
                 break
             }
-
             case "done": {
                 // remove pending file
                 this.setState({
@@ -341,7 +343,6 @@ export default class PostCreator extends React.Component {
         const uploading = file.status === "uploading"
 
         const onClickDelete = () => {
-            actions.remove()
             this.removeAttachment(file.uid)
         }
 
@@ -355,11 +356,15 @@ export default class PostCreator extends React.Component {
                     uploading && <Icons.LoadingOutlined style={{ margin: "0 !important" }} />
                 }
                 {
-                    !uploading && <antd.Button
+                    !uploading && <antd.Popconfirm
-                        type="link"
+                        title="Are you sure you want to delete this file?"
-                        icon={<Icons.Trash />}
+                        onConfirm={onClickDelete}
-                        onClick={onClickDelete}
+                    >
-                    />
+                        <antd.Button
+                            type="link"
+                            icon={<Icons.Trash />}
+                        />
+                    </antd.Popconfirm>
                 }
             </div>
         </div>
@@ -442,6 +447,7 @@ export default class PostCreator extends React.Component {
             ref={this.creatorRef}
             onDragEnter={this.handleDrag}
             onDragLeave={this.handleDrag}
+            style={this.props.style}
         >
             <div className="textInput">
                 <div className="avatar">
@@ -489,23 +495,15 @@ export default class PostCreator extends React.Component {
 
             <div className="actions">
                 <antd.Button
-                    type="primary"
+                    type="ghost"
-                    disabled={loading}
                     onClick={this.handleUploadClick}
                     icon={<Icons.Upload />}
                 />
 
                 <antd.Button
-                    type="primary"
+                    type="ghost"
-                    disabled={loading}
                     icon={<Icons.MdPoll />}
                 />
-
-                <antd.Button
-                    type="primary"
-                    disabled={loading}
-                    icon={<Icons.MdPrivacyTip />}
-                />
             </div>
         </div>
     }

packages/app/src/components/PostCreator/index.less

@@ -1,3 +1,5 @@
+@file_preview_borderRadius: 7px;
+
 .postCreator {
     position: relative;
 
@@ -10,32 +12,36 @@
     z-index: 55;
 
     max-width: 600px;
-    border-radius: 7px;
+    border-radius: 12px;
 
     background-color: var(--background-color-accent);
     padding: 15px;
 
-    transition: all 250ms ease-in-out;
+    //transition: all 250ms ease-in-out;
 
     .actions {
         display: inline-flex;
         flex-direction: row;
+
         align-items: center;
         justify-content: flex-start;
 
         width: 100%;
+        padding: 0 10px;
+
+        gap: 10px;
 
         transition: all 150ms ease-in-out;
 
-        color: var(--text-color) !important;
-
         .ant-btn {
-            margin-left: 10px;
+            font-size: 1.2rem;
-            font-size: 1rem;
+
+            color: var(--text-color);
+
+            opacity: 0.7;
 
             svg {
-                margin: 0 !important;
+                margin: 0;
-                color: var(--text-color) !important;
             }
         }
     }
@@ -129,21 +135,19 @@
                 align-items: center;
                 justify-content: flex-start;
 
-                border-radius: 10px;
+                gap: 10px;
+
+                border-radius: @file_preview_borderRadius;
 
                 .ant-upload-list-item-container {
-                    background-color: black;
+                    background-color: rgba(var(--bg_color_5), 1);
 
-                    width: 10vw;
+                    width: fit-content;
-                    height: 10vw;
+                    height: fit-content;
-
-                    margin-left: 10px;
-
-                    border-radius: 7px;
 
+                    border-radius: @file_preview_borderRadius;
                 }
             }
-
         }
 
         .ant-upload-list-item-actions {
@@ -155,6 +159,8 @@
             width: 100%;
 
             font-size: 2rem;
+
+            border-radius: @file_preview_borderRadius;
         }
 
         .hint {
@@ -186,6 +192,9 @@
             width: 10vw;
             height: 10vw;
 
+            max-width: 150px;
+            max-height: 150px;
+
             font-size: 2rem;
 
             transition: all 150ms ease-in-out;
@@ -216,15 +225,21 @@
 
             .preview {
                 position: absolute;
+
                 top: 0;
                 left: 0;
 
+                width: 100%;
+                height: 100%;
+
                 img {
                     width: 100%;
                     height: 100%;
 
                     transition: all 150ms ease-in-out;
-                    border-radius: 10px;
+                    border-radius: @file_preview_borderRadius;
+
+                    object-fit: contain;
                 }
             }
 
@@ -240,11 +255,13 @@
 
                 transition: all 150ms ease-in-out;
 
-                backdrop-filter: blur(0);
-
                 opacity: 0;
+                color: rgba(var(--bg_color_1), 1);
+
+                border-radius: @file_preview_borderRadius;
 
                 svg {
+                    color: rgba(var(--bg_color_1), 1);
                     margin: 0;
                 }
             }

packages/app/src/components/PostCreatorModal/index.jsx

@@ -1,12 +1,12 @@
 import React from "react"
 import classnames from "classnames"
 
-import PostCreator from "../PostCreator"
+import PostCreator from "components/PostCreator"
 
 import "./index.less"
 
 export default (props) => {
-    const [visible, setVisible] = React.useState(true)
+    const [visible, setVisible] = React.useState(false)
 
     let escTimeout = null
 
@@ -40,6 +40,10 @@ export default (props) => {
     }
 
     React.useEffect(() => {
+        setTimeout(() => {
+            setVisible(true)
+        }, 10)
+
         document.addEventListener("keydown", handleEsc, false)
 
         return () => {
@@ -51,12 +55,12 @@ export default (props) => {
         className={classnames(
             "post_creator_modal",
             {
-                ["visible"]: visible,
+                ["active"]: visible
-            },
+            }
         )}
         onClick={handleClickOutside}
     >
-        <PostCreator 
+        <PostCreator
             onPost={close}
         />
     </div>

packages/app/src/components/PostCreatorModal/index.less

@@ -1,3 +1,7 @@
+@import "theme/vars.less";
+
+@modal_background_blur: 10px;
+
 .post_creator_modal {
     position: absolute;
     top: 0;
@@ -12,36 +16,30 @@
     width: 100%;
     height: 100%;
 
-    background-color: rgba(var(--layoutBackgroundColor) 0.7);
-    backdrop-filter: blur(10px);
-
     transition: all 150ms ease-in-out;
 
-    opacity: 0;
+    &.active {
+        background-color: rgba(var(--bg_color_6), 0.5);
 
-    animation: fadeOut 150ms ease-in-out forwards;
+        backdrop-filter: blur(@modal_background_blur);
+        -webkit-backdrop-filter: blur(@modal_background_blur);
 
-    &.visible {
+        .postCreator {
-        animation: fadeIn 150ms ease-in-out forwards;
+            opacity: 1;
+            transform: translateY(0);
+        }
     }
-}
 
-@keyframes fadeIn {
+    .postCreator {
-    0% {
+        transition: all 150ms ease-in-out;
+
         opacity: 0;
+        transform: translateY(100px);
     }
 
-    100% {
+    .postCreator {
-        opacity: 1;
+        box-shadow: @card-shadow;
-    }
+        -webkit-box-shadow: @card-shadow;
-}
+        -moz-box-shadow: @card-shadow;
-
-@keyframes fadeOut {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
     }
 }