From e5c1454c091cb4101664d1bfa0e766ab37e9879a Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Sat, 1 Oct 2022 22:13:51 +0530 Subject: created a navbar --- public/logo.png | Bin 0 -> 20852 bytes src/App.js | 6 ++- src/App.scss | 11 +++- src/_colors.scss | 1 + src/components/navbar/navbar.js | 86 ++++++++++++++++++++++++++++++++ src/components/navbar/navbar.scss | 59 ++++++++++++++++++++++ src/components/tables/scss/_colors.scss | 2 + src/components/tables/scss/table.scss | 6 ++- src/views/homepage.js | 27 ++++++++++ src/views/new-invoice.js | 33 ------------ 10 files changed, 194 insertions(+), 37 deletions(-) create mode 100644 public/logo.png create mode 100644 src/components/navbar/navbar.js create mode 100644 src/components/navbar/navbar.scss create mode 100644 src/views/homepage.js delete mode 100644 src/views/new-invoice.js diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..8be973c Binary files /dev/null and b/public/logo.png differ diff --git a/src/App.js b/src/App.js index 6e90a3d..7ea7ca9 100644 --- a/src/App.js +++ b/src/App.js @@ -15,8 +15,10 @@ * along with this program. If not, see . */ -import './App.scss'; import { BrowserRouter, Route, Routes } from "react-router-dom"; +import './App.scss'; +import Navbar from './components/navbar/navbar'; +import HomePage from './views/homepage'; import ManageItemsPage from './views/manage/items'; import ManageClientsPage from './views/manage/clients'; import ManageBrandsPage from './views/manage/brands'; @@ -24,8 +26,10 @@ import ManageBrandsPage from './views/manage/brands'; const App = () => { return ( +
+ }/> }/> }/> }/> diff --git a/src/App.scss b/src/App.scss index b4fc72f..6215663 100644 --- a/src/App.scss +++ b/src/App.scss @@ -35,7 +35,7 @@ main { width: 100%; max-width: 1500px; margin: 0 auto; - min-height: 100vh; + min-height: calc(100vh - 4rem); padding: 0.7rem 0.5rem; box-sizing: border-box; } @@ -49,3 +49,12 @@ a { color: $linkColor; text-decoration: none; } + +::selection { + color: $fgColor; + background: $primaryAccentColor; +} +::-moz-selection { + color: $fgColor; + background: $primaryAccentColor; +} diff --git a/src/_colors.scss b/src/_colors.scss index ced67aa..0eb1854 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -19,6 +19,7 @@ $primaryAccentColor: #bd93f9; $secondaryAccentColor: #d0afff; $backgroundColor: #282a36; +$altBackgroundColor: #383a59; $linkColor: $primaryAccentColor; $white: #f8f8f2; diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js new file mode 100644 index 0000000..79a02e4 --- /dev/null +++ b/src/components/navbar/navbar.js @@ -0,0 +1,86 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * 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 . + */ + +import './navbar.scss'; +import { useLocation, Link } from 'react-router-dom'; +import { useState, useEffect } from 'react'; + +const Navbar = () => { + const [status, setStatus] = useState(""); + const location = useLocation().pathname; + + useEffect(() => { + if (location.includes("/manage")) { + switch (location) { + case "/manage/items": + setStatus("Manage Saved Items") + break; + case "/manage/clients": + setStatus("Manage Saved Clients") + break; + case "/manage/brands": + setStatus("Manage Saved Brands") + break; + default: + setStatus("Manage Data") + break; + } + } else { + if (location === "/") { + setStatus("Welcome To OpenBills") + } + } + + }, [location]) + + // TODO: add manage invoices page + const manageLinks = [ + {text: "Edit Items", to: "/manage/items"}, + {text: "Edit Clients", to: "/manage/clients"}, + {text: "Edit Brands", to: "/manage/brands"} + ]; + + return ( +
+ + + + + + +

+ {status} +

+ + + {location.includes("/manage") && + manageLinks.map((i, id) => + + {i.text} + + )} + {location !== "/" && + + Home + + } + +
+ ); +} + +export default Navbar; diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss new file mode 100644 index 0000000..8173249 --- /dev/null +++ b/src/components/navbar/navbar.scss @@ -0,0 +1,59 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * 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 . + */ + +@import "../../colors"; + +.navbar { + height: 4rem; + width: 100%; + box-sizing: border-box; + background-color: rgba($altBackgroundColor, 1); + position: relative; + + padding-left: 0.5rem; + padding-right: 0.5rem; + + display: flex; + align-items: center; + justify-content: space-between; + + .buttons { + flex: 1; + display: flex; + justify-content: right; + a { + margin-left: 0.3rem; + margin-right: 0.3rem; + color: $fgColor; + } + a.current { + color: $linkColor; + } + } + + .status { + flex: 2; + text-align: center; + } + + .logo { + flex: 1; + img { + height: 4rem; + } + } +} diff --git a/src/components/tables/scss/_colors.scss b/src/components/tables/scss/_colors.scss index 2a3725c..7077b62 100644 --- a/src/components/tables/scss/_colors.scss +++ b/src/components/tables/scss/_colors.scss @@ -28,6 +28,8 @@ $fgColorDisabled: $disabledColor; $inputBackgroundColor: $backgroundColor; +$thColor: $altBackgroundColor; + $warningColor: $warningColor; @mixin button { diff --git a/src/components/tables/scss/table.scss b/src/components/tables/scss/table.scss index d9be7c8..13e247a 100644 --- a/src/components/tables/scss/table.scss +++ b/src/components/tables/scss/table.scss @@ -15,20 +15,22 @@ * along with this program. If not, see . */ +@import "colors"; + table { width: 90%; margin: auto; th { box-sizing: border-box; - background-color: #383a59; + background-color: $thColor; font-weight: normal; text-align: left; padding-left: 0.3rem; } tr:hover { - background-color: rgba(#383a59, 0.4); + background-color: rgba($thColor, 0.4); } td { diff --git a/src/views/homepage.js b/src/views/homepage.js new file mode 100644 index 0000000..fe32136 --- /dev/null +++ b/src/views/homepage.js @@ -0,0 +1,27 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * 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 . + */ + +const HomePage = () => { + return ( + <> +

Welcome to OpenBills

+

Check out /manage

+ + ); +} + +export default HomePage; diff --git a/src/views/new-invoice.js b/src/views/new-invoice.js deleted file mode 100644 index bba149a..0000000 --- a/src/views/new-invoice.js +++ /dev/null @@ -1,33 +0,0 @@ -/* OpenBills-web - Web based libre billing software - * Copyright (C) 2022 Vidhu Kant Sharma - - * 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 . - */ - -import NewBrand from './../components/doc-editors/new-brand'; -import ItemEditor from './../components/doc-editors/item-editor'; - -const NewInvoicePage = () => { - return ( - <> -

Billing Page

-

Add new brand:

- -

Add new item:

- - - ); -} - -export default NewInvoicePage; -- cgit v1.2.3