Skip to content

Commit

Permalink
feat: added design ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@satrio-pamungkas
satrio-pamungkas committed Sep 30, 2021
1 parent e217796 commit cba4f08
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 19 deletions.
8 changes: 8 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@emotion/styled": "^11.3.0",
"@hcaptcha/react-hcaptcha": "^0.3.7",
"@hookform/resolvers": "^2.8.1",
"@mui/icons-material": "^5.0.1",
"@mui/material": "^5.0.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
Expand Down
1 change: 1 addition & 0 deletions src/assets/img/form-daftar.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Beranda/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const Header = () => {
tidaklah terhitung jumlahnya saat ini</h2>
</Row>
<Row className="button-container">
<Nav.Link className="button">DAFTAR</Nav.Link>
<Nav.Link className="button">DAFTAR ANGGOTA</Nav.Link>
</Row>
<Row className="countdown-container">
<h3 className="countdown-info">
Expand Down
50 changes: 50 additions & 0 deletions src/components/Daftar/Modal.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import Alert from '@mui/material/Alert';

const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};

export default function BasicModal() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

return (
<div>
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
<Button
onClick={handleOpen}
variant="outlined"
color="warning"
>Lihat Syarat dan Ketentuan
</Button>
</div>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Typography>
Syarat dan ketentuan menjadi anggota KOMPETEGRAM :
</Typography>
<Alert variant="outlined" color="warning">Memiliki niat dan semangat</Alert>
<Alert variant="outlined" color="warning">Mahasiswa aktif UPI</Alert>
</Box>
</Modal>
</div>
);
}
42 changes: 25 additions & 17 deletions src/pages/Daftar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import { NavigationBar } from "../components/Navbar";
import { Theme } from "../styles/Theme";
import { ProgramStudi } from "../api/Prodi";
import { Fakultas } from "../api/Fakultas";
import Photo from "../assets/img/form-daftar.svg";
import Modal from "../components/Daftar/Modal";

import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Card from "react-bootstrap/Card";
import SendIcon from '@mui/icons-material/Send';
import { CssBaseline, ThemeProvider, MenuItem, Radio, FormControlLabel,
RadioGroup, FormLabel, Typography, TextField, Button } from '@mui/material';
RadioGroup, FormLabel, Typography, TextField, Button, Alert } from '@mui/material';

import { useState } from "react";
import { useForm, Controller } from "react-hook-form";
Expand Down Expand Up @@ -88,19 +91,20 @@ export const Daftar = () => {
<NavigationBar/>
<ThemeProvider theme={Theme}>
<CssBaseline/>
<Row style={{ marginRight: '0px'}}>
<Col sm={2} md={3}></Col>
<Col xs={12} sm={8} md={6}>
<Card style={{ backgroundColor: '#121212' }}>
<Row className="page">
<Col sm={2}></Col>
<Col xs={12} sm={8}>
<Card className="card">
<Card.Body>
<Card.Title>Pendaftaran Anggota KOMPETEGRAM</Card.Title>
<Row>
<Col>
<Card.Text>
Silakan isi formulir berikut
</Card.Text>
<Col md={6} className="col-kiri">
<h1 className="title-form">Pendaftaran Anggota KOMPETEGRAM</h1>
<h2 className="subtitle-form">Batch 2 - Tahun 2021</h2>
<img className="img" src={Photo} alt=''/>
<h4 className="desc-form">Sebelum mendaftar keanggotaan, pastikan telah memenuhi syarat dan ketentuan yang berlaku berikut</h4>
<Modal/>
</Col>
<Col xs={12}>
<Col xs={12} md={6}>
<form onSubmit={handleSubmit(onSubmit, onError)}>
<TextField
label="Nama Lengkap"
Expand Down Expand Up @@ -131,7 +135,7 @@ export const Daftar = () => {
<MenuItem key="Perempuan" value="Perempuan">Perempuan</MenuItem>
</TextField>
<TextField
label="Alamat Surel"
label="Alamat Surel (Email)"
variant="filled"
color="warning"
margin="normal"
Expand All @@ -151,7 +155,7 @@ export const Daftar = () => {
error={errors.noWhatsapp ? true : false}
/>
<TextField
label="Nomor Induk Mahasiswa"
label="Nomor Induk Mahasiswa (NIM)"
variant="filled"
color="warning"
margin="normal"
Expand All @@ -163,7 +167,7 @@ export const Daftar = () => {
<TextField
select
color="warning"
label="Fakultas"
label="Fakultas atau Kampus Daerah"
variant="filled"
size="small"
margin="normal"
Expand Down Expand Up @@ -248,22 +252,26 @@ export const Daftar = () => {
<Typography variant="inherit" color="textSecondary">
{errors.pernahNgoding?.message}
</Typography>
{problem && <h1>Gagal mengirim</h1>}
<Button
className="button-submit"
variant="contained"
color="warning"
type="submit"
fullWidth
startIcon={<SendIcon />}
style={{ color: '#fff', fontSize: '16px', fontWeight: '500'}}
>
DAFTAR
DAFTAR ANGGOTA
</Button>
</form>
{problem && <h1>Gagal mengirim</h1>}
{redirect && <Redirect to="/bergabung"/> }
</Col>
</Row>
</Card.Body>
</Card>
</Col>
<Col sm={2} md={3} ></Col>
<Col sm={2} ></Col>
</Row>
</ThemeProvider>
</>
Expand Down
15 changes: 15 additions & 0 deletions src/styles/beranda.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,5 +86,20 @@
.title-header {
font-size: 32px;
}

.subtitle-header {
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
}

.button-container {

.button {
font-size: 16px;
width: 180px;
}
}

}
}
54 changes: 53 additions & 1 deletion src/styles/daftar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,56 @@

// ----------------------------
// Komponen Box - DAFTAR
// ----------------------------
// ----------------------------

.page {
margin-right: 0px;
}

.card {
margin-top: 20px;
background-color: #242424;

.col-kiri {
padding-top: 20px;
padding-left: 30px;
padding-right: 30px;
justify-content: center;

.title-form {
font-family: 'Raleway', sans-serif;
font-size: 32px;
font-weight: 700;
color: white;
text-align: center;
}

.subtitle-form {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 400;
color: white;
text-align: center;
margin-bottom: 50px;
}

.desc-form {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 300;
color: white;
text-align: center;
margin-top: 80px;
margin-bottom: 25px;
}

.img {
width: 70%;
margin-left: 15%;
}
}
}

// ----------------------------
// Komponen Box - MODAL
// ----------------------------

0 comments on commit cba4f08

Please sign in to comment.