Merge branch 'feature/pavan_kamath/card_component' into 'minion'

Card Component

See merge request devika.b/sample_argon!10

src/components/Card/Card.module.scss

+.card {
+  display: flex;
+  background-color: #f8f9fa;
+  flex-direction: row;
+  justify-content: center;
+  width: 200px;
+  position: relative;
+  height: 8vh;
+  border: none;
+  padding: 10px 10px;
+  margin: 20px;
+
+  &:hover {
+    border: 1px solid grey;
+    box-shadow: 1px 1px 6px -3px grey;
+    cursor: pointer;
+  }
+}

src/components/Card/index.jsx

+import PropTypes from "prop-types";
+import cs from "classnames";
+import styles from "./Card.module.scss";
+
+function Card(props) {
+  const {customClass, children } = props;
+  return (
+    <div className={cs(styles.card, customClass )}>
+      {children}
+    </div>
+  );
+}
+
+Card.propTypes = {
+  children: PropTypes.element,
+  customClass: PropTypes.string,
+};
+
+Card.defaultProps = {
+  customClass: "",
+}
+
+export default Card;

src/containers/Login/index.jsx

 import React from "react";
 import PropTypes from "prop-types";
+import Card from "components/Card";
+import { FaDiscord } from "react-icons/fa";
 
-function Login(props) {
-  return <div>login</div>;
+function Login() {
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      login
+      <Card customClass="card">
+        <FaDiscord style={{ fontSize: "27px", paddingRight: "10px" }} />
+        <p style={{fontSize: '16px'}}>Text 3</p>
+      </Card>
+    </div>
+  );
 }
 
 Login.propTypes = {};