Add some basic styling

Author: Mr0grog

src/components/search-bar/search-bar.css

@@ -2,11 +2,12 @@
   border-bottom: 1px solid var(--default-border);
   margin-bottom: 0.5em;
   display: flex;
+  font-size: 1.25em;
+  line-height: 2.15;
 }
 
 .search-bar-input {
   border: none;
-  font-size: 1.25em;
-  padding: 0.5em 15px;
+  padding: 0 15px;
   flex-grow: 2;
 }

src/components/search-bar/search-bar.jsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import styles from './search-bar.css';
-import SearchDatePicker from '../search-date-picker';
+import SearchDatePicker from '../search-date-picker/search-date-picker';
 
 /**
  * @typedef SearchBarProps

src/components/search-date-picker/search-date-picker.css

@@ -0,0 +1,12 @@
+.search-date-field {
+  border-left: 1px solid var(--default-border);
+  padding: 0 0.5em;
+  font-weight: normal;
+  color: var(--gray-light);
+  margin-bottom: 0;
+
+  input {
+    border: none;
+    margin-left: 0.1em;
+  }
+}

src/components/search-date-picker.jsx renamed to src/components/search-date-picker/search-date-picker.jsx

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import moment from 'moment';
+import styles from './search-date-picker.css';
 
 /**
  * @typedef SearchDatePickerProps
@@ -36,22 +37,24 @@ export default class SearchDatePicker extends Component {
   render () {
     return (
       <>
-        <label className="searchDateField">
+        <label className={styles.searchDateField}>
           From date:
           <input
             type="date"
             name="startDate"
             value={this.props.startDate?.toISOString()?.slice(0, 10) ?? ''}
             onChange={this.handleChange}
+            max={(new Date()).toISOString().slice(0, 10)}
           />
         </label>
-        <label className="searchDateField">
+        <label className={styles.searchDateField}>
           To date:
           <input
             type="date"
             name="endDate"
             value={this.props.endDate?.toISOString()?.slice(0, 10) ?? ''}
             onChange={this.handleChange}
+            max={moment().add(1, 'days').toISOString().slice(0, 10)}
           />
         </label>
       </>