refactoring: refresh design

2025-06-05 22:19:18 +02:00 · 2019-07-30 19:09:56 +02:00
parent 5d42e01fcf
commit c00ae269f1
11 changed files with 134 additions and 84 deletions
--- 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;
+}
--- 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() {
    <div className="app">
      <Routes>
        <NavBar />
-        
+
        <Container>
          <Footer />
        </Container>
-       
+
      </Routes>
    </div>
  );
--- a/src/assets/assistance.svg
+++ b/src/assets/assistance.svg
@@ -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>
--- a/src/assets/ticket.svg
+++ b/src/assets/ticket.svg
--- 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}
      </ButtonBootstrap>
-      
+
    );
  }
 }
--- 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}
      >
        <CardBody>
-          <CardTitle>
-            <h5 className={headAlign}>
+          <CardTitle className={styleCardTitle}>
+            <h5 style={styleCardTitle} className={headAlign}>
              {this.props.title}
            </h5>
          </CardTitle>
--- 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");
-} 
+} 
+
+.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;
+}
--- 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 {
      >
        <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>
--- 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}
                  />
                  <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>
--- 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 (
-        <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>
    );
--- 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 {
        <Row>
          <Col>
            <PaginationComponent
+              style={paginationStyle}
              totalItems={this.state.totalPages}
              pageSize={1}
              onSelect={this.handleSelected}