Merge pull request #30 from MichaelCurrin/use-text-for-images

Use text for image keyword fields
MichaelCurrin · Mar 30, 2020 · 149bc00 · 149bc00
2 parents b67096a + 20e686d
commit 149bc00
Showing 1 changed file with 24 additions and 15 deletions.
diff --git a/src/Components/FormCard.js b/src/Components/FormCard.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { IMAGE_SEARCH_OPTIONS } from '../constants';
-
 /**
  * Return an array of option components.
  *
@@ -39,8 +37,6 @@ function FormCard(props) {
         onChangeBgImage
     } = props;
 
-    const options = mkOptions(IMAGE_SEARCH_OPTIONS);
-
     return (
         <div className="card">
             <div className="card-content">
@@ -119,26 +115,39 @@ function FormCard(props) {
                             Main image
                         </label>
                         <div className="control">
-                            <div className="select" id="main-image-input" name="main-image-input">
-                                <select value={mainImage} onChange={(e) => onChangeMainImage(e.target.value)}>
-                                    {options}
-                                </select>
-                            </div>
-                            <p className="help">Used for the profile image.</p>
+                            <input
+                                className="input"
+                                id="main-image-input"
+                                name="main-image-input"
+                                type="text"
+                                placeholder="Search keywords"
+                                size="30"
+                                maxLength="30"
+                                value={mainImage}
+                                onChange={(e) => onChangeMainImage(e.target.value)}
+                            />
                         </div>
+                        <p class="help">Use one or more lower-case terms. Separate with commas and no spaces.</p>
                     </div>
 
                     <div className="field">
                         <label className="label" htmlFor="bg-image-input">
                             Background image
                         </label>
                         <div className="control">
-                            <div className="select" id="bg-image-input" name="bg-image-input">
-                                <select value={bgImage} onChange={(e) => onChangeBgImage(e.target.value)}>
-                                    {options}
-                                </select>
-                            </div>
+                            <input
+                                className="input"
+                                id="bg-image-input"
+                                name="bg-image-input"
+                                type="text"
+                                placeholder="Search keywords"
+                                size="30"
+                                maxLength="30"
+                                value={bgImage}
+                                onChange={(e) => onChangeBgImage(e.target.value)}
+                            />
                         </div>
+                        <p class="help">Use one or more lower-case terms. Separate with commas and no spaces.</p>
                     </div>
                 </div>
             </div>