Merge pull request #138 from BacPacNet/feat-mobile-view-UI

fix: text-formatting

package.json

@@ -48,6 +48,8 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.11",
     "dotenv": "^16.3.1",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "emoji-picker-react": "^4.9.3",
     "esbuild": "^0.20.2",
     "framer-motion": "^11.0.25",
@@ -65,6 +67,7 @@
     "react": "18.2.0",
     "react-date-range": "^2.0.1",
     "react-dom": "^18.2.0",
+    "react-draft-wysiwyg": "^1.15.0",
     "react-hook-form": "^7.51.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
@@ -98,8 +101,11 @@
     "@types/aos": "^3.0.7",
     "@types/cookie": "^0.6.0",
     "@types/crypto-js": "^4.2.2",
+    "@types/draft-js": "^0.11.18",
+    "@types/draftjs-to-html": "^0.8.4",
     "@types/jest": "^29.5.11",
     "@types/react-date-range": "^1.4.9",
+    "@types/react-draft-wysiwyg": "^1.13.8",
     "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",

src/app/(withLayout)/timeline/page.tsx

@@ -1,16 +1,16 @@
 'use client'
-import PostContainer from '@/components/organisms/PostsContainer'
 import TimelinePostContainer from '@/components/organisms/TimelinePostContainer'
-import UserPostContainer from '@/components/organisms/UserPostContainer'
-import { PostInputType, PostType } from '@/types/constants'
+import UserPostForm from '@/components/organisms/userPostForm'
+import { PostInputType } from '@/types/constants'
 import React, { useRef } from 'react'
 
 export default function Timeline() {
   const containerRef = useRef<HTMLDivElement>(null)
 
   return (
     <div ref={containerRef} className="h-with-navbar hideScrollbar">
-      <UserPostContainer type={PostInputType.Timeline} />
+      <UserPostForm type={PostInputType.Timeline} />
+      {/*<UserPostContainer type={PostInputType.Timeline} />*/}
       <TimelinePostContainer containerRef={containerRef} />
     </div>
   )

src/app/login/page.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 const Login = () => {
   return (
-    <div className="flex justify-center items-center h-with-navbar bg-neutral-50">
+    <div className="flex justify-center items-start md:items-center h-with-navbar bg-neutral-50">
       <LoginBox />
     </div>
   )