add styling

diskuy/src/App.js

@@ -10,7 +10,7 @@ import TopicList from './TopicList';
 import RegisterForm from './RegisterForm'
 import CreateTopicForm from './CreateTopicForm'
 import Search from './Search'
-import EditThreadForm from './Threads/EditThreadForm';
+import EditThread from './Threads/EditThread';
 import {
   BrowserRouter as Router,
   Route,
@@ -34,7 +34,7 @@ function App() {
       <Route exact path='/topic/:topic/:thread' component={Thread} />
       <Route exact path='/topic/:topic' component={Topic} />
       <Route exact path='/threads' component={ListThreads} />
-      <Route exact path='/thread/edit/:thread' component={EditThreadForm} />
+      <Route exact path='/thread/edit/:thread' component={EditThread} />
     </Router>
   );
 }

diskuy/src/LoginForm.css

+.login_form-container {
+    display: flex;
+    flex-direction: column; 
+    margin-top: 60px;
+}
+
+.formContainer {
+    margin-top:36px;
+    padding-left: 72px;
+}
+
+.loginButton {
+    border-radius: 4px;
+    border-width: 0px;
+    padding: 8px;
+    font-family: "DM Sans";
+    color: #ffffff;
+    border-style: none;
+    background-color: #DE6600;
+    border-color: #DE6600;
+    margin-right: 24px;
+}
+
+.formContainer h1 {
+    font-family: "DM Sans";
+    font-size: 36px;
+    font-weight: bold;
+    color: #003F5A;
+}
+
+label {
+    font-family: "DM Sans";
+    font-size: 18px;
+    color: #000000;
+    font-weight: bold;
+    margin-bottom: 12px;
+}
+
+.email {
+    width: 1205px;
+    max-width: 1296px;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.password {
+    width: 1205px;
+    max-width: 1296px;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.buttonSubmit {
+    border-radius: 4px;
+    border-width: 0px;
+    padding: 8px;
+    font-family: "DM Sans";
+    color: #ffffff;
+    border-style: none;
+    background-color: #DE6600;
+    border-color: #DE6600;
+}
+
+textarea:focus, input:focus, select:focus{
+    outline: none;
+}

diskuy/src/LoginForm.js

 import React from 'react'
 import { useInput } from './hooks/input-hook';
 import { useState } from "react";
-
 import AuthService from './services/auth.service'
+import Button from './Button'
+import './LoginForm.css';
 
 const required = value => {
     if (!value) {
@@ -39,30 +40,39 @@ export default function LoginForm(props){
     }
 
     return (
-        <div>
+        <div className="formContainer">
+            <h1>Login</h1>
             <form onSubmit={handleLogin}>
+                <div className="login_form-container">
                 <label htmlFor='username'>Email</label>
                 <input
                     type='text'
                     name='username'
+                    className="email"
                     {...bindUsername}
                     validations={[required]}
+                    placeholder="Your email"
                 />
 
                 <label htmlFor='password'>Password</label>
                 <input
                     type='password'
                     name='password'
+                    className="password"
                     {...bindPassword}
                     validations={[required]} 
+                    placeholder="Your password"
                 />
 
-                <button className='btn btn-primary' disabled={loading}>
-                    {loading && (
-                        <span className='spinner-border spinner-border-sm'></span>
-                    )}
-                    <span>Login</span>
-                </button>
+                <div className="buttonContainer">
+                    <button className='loginButton' disabled={loading}>
+                        {loading && (
+                            <span className='spinner-border spinner-border-sm'></span>
+                        )}
+                        <span>Login</span>
+                    </button>
+                    <Button text="Register" color="green" url="register" />
+                </div>
 
                 {message && (
                     <div>
@@ -71,10 +81,8 @@ export default function LoginForm(props){
                         </div>
                     </div>
                 )}
+                </div>
             </form>
-            <button className='btn btn-primary' onClick={() => props.history.push('/register')}>
-                Register
-            </button>
         </div>
     )
 }

diskuy/src/Profile/Profile.css

@@ -25,8 +25,7 @@
 .icon {
     width: 180px;
     height: 180px;
-    border-radius: 50%;
-    background-color: #C4C4C4;
+    font-size: 180px;
 }
 
 .my_threads_section {
@@ -47,4 +46,4 @@
     font-family: "DM Sans";
     font-size: 20px;
     color: #DE6600;
-}
\ No newline at end of file
+}

diskuy/src/Profile/Profile.js

@@ -38,15 +38,17 @@ function Profile(props) {
                 <h1><b>Profile</b></h1>
             </div>
             <div className="profile_section">
-                <div className="icon"></div>
+                <div className="userIcon">
+                    <i class="far fa-user-circle icon"></i>
+                </div>
                 <h2><b>{user.username}</b></h2>
             </div>
             <div className="my_threads_section">
                 <div className="sub_header_my_threads">
-                    <h3><b>Threads Created</b></h3>
+                    <h3><b>Threads Created by {user.username}</b></h3>
 
                     {userId == profileId && (
-                        <Button type="button" text="Create Thread" color="orange" url="aaa" />
+                        <Button text="Create Thread" color="orange" url="create/thread" />
                     )}
 
                 </div>

diskuy/src/RegisterForm.css

+.register_form-container {
+    display: flex;
+    flex-direction: column; 
+    margin-top: 60px;
+}
+
+.formContainer {
+    margin-top:36px;
+    padding-left: 72px;
+}
+
+.registerButton {
+    border-radius: 4px;
+    border-width: 0px;
+    padding: 8px;
+    font-family: "DM Sans";
+    color: #ffffff;
+    border-style: none;
+    background-color: #DE6600;
+    border-color: #DE6600;
+    margin-right: 24px;
+}
+
+.formContainer h1 {
+    font-family: "DM Sans";
+    font-size: 36px;
+    font-weight: bold;
+    color: #003F5A;
+}
+
+label {
+    font-family: "DM Sans";
+    font-size: 18px;
+    color: #000000;
+    font-weight: bold;
+    margin-bottom: 12px;
+}
+
+.email {
+    width: 1205px;
+    max-width: 1296px;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.username {
+    width: 1205px;
+    max-width: 1296px;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.password {
+    width: 1205px;
+    max-width: 1296px;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.buttonSubmit {
+    border-radius: 4px;
+    border-width: 0px;
+    padding: 8px;
+    font-family: "DM Sans";
+    color: #ffffff;
+    border-style: none;
+    background-color: #DE6600;
+    border-color: #DE6600;
+}
+
+textarea:focus, input:focus, select:focus{
+    outline: none;
+}

diskuy/src/RegisterForm.js

@@ -2,6 +2,7 @@ import React from 'react'
 import AuthService from './services/auth.service'
 import { useInput } from './hooks/input-hook';
 import { useState } from "react";
+import './RegisterForm.css'
 
 const required = value => {
     if (!value) {
@@ -44,35 +45,43 @@ export default function RegisterForm(props){
     }
 
     return (
-        <div>
+        <div className="formContainer">
+            <h1>Register</h1>
             <form onSubmit={handleRegister}>
                 {!successful && (
-                    <div>
+                    <div className="register_form-container">
                         <label htmlFor='username'>Username</label>
                         <input
                             type='text'
                             name='username'
+                            className="username"
                             {...bindUsername}
                             validations={[required]}
+                            placeholder="Your username"
                         />
 
                         <label htmlFor='email'>Email</label>
                         <input
                             type='text'
                             name='email'
+                            className="email"
                             {...bindEmail}
                             validations={[required]}
+                            placeholder="Your email"
                         />
 
                         <label htmlFor='password'>Password</label>
                         <input
                             type='text'
                             name='password'
+                            className="password"
                             {...bindPassword}
                             validations={[required]} 
+                            placeholder="password"
                         />
-
-                        <button className='btn btn-primary'>Sign Up</button>
+                        <div className="buttonContainer">
+                            <button className='registerButton'>Sign Up</button>
+                        </div>
                     </div>
                 )}
 

diskuy/src/Threads/EditThread.css

+.back {
+    margin-top: 32px;
+    margin-left: 72px;
+    color: #007A7A;
+}
+
+.back h5 {
+    font-family: 'DM Sans';
+    font-size: 18px;
+}
+
+.back:hover {
+    cursor: pointer;
+}
+
+.header {
+    margin-top: 36px;
+    margin-left: 72px;
+}
+
+.header h1 {
+    font-family: "DM Sans";
+    font-size: 36px;
+    color: #003F5A;
+}
+
+.form_section {
+    margin-top: 60px;
+    margin-left: 72px;
+    margin-right: 72px;
+}
+

diskuy/src/Threads/EditThread.js

+import React from "react";
+import './EditThread.css';
+import FormEditThread from './FormEditThread'
+
+
+function EditThread(props) {
+
+    const back = () => {
+        props.history.goBack();
+    }
+
+    const redirect = (path) => {
+        props.history.push(path);
+    }
+
+    const threadId = props.match.params.thread
+
+    return (
+        <div>
+            <div className="back" onClick={back}>
+                <h5>Back</h5> 
+            </div>
+            <div className="header">
+                <h1><b>Edit a Thread</b></h1>
+            </div>
+            <div className="form_section">
+                <FormEditThread redirect={redirect} threadId={threadId}/>
+            </div>
+        </div>
+    )
+}
+
+export default EditThread;
\ No newline at end of file

diskuy/src/Threads/EditThreadForm.css

-.form_container {
-    display: flex;
-    flex-direction: column; 
-}
-
-

diskuy/src/Threads/FormCreateThread.js

@@ -54,16 +54,16 @@ export default function FormCreateThread(props){
         <form onSubmit={handleSubmit}>
             <div className="form_container">
                 <label for="title">Title</label>
-                <input type='text' className="title" name="title" placeholder="Your threads title" required={false} {...bindTitle}/>
+                <input type='text' className="title" name="title" placeholder="Your threads title" required="false" {...bindTitle}/>
                 <label>Topic</label>
-                <select className="topic" name="topic" {...bindTopicId}>
+                <select className="topic" name="topic" required="false" {...bindTopicId}>
                     <option value=""></option>
                     {listTopic.map((topic) => (
                         <option value={topic.id}>{topic.name}</option>
                     ))}
                 </select>
                 <label for="body">Body</label>
-                <textarea className="body" name="body" placeholder="Tulis" required={false} {...bindBody}/>
+                <textarea className="body" name="body" placeholder="Tulis" required="false" {...bindBody}/>
                 <div className="buttonContainer">
                     <input type="submit" className="buttonSubmit" value="Create Thread"/>
                 </div>

diskuy/src/Threads/FormEditThread.css

+.form_container {
+    display: flex;
+    flex-direction: column; 
+}
+
+label {
+    font-family: "DM Sans";
+    font-size: 18px;
+    color: #000000;
+    font-weight: bold;
+    margin-bottom: 12px;
+}
+
+.title {
+    width: 1205px;
+    max-width: 1296px;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.topic {
+    width: 400px;
+    font-family: "DM Sans";
+    height: 45px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.body {
+    width: 1205px;
+    max-width: 1296px;
+    font-family: "DM Sans";
+    height: 320px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 0;
+    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+    margin-bottom: 32px;
+}
+
+.buttonSubmit {
+    border-radius: 4px;
+    border-width: 0px;
+    padding: 8px;
+    font-family: "DM Sans";
+    color: #ffffff;
+    border-style: none;
+    background-color: #DE6600;
+    border-color: #DE6600;
+}
+
+textarea:focus, input:focus, select:focus{
+    outline: none;
+}

diskuy/src/Threads/EditThreadForm.js → diskuy/src/Threads/FormEditThread.js

 import axios from "axios";
 import React, { useState, useEffect } from "react";
 import { useInput } from '../hooks/input-hook';
-import './EditThreadForm.css';
+import './FormEditThread.css';
 import authHeader from '../services/auth-header'
 import { API_URL } from '../services/api_link'
 
@@ -12,7 +12,7 @@ export default function CreateThreadForm(props){
     const [listTopic, setlistTopic] = useState([]);
     const [point, setPoint] = useState(0);
 
-    const threadIdParam = props.match.params.thread
+    const threadIdParam = props.threadId
 
     useEffect(() => {
         async function getListTopic() {
@@ -60,17 +60,19 @@ export default function CreateThreadForm(props){
         <form onSubmit={handleSubmit}>
             <div className="form_container">
                 <label for="title">Title</label>
-                <input type='text' name="title" placeholder="Your threads title" required={false} {...bindTitle}/>
+                <input type='text' className="title" name="title" placeholder="Your threads title" required="false" {...bindTitle}/>
                 <label>Topic</label>
-                <select name="topic" {...bindTopicId}>
+                <select className="topic" name="topic" required="false" {...bindTopicId}>
                     <option value=""></option>
                     {listTopic.map((topic) => (
                         <option value={topic.id}>{topic.name}</option>
                     ))}
                 </select>
                 <label for="body">Body</label>
-                <input type='text' name="body" placeholder="Tulis" required={false} {...bindBody}/>
-                <input type="submit" value="Submit"/>
+                <textarea className="body" name="body" placeholder="Tulis" required="false" {...bindBody}/>
+                <div className="buttonContainer">
+                    <input type="submit" className="buttonSubmit" value="Edit Thread"/>
+                </div>
             </div>
         </form>
     )

diskuy/src/Threads/Post.css

@@ -3,6 +3,7 @@
     max-width: 1296px;
     margin-left: 72px;
     margin-right: 72px;
+    margin-bottom: 20px;
     font-family: "DM Sans";
 }
 
@@ -99,3 +100,7 @@
 .pointContainer .point{
     height: 24px;
 }
+
+button:focus {
+    outline: none;
+}

diskuy/src/Threads/Thread.css

@@ -23,8 +23,11 @@
 }
 
 .commentText {
-    margin-top: 20px;
-    margin-left: 100px;
+    margin-left: 72px;
+    color: #FEA02F;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 12px;
 }
 
 #addCommentSection {
@@ -33,7 +36,7 @@
     margin-top: 40px;
     display: flex;
     flex-direction: column;
-    margin-top: 40px;
+    margin-top: 20px;
 }
 
 #addCommentSection h3 {
@@ -43,21 +46,11 @@
     margin-bottom: 12px;
 }
 
-.commentBox {
-    border-radius: 8px;
-    padding: 12px;
-}
-
 #addCommentButton {
     margin-top: 20px;
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 20px;
-}