Merge pull request #254 from Web-Dev-Path/refactor/to-scss-SearchBar

Refactor/to scss search bar

Author: Satoshi-Sh

CHANGELOG.md

@@ -163,6 +163,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - ButtonLink
   - SubmitButton
   - AuthorBio
+  - SearchBar
   - BlogPostsContainer
   - RevealContentContainer
+  
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
+- Updated SearchInput width to 100% for better styling 

components/blog/SearchBar/SearchBar.module.scss

@@ -0,0 +1,37 @@
+@use '@/styles/mixins' as *;
+
+.searchBar {
+  display: flex;
+  justify-content: space-between;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  border: 0;
+  box-shadow: 2px 4px 8px 3px var(--color-box-shadow);
+  font-size: 1.2rem;
+  width: 100%;
+  margin-top: 3rem;
+
+  @include desktop {
+    width: 24rem;
+    margin: unset;
+  }
+}
+
+.searchInput {
+  height: 100%;
+  border: 0;
+  padding-left: 1rem;
+  width: 100%;
+}
+
+.submitButton {
+  text-indent: -999px;
+  overflow: hidden;
+  width: 1.5rem;
+  border: 1px solid var(--color-transparent);
+  background: url('/images/svg/search.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin: 0.5rem 1rem 0.5rem 1rem;
+  cursor: pointer;
+}

components/blog/SearchBar/index.js

@@ -1,4 +1,4 @@
-import S from './styles';
+import styles from './SearchBar.module.scss';
 import { useRef } from 'react';
 
 const SearchBar = ({ setSearchTerm }) => {
@@ -7,17 +7,18 @@ const SearchBar = ({ setSearchTerm }) => {
     setSearchTerm(searchInput.current.value);
   };
   return (
-    <S.SearchBar>
-      <S.SearchInput
+    <div className={styles.searchBar}>
+      <input
         ref={searchInput}
+        className={styles.searchInput}
         type='search'
         placeholder='keyword or topic'
         onChange={search}
       />
-      <S.SubmitButton type='submit' onClick={search}>
+      <button type='submit' className={styles.submitButton} onClick={search}>
         Search
-      </S.SubmitButton>
-    </S.SearchBar>
+      </button>
+    </div>
   );
 };
 

components/blog/SearchBar/styles.js

@@ -6,6 +6,7 @@
   --color-white: #ffffff;
   --color-primary-content: #292929;
   --color-transparent: transparent;
+  --color-box-shadow: rgba(0, 0, 0, 0.08);
   --dark-bg: #023047;
   --error: #be1313;
 }