Use Row and Col from bootstrap to style forms

cubasve · Dec 3, 2021 · 819af08 · 819af08
1 parent 5b33905
commit 819af08
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 50 deletions.
diff --git a/src/components/Assets/Assets.jsx b/src/components/Assets/Assets.jsx
@@ -22,7 +22,7 @@ const popover = (
 const AssetPopover = () => (
 	<OverlayTrigger trigger="click" placement="top" overlay={popover}>
 		<Button variant="info" size="sm" style={{ borderRadius: 50 }}>
-			<InfoLg />
+			<InfoLg color="white" />
 		</Button>
 	</OverlayTrigger>
 );

diff --git a/src/components/BadDebt/BadDebt.jsx b/src/components/BadDebt/BadDebt.jsx
@@ -28,7 +28,7 @@ const popover = (
 const BadDebtPopover = () => (
 	<OverlayTrigger trigger="click" placement="top" overlay={popover}>
 		<Button variant="info" size="sm" style={{ borderRadius: 50 }}>
-			<InfoLg />
+			<InfoLg color="white" />
 		</Button>
 	</OverlayTrigger>
 );

diff --git a/src/components/EarnedIncome/EarnedIncome.jsx b/src/components/EarnedIncome/EarnedIncome.jsx
@@ -40,11 +40,11 @@ export default function EarnedIncome() {
 					Earned
 					<Badge
 						pill
-						bg="primary"
 						style={{
-							fontSize: 12,
+							backgroundColor: "red",
+							fontSize: 11,
 							position: "absolute",
-							backgroundColor: "yellow",
+							borderRadius: 50,
 						}}
 					>
 						{calculatePercentage(totalIncomeAmount, totalEarnedIncomeAmount)}%

diff --git a/src/components/GoodDebt/GoodDebt.jsx b/src/components/GoodDebt/GoodDebt.jsx
@@ -28,7 +28,7 @@ const popover = (
 const GoodDebtPopover = () => (
 	<OverlayTrigger trigger="click" placement="top" overlay={popover}>
 		<Button variant="info" size="sm" style={{ borderRadius: 50 }}>
-			<InfoLg />
+			<InfoLg color="white" />
 		</Button>
 	</OverlayTrigger>
 );

diff --git a/src/components/Liabilities/Liabilities.jsx b/src/components/Liabilities/Liabilities.jsx
@@ -20,7 +20,7 @@ const popover = (
 const LiabilityPopover = () => (
 	<OverlayTrigger trigger="click" placement="top" overlay={popover}>
 		<Button variant="info" size="sm" style={{ borderRadius: 50 }}>
-			<InfoLg />
+			<InfoLg color="white" />
 		</Button>
 	</OverlayTrigger>
 );

diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -42,21 +42,16 @@ export default function NavBar({ handleLogout, user }) {
 	return (
 		<div className="NavBar">
 			<Navbar expand="lg" bg="dark" variant="dark" fixed="top">
-				<Navbar.Brand href="/" className="NavBar-link">
+				<Navbar.Brand href={user ? "/overview" : "/"} className="NavBar-link">
 					FINESSE
 				</Navbar.Brand>
 				<Navbar.Toggle aria-controls="responsive-navbar-nav" />
 				<Navbar.Collapse id="responsive-navbar-nav">
 					<Nav className="me-auto">
 						{user && (
-							<>
-								<Nav.Link className="NavBar-link" href="/financialstatement">
-									{user.name}'s Financial Statement
-								</Nav.Link>
-								<Nav.Link className="NavBar-link" href="/overview">
-									Overview
-								</Nav.Link>
-							</>
+							<Nav.Link className="NavBar-link" href="/financialstatement">
+								{user.name}'s Financial Statement
+							</Nav.Link>
 						)}
 					</Nav>
 					{nav}

diff --git a/src/components/PayYourselfFirst/PayYourselfFirst.jsx b/src/components/PayYourselfFirst/PayYourselfFirst.jsx
@@ -26,7 +26,7 @@ const popover = (
 const PayYourselfPopover = () => (
 	<OverlayTrigger trigger="click" placement="top" overlay={popover}>
 		<Button variant="info" size="sm" style={{ borderRadius: 50 }}>
-			<InfoLg />
+			<InfoLg color="white" />
 		</Button>
 	</OverlayTrigger>
 );

diff --git a/src/components/common/EntityTable.jsx b/src/components/common/EntityTable.jsx
@@ -9,6 +9,7 @@ import {
 	Form,
 	Modal,
 	Table,
+	Row,
 } from "react-bootstrap";
 import { formatAmount, formatEntry } from "../../utils/calculations";
 import { Pencil, Trash, XLg /* FileEarmark */ } from "react-bootstrap-icons";
@@ -44,8 +45,8 @@ export default function EntityTable(props) {
 						{editing && _id === selected ? (
 							<td>
 								<Form onSubmit={handleUpdateSubmit}>
-									<Form.Row>
-										<Form.Group as={Col} xs="1">
+									<Row>
+										<Form.Group as={Col} xs="1" style={{ marginRight: 3 }}>
 											<Button
 												variant="success"
 												size="sm"
@@ -97,7 +98,7 @@ export default function EntityTable(props) {
 											/>
 											<Form.Text muted>Amount</Form.Text>
 										</Form.Group>
-									</Form.Row>
+									</Row>
 								</Form>
 							</td>
 						) : (

diff --git a/src/components/common/FormInput.jsx b/src/components/common/FormInput.jsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { Button, Form } from "react-bootstrap";
-
+import { Button, Col, Form, Row } from "react-bootstrap";
 export default function FormInput(props) {
 	const {
 		formRef,
@@ -12,25 +11,27 @@ export default function FormInput(props) {
 		formInvalid,
 	} = props;
 	return (
-		<Form ref={formRef} onSubmit={handleSubmit}>
-			<Form.Row>
-				<Form.Group>
-					<Form.Control
-						name="type"
-						value={newEntity.type}
-						onChange={handleChange}
-						as="select"
-						size="sm"
-						className="select"
-					>
-						{options.map((option) => (
-							<option key={option} value={option}>
-								{option}
-							</option>
-						))}
-					</Form.Control>
-				</Form.Group>
-				<Form.Group>
+		<Form ref={formRef} onSubmit={handleSubmit} style={{ marginBottom: 5 }}>
+			<Row>
+				<Col>
+					<Form.Group as={Col} style={{ padding: 0 }}>
+						<Form.Control
+							name="type"
+							value={newEntity.type}
+							onChange={handleChange}
+							as="select"
+							size="sm"
+						>
+							{options.map((option) => (
+								<option key={option} value={option}>
+									{option}
+								</option>
+							))}
+						</Form.Control>
+					</Form.Group>
+				</Col>
+
+				<Form.Group as={Col} xs={5} style={{ padding: 0 }}>
 					<Form.Control
 						name="amount"
 						value={newEntity.amount}
@@ -42,13 +43,7 @@ export default function FormInput(props) {
 						size="sm"
 					/>
 				</Form.Group>
-				<Form.Group>
-					{/* <Form.Control
-						type="hidden"
-						name="class"
-						value={newEntity.class}
-						onChange={handleChange}
-					/> */}
+				<Form.Group as={Col} xs={2} style={{ padding: 0 }}>
 					<Form.Control
 						type="hidden"
 						name="category"
@@ -64,7 +59,7 @@ export default function FormInput(props) {
 						ADD
 					</Button>
 				</Form.Group>
-			</Form.Row>
+			</Row>
 		</Form>
 	);
 }
diff --git a/src/pages/OverviewPage/OverviewPage.jsx b/src/pages/OverviewPage/OverviewPage.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import BarChart from "../../components/common/BarChart";
-import { Card, Tabs, Tab, Accordion } from "react-bootstrap";
+import { Card, Tabs, Tab } from "react-bootstrap";
 import userService from "../../utils/userService";
 
 export default function OverviewPage() {