diff options
| -rw-r--r-- | public/logo.png | bin | 20852 -> 22751 bytes | |||
| -rw-r--r-- | src/App.js | 2 | ||||
| -rw-r--r-- | src/App.scss | 10 | ||||
| -rw-r--r-- | src/_colors.scss | 3 | ||||
| -rw-r--r-- | src/views/manage/manage.js | 60 | ||||
| -rw-r--r-- | src/views/manage/scss/management-page.scss | 40 |
6 files changed, 111 insertions, 4 deletions
diff --git a/public/logo.png b/public/logo.png Binary files differindex 8be973c..25200ed 100644 --- a/public/logo.png +++ b/public/logo.png @@ -19,6 +19,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import './App.scss'; import Navbar from './components/navbar/navbar'; import HomePage from './views/homepage'; +import ManagementPage from './views/manage/manage'; import ManageItemsPage from './views/manage/items'; import ManageClientsPage from './views/manage/clients'; import ManageBrandsPage from './views/manage/brands'; @@ -30,6 +31,7 @@ const App = () => { <main> <Routes> <Route exact path="/" element={<HomePage/>}/> + <Route exact path="/manage" element={<ManagementPage/>}/> <Route exact path="/manage/items" element={<ManageItemsPage/>}/> <Route exact path="/manage/clients" element={<ManageClientsPage/>}/> <Route exact path="/manage/brands" element={<ManageBrandsPage/>}/> diff --git a/src/App.scss b/src/App.scss index 6215663..23ee270 100644 --- a/src/App.scss +++ b/src/App.scss @@ -50,11 +50,13 @@ a { text-decoration: none; } +$selectionColor: rgba($primaryAccentColor, 0.9) + ::selection { - color: $fgColor; - background: $primaryAccentColor; + color: $darkgray; + background: $selectionColor; } ::-moz-selection { - color: $fgColor; - background: $primaryAccentColor; + color: $darkgray; + background: $selectionColor; } diff --git a/src/_colors.scss b/src/_colors.scss index 0eb1854..08a700c 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -20,10 +20,13 @@ $secondaryAccentColor: #d0afff; $backgroundColor: #282a36; $altBackgroundColor: #383a59; +//$altBackgroundColor: #282a36; +//$backgroundColor: #232627; $linkColor: $primaryAccentColor; $white: #f8f8f2; $gray: lightgray; +$darkgray: #232627; $black: black; $warningColor: #ed4683; diff --git a/src/views/manage/manage.js b/src/views/manage/manage.js new file mode 100644 index 0000000..293e69f --- /dev/null +++ b/src/views/manage/manage.js @@ -0,0 +1,60 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz> + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +import './scss/management-page.scss'; +import { Link } from 'react-router-dom'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faUser, faFileInvoice, faCartShopping, faIndustry } from '@fortawesome/free-solid-svg-icons' +const ManagementPage = () => { + + return ( + <> + <h1>Manage OpenBills Data</h1> + <p> + Here you can add/modify/delete OpenBills data (clients, invoices, etc) + </p> + <div className={"manage-links"}> + <Link to="/manage/items"> + <span className={"content"}> + <span className={"icon"}><FontAwesomeIcon icon={faCartShopping}/></span> + <span className={"text"}>Edit Items</span> + </span> + </Link> + <Link to="/manage/clients"> + <span className={"content"}> + <span className={"icon"}><FontAwesomeIcon icon={faUser}/></span> + <span className={"text"}>Edit Clients</span> + </span> + </Link> + <Link to="/manage/brands"> + <span className={"content"}> + <span className={"icon"}><FontAwesomeIcon icon={faIndustry}/></span> + <span className={"text"}>Edit Brands</span> + </span> + </Link> + <Link to="/manage/invoices"> + <span className={"content"}> + <span className={"icon"}><FontAwesomeIcon icon={faFileInvoice}/></span> + <span className={"text"}>Edit Invoices</span> + </span> + </Link> + </div> + </> + ); +} + +export default ManagementPage; diff --git a/src/views/manage/scss/management-page.scss b/src/views/manage/scss/management-page.scss index 656d224..f61b62d 100644 --- a/src/views/manage/scss/management-page.scss +++ b/src/views/manage/scss/management-page.scss @@ -22,3 +22,43 @@ hr { margin: 0.8rem auto 1rem auto; } + +.manage-links { + max-width: 40rem; + height: 25rem; + margin: 7rem auto auto auto; + + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + + a { + color: $fgColor; + height: 10rem; + width: 15rem; + border: 1px solid $secondaryAccentColor; + display: inline-block; + margin: 0; + transition: transform 0.2s, color 0.4s, border 0.2s; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + + .content { + display: flex; + flex-direction: column; + text-align: center; + margin-top: -0.8rem; + + .icon {font-size: 5rem;} + } + } + + a:hover { + transform: scale(1.05, 1.05); + color: $primaryAccentColor; + border: 1px solid $primaryAccentColor; + } +} |
