Refactor styling of multiple screens and NavBar

-  Add the title to the navbar
- Add react-helmet and Title component to help change tab/page title
- Improve layout of Schedule screen
- Add a "clear selection" button to Schedule screen
- Improve readability of forms

src/components/General/TimezonePicker.js

@@ -9,10 +9,10 @@ export default function TimezonePicker() {
 		<InputPicker
 			data={timezones}
 			// cleanable={false}
-			style={{ width: 320 }}
+			style={{ width: "100%" }}
 			labelKey='timezone'
 			groupBy='area'
-			placeholder='Type to search and select your timezone'
+			placeholder='type to search your timezone'
 			onSelect={(value, item, event) => setTimezone(item.timezone)}
 			onClean={(event) => setTimezone('')}
 			value={timezone}

src/components/General/Title.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+export default function TitleComponent({ title }) {
+	var defaultTitle = 'Meeting Planner';
+	return (
+		<Helmet>
+			<title>{title ? `${title} | Meeting Planner` : defaultTitle}</title>
+		</Helmet>
+	);
+}

src/components/Navbar/NavBar.js

@@ -1,17 +1,28 @@
 import React from 'react';
 
-import { Header, Navbar } from 'rsuite';
+import { Header, Navbar, Nav } from 'rsuite';
 import MenuDropdown from './MenuDropdown';
+import Title from './../General/Title';
 
-const headerStyle = {
-	borderRadius: '7px 7px 0 0',
-};
-
-export default function NavBar() {
+export default function NavBar({ title }) {
 	return (
 		<Header>
-			<Navbar appearance='inverse' style={headerStyle}>
-				<Navbar.Body>
+			<Title title={title} />
+			<Navbar appearance='inverse' >
+				<Navbar.Body
+					style={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+					}}
+				>
+					<Nav style={{ visibility: 'hidden' }}>
+						{/* This hidden nav is a hack to have the title perfectly centered. */}
+						<MenuDropdown  />
+					</Nav>
+					<div>
+						<h3>{title}</h3>
+					</div>
 					<MenuDropdown />
 				</Navbar.Body>
 			</Navbar>

src/components/Schedule/DaySelector.js

@@ -3,13 +3,17 @@ import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interaction from '@fullcalendar/interaction';
 
+import './DaySelector.less';
+
 export default function DaySelector({ eventsList, handleSelect, handleClear }) {
 	return (
 		<FullCalendar
-			initialView='dayGridMonth'
 			plugins={[dayGridPlugin, interaction]}
+			initialView='dayGridMonth'
+			// showNonCurrentDates={false}
 			selectable={true}
-			unselectAuto={false}
+			// unselectAuto={false}
+			longPressDelay={150}
 			select={(info) => handleSelect(info)}
 			defaultAllDay={true}
 			events={eventsList}

src/components/Schedule/DaySelector.less

@@ -0,0 +1,3 @@
+.fc-view-harness {
+    padding-bottom: 100% !important
+}

src/components/Schedule/SelectedDates.js

@@ -5,7 +5,6 @@ import { Divider, Icon, IconButton } from 'rsuite';
 export default function SelectedDates({ datesList, handleDelete }) {
 	return (
 		<>
-			<h3>Dates selected</h3>
 			<ul>
 				{datesList.map((date) => (
 					<li key={date}>