fix naming, styling and delete duplicate styling on css file

src/components/LoginForm.jsx

@@ -29,7 +29,7 @@ export default function LoginForm(props) {
       </h1>
       <div className="App">
         <GoogleLogin
-          clientId={'17380499766-td9qokkgpli952576g7d8l2059a7pgbf.apps.googleusercontent.com'}
+          clientId={CLIENT_ID}
           onSuccess={handleGoogleLogin}
           onFailure={handleGoogleLoginFailed}
         />

src/components/Search.jsx

@@ -42,7 +42,9 @@ export default function Search(props) {
       </h1>
       <ThreadList thread={threads} />
       {totalItems == 0 && (
-        <p>No threads with keyword "{searchParam}" found.</p>
+        <div className="noThreadsMessage">
+          <p>No threads with keyword "{searchParam}" found.</p>
+        </div>
       )}
       {totalItems != 0 && (
         <div className="paginationContainer">

src/components/profile/Profile.jsx

@@ -54,7 +54,7 @@ export default function Profile(props) {
           <b>Profile</b>
         </h1>
       </div>
-      <div className="profile_section">
+      <div className="profileSection">
         <div className="userIcon">
           {user.picture == 'None' ? (
             <i className="far fa-user-circle" />
@@ -69,8 +69,8 @@ export default function Profile(props) {
           <Button text="Edit Profile" color="orange" url="profile/update" />
         )}
       </div>
-      <div className="my_threads_section">
-        <div className="sub_header_my_threads">
+      <div className="myThreadsSection">
+        <div className="subHeaderMyThreads">
           <h3>
             <b>{isUser ? 'Your' : user.username}'s threads</b>
           </h3>

src/components/profile/UpdateProfileForm.jsx

@@ -44,7 +44,7 @@ export default function FormCreateThread(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -62,7 +62,7 @@ export default function FormCreateThread(props) {
         </div>
       )}
       <form onSubmit={handleSubmit}>
-        <div className="form_container">
+        <div className="formContainer">
           <label htmlFor="title">Username</label>
           <input
             type="text"

src/components/thread/CommentList.jsx

@@ -4,7 +4,7 @@ export default function CommentList(props) {
   return (
     <div>
       {props.comment.map((value) => (
-        <div id="threadComment">
+        <div className="threadComment">
           <Post type="comment" content={value} />
         </div>
       ))}

src/components/thread/CreateThread.jsx

@@ -62,7 +62,7 @@ export default function ListThreads(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -72,7 +72,7 @@ export default function ListThreads(props) {
           <b>Create a Thread</b>
         </h1>
       </div>
-      <div className="form_section">
+      <div className="formSection">
         <div>
           {message && (
             <div>
@@ -82,7 +82,7 @@ export default function ListThreads(props) {
             </div>
           )}
           <form onSubmit={handleSubmit}>
-            <div className="form_container">
+            <div className="formContainer">
               <label for="title">Title</label>
               <input
                 type="text"

src/components/thread/EditComment.jsx

@@ -61,7 +61,7 @@ export default function EditComment(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -71,7 +71,7 @@ export default function EditComment(props) {
           <b>Edit a Comment</b>
         </h1>
       </div>
-      <div className="form_section">
+      <div className="formSection">
         <div>
           {message && (
             <div>
@@ -81,7 +81,7 @@ export default function EditComment(props) {
             </div>
           )}
           <form onSubmit={handleSubmit}>
-            <div className="form_container">
+            <div className="formContainer">
               <label for="body">Body</label>
               <textarea
                 className="body"

src/components/thread/EditThread.jsx

@@ -89,7 +89,7 @@ export default function EditThread(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -99,7 +99,7 @@ export default function EditThread(props) {
           <b>Edit a Thread</b>
         </h1>
       </div>
-      <div className="form_section">
+      <div className="formSection">
         <div>
           {message && (
             <div>
@@ -109,7 +109,7 @@ export default function EditThread(props) {
             </div>
           )}
           <form onSubmit={handleSubmit}>
-            <div className="form_container">
+            <div className="formContainer">
               <label for="title">Title</label>
               <input
                 type="text"

src/components/thread/ListThreads.jsx

@@ -16,8 +16,8 @@ export default function ListThreads(props) {
       </div>
 
       {props.isRecent ? (
-        <div className="list_threads_section">
-          <div className="sub_header_list_threads">
+        <div className="listThreadsSection">
+          <div className="subHeaderListThreads">
             <div className="tab">
               <Link to="/page/1" style={{ textDecoration: 'none' }}>
                 <h3 className="active">Recent</h3>
@@ -36,8 +36,8 @@ export default function ListThreads(props) {
           />
         </div>
       ) : (
-        <div className="list_threads_section">
-          <div className="sub_header_list_threads">
+        <div className="listThreadsSection">
+          <div className="subHeaderListThreads">
             <div className="tab">
               <Link to="/page/1" style={{ textDecoration: 'none' }}>
                 <h3>Recent</h3>

src/components/thread/Post.jsx

@@ -85,9 +85,9 @@ export default function Post(props) {
   const time = translate(content.inserted_at);
 
   return (
-    <div id="post">
-      <div id="postHeader">
-        <div id="headerData">
+    <div className="post">
+      <div className="postHeader">
+        <div className="headerData">
           <div className="userImage">
             {user.picture == 'None' ? (
               <i className="far fa-user-circle" />
@@ -112,7 +112,7 @@ export default function Post(props) {
 
         
             {content.user_id == AuthService.getCurrentUserId() && (
-              <div id="headerButton">
+              <div className="headerButton">
                 <div className="postButtonContainer">
                   {checkType == 'threads' && (
                       <Button
@@ -141,9 +141,9 @@ export default function Post(props) {
             </div>
             )}
       </div>
-      <div id="postContent">
-        {props.type == 'thread' && <h1 id="judul">{content.title}</h1>}
-        <p id="isi">{contents}</p>
+      <div className="postContent">
+        {props.type == 'thread' && <h1 className="postTitle">{content.title}</h1>}
+        <p className="postBody">{contents}</p>
         <div className="likeSection">
           {loggedIn && (
             <button className="likeButton" onClick={handleLike}>

src/components/thread/PreviewThread.jsx

@@ -6,14 +6,14 @@ export default function PreviewThread(props) {
   const { content } = props;
   const time = translate(content.inserted_at);
   return (
-    <div id="threadCard">
-      <div id="threadCardHeader">
-        <h2 id="judul">
+    <div className="threadCard">
+      <div className="threadCardHeader">
+        <h2 className="previewThreadTitle">
           <b>{content.title}</b>
         </h2>
       </div>
-      <p id="topic">{content.topic_name}</p>
-      <div id="threadCardContent">
+      <p className="previewThreadTopic">{content.topic_name}</p>
+      <div className="threadCardContent">
         <p>
           By{' '}
           <Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}

src/components/thread/RecentThreads.jsx

@@ -35,7 +35,9 @@ export default function RecentThreads(props) {
   return (
     <div className="recentThreads">
       {totalItems == 0 ? (
-        <p>There is no threads yet.</p>
+        <div className="noThreadsMessage">
+          <p>There is no threads yet.</p>
+        </div>
       ) : (
         <Fragment>
           <ThreadList thread={threads} />

src/components/thread/Thread.jsx

@@ -109,10 +109,10 @@ export default function Thread(props) {
       </div>
 
       {loggedIn && (
-        <div id="addCommentSection">
+        <div className="addCommentSection">
           <h3>Write a Comment</h3>
           <form onSubmit={handleSubmit}>
-            <div className="commentFormContainer">
+            <div className="commentformComponentContainer">
               <textarea
                 className="commentBox"
                 placeholder="Write your comment here"
@@ -121,8 +121,7 @@ export default function Thread(props) {
               />
               <div>
                 <button
-                  className="submitComment"
-                  id="addCommentButton"
+                  className="submitComment addCommentButton"
                   type="submit"
                 >
                   Post Comment
@@ -142,8 +141,8 @@ export default function Thread(props) {
         <div>
           <CommentList
             comment={comment}
-            thread_id={threadParm}
-            topic_id={topicParm}
+            thread_className={threadParm}
+            topic_className={topicParm}
           />
           <div className="paginationContainer">
             <Pagination

src/components/thread/TopThreads.jsx

@@ -34,7 +34,9 @@ export default function TopThreads(props) {
   return (
     <div className="topThreads">
       {totalItems == 0 ? (
-        <p>There is no threads yet.</p>
+        <div className="noThreadsMessage">
+          <p>There is no threads yet.</p>
+        </div>
       ) : (
         <Fragment>
           <ThreadList thread={threads} />

src/components/topic/CreateTopicForm.jsx

@@ -40,7 +40,7 @@ export default function CreateTopicForm(props) {
   };
 
   return (
-    <div className="formContainer">
+    <div className="formComponentContainer">
       <div className="back" onClick={back}>
         <i className="fas fa-angle-left"></i>
         <h5>Back</h5>
@@ -58,7 +58,7 @@ export default function CreateTopicForm(props) {
         </div>
       )}
       <form onSubmit={handleSubmit}>
-        <div className="form_container">
+        <div className="formContainer">
           <label for="title">Topic Name</label>
           <input
             type="text"

src/components/topic/Topic.jsx

@@ -70,7 +70,7 @@ export default function Topic(props) {
           </button>
         )}
       </div>
-      <div className="list_threads_section">
+      <div className="listThreadsSection">
         {totalItems == 0 ? (
           <p>There are no threads with this topic yet.</p>
         ) : (

src/components/topic/TopicList.jsx

@@ -20,7 +20,7 @@ export default function TopicList(props) {
 
   return (
     <div className="topicContainer">
-      <div className="headerTopic">
+      <div className="topicHeader">
         <h1>Topic List</h1>
         {loggedIn && isAdmin && (
           <Button text="Create Topic" color="orange" url="create/topic" />
@@ -42,7 +42,7 @@ export default function TopicList(props) {
                 >
                   <div className="topicCard">
                     <div className="topicCardHeader">
-                      <h2 id="judul">{value.name}</h2>
+                      <h2 className="topicTitle">{value.name}</h2>
                     </div>
                   </div>
                 </Link>

src/components/utility/Footer.jsx

@@ -6,8 +6,8 @@ import '../../styles/utility/Footer.css';
 
 function Footer() {
   return (
-    <div id="footerContainer">
-      <div id="footer">
+    <div>
+      <div id="footerContainer">
         <div id="fasilkomLogo">
           <p>
             <b>Developed under</b>

src/styles/App.css

@@ -4,8 +4,34 @@ body {
     overflow-wrap: break-word;
 }
 
+.header {
+    margin-top: 36px;
+}
+
+.header h1 {
+    font-family: "DM Sans";
+    font-size: 36px;
+    color: #003F5A;
+    margin-bottom: 24px;
+}
+
 @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
     p {
         font-size: 14px;
     }
-}
\ No newline at end of file
+
+    .header {
+        margin-top: 18px;
+        text-align: center;
+    }
+
+    .header h1 {
+        font-size: 28px;
+    }
+}
+
+@media only screen and (max-device-width : 320px) {
+    .header {
+        text-align: center;
+    }
+}

src/styles/LoginForm.css

-.loginFormContainer {
+.loginformComponentContainer {
     margin-top: 36px;
     margin-left: 72px;
     margin-right: 72px;
@@ -11,20 +11,20 @@
     margin-bottom: 72px;
 }
 
-.loginFormContainer h1{
+.loginformComponentContainer h1{
     margin-bottom: 40px;
     text-align: center;
 }
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    .loginFormContainer {
+@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
+    .loginformComponentContainer {
         margin-top: 24px;
         margin-left: 36px;
         margin-right: 36px;
         margin-bottom: 184px;
     }
 
-    .loginFormContainer h1{
+    .loginformComponentContainer h1{
         font-size: 28px;
         text-align: center;
     }