From 8daec516309aff493a9137da4aa56edebbba62f6 Mon Sep 17 00:00:00 2001
From: Saleem Saleh Mogahed Alfaig
 <63640656+SaleemSaleh@users.noreply.github.com>
Date: Fri, 20 Nov 2020 11:17:15 +0300
Subject: [PATCH] update firebase and edit some styles

---
 src/Firebase/Firebase.js                         | 16 ++++++++--------
 src/__snapshots__/App.test.js.snap               | 10 +++++-----
 src/components/ContactForm/ContactForm.jsx       |  2 +-
 .../__snapshots__/ContactForm.test.jsx.snap      |  8 +++++---
 .../__snapshots__/SocialIcons.test.jsx.snap      | 10 +++++-----
 .../__test__/__snapshots__/Footer.test.jsx.snap  | 10 +++++-----
 src/components/InputField/InputField.jsx         |  3 ++-
 .../__snapshots__/InputField.test.jsx.snap       |  3 ++-
 src/components/InputSelect/InputSelect.jsx       |  2 +-
 .../__snapshots__/InputSelect.test.jsx.snap      |  2 +-
 .../__snapshots__/SecondStep.test.jsx.snap       |  2 +-
 src/components/Table/DonorRow/DonorRow.jsx       |  2 +-
 src/components/ThirdStep/ThirdStep.jsx           |  6 +++---
 .../__snapshots__/ThirdStep.test.jsx.snap        | 15 +++++++++------
 src/components/images/SocialIcons/FBIcon.jsx     |  2 +-
 src/components/images/SocialIcons/InstaIcon.jsx  |  2 +-
 .../images/SocialIcons/LinkedInIcon.jsx          |  2 +-
 .../images/SocialIcons/TwitterIcon.jsx           |  2 +-
 src/components/images/SocialIcons/UtupeIcon.jsx  |  2 +-
 src/containers/About/About.jsx                   |  6 +++---
 .../__test__/__snapshots__/About.test.jsx.snap   | 14 ++++++++------
 .../__test__/__snapshots__/Search.test.jsx.snap  |  4 ++--
 22 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/src/Firebase/Firebase.js b/src/Firebase/Firebase.js
index d000484..7d2097d 100644
--- a/src/Firebase/Firebase.js
+++ b/src/Firebase/Firebase.js
@@ -4,14 +4,14 @@ import 'firebase/firestore';
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
-  apiKey: 'AIzaSyCmmGbub9jlAGiG-cR8zuu9jp5gHN_AiB0',
-  authDomain: 'blood-donars-63da7.firebaseapp.com',
-  databaseURL: 'https://blood-donars-63da7.firebaseio.com',
-  projectId: 'blood-donars-63da7',
-  storageBucket: 'blood-donars-63da7.appspot.com',
-  messagingSenderId: '563577097714',
-  appId: '1:563577097714:web:785bb6ea8e3a2a8025af6b',
-  measurementId: 'G-CDGZNX7PH3',
+  apiKey: 'AIzaSyBv7nM7ZuaZ6VZWNVngISqTpjbXXOti2-0',
+  authDomain: 'lifevessels.firebaseapp.com',
+  databaseURL: 'https://lifevessels.firebaseio.com',
+  projectId: 'lifevessels',
+  storageBucket: 'lifevessels.appspot.com',
+  messagingSenderId: '1001070360554',
+  appId: '1:1001070360554:web:dd31de001186f9d3eca493',
+  measurementId: 'G-Y7EZT4BTCX',
 };
 // Initialize Firebase
 Firebase.initializeApp(firebaseConfig);
diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
index a408714..e69427c 100644
--- a/src/__snapshots__/App.test.js.snap
+++ b/src/__snapshots__/App.test.js.snap
@@ -567,7 +567,7 @@ Array [
           target="_blank"
         >
           <svg
-            className="mr-4 "
+            className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
             fill="none"
             height="32.74"
             viewBox="0 0 18 22"
@@ -602,7 +602,7 @@ Array [
           target="_blank"
         >
           <svg
-            className="mr-4"
+            className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
             fill="none"
             height="32.74"
             viewBox="0 0 17 22"
@@ -637,7 +637,7 @@ Array [
           target="_blank"
         >
           <svg
-            className="mr-4"
+            className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
             fill="none"
             height="32.74"
             viewBox="0 0 18 22"
@@ -672,7 +672,7 @@ Array [
           target="_blank"
         >
           <svg
-            className="mr-4"
+            className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
             fill="none"
             height="32.74"
             viewBox="0 0 17 22"
@@ -707,7 +707,7 @@ Array [
           target="_blank"
         >
           <svg
-            className="mr-4"
+            className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
             fill="none"
             height="32.74"
             viewBox="0 0 17 22"
diff --git a/src/components/ContactForm/ContactForm.jsx b/src/components/ContactForm/ContactForm.jsx
index 2bf8cd0..16568d0 100644
--- a/src/components/ContactForm/ContactForm.jsx
+++ b/src/components/ContactForm/ContactForm.jsx
@@ -42,7 +42,7 @@ const ContactForm = () => {
         />
       </div>
       <textarea
-        className=" flex-1 mr-4 p-2 text-base tracking-normal  placeholder-gray-500 border-2 border-gray-300 focus:outline-none "
+        className=" flex-1 mr-4 p-2 text-base tracking-normal  placeholder-gray-500 border-2 border-gray-300 focus:outline-none focus:placeholder-transparent hover:border-primary-100 transition duration-500  "
         rows="6"
         placeholder={t('AboutPage.ContectMessage')}
         value={form.massege}
diff --git a/src/components/ContactForm/__test__/__snapshots__/ContactForm.test.jsx.snap b/src/components/ContactForm/__test__/__snapshots__/ContactForm.test.jsx.snap
index 381ed96..ea7344d 100644
--- a/src/components/ContactForm/__test__/__snapshots__/ContactForm.test.jsx.snap
+++ b/src/components/ContactForm/__test__/__snapshots__/ContactForm.test.jsx.snap
@@ -15,7 +15,8 @@ exports[`renders correctly 1`] = `
         htmlFor="name"
       />
       <input
-        className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+        autoComplete="off"
+        className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
         id="name"
         name="name"
         onChange={[Function]}
@@ -32,7 +33,8 @@ exports[`renders correctly 1`] = `
         htmlFor="email"
       />
       <input
-        className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+        autoComplete="off"
+        className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
         id="email"
         name="email"
         onChange={[Function]}
@@ -43,7 +45,7 @@ exports[`renders correctly 1`] = `
     </div>
   </div>
   <textarea
-    className=" flex-1 mr-4 p-2 text-base tracking-normal  placeholder-gray-500 border-2 border-gray-300 focus:outline-none "
+    className=" flex-1 mr-4 p-2 text-base tracking-normal  placeholder-gray-500 border-2 border-gray-300 focus:outline-none focus:placeholder-transparent hover:border-primary-100 transition duration-500  "
     name="massege"
     onChange={[Function]}
     placeholder="AboutPage.ContectMessage"
diff --git a/src/components/Footer/SocialIcons/__test__/__snapshots__/SocialIcons.test.jsx.snap b/src/components/Footer/SocialIcons/__test__/__snapshots__/SocialIcons.test.jsx.snap
index a973ee1..e047544 100644
--- a/src/components/Footer/SocialIcons/__test__/__snapshots__/SocialIcons.test.jsx.snap
+++ b/src/components/Footer/SocialIcons/__test__/__snapshots__/SocialIcons.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`renders correctly 1`] = `
     target="_blank"
   >
     <svg
-      className="mr-4 "
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
       fill="none"
       height="32.74"
       viewBox="0 0 18 22"
@@ -45,7 +45,7 @@ exports[`renders correctly 1`] = `
     target="_blank"
   >
     <svg
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
       fill="none"
       height="32.74"
       viewBox="0 0 17 22"
@@ -80,7 +80,7 @@ exports[`renders correctly 1`] = `
     target="_blank"
   >
     <svg
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
       fill="none"
       height="32.74"
       viewBox="0 0 18 22"
@@ -115,7 +115,7 @@ exports[`renders correctly 1`] = `
     target="_blank"
   >
     <svg
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
       fill="none"
       height="32.74"
       viewBox="0 0 17 22"
@@ -150,7 +150,7 @@ exports[`renders correctly 1`] = `
     target="_blank"
   >
     <svg
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
       fill="none"
       height="32.74"
       viewBox="0 0 17 22"
diff --git a/src/components/Footer/__test__/__snapshots__/Footer.test.jsx.snap b/src/components/Footer/__test__/__snapshots__/Footer.test.jsx.snap
index dfc4f05..3f8323a 100644
--- a/src/components/Footer/__test__/__snapshots__/Footer.test.jsx.snap
+++ b/src/components/Footer/__test__/__snapshots__/Footer.test.jsx.snap
@@ -123,7 +123,7 @@ exports[`renders correctly 1`] = `
         target="_blank"
       >
         <svg
-          className="mr-4 "
+          className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
           fill="none"
           height="32.74"
           viewBox="0 0 18 22"
@@ -158,7 +158,7 @@ exports[`renders correctly 1`] = `
         target="_blank"
       >
         <svg
-          className="mr-4"
+          className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
           fill="none"
           height="32.74"
           viewBox="0 0 17 22"
@@ -193,7 +193,7 @@ exports[`renders correctly 1`] = `
         target="_blank"
       >
         <svg
-          className="mr-4"
+          className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
           fill="none"
           height="32.74"
           viewBox="0 0 18 22"
@@ -228,7 +228,7 @@ exports[`renders correctly 1`] = `
         target="_blank"
       >
         <svg
-          className="mr-4"
+          className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
           fill="none"
           height="32.74"
           viewBox="0 0 17 22"
@@ -263,7 +263,7 @@ exports[`renders correctly 1`] = `
         target="_blank"
       >
         <svg
-          className="mr-4"
+          className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
           fill="none"
           height="32.74"
           viewBox="0 0 17 22"
diff --git a/src/components/InputField/InputField.jsx b/src/components/InputField/InputField.jsx
index 3b505af..98eeb4e 100644
--- a/src/components/InputField/InputField.jsx
+++ b/src/components/InputField/InputField.jsx
@@ -8,13 +8,14 @@ function InputForm({ labelText, placeholder, onChange, inputValue, Inputtype, in
         {labelText}
       </label>
       <input
-        className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+        className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
         placeholder={placeholder}
         type={Inputtype}
         name={inputName}
         value={inputValue}
         onChange={onChange}
         id={inputName}
+        autoComplete="off"
       />
     </div>
   );
diff --git a/src/components/InputField/__test__/__snapshots__/InputField.test.jsx.snap b/src/components/InputField/__test__/__snapshots__/InputField.test.jsx.snap
index 66828b9..db870cd 100644
--- a/src/components/InputField/__test__/__snapshots__/InputField.test.jsx.snap
+++ b/src/components/InputField/__test__/__snapshots__/InputField.test.jsx.snap
@@ -9,7 +9,8 @@ exports[`renders correctly 1`] = `
     htmlFor="name"
   />
   <input
-    className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+    autoComplete="off"
+    className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
     id="name"
     name="name"
     onChange={[Function]}
diff --git a/src/components/InputSelect/InputSelect.jsx b/src/components/InputSelect/InputSelect.jsx
index cd28340..01aa5a7 100644
--- a/src/components/InputSelect/InputSelect.jsx
+++ b/src/components/InputSelect/InputSelect.jsx
@@ -13,7 +13,7 @@ function InputSelect({ city, text, onChange, name, options, classflag }) {
           {text}
         </div>
         <select
-          className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg "
+          className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg focus:outline-none "
           value={city}
           name={name}
           onChange={onChange}
diff --git a/src/components/InputSelect/__test__/__snapshots__/InputSelect.test.jsx.snap b/src/components/InputSelect/__test__/__snapshots__/InputSelect.test.jsx.snap
index 6d394ae..7b42ae8 100644
--- a/src/components/InputSelect/__test__/__snapshots__/InputSelect.test.jsx.snap
+++ b/src/components/InputSelect/__test__/__snapshots__/InputSelect.test.jsx.snap
@@ -14,7 +14,7 @@ exports[`renders correctly 1`] = `
       3. Please select your city ?*
     </div>
     <select
-      className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg "
+      className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg focus:outline-none "
       name="city"
       onBlur={[Function]}
       onChange={[Function]}
diff --git a/src/components/SecondStep/__test__/__snapshots__/SecondStep.test.jsx.snap b/src/components/SecondStep/__test__/__snapshots__/SecondStep.test.jsx.snap
index 96faee8..6c261e4 100644
--- a/src/components/SecondStep/__test__/__snapshots__/SecondStep.test.jsx.snap
+++ b/src/components/SecondStep/__test__/__snapshots__/SecondStep.test.jsx.snap
@@ -216,7 +216,7 @@ exports[`renders correctly 1`] = `
             donate_second_page.city
           </div>
           <select
-            className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg "
+            className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg focus:outline-none "
             name="city"
             onBlur={[Function]}
             onChange={[Function]}
diff --git a/src/components/Table/DonorRow/DonorRow.jsx b/src/components/Table/DonorRow/DonorRow.jsx
index 14d0f93..0a98210 100644
--- a/src/components/Table/DonorRow/DonorRow.jsx
+++ b/src/components/Table/DonorRow/DonorRow.jsx
@@ -5,7 +5,7 @@ function DonorRow({ donor }) {
   const StylesClass = {
     // grayColor: 'w-full bg-gray-200',
     // whiteColor: 'we-full bg-red',
-    rowStyle: 'bg-white odd:bg-gray-200',
+    rowStyle: 'bg-white odd:bg-gray-200 hover:bg-primary-100 hover:text-white ',
     ceilClass:
       'border px-4 py-2 text-center lg:px-6 mt-4 md:mt-0  whitespace-no-wrap border-b bg-gray',
     headerStyle:
diff --git a/src/components/ThirdStep/ThirdStep.jsx b/src/components/ThirdStep/ThirdStep.jsx
index 147e023..385b2f3 100644
--- a/src/components/ThirdStep/ThirdStep.jsx
+++ b/src/components/ThirdStep/ThirdStep.jsx
@@ -62,7 +62,7 @@ function ThirdStep({ donor, onChange, setStep, onRegister }) {
             <div>
               <InputField
                 labelText={t('donate_third_page.name')}
-                placeholder={t('donate_third_page.name_placeholder')}
+                placeholder=""
                 onChange={onChange}
                 inputValue={donor.name}
                 inputName="name"
@@ -75,7 +75,7 @@ function ThirdStep({ donor, onChange, setStep, onRegister }) {
             <div>
               <InputField
                 labelText={t('donate_third_page.phone')}
-                placeholder={t('donate_third_page.phone_placeholder')}
+                placeholder=""
                 onChange={onChange}
                 inputValue={donor.phone}
                 inputName="phone"
@@ -88,7 +88,7 @@ function ThirdStep({ donor, onChange, setStep, onRegister }) {
             <div>
               <InputField
                 labelText={t('donate_third_page.email')}
-                placeholder={t('donate_third_page.email_placeholder')}
+                placeholder=""
                 onChange={onChange}
                 inputValue={donor.email}
                 inputName="email"
diff --git a/src/components/ThirdStep/__test__/__snapshots__/ThirdStep.test.jsx.snap b/src/components/ThirdStep/__test__/__snapshots__/ThirdStep.test.jsx.snap
index d1b20dd..cb6f48d 100644
--- a/src/components/ThirdStep/__test__/__snapshots__/ThirdStep.test.jsx.snap
+++ b/src/components/ThirdStep/__test__/__snapshots__/ThirdStep.test.jsx.snap
@@ -74,11 +74,12 @@ exports[`renders correctly 1`] = `
               donate_third_page.name
             </label>
             <input
-              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+              autoComplete="off"
+              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
               id="name"
               name="name"
               onChange={[Function]}
-              placeholder="donate_third_page.name_placeholder"
+              placeholder=""
               type="text"
               value=""
             />
@@ -100,11 +101,12 @@ exports[`renders correctly 1`] = `
               donate_third_page.phone
             </label>
             <input
-              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+              autoComplete="off"
+              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
               id="phone"
               name="phone"
               onChange={[Function]}
-              placeholder="donate_third_page.phone_placeholder"
+              placeholder=""
               type="text"
               value=""
             />
@@ -126,11 +128,12 @@ exports[`renders correctly 1`] = `
               donate_third_page.email
             </label>
             <input
-              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+              autoComplete="off"
+              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
               id="email"
               name="email"
               onChange={[Function]}
-              placeholder="donate_third_page.email_placeholder"
+              placeholder=""
               type="email"
               value=""
             />
diff --git a/src/components/images/SocialIcons/FBIcon.jsx b/src/components/images/SocialIcons/FBIcon.jsx
index d505f5c..726ade4 100644
--- a/src/components/images/SocialIcons/FBIcon.jsx
+++ b/src/components/images/SocialIcons/FBIcon.jsx
@@ -8,7 +8,7 @@ function FBIcon() {
       height="32.74"
       fill="none"
       viewBox="0 0 18 22"
-      className="mr-4 "
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
     >
       <path
         fill="#fff"
diff --git a/src/components/images/SocialIcons/InstaIcon.jsx b/src/components/images/SocialIcons/InstaIcon.jsx
index 58da1e9..b60c647 100644
--- a/src/components/images/SocialIcons/InstaIcon.jsx
+++ b/src/components/images/SocialIcons/InstaIcon.jsx
@@ -8,7 +8,7 @@ function InstaIcon() {
       height="32.74"
       fill="none"
       viewBox="0 0 17 22"
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
     >
       <path
         fill="#fff"
diff --git a/src/components/images/SocialIcons/LinkedInIcon.jsx b/src/components/images/SocialIcons/LinkedInIcon.jsx
index f5732a4..1b0112f 100644
--- a/src/components/images/SocialIcons/LinkedInIcon.jsx
+++ b/src/components/images/SocialIcons/LinkedInIcon.jsx
@@ -8,7 +8,7 @@ function LinkedInIcon() {
       height="32.74"
       fill="none"
       viewBox="0 0 18 22"
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
     >
       <path
         fill="#fff"
diff --git a/src/components/images/SocialIcons/TwitterIcon.jsx b/src/components/images/SocialIcons/TwitterIcon.jsx
index 7639e76..e65c7fa 100644
--- a/src/components/images/SocialIcons/TwitterIcon.jsx
+++ b/src/components/images/SocialIcons/TwitterIcon.jsx
@@ -8,7 +8,7 @@ function TwitterIcon() {
       height="32.74"
       fill="none"
       viewBox="0 0 17 22"
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
     >
       <path
         fill="#fff"
diff --git a/src/components/images/SocialIcons/UtupeIcon.jsx b/src/components/images/SocialIcons/UtupeIcon.jsx
index 1b4b908..caaa72a 100644
--- a/src/components/images/SocialIcons/UtupeIcon.jsx
+++ b/src/components/images/SocialIcons/UtupeIcon.jsx
@@ -8,7 +8,7 @@ function UtupeIcon() {
       height="32.74"
       fill="none"
       viewBox="0 0 17 22"
-      className="mr-4"
+      className="mr-4 h-6 w-6 transform hover:scale-125 transition duration-500 ease-out"
     >
       <path
         fill="#fff"
diff --git a/src/containers/About/About.jsx b/src/containers/About/About.jsx
index d8cddd0..8079ff1 100644
--- a/src/containers/About/About.jsx
+++ b/src/containers/About/About.jsx
@@ -17,7 +17,7 @@ function About() {
       <Helmet>
         <title>LifeVessel - About</title>
       </Helmet>
-      <div className="px-6 sm:px-0 py-8 sm-py-12  w-100 sm:w-8/12 mx-auto ">
+      <div className="px-6 sm:px-0 py-12  w-100 sm:w-8/12 mx-auto ">
         <Paragraph
           headerText={t('AboutPage.AboutTitle')}
           paragraphText={t('AboutPage.AboutDecs')}
@@ -26,7 +26,7 @@ function About() {
         />
       </div>
       <div className=" flex justify-center items-stretch flex-wrap pb-8 sm:pb-12 md:pb-20">
-        <div className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-12 ">
+        <div className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-4 ">
           <div className=" h-full w-10/12 lg:w-3/4 xl:w-1/2 shadow-lg border-1 border-gray-300  mx-auto">
             <Card
               cardImage={bloodplus}
@@ -36,7 +36,7 @@ function About() {
             />
           </div>
         </div>
-        <div className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-12 ">
+        <div className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-4 ">
           <div className=" h-full w-10/12  lg:w-3/4 xl:w-1/2 shadow-lg border-1 border-gray-300  mx-auto">
             <Card
               cardImage={globalhealth}
diff --git a/src/containers/About/__test__/__snapshots__/About.test.jsx.snap b/src/containers/About/__test__/__snapshots__/About.test.jsx.snap
index 78846c6..1f3e2dc 100644
--- a/src/containers/About/__test__/__snapshots__/About.test.jsx.snap
+++ b/src/containers/About/__test__/__snapshots__/About.test.jsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <div>
   <div
-    className="px-6 sm:px-0 py-8 sm-py-12  w-100 sm:w-8/12 mx-auto "
+    className="px-6 sm:px-0 py-12  w-100 sm:w-8/12 mx-auto "
   >
     <div>
       <h1
@@ -22,7 +22,7 @@ exports[`renders correctly 1`] = `
     className=" flex justify-center items-stretch flex-wrap pb-8 sm:pb-12 md:pb-20"
   >
     <div
-      className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-12 "
+      className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-4 "
     >
       <div
         className=" h-full w-10/12 lg:w-3/4 xl:w-1/2 shadow-lg border-1 border-gray-300  mx-auto"
@@ -57,7 +57,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-12 "
+      className=" sm:w-8/12 md:w-6/12 xl:w-5/12 mt-4 "
     >
       <div
         className=" h-full w-10/12  lg:w-3/4 xl:w-1/2 shadow-lg border-1 border-gray-300  mx-auto"
@@ -198,7 +198,8 @@ exports[`renders correctly 1`] = `
               htmlFor="name"
             />
             <input
-              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+              autoComplete="off"
+              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
               id="name"
               name="name"
               onChange={[Function]}
@@ -215,7 +216,8 @@ exports[`renders correctly 1`] = `
               htmlFor="email"
             />
             <input
-              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none  bg-white placeholder-gray-500"
+              autoComplete="off"
+              className="flex-1  mr-4 p-2 text-sm sm:text-base tracking-normal  border-2 border-gray-300 focus:outline-none hover:border-primary-100 transition duration-500 focus:placeholder-transparent  bg-white placeholder-gray-500"
               id="email"
               name="email"
               onChange={[Function]}
@@ -226,7 +228,7 @@ exports[`renders correctly 1`] = `
           </div>
         </div>
         <textarea
-          className=" flex-1 mr-4 p-2 text-base tracking-normal  placeholder-gray-500 border-2 border-gray-300 focus:outline-none "
+          className=" flex-1 mr-4 p-2 text-base tracking-normal  placeholder-gray-500 border-2 border-gray-300 focus:outline-none focus:placeholder-transparent hover:border-primary-100 transition duration-500  "
           name="massege"
           onChange={[Function]}
           placeholder="AboutPage.ContectMessage"
diff --git a/src/containers/Search/__test__/__snapshots__/Search.test.jsx.snap b/src/containers/Search/__test__/__snapshots__/Search.test.jsx.snap
index f6cbb2d..f6b793a 100644
--- a/src/containers/Search/__test__/__snapshots__/Search.test.jsx.snap
+++ b/src/containers/Search/__test__/__snapshots__/Search.test.jsx.snap
@@ -34,7 +34,7 @@ exports[`renders correctly 1`] = `
               search_page.bloodtype
             </div>
             <select
-              className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg "
+              className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg focus:outline-none "
               name="bloodType"
               onBlur={[Function]}
               onChange={[Function]}
@@ -90,7 +90,7 @@ exports[`renders correctly 1`] = `
               search_page.city
             </div>
             <select
-              className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg "
+              className="form-select block w-full border-gray-300 border-2 py-2 px-4 text-sm sm:text-base md:text-lg focus:outline-none "
               name="city"
               onBlur={[Function]}
               onChange={[Function]}