diff --git a/src/components/Search.jsx b/src/components/Search.jsx index f38657e81cee236018a8db5d2ee8a00e651d2dd1..edaaf4c37dd5996166bc50d23ffba874a270842f 100644 --- a/src/components/Search.jsx +++ b/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"> diff --git a/src/components/profile/Profile.jsx b/src/components/profile/Profile.jsx index bd234645388b789a833d0ae8061233bf08064d17..a2a49453e6e12439ff1acce75f8b4e4a4a9ae524 100644 --- a/src/components/profile/Profile.jsx +++ b/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> diff --git a/src/components/profile/UpdateProfileForm.jsx b/src/components/profile/UpdateProfileForm.jsx index 2c61ff0602a6a3c764d30d8976b3d29a4b94a2bb..f3a8702d88fd21baab5ea1dbc2585645de592cf7 100644 --- a/src/components/profile/UpdateProfileForm.jsx +++ b/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" diff --git a/src/components/thread/CommentList.jsx b/src/components/thread/CommentList.jsx index ff1726765e6f448142b0bb52f96f6eb1a0a52eb6..2d27a1da467cbf579b5beafd1a78bb8aa42c380f 100644 --- a/src/components/thread/CommentList.jsx +++ b/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> ))} diff --git a/src/components/thread/CreateThread.jsx b/src/components/thread/CreateThread.jsx index 32735912f9dfc01b43fde63971bd70161180d506..11870d537a3fbc3446acef80772f7d9a36ff028c 100644 --- a/src/components/thread/CreateThread.jsx +++ b/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" diff --git a/src/components/thread/EditComment.jsx b/src/components/thread/EditComment.jsx index 7672d49e938b712f75244ea53c958bfacb8c7f8b..5c60fba0f8660596b03e5993ce4379ebf8a01eec 100644 --- a/src/components/thread/EditComment.jsx +++ b/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" diff --git a/src/components/thread/EditThread.jsx b/src/components/thread/EditThread.jsx index 2b8d6082d9254bcb995844e817688e344ab9dd7e..93725bd1140f2067be07eac02856c14154d65de2 100644 --- a/src/components/thread/EditThread.jsx +++ b/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" diff --git a/src/components/thread/ListThreads.jsx b/src/components/thread/ListThreads.jsx index 1a42add65d011ab04f2f61e5c7185a89f5cbd45a..665c5ef7c3e7e6d6574e20a7676bdc143618b99e 100644 --- a/src/components/thread/ListThreads.jsx +++ b/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> diff --git a/src/components/thread/Post.jsx b/src/components/thread/Post.jsx index 4fef77907ce5bf8052d1e13465c134e3c4f6fc71..b8e8d0e983ada8f4a2f6260ae9a53f3ccca6a2aa 100644 --- a/src/components/thread/Post.jsx +++ b/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,49 +112,38 @@ export default function Post(props) { {content.user_id == AuthService.getCurrentUserId() && ( - <div id="headerButton"> - <div className="buttonContainer"> + <div className="headerButton"> + <div className="postButtonContainer"> {checkType == 'threads' && ( - <div className="threadButtons"> <Button type="button" text="Edit" color="none-green" url={`thread/edit/${content.id}`} /> - <button - type="button" - className="deleteButton" - onClick={() => deletePost(user.username)} - > - Delete - </button> - </div> )} {checkType == 'post' && ( - <div classname="commentDeleteButton"> <Button type="button" text="Edit" color="none-green" url={`comment/edit/${content.id}`} /> - <button - type="button" - className="deleteButton" - onClick={() => deletePost(user.username)} - > - Delete - </button> - </div> )} + <button + type="button" + className="deleteButton" + onClick={() => deletePost(user.username)} + > + Delete + </button> </div> </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}> diff --git a/src/components/thread/PreviewThread.jsx b/src/components/thread/PreviewThread.jsx index 81da8badf361926a9a370b933cd1d3c70b0de5a0..7891c1a477b054d18f59baad33a189eefb70b623 100644 --- a/src/components/thread/PreviewThread.jsx +++ b/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>{' '} diff --git a/src/components/thread/RecentThreads.jsx b/src/components/thread/RecentThreads.jsx index afb89257e5467e0e2053f85381e9bf14b4cc5c70..ea47f67c793f39d2002605140d9ce1d2874b9081 100644 --- a/src/components/thread/RecentThreads.jsx +++ b/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} /> diff --git a/src/components/thread/Thread.jsx b/src/components/thread/Thread.jsx index b22a2ecd88d471d3eaf4e63b7c78427c4b903d16..d80aa12adf172aa39aae04f91170988b889acb26 100644 --- a/src/components/thread/Thread.jsx +++ b/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 diff --git a/src/components/thread/TopThreads.jsx b/src/components/thread/TopThreads.jsx index d86336c73733f301241908a0049e60b0ffedaeb4..c33b302b7f3d80641bda3b7b990f0045ca806107 100644 --- a/src/components/thread/TopThreads.jsx +++ b/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} /> diff --git a/src/components/topic/CreateTopicForm.jsx b/src/components/topic/CreateTopicForm.jsx index c10f3c47d8dbddd1d919b9b8d4b63196ad1ca34b..05cd452d83ab22918138ed5089b8d485061746df 100644 --- a/src/components/topic/CreateTopicForm.jsx +++ b/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" diff --git a/src/components/topic/Topic.jsx b/src/components/topic/Topic.jsx index 0103558f8fda743cd262ed0b6b6c2a124df0ee6f..32f3b67bebfe8439514a2de8c609c6989f74740b 100644 --- a/src/components/topic/Topic.jsx +++ b/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> ) : ( diff --git a/src/components/topic/TopicList.jsx b/src/components/topic/TopicList.jsx index d4b6708fd1d7345ddcbd6581f09c76d54239e845..f2df028d8b9f7ab84d7415704bf0dfcc19038c9e 100644 --- a/src/components/topic/TopicList.jsx +++ b/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> diff --git a/src/components/utility/Footer.jsx b/src/components/utility/Footer.jsx index 64f10ad5b40810dab4b01053e83d85160b75e3fd..38b9b48d5e32c291f85f6e9ec766f7159a159c72 100644 --- a/src/components/utility/Footer.jsx +++ b/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> diff --git a/src/styles/App.css b/src/styles/App.css index 4ee9ec78163e4f4ab28f6a942ae26533438ff973..f2be0d1ca6502da1a4e72b5543ee9cf75e42d547 100644 --- a/src/styles/App.css +++ 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; + } +} diff --git a/src/styles/LoginForm.css b/src/styles/LoginForm.css index 1b81325377eeeaaba34662114af38e9441ae8b16..e4049ef404ab7e4837599c0406410aa35c955a1d 100644 --- a/src/styles/LoginForm.css +++ b/src/styles/LoginForm.css @@ -1,4 +1,4 @@ -.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; } diff --git a/src/styles/Search.css b/src/styles/Search.css index ab5180b04982a06f3c4f7aef95d3936e69d953d3..3a87a59d09d7add6f420f4ff3da67ecf81c12fae 100644 --- a/src/styles/Search.css +++ b/src/styles/Search.css @@ -22,7 +22,7 @@ text-align: center; } - .searchResultContainer p{ + .noThreadsMessage p{ text-align: center; } } \ No newline at end of file diff --git a/src/styles/profile/Profile.css b/src/styles/profile/Profile.css index e8db3e72d60bb19e88f7d0d96c7a7cbb01644897..83e9912c764e274573779c5d42f5aa41a0e9d4ea 100644 --- a/src/styles/profile/Profile.css +++ b/src/styles/profile/Profile.css @@ -6,27 +6,27 @@ margin-bottom: 72px; } -.profile_section { +.profileSection { display: flex; flex-direction: column; margin-top: 36px; align-items: center; } -.profile_section h2 { +.profileSection h2 { font-family: "DM Sans"; font-size: 20px; color: #000000; margin-top: 8px; } -.my_threads_section { +.myThreadsSection { display: flex; flex-direction: column; margin-top: 56px; } -.sub_header_my_threads { +.subHeaderMyThreads { display: flex; justify-content: space-between; align-items: center; @@ -37,7 +37,7 @@ word-wrap: break-word; } -.sub_header_my_threads h3 { +.subHeaderMyThreads h3 { font-family: "DM Sans"; font-size: 20px; color: #DE6600; @@ -71,41 +71,33 @@ margin-right: 36px; } - .profile_section h2 { + .profileSection h2 { font-size: 16px; margin-top: 8px; } - .profile_section { + .profileSection { margin-top: 36px; } - .sub_header_my_threads h3 { + .subHeaderMyThreads h3 { font-size: 18px; text-align: center; } - p { - font-size: 14px; - } - - .sub_header_my_threads { + .subHeaderMyThreads { flex-wrap: wrap; justify-content: center; flex-direction: column; } - .my_threads_section p { - text-align: center; - } - - .sub_header_my_threads h3 { + .subHeaderMyThreads h3 { max-width: 72vw; } } @media only screen and (min-device-width : 540px) and (max-device-width : 600px){ - .sub_header_my_threads h3 { + .subHeaderMyThreads h3 { max-width: 40vw; } } \ No newline at end of file diff --git a/src/styles/thread/Form.css b/src/styles/thread/Form.css index 7d4b792874d65265693b2e658cc071d3dfa5cc6a..a8909a541cee929f13d38b3d3f01e5ed16c42623 100644 --- a/src/styles/thread/Form.css +++ b/src/styles/thread/Form.css @@ -1,4 +1,4 @@ -.formContainer { +.formComponentContainer { margin: 36px 72px; min-height: 100vh; margin-bottom: 72px; @@ -26,21 +26,11 @@ cursor: pointer; } -.header { - margin-top: 36px; -} - -.header h1 { - font-family: "DM Sans"; - font-size: 36px; - color: #003F5A; -} - -.form_section { +.formSection { margin-top: 60px; } -.form_container { +.formContainer { display: flex; flex-direction: column; } @@ -122,7 +112,7 @@ textarea:focus, input:focus, select:focus{ } @media only screen and (min-device-width : 320px) and (max-device-width : 540px) { - .formContainer { + .formComponentContainer { margin: 18px 36px; } @@ -131,11 +121,6 @@ textarea:focus, input:focus, select:focus{ margin-bottom: 12px; } - .header { - margin-top: 18px; - text-align: center; - } - label { font-size: 14px; margin-bottom: 12px; @@ -150,14 +135,10 @@ textarea:focus, input:focus, select:focus{ margin-right: 2px; } - .form_section { + .formSection { margin-top: 36px; } - .header h1 { - font-size: 28px; - } - .title { min-width: 248px; max-width: 468px; diff --git a/src/styles/thread/ListThreads.css b/src/styles/thread/ListThreads.css index e080ce9a625ccac11ac24624f8d44b0b744e6d64..7d2fdf11954e1e3149c3d0b3fff456407f562087 100644 --- a/src/styles/thread/ListThreads.css +++ b/src/styles/thread/ListThreads.css @@ -1,19 +1,15 @@ -.header h1 { - font-family: "DM Sans"; - font-size: 2.25rem; - color: #007A7A; -} - -.list_threads_section { +.listThreadsSection { display: flex; flex-direction: column; justify-content: center; + margin-top: 56px; } -.sub_header_list_threads { +.subHeaderListThreads { display: flex; justify-content: space-between; align-items: center; + margin-bottom: 28px; } .tab { @@ -44,46 +40,6 @@ margin-bottom: 72px; } -.header h1 { - font-family: "DM Sans"; - font-size: 36px; - color: #007A7A; -} - -.list_threads_section { - display: flex; - flex-direction: column; - margin-top: 56px; - justify-content: center; -} - -.sub_header_list_threads { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 28px; -} - -.tab { - display: flex; - align-items: center; -} - -.tab h3 { - font-family: "DM Sans"; - font-size: 18px; - color: #000000; - margin-right: 24px; - margin-top: 4px; - opacity: 0.5; -} - -.tab .active { - color: #DE6600 !important; - font-weight: bold; - opacity: 1!important; -} - @media only screen and (min-device-width : 320px) and (max-device-width : 540px) { .listThreadsContainer { margin-top: 24px; @@ -91,15 +47,11 @@ margin-right: 36px; } - .header h1 { - font-size: 36px; - } - - .list_threads_section { + .listThreadsSection { margin-top: 36px; } - .sub_header_list_threads { + .subHeaderListThreads { margin-bottom: 28px; flex-wrap: wrap; justify-content: center; @@ -107,12 +59,6 @@ justify-content: center; } - .tab h3 { - font-size: 16px; - margin-right: 20px; - margin-top: 4px; - } - .tab .active { color: #DE6600 !important; font-weight: bold; @@ -126,7 +72,7 @@ margin-top: 4px; } - .recentThreads p, .topThreads p { + .noThreadsMessage p{ text-align: center; } } diff --git a/src/styles/thread/Post.css b/src/styles/thread/Post.css index 837252f9cf9abf26611a8dd9a628bbf0e0f98d9a..93e19996a1a7d2e984274cc8743b4a2c38b2c35d 100644 --- a/src/styles/thread/Post.css +++ b/src/styles/thread/Post.css @@ -1,15 +1,15 @@ -#post { +.post { min-width: 303px; max-width: 3696px; margin-bottom: 20px; font-family: "DM Sans"; } -#headerData { +.headerData { display: flex; } -#postHeader { +.postHeader { height: 84px; box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25); border-radius: 8px 8px 0px 0px; @@ -30,7 +30,7 @@ margin: 0px; } -#headerButton { +.headerButton { display: flex; flex-direction: column; align-items: center; @@ -47,20 +47,20 @@ background-color: transparent!important; } -#postContent { +.postContent { padding: 32px; box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.25); border-radius: 0px 0px 8px 8px; font-family: "DM Sans" } -#postContent #judul { +.postContent .postTitle { font-size: 32px; font-weight: bold; margin-bottom: 24px; } -#postContent #isi { +.postContent .postBody { font-size: 16px; white-space: pre-line; } @@ -120,40 +120,44 @@ button:focus { align-items: center; } +.postButtonContainer button { + margin-top: 0px; +} + @media only screen and (min-device-width : 320px) and (max-device-width : 540px) { - #post { + .post { min-width: 248px; max-width: 468px; margin-bottom: 20px; } - #postHeader { + .postHeader { height: auto; padding: 16px 16px; flex-direction: column; } - #headerButton { + .headerButton { margin-top: 24px; } - .threadButtons{ + .postButtonContainer{ display: flex; justify-content: space-between; width: 160px; } - #postContent { + .postContent { padding: 16px; } - #postContent #judul { + .postContent .postTitle { font-size: 24px; font-weight: bold; margin-bottom: 24px; } - #postContent #isi { + .postContent .postBody { font-size: 14px; } diff --git a/src/styles/thread/PreviewThread.css b/src/styles/thread/PreviewThread.css index c6ef9e26270ef057948bb52735f30c44b0d9afd6..d3e6d5c9509ace15e1b7bb6e61e94d261dde9e24 100644 --- a/src/styles/thread/PreviewThread.css +++ b/src/styles/thread/PreviewThread.css @@ -1,4 +1,4 @@ -#threadCard { +.threadCard { min-width: 303px; max-width: 3696px; margin-bottom: 20px; @@ -8,7 +8,7 @@ font-family: "DM Sans"; } -#topic { +.previewThreadTopic { background: #DE6600; color:#ffffff; padding: 4px; @@ -29,32 +29,29 @@ color: #DE6600; } -p { - color: #000000; -} - -#judul { +.previewThreadTitle { font-size: 24px; color: #000000; } -#threadCardContent { +.threadCardContent { margin-top: 8px; } -#threadCardContent p{ +.threadCardContent p{ margin-bottom: 0px; + color: #000000; } @media only screen and (min-device-width : 320px) and (max-device-width : 540px) { - #threadCard { + .threadCard { min-width: 248px; max-width: 468px; margin-bottom: 20px; padding: 16px; } - #topic { + .previewThreadTopic { font-size: 14px; } @@ -63,20 +60,20 @@ p { margin-left: 20px; } - #judul { + .previewThreadTitle { font-size: 24px; color: #000000; } - #threadCardContent { + .threadCardContent { margin-top: 8px; } - #threadCardContent p{ + .threadCardContent p{ margin-bottom: 0px; } - #threadCardContent p{ + .threadCardContent p{ text-align: left; } } \ No newline at end of file diff --git a/src/styles/thread/Thread.css b/src/styles/thread/Thread.css index 852f2e3d3f07e821b5cd3e7867df1d6bd3b489ed..5bbda74342045cb841ddb02b7ca5f1a826082379 100644 --- a/src/styles/thread/Thread.css +++ b/src/styles/thread/Thread.css @@ -9,21 +9,6 @@ margin-bottom: 72px; } -.back { - margin-top: 32px; - margin-bottom: 36px; - color: #007A7A; -} - -.back h5 { - font-family: 'DM Sans'; - font-size: 18px; -} - -.back:hover { - cursor: pointer; -} - .commentText { color: #FEA02F; font-size: 24px; @@ -31,21 +16,21 @@ margin-bottom: 12px; } -#addCommentSection { +.addCommentSection { margin-top: 40px; display: flex; flex-direction: column; margin-top: 20px; } -#addCommentSection h3 { +.addCommentSection h3 { color: #FEA02F; font-size: 24px; font-weight: bold; margin-bottom: 12px; } -#addCommentButton { +.addCommentButton { margin-top: 20px; margin-left: auto; margin-right: auto; @@ -63,10 +48,6 @@ box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25); } -textarea:focus { - outline: none; -} - .submitComment { border-radius: 4px; border-width: 0px; @@ -83,7 +64,7 @@ textarea:focus { margin-bottom: 0px; } -.commentFormContainer { +.commentformComponentContainer { display: flex; flex-direction: column; } @@ -96,12 +77,12 @@ textarea:focus { margin-right: 36px; } - #addCommentSection h3 { + .addCommentSection h3 { font-size: 18px; text-align: center; } - #addCommentSection div { + .addCommentSection div { display: flex; justify-content: center; } diff --git a/src/styles/topic/Topic.css b/src/styles/topic/Topic.css index d6d3e9ebfe6a2bdbd48da5edcc384ce3e8991750..3b3d4e6f34e3a9aaeea199844bb20389f9959944 100644 --- a/src/styles/topic/Topic.css +++ b/src/styles/topic/Topic.css @@ -6,14 +6,7 @@ margin-bottom: 72px; } -.header h1 { - font-family: "DM Sans"; - font-size: 36px; - color: #007A7A; - margin-bottom: 24px; -} - -.list_threads_section { +.listThreadsSection { display: flex; flex-direction: column; margin-top: 56px; @@ -21,33 +14,6 @@ font-family: "DM Sans"; } -.sub_header_list_threads { - display: flex; - justify-content: space-evenly; - align-items: center; - margin-bottom: 28px; -} - -.tab { - display: flex; - align-items: center; -} - -.tab h3 { - font-family: "DM Sans"; - font-size: 18px; - color: #000000; - margin-right: 24px; - margin-top: 4px; - opacity: 0.5; -} - -.tab .active { - color: #DE6600 !important; - font-weight: bold; - opacity: 1!important; -} - .deleteTopicButton { border: 1px solid #D7443E; border-radius: 4px; @@ -65,10 +31,6 @@ margin-left: 36px; margin-right: 36px; } - - .header h1 { - margin-bottom: 36px; - } } @media only screen and (max-device-width : 320px) { diff --git a/src/styles/topic/TopicList.css b/src/styles/topic/TopicList.css index e3005d8af3ee1d1ae2033bbee6554faf3bd565c6..0bc169c55c7b78cd552fab25bac0f74efab06e10 100644 --- a/src/styles/topic/TopicList.css +++ b/src/styles/topic/TopicList.css @@ -33,7 +33,7 @@ margin: 0px; } -.headerTopic { +.topicHeader { display: flex; justify-content: space-between; align-items: center; @@ -45,22 +45,18 @@ margin-bottom: 8px; } -.topicCardHeader #judul{ +.topicCardHeader .topicTitle{ max-width: 192px; word-wrap: break-word; } @media only screen and (min-device-width : 320px) and (max-device-width : 540px) { - .button { - font-size: 16px; - } - .topicCard { width: 200px; min-height: 108px; } - .topicCardHeader #judul{ + .topicCardHeader .topicTitle{ max-width: 152px; word-wrap: break-word; } @@ -82,20 +78,20 @@ justify-content: center; } - .headerTopic { + .topicHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } - .headerTopic { + .topicHeader { display: flex; flex-direction: column; align-items: center; } - .headerTopic h1 { + .topicHeader h1 { margin-bottom: 24px; } } diff --git a/src/styles/utility/Footer.css b/src/styles/utility/Footer.css index 21ed5e8be44098f15984920af8d5465093da52ae..c8c30fd23236a838aac54a2f97c35da2e5908b8f 100644 --- a/src/styles/utility/Footer.css +++ b/src/styles/utility/Footer.css @@ -1,4 +1,4 @@ -#footer { +#footerContainer { background-color: #003F5A; display: flex; justify-content: space-between; @@ -39,8 +39,8 @@ font-size: 16px; } -@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { - #footer { +@media only screen and (min-device-width : 320px) and (max-device-width : 540px) { + #footerContainer { padding: 24px 36px; margin-top: 40px; flex-direction: column; diff --git a/src/styles/utility/Navbar.css b/src/styles/utility/Navbar.css index 26db33fecec3c5c4cf5316606b0c8b9386d17425..ea7df9c94a9c26894b375f8023f05bdfeaaf96da 100644 --- a/src/styles/utility/Navbar.css +++ b/src/styles/utility/Navbar.css @@ -58,7 +58,7 @@ color: #DE6600!important; } -@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { +@media only screen and (min-device-width : 320px) and (max-device-width : 540px) { .form-control { min-width: 180px; max-width: 240px;