social_button componenet implement

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -26,12 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-  crossorigin="anonymous"
-/>
+    
 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
     <title>React App</title>
   </head>

src/components/Button/index.jsx

@@ -5,14 +5,8 @@ import styles from "./Button.module.scss";
 
 function Button(props) {
 
-return(
-  <button onClick={props.handleClick}>
-  <div >
-<img src={props.img}></img>
-    {props.buttonName}
+return(<></>
   
-  </div>
-  </button>
 
 )
 }

src/components/SearchBar/SearchBar.jsx

+import React, { useState } from 'react'
+import './SearchBar.scss'
+
+export default function SearchBar(props) {
+    const [isFocus, setIsFocus] = useState(false);
+
+const handleChange =(value)=>{
+    props.onSearch(value)
+
+}
+    return (
+        <div className={isFocus ?'inputBox focused' :'inputBox'}>
+            <i className="fa fa-search icon" aria-hidden="true"></i>
+            <input placeholder='Search' className='search-control' onBlur={()=>setIsFocus(false)} onFocus={()=>setIsFocus(true)} onChange={(e)=>handleChange(e.target.value)} />
+        </div>
+    )
+}

src/components/SearchBar/SearchBar.scss

+
+.inputBox{
+    display: flex;
+    width: 250px;
+    border-radius: 50px;
+    overflow: hidden;
+    background-color: #fff;
+    padding: 5px;
+    transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
+}
+.focused{
+    width: 380px!important;
+    transition: width .15s cubic-bezier(0.68, -0.55, 0.27, 1.55)
+}
+.search-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 2px;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    outline: #fff;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0px solid #fff !important;
+    border-color: #fff !important;
+    border-radius: 50px;
+}
+.icon{
+    margin:10px;
+    font-size: 15px;
+   cursor: pointer;
+  color: gray;
+}
\ No newline at end of file

src/components/Social_buttons/Index.jsx

-// import React from "react";
-// import "./Social_buttons.css";
-// function Index(props){
+import React from "react";
+import "./Social_buttons.css";
+function Social_button(props){
+    return (
+    <button onClick={props.handleClick}>
+<div>
+<img src="{props.img}"></img>
+{props.buttonName}
+</div>
+    </button>
     
-//     return (
-       
-    
-//     );
-// }
-// export default Index;
\ No newline at end of file
+    );
+}
+export default Social_button;
\ No newline at end of file

src/components/Social_buttons/Social_buttons.module.scss

-// #img{
-//     padding-right: 8px;
-//     height: 20px;
-//     width: 30px;
-// }
-// .btn:not(:last-child) {
-//     margin-right: 0.5rem;
-// }
-// .btn-neutral {
-//     color: #5e72e4 !important;
-//     border-color: #fff;
-//     background-color: #fff;
-//     box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 4px 3px rgb(0 0 0 / 8%);
-// }
-// .btn-neutral:hover {
-//     color: black !important;
-//     -webkit-transform: translateY(-1px);
-// 	transform: translateY(-1px);
-// }
-// .btn {
-//     font-size: .875rem;
-//     font-weight: 600;
-//     line-height: 1.5;
-//     display: inline-block;
-//     padding: 0.625rem 1.25rem;
-//     cursor: pointer;
-//     -webkit-user-select: none;
-//     -ms-user-select: none;
-//     user-select: none;
-//     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-//     text-align: center;
-//     vertical-align: middle;
-//     color: #525f7f;
-//     border: 1px solid transparent;
-//     border-radius: 0.25rem;
-//     background-color: transparent;
-// }
-// a {
-//     text-decoration: none;
-//     color: #5e72e4;
-//     background-color: transparent;
-// }
-// *, ::after, ::before {
-//     box-sizing: border-box;
-// }
-// .signIn {
-//     background-color: #5e72e4 !important;
-//     color: #fff !important;
+img{
+    height: 20px;
+    width: 20px;
+    margin-right: 8px;
+    
+  }
+  button{
+    border: 0px;
+    background-color: white;
+    font-size: 19px;
+    margin: 100px 100px 100px 100px;
+    box-shadow:  2px 2px 1px #aaaa;
+  border-radius: 5px ;
+  }
+  button:hover{
+    color: cadetblue;
+    
+  }
   
\ No newline at end of file
-// }
-// .signIn:hover {
-//     color: #fff;
-//     -webkit-transform: translateY(-1px);
-// 	transform: translateY(-1px);
-// }
-// .check {
-//     margin-left: 5px;
-
-// }
-// .check1{
-//     margin-left: 10px;
-// }
-
-
-// input[type="text"] {
-//     width: 100%;
-//     border: none !important;
-//     border-radius: 4px;
-//     margin: 5px 0;
-//     outline: none;
-//     padding: 22px;
-//     box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 4px 3px rgb(0 0 0 / 8%);
-//     transition: 0.3s;
-//   }
-  
-
-  
-//   .inputWithIcon input[type="text"] {
-//     padding-left: 40px;
-//   }
-  
-//   .inputWithIcon {
-//     position: relative;
-//   }
-  
-//   .inputWithIcon i {
-//     position: absolute;
-//     left: 0;
-//     top: 8px;
-//     padding: 22px 8px;
-//     color: #aaa;
-//     transition: 0.3s;
-//   } 
-  
-  
-//    .inputWithIcon.inputIconBg i {
-//     background-color: #aaa;
-//     color: #fff;
-//     padding: 9px 4px;
-//     border-radius: 4px 0 0 4px;
-//   }
-
-
-//   .main-content{
-//     margin-top: 8rem !important;
-//     font-family: Open Sans,sans-serif;
-//     font-size: 1rem;
-//     font-weight: 400;
-//     line-height: 1.5;
-//     margin: 0;
-//     text-align: left;
-//     color: #525f7f;
-//     background-color: #f8f9fe;
-// } 
\ No newline at end of file

src/components/index.js

 export { default as Button } from "./Button";
+export{default as SearchBar} from './SearchBar'

src/containers/Login/index.jsx

@@ -4,8 +4,8 @@ import { Button } from "components";
 
 function Login(props) { 
   
-  return <>
   
+  return<>
     
     <div>