Design Twitter

MFathinHalim · Aug 7, 2023 · 161cb76 · 161cb76
1 parent 6162def
commit 161cb76
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 60 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/client/public/index.html b/client/public/index.html
@@ -22,7 +22,7 @@
     -->
     <title>Menfess</title>
   </head>
-  <body class="bg-dark text-white">
+  <body class="text-white" style="background: #222222">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import "../styles/navbar.css";
 import { Navbar as BsNavbar, Nav, Form, Button, Image } from "react-bootstrap";
 import { NavLink, useNavigate } from "react-router-dom";
 
@@ -11,38 +10,51 @@ function Navbar({ handleShow }) {
   const handleSubmit = (e) => {
     e.preventDefault();
     let type = window.location.href.split("/")[3];
-    if (type != "memes" && type != "anime") type = "main";
+    if (type !== "memes" && type !== "anime") type = "main";
     navigate(`${type !== "main" ? `/${type}` : ""}/search?q=${query}`);
   };
 
   return (
     <BsNavbar
-      bg="secondary"
-      variant="secondary"
       className="text-light"
+      variant="dark"
+      style={{
+        /* From https://css.glass */
+        background: "rgba(68, 68, 68, 0.47)",
+        borderBottomRightRadius: "15px",
+        borderBottomLeftRadius: "15px",
+
+        boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
+        backdropFilter: "blur(5px)",
+        WebkitBackdropFilter: "blur(5px)",
+      }}
       sticky="top"
       expand="lg">
-      <BsNavbar.Brand as={NavLink} to="/" className="m-2 text-light">
-        <Image className="m-2 text-light"
+      <BsNavbar.Brand as={NavLink} to="/" className="m-1 text-light">
+        <Image
+          className="m-2 text-light"
           src="https://play-lh.googleusercontent.com/ctZv22_YORB0adQB_V4eOo4pgm4Js744yB4wOPhTVbPSOm_Lg0opMsIjC9xTc2EdwQ=w240-h480"
           alt="Navbar Image"
-          style={{ maxWidth: '50px', maxHeight: '50px' }}
+          style={{ maxWidth: "50px", maxHeight: "50px" }}
         />
         Menfess
       </BsNavbar.Brand>
       <BsNavbar.Toggle
         aria-controls="basic-navbar-nav"
         className="m-2 text-light"
       />
-      <BsNavbar.Collapse id="basic-navbar-nav">
+      <BsNavbar.Collapse
+        id="basic-navbar-nav"
+        style={{ borderColor: "purple", color: "red" }} // Change the color here
+      >
         <Nav className="mr-auto">
-          <Nav.Link className="m-2 text-light" as={NavLink} to="/">
+          <Nav.Link className="m-1 text-light" as={NavLink} to="/">
             Home
           </Nav.Link>
-          <Nav.Link className="m-2 text-light" as={NavLink} to="/memes">
+          <Nav.Link className="m-1 text-light" as={NavLink} to="/memes">
             Memes
           </Nav.Link>
-          <Nav.Link className="m-2 text-light" as={NavLink} to="/anime">
+          <Nav.Link className="m-1 text-light" as={NavLink} to="/anime">
             Anime
           </Nav.Link>
         </Nav>
@@ -53,10 +65,10 @@ function Navbar({ handleShow }) {
             onChange={(e) => setQuery(e.target.value)}
             value={query}
             placeholder="Search"
-            className="mr-sm-2 text-light"
+            className="mr-sm-1 text-light"
           />
         </Form>
-        <Button className="m-2 text-light" onClick={handleShow}>
+        <Button className="m-1 text-light" onClick={handleShow}>
           New Post
         </Button>
       </BsNavbar.Collapse>

diff --git a/client/src/components/Post.js b/client/src/components/Post.js
@@ -2,6 +2,8 @@ import React, { useCallback } from "react";
 import { Link } from "react-router-dom";
 import { Button, Card, Col, Row } from "react-bootstrap";
 import axios from "axios";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHeart, faComment, faShare } from "@fortawesome/free-solid-svg-icons";
 
 function formatLikeCount(count) {
   if (count >= 1000000) {
@@ -12,12 +14,21 @@ function formatLikeCount(count) {
     return count;
   }
 }
-
+const ColoredLine = ({ color }) => (
+  <hr
+    style={{
+      background: "white",
+      color: "white",
+      borderColor: "white",
+      height: "3px",
+      width: "100%",
+    }}
+  />
+);
 function Post({ post, type }) {
   const handleShare = useCallback(() => {
-    const copyText = `${window.location.origin}/${
-      type !== "main" ? `${type}/` : ""
-    }post/${post.noteId}`;
+    const copyText = `${window.location.origin}/${type !== "main" ? `${type}/` : ""
+      }post/${post.noteId}`;
     const shareData = {
       title: "Menfess!!",
       text: `Sebuah Post dari ${post.noteName}`,
@@ -37,50 +48,65 @@ function Post({ post, type }) {
   return (
     <div className="d-flex justify-content-center align-items-center">
       <Card
-        className="mb-3 m-2 text-center bg-secondary text-white p-1" // Set background color to gray and text color to white
+        className="mb-3 text-left text-white p-1 bg-transparent border-0"
         style={{ width: "500px", objectFit: "contain" }}>
         <Card.Body>
-          <Card.Title>{post.noteName}</Card.Title>
-          <Card.Text>{post.noteContent}</Card.Text>
+          <Card.Text style={{ color: "#C44900" }} className="m-1">
+            {post.noteName}
+          </Card.Text>
+          <Card.Img
+            variant="bottom"
+            src={`${process.env.REACT_APP_IMAGEKIT_URLENDPOINT}/image${type !== "main" ? type : ""
+              }-${post.noteId}.jpg`}
+            onError={(e) => e.target.remove()}
+            alt={`Image for post ${post.noteName}`}
+            className="img-fluid gradient-bg m-1"
+            style={{
+              width: "500px",
+              height: "auto",
+              objectFit: "scale-down",
+              borderRadius: "10px",
+            }}
+          />
+
+          <Card.Text className="m-1">{post.noteContent}</Card.Text>
         </Card.Body>
-        <Card.Img
-          variant="bottom"
-          src={`${process.env.REACT_APP_IMAGEKIT_URLENDPOINT}/image${
-            type !== "main" ? type : ""
-          }-${post.noteId}.jpg`}
-          onError={(e) => e.target.remove()}
-          alt={`Image for post ${post.noteName}`}
-          className="img-fluid"
-          style={{
-            maxHeight: "500px",
-            maxWidth: "500px",
-            objectFit: "contain",
-          }}
-        />
+
         <Card.Footer>
           <Row className="justify-content-around align-items-center">
             <Col xs="auto" sm="auto">
               <Button
                 variant="primary"
-                onClick={() => axios.post(`${process.env.REACT_APP_API_BASE_URL}/${type}/like/${post.noteId}`)}>
-                ♥ {`${formatLikeCount(post.like)} `}
+                className="twitter-button bg-transparent border-0 text-white"
+                onClick={() =>
+                  axios.post(
+                    `${process.env.REACT_APP_API_BASE_URL}/${type}/like/${post.noteId}`
+                  )
+                }>
+                <FontAwesomeIcon icon={faHeart} />{" "}
+                {`${formatLikeCount(post.like)} `}
               </Button>
             </Col>
             <Col xs="auto" sm="auto">
               <Button
                 variant="success"
                 as={Link}
-                to={`/${type !== "main" ? `${type}/` : ""}post/${post.noteId}`}>
-                Komen
+                to={`/${type !== "main" ? `${type}/` : ""}post/${post.noteId}`}
+                className="twitter-button bg-transparent border-0 text-white">
+                <FontAwesomeIcon icon={faComment} /> Komen
               </Button>
             </Col>
             <Col xs="auto" sm="auto">
-              <Button variant="info" onClick={handleShare}>
-                Bagi
+              <Button
+                variant="info"
+                onClick={handleShare}
+                className="twitter-button bg-transparent border-0 text-white">
+                <FontAwesomeIcon icon={faShare} /> Bagi
               </Button>
             </Col>
           </Row>
         </Card.Footer>
+        <ColoredLine color="#ccc" />
       </Card>
     </div>
   );

diff --git a/client/src/components/modals/Post.js b/client/src/components/modals/Post.js
@@ -26,17 +26,27 @@ function Post({ show, handleClose }) {
     let type = window.location.href.split("/")[3];
     if (type != "memes" && type != "anime") type = "main";
     navigate(`/${type !== "main" ? type : ""}`);
-    await axios.postForm(`${process.env.REACT_APP_API_BASE_URL}/${type}/post`, formData);
+    await axios.postForm(
+      `${process.env.REACT_APP_API_BASE_URL}/${type}/post`,
+      formData
+    );
     setFormData(initData);
     handleClose();
   };
 
   return (
     <Modal show={show} onHide={handleClose}>
-      <Modal.Header closeButton className="bg-secondary">
+      <Modal.Header style={{ background: "#222222", color: "white" }}>
         <Modal.Title>New Post</Modal.Title>
+        <button
+          type="button"
+          className="close btn btn-white"
+          style={{ color: "white" }}
+          onClick={handleClose}>
+          <span aria-hidden="true">&times;</span>
+        </button>
       </Modal.Header>
-      <Modal.Body className="bg-secondary" >
+      <Modal.Body style={{ background: "#222222" }}>
         <Form>
           <Form.Group controlId="name" className="m-1">
             <Form.Label>Name</Form.Label>
@@ -72,14 +82,18 @@ function Post({ show, handleClose }) {
         </Form>
         <div>
           <h3>Preview Gambar</h3>
-          <img src={previewUrl} alt="Preview" style={{
-            maxHeight: "500px",
-            maxWidth: "500px",
-            objectFit: "contain",
-          }}/>
+          <img
+            src={previewUrl}
+            alt="Preview"
+            style={{
+              maxHeight: "300px",
+              maxWidth: "300px",
+              objectFit: "contain",
+            }}
+          />
         </div>
       </Modal.Body>
-      <Modal.Footer className="bg-secondary">
+      <Modal.Footer style={{ background: "#222222" }}>
         <Button variant="primary" onClick={handleSubmit}>
           Send
         </Button>