search css

TheGuilbotine · Oct 6, 2021 · a6c100a · a6c100a
1 parent f79e246
commit a6c100a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/react-app/src/components/SearchQuestions/SearchBar.css b/react-app/src/components/SearchQuestions/SearchBar.css
@@ -6,7 +6,7 @@
     z-index: 11;
     right: 50vw;
     width: 25vw;
-    top: 4px;
+    top: 5px;
 }
 
 .navbar-search__input {
@@ -27,11 +27,11 @@ div.search-results__container
     background-color: #f5f5f5;
     display: block;
     position: fixed;
-    width: 23vw;
+    width: 25vw;
     height: auto;
-    top: 36px;
+    top: 56px;
     margin: 5px;
-    right: 51vw;
+    left: 0;
 }
 
 div.search-dropdown__container i
@@ -90,3 +90,8 @@ div.search-dropdown__container i
     }
 
 }
+
+.search-icon {
+    color: black;
+    font-size: 30px;
+}
diff --git a/react-app/src/components/SearchQuestions/SearchBar.js b/react-app/src/components/SearchQuestions/SearchBar.js
@@ -31,7 +31,7 @@ export default function SearchBar() {
                         placeholder="Search Questions"
                         onFocus={handleOpen}
                     /> */}
-                    <i className={"fas fa-search"} onClick={handleOpen}></i>
+                    <i className={"fas fa-search search-icon"} onClick={handleOpen}></i>
                 </>
             }
         </div>

diff --git a/react-app/src/components/SearchQuestions/SearchBarDropdown.js b/react-app/src/components/SearchQuestions/SearchBarDropdown.js
@@ -1,4 +1,3 @@
-
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -42,7 +41,7 @@ export default function SearchBarDropdown({ setShowModal }) {
                 autoComplete='off'
                 autoFocus
             />
-            <i className={"fas fa-search"}></i>
+            {/* <i className={"fas fa-search"}></i> */}
         </div>
         <div className="search-results__container">
             <ul>

diff --git a/react-app/src/context/Modal.css b/react-app/src/context/Modal.css
@@ -26,10 +26,11 @@
 
   #search-modal {
     position: fixed;
-    top: 0;
+    top: 2px;
     right: 0;
-    left: 0;
+    left: 5px;
     bottom: 0;
+    width: 25vw;
     display: flex;
     justify-content: center;
     /* align-items: center; */
@@ -46,6 +47,8 @@
   }
 
   #search-modal-content {
+    padding: 0 13px;
+    border-radius: 5px;
     position: absolute;
     background-color:white;
   }