Added a card class. Finished basic css.

unit-conversion/src/app.js

@@ -2,16 +2,25 @@ import { Route } from 'react-router-dom';
 import { EndingNumberOutput } from './features/ending-number-output/endingNumberOutput.js';
 import { NumberInputField } from './features/number-input-field/numberInputField.js';
 import { UnitSelector } from './features/unit-selector/unitSelector.js';
+import { Card } from './features/card/card.js';
 
 export function App() {
   return (
     <>
       <Route exact path={'/'}>
       </Route>
+      <Card title="Input Unit Selector">
         <UnitSelector type="Input"/>
+      </Card>
+      <Card title="Number Input">
         <NumberInputField />
+      </Card>
+      <Card title="Output Unit Selector">
         <UnitSelector type="Output"/>
+      </Card>
+      <Card title="Number Output">
         <EndingNumberOutput />
+      </Card>
     </>
   );
 }

unit-conversion/src/features/card/card.css

+.card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 20px;
+  min-height: 20%;
+  border-radius: 10px;
+  background-color: rgba(255 255 255 / 90%);
+  box-shadow:
+    0 2.8px 2.2px rgba(0 0 0 / 3.4%),
+    0 6.7px 5.3px rgba(0 0 0 / 4.8%),
+    0 12.5px 10px rgba(0 0 0 / 6%),
+    0 22.3px 17.9px rgba(0 0 0 / 7.2%),
+    0 41.8px 33.4px rgba(0 0 0 / 8.6%),
+    0 100px 80px rgba(0 0 0 / 12%);
+}
+
+.inputField {
+  max-width: 75%;
+}

unit-conversion/src/features/card/card.js

+import PropTypes from 'prop-types';
+import './card.css';
+
+export function Card(props) {
+  Card.propTypes = {
+    title: PropTypes.string.isRequired,
+  };
+
+  return (
+    <div className="card">
+      <h1>{props.title}</h1>
+      <div>
+        {props.children}
+      </div>
+    </div>
+  );
+}

unit-conversion/src/features/number-input-field/numberInputField.js

@@ -12,16 +12,9 @@ export function NumberInputField() {
     dispatch(setNumberOfUnits(currentNumber));
   }
 
-  function handleSubmit(e) {
-    e.preventDefault();
-  }
-
   return (
     <div>
-      <form onSubmit={handleSubmit}>
-        <h1>Number Input Field</h1>
-        <input type="text" placeholder={ placeHolderString } onChange={handleChange}/>
-      </form>
+      <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/>
     </div>
   );
 }

unit-conversion/src/features/unit-selector/unitSelector.js

@@ -59,7 +59,6 @@ export function UnitSelector(props) {
   return (
     <div>
       <form onSubmit={handleSubmit}>
-        <h1>{props.type} Unit Selector</h1>
         <div className="select-container">
           <select name="units" onChange={handleChange}>
             {unitSelectorOptions.map((option) =>

unit-conversion/src/index.css

 :root {
   /* Colors */
-  --letterbox-color: rgba(0 0 0 / 100%);
-  --app-background-color: rgba(239 239 239 / 100%);
+  --letterbox-color: rgba(255 255 255 / 100%);
+  --app-background-color: rgba(101 142 156 / 100%);
   --font-color: rgba(0 0 0 / 100%);
 
   /* Sizes */
   --minimum-app-size: 300px;
 }
 
+* {
+  font-size: 1.05em;
+}
+
 body {
   margin: 0;
   font-family: sans-serif;