fixed compose post styles

Author: aadityarajkumawat

client/src/App.js

@@ -1,21 +1,16 @@
+import { Flex } from "@chakra-ui/react";
 import React, { useEffect } from "react";
-// Router
-import { BrowserRouter as Router, Switch } from "react-router-dom";
-
 // Redux
 import { Provider } from "react-redux";
-import store from "./store";
-
+// Router
+import { BrowserRouter as Router, Switch } from "react-router-dom";
+import { loadUser } from "./actions/authAction";
+import Navbar from "./components/navbar/Navbar";
 // Import Routes
 import Routes from "./Routes";
-
+import store from "./store";
 // Import Utilities
 import setAuthToken from "./utils/setAuthToken";
-import { loadUser } from "./actions/authAction";
-import Navbar from "./components/navbar/Navbar";
-import PopupModal from "./components/popup-modal/PopupModal";
-
-import { Flex } from "@chakra-ui/react";
 
 if (localStorage.getItem("token")) {
   setAuthToken(localStorage.getItem("token"));
@@ -29,7 +24,6 @@ function App() {
     <Provider store={store}>
       <Router>
         <Navbar />
-        <PopupModal />
         <Flex justifyContent="space-between" alignItems="flex-start">
           <Switch>
             <Routes />

client/src/components/alerts/Alert.js

@@ -1,8 +1,8 @@
 import {
   Alert as A,
+  AlertDescription,
   AlertIcon,
   AlertTitle,
-  AlertDescription,
 } from "@chakra-ui/react";
 import React from "react";
 import { connect } from "react-redux";

client/src/components/layout components/editor/PostEditor.js

@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from "react";
+import * as S from "@chakra-ui/react";
+import { convertToRaw, Editor, EditorState, RichUtils } from "draft-js";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
+import styled from "styled-components";
 import {
-  uploadPost,
-  uploadImage,
   clearPostID,
+  uploadImage,
+  uploadPost,
 } from "../../../actions/getPostAction";
-import { convertToRaw, Editor, EditorState, RichUtils } from "draft-js";
 import { dispatchPopup } from "../../../actions/popupAction";
-import * as S from "@chakra-ui/react";
-import styled from "styled-components";
 
 const PostEditor = ({
   uploadPost,
@@ -78,17 +78,26 @@ const PostEditor = ({
   };
 
   return (
-    <S.Flex flexDir="column" px="300px" w="100%">
-      <S.Flex>
-        <S.Input
-          type="file"
-          name="file"
-          id="file"
-          className="custom-file-input"
-          onChange={addFile}
-          w="250px"
-        />
-        {upload === "Uploading..." && <div>uploading...</div>}
+    <S.Flex flexDir="column" px="300px" w="100%" py="4rem">
+      <S.Flex alignItems="center">
+        <S.Flex position="relative" mr="0.7rem">
+          <S.Box h="40px" w="40px" bg="darkblue" rounded="md"></S.Box>
+          <S.Input
+            position="absolute"
+            type="file"
+            name="file"
+            id="file"
+            className="custom-file-input"
+            onChange={addFile}
+            w="40px"
+            h="40px"
+            opacity="0"
+          />
+        </S.Flex>
+        <S.Text fontSize="17px">Attatch an image</S.Text>
+      </S.Flex>
+      <S.Flex mt="1rem">
+        {upload === "Uploading..." && <div>{upload}</div>}
       </S.Flex>
       <S.Flex mt="20px" w="100%">
         <S.Input
@@ -100,13 +109,7 @@ const PostEditor = ({
           onChange={handleHeadingChange}
         />
       </S.Flex>
-      <S.Box
-        boxShadow="base"
-        my="30px"
-        mt="15px"
-        rounded="md"
-        border="2px solid #00000020"
-      >
+      <S.Box my="30px" mt="15px" rounded="md" border="2px dashed #a6a6a690">
         <EditorWrapper>
           <Editor
             editorState={editorState}
@@ -126,7 +129,9 @@ const PostEditor = ({
 const EditorWrapper = styled.div`
   .DraftEditor-root {
     .DraftEditor-editorContainer {
+      padding-bottom: 30rem;
       .public-DraftEditor-content div {
+        font-size: 20px;
         margin: 20px;
         div {
           margin: 0;