Added classname to main textfields, apply style to classes in CSS

src/assets/Interactive.css

@@ -29,7 +29,7 @@
     position: relative;
 }
 
-.workflow-search {
+.search-large {
     height: 5rem;
     width: 60%;
     border: 2px solid black;
@@ -37,17 +37,17 @@
     margin-bottom:30px;
 }
 
-.ida .workflow-search:focus{
+.ida .search-large:focus{
     outline: none;
     border-color: blue;
 }
-.ida .workflow-search:focus + .placeholder-text .text, :not(input[value=""]) + .placeholder-text .text{
+.ida .search-large:focus + .placeholder-text .text, :not(input[value=""]) + .placeholder-text .text{
     background-color: white;
     font-size: 1.1rem;
     color: black;
     transform: translate(0, -170%);
 }
-.ida .workflow-search:focus + .placeholder-text .text{
+.ida .search-large:focus + .placeholder-text .text{
     border-color: blueviolet;
     color: blue;
 }
@@ -72,7 +72,7 @@
     transition: transform 0.15s ease-out, font-size 0.15s ease-out, background-color 0.2s ease-out, color 0.15s ease-out;
 }
 
-.ida .workflow-search, .placeholder-text{
+.ida .search-large, .placeholder-text{
     font-size: 1.4rem;
     padding: 0 1.2rem;
 

src/components/services/Interactive.js

@@ -240,7 +240,7 @@ export default  function Interactive() {
       <div class="search-buttons">
 
       <input
-        className="workflow-search"
+        className="search-large"
         type="text"
         placeholder="Search for Workflows"
         value={searchTerm}
@@ -360,6 +360,7 @@ export default  function Interactive() {
     <div class="search-buttons">
 
      <input
+        className="search-large"
         type="text"
         placeholder="Search for Facilities"
         value={searchTerm}