message

public/index.html

@@ -27,7 +27,12 @@
       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/Cards/Cards.jsx

+import React from "react";
+import "./Cards.scss";
+function Cards(props){
+    return (
+<div className="card">
+    <div className="card-body">
+        
+       <span>{props.name} <i className="far fa-hand-point-up" id="icon"></i></span>
+        <h2>{props.number}</h2>
+        <span><i className="fa fa-arrow-up"></i>   {props.percentage} {props.month}</span>
+        
+         
+    </div>
+
+</div>
+    
+    );
+}
+export default Cards;
\ No newline at end of file

src/components/Cards/Cards.scss

+.card{
+    background-color: whitesmoke;
+    width: 320px;
+    border-radius: 5px;
+
+}
+p{
+    width: 60px;
+    color: #8898AA;
+
+}
+.card-body{
+    padding-left: 20px;
+}
+#icon{
+    padding-left: 60px;
+    size: 80px;
+
+}
\ No newline at end of file

src/components/Social_buttons/Index.jsx

 import React from "react";
-import "./Social_buttons.css";
+import "./Social_buttons.scss";
 function Social_button(props){
     return (
-    <button onClick={props.handleClick}>
+    <button onClick={props.handleClick} className="social_buttons">
 <div>
-<img src="{props.img}"></img>
+<img src={props.img} className="icon"></img>
 {props.buttonName}
 </div>
     </button>

src/components/Social_buttons/Social_buttons.module.scss → src/components/Social_buttons/Social_buttons.scss

-img{
+.icon{
     height: 20px;
     width: 20px;
     margin-right: 8px;
     
   }
-  button{
+  .social_buttons{
     border: 0px;
     background-color: white;
     font-size: 19px;
-    margin: 100px 100px 100px 100px;
     box-shadow:  2px 2px 1px #aaaa;
   border-radius: 5px ;
+transition: all 200ms ease-in;
+padding-left: 20px;
+padding-right: 20px;
+
   }
-  button:hover{
+  .social_buttons:hover{
     color: cadetblue;
+    -webkit-transform:scale(1.1);
     
   }
   
\ No newline at end of file

src/components/index.js

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

src/containers/Login/google.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>UI/icons/color/google</title>
+    <desc>Created with Sketch.</desc>
+    <defs/>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UI/icons/color/google">
+            <g id="Group" transform="translate(2.000000, 2.000000)">
+                <path d="M32.4365525,16.6024012 C32.4365525,15.4515967 32.3313665,14.344128 32.1357206,13.2820585 L16.5492615,13.2820585 L16.5492615,19.5616128 L25.4557094,19.5616128 C25.0721312,21.5908257 23.9059692,23.3098098 22.1535707,24.4613022 L22.1535707,28.5341733 L27.5019274,28.5341733 C30.631561,25.7077204 32.4365525,21.5461142 32.4365525,16.6024012 L32.4365525,16.6024012 Z" id="Shape" fill="#4285F4"/>
+                <path d="M16.5492615,32.4674071 C21.0175621,32.4674071 24.7635856,31.0139403 27.5019274,28.5341733 L22.1535707,24.4613022 C20.6718508,25.4353244 18.7756982,26.0110706 16.5492615,26.0110706 C12.2387399,26.0110706 8.59088994,23.1557272 7.2893887,19.3181072 L1.76011213,19.3181072 L1.76011213,23.5244249 C4.48302664,28.8299569 10.0796222,32.4674071 16.5492615,32.4674071 L16.5492615,32.4674071 Z" id="Shape" fill="#34A853"/>
+                <path d="M7.2893887,19.3181072 C6.95840347,18.344085 6.77047118,17.3033395 6.77047118,16.2337035 C6.77047118,15.1640676 6.95840347,14.1233221 7.2893887,13.1492999 L7.2893887,8.94298219 L1.76011213,8.94298219 C0.639530783,11.1345322 0,13.6142992 0,16.2337035 C0,18.8531079 0.639530783,21.3328749 1.76011213,23.5244249 L7.2893887,19.3181072 L7.2893887,19.3181072 Z" id="Shape" fill="#FBBC05"/>
+                <path d="M16.5492615,6.4563365 C18.9790577,6.4563365 21.160615,7.27558824 22.8758478,8.88382548 L27.6225407,4.22764161 C24.755872,1.60892511 21.0098485,0 16.5492615,0 C10.0803235,0 4.48302664,3.63813805 1.76011213,8.94298219 L7.2893887,13.1492999 C8.59088994,9.31236774 12.2394411,6.4563365 16.5492615,6.4563365 Z" id="Shape" fill="#EA4335"/>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/containers/Login/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
 import { Button } from "components";
-
+import Social_button from "components/Social_buttons/Index";
+import google from "./google.svg";
 function Login(props) { 
-  
+  const handleClick=()=>{
+    alert("hello google")
+  }
   
   return<>
-    
     <div>
-      
+      <Social_button  buttonName="Google" img={google} handleClick={handleClick} />
     </div>
   </>
 }
-
 Login.propTypes = {};
-
 export default Login;