Fakultas Ilmu Komputer UI

Commit 5ede3057 authored by jonathanchandra15's avatar jonathanchandra15
Browse files

add styling

parent fe46bc32
This diff is collapsed.
......@@ -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>
);
}
......
.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;
}
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>
)
}
......@@ -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
}
......@@ -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>
......
.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;
}
......@@ -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>
)}
......
.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;
}
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
.form_container {
display: flex;
flex-direction: column;
}
......@@ -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>
......
.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;
}
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>
)
......
......@@ -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;
}
......@@ -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;