diff --git a/src/App.css b/src/App.css index a4103ad..84663f0 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 5716409..6f970a0 100644 --- a/src/App.js +++ b/src/App.js @@ -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() {
- +
); diff --git a/src/assets/assistance.svg b/src/assets/assistance.svg index 16fa2cf..b371af4 100644 --- a/src/assets/assistance.svg +++ b/src/assets/assistance.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/ticket.svg b/src/assets/ticket.svg index 3102d23..abd2057 100644 --- a/src/assets/ticket.svg +++ b/src/assets/ticket.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Button.js b/src/components/Button.js index 93dd9a3..a0bb2a5 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -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} - + ); } } diff --git a/src/components/Card.js b/src/components/Card.js index 6b4e895..d23d137 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -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} > - -
+ +
{this.props.title}
diff --git a/src/components/NavBar.css b/src/components/NavBar.css index d986e06..5f64ecd 100644 --- a/src/components/NavBar.css +++ b/src/components/NavBar.css @@ -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"); -} \ No newline at end of file +} + +.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; +} \ No newline at end of file diff --git a/src/components/NavBar.js b/src/components/NavBar.js index dff4967..d76ec4f 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -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 { > @@ -77,13 +73,25 @@ class NavBar extends Component { diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js index 45f5b9b..ed12c62 100644 --- a/src/components/SearchForm.js +++ b/src/components/SearchForm.js @@ -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} /> - + diff --git a/src/components/Table.js b/src/components/Table.js index 36aa7f6..7748a05 100644 --- a/src/components/Table.js +++ b/src/components/Table.js @@ -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 ( - + - - - - Details - - - - - id: - {data.ticketId} - - - status: - {data.status} - - - created: - {data.createdAt} - - - - updated: - {data.updatedAt} - - - created by: -

{`${data.firstName} ${data.lastName} (${data.email})`}

- - - type: - {data.type} - - - subject: - {data.subject} - - - message: - {data.message} - - - note: - {data.note} - - - + + + + Details + + + + + id: + {data.ticketId} + + + status: + {data.status} + + + created: + {data.createdAt} + + + + updated: + {data.updatedAt} + + + created by: +

{`${data.firstName} ${data.lastName} (${data.email})`}

+ + + type: + {data.type} + + + subject: + {data.subject} + + + message: + {data.message} + + + note: + {data.note} + + + ); diff --git a/src/containers/Administration/TicketList.js b/src/containers/Administration/TicketList.js index f410d76..8ee486d 100644 --- a/src/containers/Administration/TicketList.js +++ b/src/containers/Administration/TicketList.js @@ -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 {