mirror of
https://github.com/franjsco/tick3t
synced 2025-06-05 22:19:18 +02:00
refactoring: refresh design
This commit is contained in:
Francesco Esposito
26
src/App.css
26
src/App.css
@ -1,8 +1,28 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap');
|
||||
.app {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
|
||||
|
||||
.app {
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
color: #45474b;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
margin-top: 85px;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #8346f6;
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
background-color: #8346f6;
|
||||
border-color:#8346f6;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: #8346f6;
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Container } from 'reactstrap';
|
||||
|
||||
import './App.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './App.css';
|
||||
|
||||
|
||||
import Routes from './Routes';
|
||||
import NavBar from './components/NavBar';
|
||||
@ -13,11 +14,11 @@ function App() {
|
||||
<div className="app">
|
||||
<Routes>
|
||||
<NavBar />
|
||||
|
||||
|
||||
<Container>
|
||||
<Footer />
|
||||
</Container>
|
||||
|
||||
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1 +1 @@
|
||||
<?xml version="1.0" ?><svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(0 -1028.4)"><path d="m5 1030.4c-1.1046 0-2 0.9-2 2v8 4 6c0 1.1 0.8954 2 2 2h14c1.105 0 2-0.9 2-2v-6-4-4-4c0-1.1-0.895-2-2-2h-4-10z" fill="#bdc3c7"/><g fill="#95a5a6"><path d="m6 1028.4c-0.5523 0-1 0.4-1 1v3c0 0.5 0.4477 1 1 1s1-0.5 1-1v-3c0-0.6-0.4477-1-1-1zm4 0c-0.5523 0-1 0.4-1 1v3c0 0.5 0.4477 1 1 1 0.552 0 1-0.5 1-1v-3c0-0.6-0.448-1-1-1zm4 0c-0.552 0-1 0.4-1 1v3c0 0.5 0.448 1 1 1s1-0.5 1-1v-3c0-0.6-0.448-1-1-1zm4 0c-0.552 0-1 0.4-1 1v3c0 0.5 0.448 1 1 1s1-0.5 1-1v-3c0-0.6-0.448-1-1-1z"/><rect height="1" width="12" x="6" y="1043.4"/><rect height="1" width="12" x="6" y="1040.4"/><rect height="1" width="12" x="6" y="1037.4"/><rect height="1" transform="translate(0 1028.4)" width="4" x="6" y="18"/></g><path d="m5 1032.4c0 0.5 0.4477 1 1 1s1-0.5 1-1h-2zm4 0c0 0.5 0.4477 1 1 1 0.552 0 1-0.5 1-1h-2zm4 0c0 0.5 0.448 1 1 1s1-0.5 1-1h-2zm4 0c0 0.5 0.448 1 1 1s1-0.5 1-1h-2z" fill="#7f8c8d"/><path d="m3 1049.4v1c0 1.1 0.8954 2 2 2h14c1.105 0 2-0.9 2-2v-1c0 1.1-0.895 2-2 2h-14c-1.1046 0-2-0.9-2-2z" fill="#95a5a6"/><g transform="matrix(.70711 .70711 -.70711 .70711 773.22 370.4)"><path d="m-63 1003.4v11.3 0.7 1l2 2 2-2v-1-0.7-11.3h-4z" fill="#ecf0f1"/><path d="m-61 1003.4v15l2-2v-1-0.7-11.3h-2z" fill="#bdc3c7"/><rect fill="#e67e22" height="11" width="4" x="-63" y="1004.4"/><path d="m-61 1000.4c-1.105 0-2 0.9-2 2v1h4v-1c0-1.1-0.895-2-2-2z" fill="#7f8c8d"/><g transform="translate(-7,1)"><path d="m-55.406 1016 1.406 1.4 1.406-1.4h-1.406-1.406z" fill="#34495e"/><path d="m-54 1016v1.4l1.406-1.4h-1.406z" fill="#2c3e50"/></g><path d="m-61 1000.4c-1.105 0-2 0.9-2 2v1h2v-3z" fill="#95a5a6"/><rect fill="#d35400" height="11" width="2" x="-61" y="1004.4"/></g></g></svg>
|
||||
<svg height="496pt" viewBox="0 0 496 496" width="496pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="248" x2="248" y1="496" y2="0"><stop offset="0" stop-color="#9f2fff"/><stop offset="1" stop-color="#0bb1d3"/></linearGradient><path d="m452.152344 335.832031-100.152344-22.246093v-15.929688c15.230469-9.960938 27.160156-24.503906 33.886719-41.664062h22.113281c17.648438 0 32-14.351563 32-32v-56c0-11.792969-6.480469-22-16-27.550782v-34.984375c0-17.425781-10.414062-32.953125-26.238281-39.664062l-1.90625-3.816407c-19.0625-38.128906-57.390625-61.816406-100.023438-61.816406-61.664062.007813-111.832031 50.175782-111.832031 111.839844v28.449219c-9.519531 5.550781-16 15.757812-16 27.550781v56c0 17.648438 14.351562 32 32 32h22.113281c6.726563 17.160156 18.65625 31.703125 33.886719 41.664062v15.929688l-100.152344 22.246094c-25.816406 5.734375-43.847656 28.222656-43.847656 54.664062v105.496094h384v-105.496094c0-26.441406-18.03125-48.929687-43.847656-54.671875zm-93.273438-4.328125-11.886718 47.542969-30.441407-20.285156 30-30zm-40.007812 48.023438-5.117188 20.472656h-19.507812l-5.125-20.472656 14.878906-9.910156zm-46.871094-62.839844v-10.800781c9.9375 3.898437 20.703125 6.113281 32 6.113281s22.0625-2.214844 32-6.113281v10.800781l-32 32zm152-148.6875v56c0 8.824219-7.175781 16-16 16h-17.527344c.960938-5.199219 1.527344-10.527344 1.527344-16v-72h16c8.824219 0 16 7.175781 16 16zm-224 72c-8.824219 0-16-7.175781-16-16v-56c0-8.824219 7.175781-16 16-16h16v72c0 5.472656.566406 10.800781 1.527344 16zm16-128v24h-16v-24c0-52.839844 42.992188-95.832031 95.832031-95.832031 36.527344 0 69.375 20.296875 85.710938 52.976562l4.792969 9.566407 3.144531 1.050781c11.070312 3.695312 18.519531 14.023437 18.519531 25.710937v30.527344h-16v-24h-16v18.878906c-5.960938 3.050782-12.472656 4.761719-19.183594 5.007813 3.6875-3.359375 7.007813-7.183594 9.839844-11.445313l-13.3125-8.875c-8.222656 12.335938-21.800781 19.808594-36.542969 20.335938 3.695313-3.367188 7.015625-7.199219 9.855469-11.460938l-13.3125-8.875c-8.222656 12.335938-21.800781 19.808594-36.542969 20.335938 3.695313-3.367188 7.015625-7.199219 9.855469-11.460938l-13.3125-8.875c-8.527344 12.792969-22.808594 20.433594-38.183594 20.433594h-3.160156v-24zm16 112v-72h3.160156c10.230469 0 20.085938-2.527344 28.839844-7.136719v7.136719h11.160156c10.230469 0 20.085938-2.527344 28.839844-7.136719v7.136719h11.160156c10.230469 0 20.085938-2.527344 28.839844-7.136719v7.136719h11.160156c7.167969 0 14.175782-1.382812 20.839844-3.777344v75.777344c0 5.503906-.679688 10.847656-1.855469 16h-39.625c-3.3125-9.289062-12.113281-16-22.527343-16h-16c-13.230469 0-24 10.769531-24 24s10.769531 24 24 24h16c10.414062 0 19.214843-6.710938 22.527343-16h33.878907c-11.804688 23.664062-36.207032 40-64.398438 40-39.703125 0-72-32.296875-72-72zm88 24c0 4.40625-3.585938 8-8 8h-16c-4.414062 0-8-3.59375-8-8s3.585938-8 8-8h16c4.414062 0 8 3.59375 8 8zm-58.550781 80.761719 30 30-30.441407 20.285156-11.886718-47.542969zm3.992187 151.238281h-73.441406v-88h-16v88h-48v-89.496094c0-18.886718 12.878906-34.953125 31.320312-39.046875l74.183594-16.488281 17.488282 69.984375 24-16 4.808593 19.246094zm16.320313 0 12.796875-64h18.890625l12.796875 64zm198.238281 0h-48v-88h-16v88h-73.441406l-14.359375-71.800781 4.808593-19.246094 24 16 17.488282-69.984375 74.183594 16.488281c18.441406 4.09375 31.320312 20.160157 31.320312 39.046875zm-136-304c0-4.414062 3.585938-8 8-8s8 3.585938 8 8-3.585938 8-8 8-8-3.585938-8-8zm-80 0c0 4.414062-3.585938 8-8 8s-8-3.585938-8-8 3.585938-8 8-8 8 3.585938 8 8zm-152-128h-80v-16h80zm0 32h-80v-16h80zm8 61.480469v-29.480469h24v-112h-144v112h65.992188zm-104-125.480469h112v80h-24v18.519531l-33.929688-18.519531h-54.070312zm152 296v-16h-129.054688l9.054688-13.574219v-130.425781c0-13.230469-10.769531-24-24-24s-24 10.769531-24 24v130.425781l19.71875 29.574219zm-152-160c0-4.40625 3.585938-8 8-8s8 3.59375 8 8v16h-16zm0 32h16v93.574219l-8 12-8-12zm152 96h-16v-16h16zm-104-16h72v16h-72zm72-16h-72v-16h72zm0-32h-16v-16h16zm-32-16v16h-40v-16zm0 0" fill="url(#a)"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 724 B After Width: | Height: | Size: 6.1 KiB |
@ -4,7 +4,8 @@ import {
|
||||
} from 'reactstrap';
|
||||
|
||||
const style = {
|
||||
borderRadius: 20
|
||||
borderRadius: 20,
|
||||
backgroundImage: 'linear-gradient(to left, #0eaed3, #8346f6)'
|
||||
};
|
||||
|
||||
class Button extends Component {
|
||||
@ -20,12 +21,11 @@ class Button extends Component {
|
||||
onClick={this.props.onClick}
|
||||
tag={this.props.tag}
|
||||
to={this.props.to}
|
||||
color="primary"
|
||||
style={style}
|
||||
>
|
||||
{this.props.children}
|
||||
{this.props.children}
|
||||
</ButtonBootstrap>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,10 @@ const style = {
|
||||
borderRadius: 10
|
||||
};
|
||||
|
||||
const styleCardTitle = {
|
||||
fontWeight: '600'
|
||||
}
|
||||
|
||||
class Card extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -37,8 +41,8 @@ class Card extends Component {
|
||||
style={style}
|
||||
>
|
||||
<CardBody>
|
||||
<CardTitle>
|
||||
<h5 className={headAlign}>
|
||||
<CardTitle className={styleCardTitle}>
|
||||
<h5 style={styleCardTitle} className={headAlign}>
|
||||
{this.props.title}
|
||||
</h5>
|
||||
</CardTitle>
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
.custom-toggler .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(9,55,150, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
background: -webkit-linear-gradient(#0eaed3, #8346f6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
line-height: 0.8;
|
||||
}
|
||||
@ -10,22 +10,18 @@ import {
|
||||
NavItem
|
||||
} from 'reactstrap';
|
||||
|
||||
import { isLogin } from '../utils/auth';
|
||||
|
||||
import Button from '../components/Button';
|
||||
import './NavBar.css';
|
||||
import logo from '../assets/admin.svg';
|
||||
|
||||
const styleNavbarBrand = {
|
||||
fontWeight: 'bolder',
|
||||
fontSize: '25px'
|
||||
};
|
||||
|
||||
|
||||
class NavBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isOpen: false
|
||||
isOpen: false,
|
||||
};
|
||||
|
||||
// binding
|
||||
@ -57,8 +53,8 @@ class NavBar extends Component {
|
||||
>
|
||||
<Container>
|
||||
<NavbarBrand
|
||||
style={styleNavbarBrand}
|
||||
onClick={this.closeNavbar}
|
||||
className="title"
|
||||
tag={Link}
|
||||
to="/"
|
||||
>
|
||||
@ -77,13 +73,25 @@ class NavBar extends Component {
|
||||
|
||||
<Nav className="ml-auto" navbar>
|
||||
<NavItem>
|
||||
<Button
|
||||
onClick={this.closeNavbar}
|
||||
tag={Link}
|
||||
to="/login"
|
||||
>
|
||||
Login <img src={logo} alt="admin login"></img>
|
||||
</Button>
|
||||
{
|
||||
isLogin() ? (
|
||||
<Button
|
||||
onClick={this.closeNavbar}
|
||||
tag={Link}
|
||||
to="/logout"
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={this.closeNavbar}
|
||||
tag={Link}
|
||||
to="/login"
|
||||
>
|
||||
Login <img src={logo} alt="admin login"></img>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
|
||||
@ -11,7 +11,8 @@ import {
|
||||
} from 'reactstrap';
|
||||
|
||||
const style = {
|
||||
borderRadius: "0px 20px 20px 0px"
|
||||
borderRadius: "0px 20px 20px 0px",
|
||||
backgroundImage: 'linear-gradient(to left, #0eaed3, #8346f6)',
|
||||
}
|
||||
|
||||
class SearchForm extends Component {
|
||||
@ -38,8 +39,8 @@ class SearchForm extends Component {
|
||||
value={this.props.ticketId}
|
||||
/>
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button type="submit" color="primary" style={style}>
|
||||
{this.props.buttonName}</Button>
|
||||
<Button type="submit" style={style}>
|
||||
{this.props.buttonName}</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
|
||||
const tableKeyStyle = {
|
||||
width: '18%',
|
||||
|
||||
color: '#45474b'
|
||||
}
|
||||
|
||||
class Table extends Component {
|
||||
@ -22,54 +22,54 @@ class Table extends Component {
|
||||
let data = this.props.data;
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Row>
|
||||
<Col sm="12" md={{ size: 10, offset: 1 }}>
|
||||
<TableBootstrap id="table-ticket-info" className="bg-white">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2}>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">id:</td>
|
||||
<td className="text-left">{data.ticketId}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">status:</td>
|
||||
<td className="text-left">{data.status}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">created:</td>
|
||||
<td className="text-left">{data.createdAt}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">updated:</td>
|
||||
<td className="text-left">{data.updatedAt}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">created by:</td>
|
||||
<td className="text-left"><p>{`${data.firstName} ${data.lastName} (${data.email})`}</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">type:</td>
|
||||
<td className="text-left">{data.type}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">subject:</td>
|
||||
<td className="text-left">{data.subject}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">message:</td>
|
||||
<td className=" text-left">{data.message}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">note:</td>
|
||||
<td className="text-left">{data.note}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</TableBootstrap>
|
||||
<TableBootstrap id="table-ticket-info" className="bg-white">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2}>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">id:</td>
|
||||
<td className="text-left">{data.ticketId}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">status:</td>
|
||||
<td className="text-left">{data.status}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">created:</td>
|
||||
<td className="text-left">{data.createdAt}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">updated:</td>
|
||||
<td className="text-left">{data.updatedAt}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">created by:</td>
|
||||
<td className="text-left"><p>{`${data.firstName} ${data.lastName} (${data.email})`}</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">type:</td>
|
||||
<td className="text-left">{data.type}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">subject:</td>
|
||||
<td className="text-left">{data.subject}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">message:</td>
|
||||
<td className=" text-left">{data.message}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={tableKeyStyle} className="font-weight-bold text-right">note:</td>
|
||||
<td className="text-left">{data.note}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</TableBootstrap>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
Table
|
||||
} from 'reactstrap';
|
||||
|
||||
|
||||
import PaginationComponent from "react-reactstrap-pagination";
|
||||
|
||||
import { formatDate, decode } from '../../utils/helper';
|
||||
@ -17,6 +18,10 @@ import SearchForm from '../../components/SearchForm';
|
||||
import DropDown from '../../components/DropDown';
|
||||
|
||||
|
||||
const paginationStyle = {
|
||||
backgroundColor: '#8346f6',
|
||||
borderColor: '#8346f6'
|
||||
};
|
||||
class TicketList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -79,7 +84,7 @@ class TicketList extends Component {
|
||||
filterStatus(event) {
|
||||
const target = event.target;
|
||||
const value = target.value;
|
||||
|
||||
|
||||
this.setState({ selectedStatus: value })
|
||||
|
||||
getTickets(1, value)
|
||||
@ -88,11 +93,11 @@ class TicketList extends Component {
|
||||
}
|
||||
|
||||
handleSelected(selectedPage) {
|
||||
this.setState( { isLoading: true })
|
||||
this.setState({ isLoading: true })
|
||||
const selectedStatus = this.state.selectedStatus;
|
||||
getTickets(selectedPage, selectedStatus)
|
||||
.then((json) => {
|
||||
this.setState({ data: json.data, isLoading: false});
|
||||
this.setState({ data: json.data, isLoading: false });
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({ error, isLoading: false })
|
||||
@ -180,6 +185,7 @@ class TicketList extends Component {
|
||||
<Row>
|
||||
<Col>
|
||||
<PaginationComponent
|
||||
style={paginationStyle}
|
||||
totalItems={this.state.totalPages}
|
||||
pageSize={1}
|
||||
onSelect={this.handleSelected}
|
||||
|
||||
Reference in New Issue
Block a user