Feature/update styling

client/src/Components/Footer.js

@@ -15,6 +15,7 @@ const Footer = ({ aboutlink }) => {
 						textDecoration: "none",
 						marginLeft: "2%",
 						display: aboutlink,
+						fontFamily: "Lato",
 					}}
 				>
 					About

client/src/Components/Header.js

@@ -11,7 +11,12 @@ const Header = ({ user, text, homebutton, historybutton }) => {
 					<img src={logo} alt="logo" style={{ width: "100%" }} />
 				</Col>
 				<Col>
-					<h3 className="text-center font-weight-bold text-danger">TOOT</h3>
+					<h2
+						className="text-center fw-bold text-danger"
+						style={{ fontFamily: "Lato" }}
+					>
+						TOOT
+					</h2>
 				</Col>
 				<Col
 					xs={4}
@@ -42,7 +47,7 @@ const Header = ({ user, text, homebutton, historybutton }) => {
 			>
 				<Col></Col>
 				<Col>
-					<h6>{text}</h6>
+					<h6 style={{ fontFamily: "Lato" }}>{text}</h6>
 				</Col>
 				<Col
 					xs={4}
@@ -55,14 +60,18 @@ const Header = ({ user, text, homebutton, historybutton }) => {
 					<Button
 						href="/"
 						variant="danger"
-						style={{ width: "100px", display: homebutton }}
+						style={{ width: "100px", display: homebutton, fontFamily: "Lato" }}
 					>
 						Home
 					</Button>
 					<Button
 						href="history"
 						variant="danger"
-						style={{ width: "100px", display: historybutton }}
+						style={{
+							width: "100px",
+							display: historybutton,
+							fontFamily: "Lato",
+						}}
 					>
 						History
 					</Button>

client/src/Components/LandingContent.js

@@ -25,8 +25,12 @@ const LandingContent = () => {
 			>
 				<Card.Img src={TeamLogo} style={{ width: "40%" }} />
 				<Card.Body>
-					<Card.Title style={{ marginTop: "10%" }}>Welcome to TOOT</Card.Title>
-					<Card.Text>
+					<Card.Title
+						style={{ marginTop: "10%", fontFamily: "Lato", fontWeight: "bold" }}
+					>
+						Welcome to TOOT
+					</Card.Title>
+					<Card.Text style={{ fontFamily: "Lato" }}>
 						Log in with your GitHub account to <br /> continue
 					</Card.Text>
 					<Button
@@ -40,7 +44,11 @@ const LandingContent = () => {
 						<img
 							src={gitIcon}
 							alt="Icon"
-							style={{ height: "50px", borderRadius: "7px" }}
+							style={{
+								height: "50px",
+								borderRadius: "7px",
+								boxShadow: "0px 5px 10px grey",
+							}}
 						/>
 						{/* Log in with GitHub */}
 					</Button>

client/src/Components/MainContent.js

@@ -10,7 +10,7 @@ const MainContent = ({ user }) => {
 	const [content, setContent] = useState(""); //use state to hold the content of the input
 	const [response, setResponse] = useState(""); //use state for showing the result data from fetch
 	const [synth, setSynth] = useState(null); //SPEECH OUTPUT FEATURE
-	const [speechToggle, SetSpeechToggle] = useState(0);
+	const [speechToggle, SetSpeechToggle] = useState(1);
 	const [timeOutId, SetTimeOutId] = useState(null);
 	// const [speechIcon, SetSpeechIcon] = useState("bi bi-pause-circle-fill");
 	const [isIconPaused, setIsIconPaused] = useState(false);
@@ -185,15 +185,16 @@ const MainContent = ({ user }) => {
 			<Row>
 				<Col>
 					<Card>
-						<Card.Body>
+						<Card.Body style={{ boxShadow: "0px 8px 10px lightgrey" }}>
 							<Form onSubmit={onSubmit} onReset={onReset}>
 								<Form.Group controlId="exampleForm.ControlTextarea1">
 									<Form.Control
 										as="textarea"
 										rows={10}
-										placeholder="write your message here"
+										placeholder="Write your text here..."
 										value={content}
 										onChange={(e) => setContent(e.target.value)}
+										style={{ boxShadow: "0px 5px 10px grey" }}
 									/>
 								</Form.Group>
 								<Row
@@ -203,17 +204,23 @@ const MainContent = ({ user }) => {
 									style={{ marginTop: "3%", marginRight: "1%" }}
 								>
 									<Button
+										title="Remove all Text"
 										type="reset"
 										variant="danger"
 										className="ms-auto"
-										style={{ width: "100px" }}
+										style={{ width: "100px", boxShadow: "0px 5px 10px grey" }}
 									>
 										CLEAR
 									</Button>
 									<Button
+										title="Generate your Text"
 										type="submit"
 										variant="danger"
-										style={{ width: "100px", marginLeft: "2%" }}
+										style={{
+											width: "100px",
+											marginLeft: "2%",
+											boxShadow: "0px 5px 10px grey",
+										}}
 									>
 										CHECK
 									</Button>
@@ -251,16 +258,17 @@ const MainContent = ({ user }) => {
 				</Col>
 				<Col>
 					<Card>
-						<Card.Body>
+						<Card.Body style={{ boxShadow: "0px 8px 10px lightgrey" }}>
 							<Form>
 								<Form.Group controlId="exampleForm.ControlTextarea2">
 									{/* <Form.Label>Textarea 2</Form.Label> */}
 									<Form.Control
 										as="textarea"
 										rows={10}
-										placeholder="Suggestions..."
+										placeholder="View suggestions here..."
 										value={response}
 										readOnly={true}
+										style={{ boxShadow: "0px 5px 10px grey" }}
 									/>
 								</Form.Group>
 								<Row
@@ -271,9 +279,10 @@ const MainContent = ({ user }) => {
 								>
 									<Button
 										onClick={handleSpeak}
+										title="Hear your Suggestions"
 										variant="danger"
 										// className="ms-auto"
-										style={{ width: "50px" }}
+										style={{ width: "50px", boxShadow: "0px 5px 10px grey" }}
 									>
 										{isIconPaused ? (
 											<svg
@@ -313,14 +322,20 @@ const MainContent = ({ user }) => {
 									<Button
 										variant="danger"
 										className="ms-auto"
-										style={{ width: "100px" }}
+										style={{ width: "100px", boxShadow: "0px 5px 10px grey" }}
 										onClick={saveHandler}
+										title="Save in History"
 									>
 										SAVE
 									</Button>
 									<Button
+										title="Copy to Clipboard"
 										variant="danger"
-										style={{ width: "100px", marginLeft: "2%" }}
+										style={{
+											width: "100px",
+											marginLeft: "2%",
+											boxShadow: "0px 5px 10px grey",
+										}}
 									>
 										COPY
 									</Button>

client/src/Components/ProfileIcon.js

@@ -21,7 +21,12 @@ const ProfileIcon = ({ user }) => {
 					crossOrigin="anonymous"
 					src={user ? user.avatar : icon}
 					alt="Icon"
-					style={{ width: "35px", height: "35px", borderRadius: "100%" }}
+					style={{
+						width: "35px",
+						height: "35px",
+						borderRadius: "100%",
+						boxShadow: "0px 8px 10px lightgrey",
+					}}
 				/>
 			</Button>
 
@@ -39,7 +44,12 @@ const ProfileIcon = ({ user }) => {
 				</Modal.Header>
 				<Modal.Body>
 					{user ? (
-						<Button type="submit" onClick={logout}>
+						<Button
+							type="submit"
+							onClick={logout}
+							variant="dark"
+							style={{ width: "100px" }}
+						>
 							Sign Out
 						</Button>
 					) : null}

client/src/index.html

@@ -11,6 +11,14 @@
 			integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
 			crossorigin="anonymous"
 		/>
+		<!-- import lato font -->
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Lato&display=swap"
+			rel="stylesheet"
+		/>
+		<!-- import lato font -->
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

client/src/pages/History.js

@@ -80,20 +80,31 @@ const History = ({ user }) => {
 				centered
 			>
 				{/* modal is pop up */}
-				<Modal.Header closeButton>
-					<Modal.Title id="contained-modal-title-vcenter">
-						Modal heading
+				<Modal.Header closeButton style={{ boxShadow: "0px 5px 10px grey " }}>
+					<Modal.Title
+						id="contained-modal-title-vcenter"
+						style={{ fontFamily: "Lato", fontWeight: "bold" }}
+					>
+						Saved Suggestion
 					</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-					<h4>Input Text</h4>
-					<p>{item.input}</p>
+					<h5 style={{ fontFamily: "Lato", fontWeight: "bold" }}>Input Text</h5>
+					<p style={{ fontFamily: "Lato" }}>{item.input}</p>
 					<hr />
-					<h4>Output Text</h4>
-					<p>{item.output}</p>
+					<h5 style={{ fontFamily: "Lato", fontWeight: "bold" }}>
+						Output Text
+					</h5>
+					<p style={{ fontFamily: "Lato" }}>{item.output}</p>
 				</Modal.Body>
 				<Modal.Footer>
-					<Button onClick={props.onHide}>Close</Button>
+					<Button
+						onClick={props.onHide}
+						variant="danger"
+						style={{ boxShadow: "0px 5px 10px grey ", width: "100px" }}
+					>
+						Close
+					</Button>
 				</Modal.Footer>
 			</Modal>
 		);
@@ -115,8 +126,8 @@ const History = ({ user }) => {
 					className="m-0 my-5 d-flex justify-content-center"
 					style={{ backgroundColor: "#f2eff0" }}
 				>
-					<div className="p-5 text-white d-block bg-danger">
-						<h1>History</h1>
+					<div className="px-5 p-2 text-white d-block bg-danger">
+						<h3 style={{ fontFamily: "Lato" }}>History</h3>
 					</div>
 					<div
 						className="p-5 d-flex justify-content-between flex-sm-row flex-column align-items-center gap-2 "
@@ -133,6 +144,7 @@ const History = ({ user }) => {
 									backgroundColor: "#ee4344",
 									borderTopLeftRadius: "8px",
 									borderBottomLeftRadius: "8px",
+									boxShadow: "0px 5px 10px grey",
 								}}
 							>
 								<BsTrash2 />
@@ -142,7 +154,7 @@ const History = ({ user }) => {
 								onChange={(e) => setSearch(e.target.value)}
 								className="h3 py-1 px-3 border-0 "
 								type="text"
-								style={{ maxWidth: "200px" }}
+								style={{ maxWidth: "200px", boxShadow: "0px 5px 10px grey" }}
 							/>
 						</form>
 						<div className="d-flex">
@@ -177,25 +189,37 @@ const History = ({ user }) => {
 										display: "block",
 										width: "100%",
 										textAlign: "start",
+										boxShadow: "0px 5px 10px grey",
 									}}
 									className="h6 list-unstyled border p-1 mb-2 rounded-1"
 								>
 									<div className="d-flex justify-content-between w-100">
 										<p
-											className="m-0 fs-5 w-50"
-											style={{ paddingRight: "30px" }}
+											className="m-4 fs-5 w-50"
+											style={{
+												paddingRight: "30px",
+												fontFamily: "Lato",
+												fontWeight: "550",
+											}}
 										>
 											{excerpt(item.input)}
 										</p>
 										<p
-											className="m-0 fs-5 w-50 "
-											style={{ paddingRight: "30px" }}
+											className="m-4 fs-5 w-50 "
+											style={{
+												paddingRight: "30px",
+												fontFamily: "Lato",
+												fontWeight: "500",
+											}}
 										>
 											{excerpt(item.output)}
 										</p>
 									</div>
 									<div className="d-flex justify-content-end align-items-center w-100">
-										<span className="fs-6 mx-2">
+										<span
+											className="fs-6 mx-2"
+											style={{ fontWeight: "bold", fontFamily: "Lato" }}
+										>
 											{new Date(
 												"2023-05-11 09:26:06.587153+00"
 											).toLocaleString()}

cypress/e2e/landing.spec.cy.js

@@ -13,6 +13,6 @@ describe("landing page", () => {
 	it("logins via github", () => {
 		cy.visit("http://localhost:3000/api/auth/github/callback");
 		cy.get(".github-login-button").should("not.exist");
-		cy.get(".navbar-github-username").should("contain", "test-accuser");
+		cy.get(".navbar-github-username").should("contain", "test-user");
 	});
 });

server/api.js

@@ -58,24 +58,24 @@ router.get(
 
 // CYPRESS TEST LOGIN FUNCTION
 // router.get("/auth/github/callback", function (req, res, next) {
-// 	// if (process.env.CYPRESS_TEST) {
-// 	// 	const fakeUser = {
-// 	// 		username: "test-user",
-// 	// 		id: "123",
-// 	// 		avatar: "https://avatars.githubusercontent.com/u/3519251?v=4",
-// 	// 	};
-// 	// 	req.session.user = fakeUser;
-// 	// 	res.redirect("/");
-
-// 	// } else {
+// 	if (process.env.CYPRESS_TEST) {
+// 		const fakeUser = {
+// 			username: "test-user",
+// 			id: "123",
+// 			avatar: "https://avatars.githubusercontent.com/u/3519251?v=4",
+// 		};
+// 		req.session.user = fakeUser;
+// 		res.redirect("/");
+
+// 	} else {
 // 		passport.authenticate("github", function (err, user) {
 // 			req.session.user = user;
 // 			if (err) {
 // 				return next(err);
 // 			}
 // 			res.redirect("/");
 // 		})(req, res, next);
-// 	// }
+// 	}
 // });
 // CYPRESS TEST LOGIN FUNCTION