Compare revisions

Kaushik · Kaushik · devika.b · akash · devika.b · bebb43f7
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,18 @@
      "name": "argon",
      "version": "0.1.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
+        "@fortawesome/react-fontawesome": "^0.1.16",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "classnames": "^2.3.1",
+        "font-awesome": "^4.7.0",
        "node-sass": "^7.0.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
        "react-router-dom": "^6.2.1",
        "react-scripts": "5.0.0",
        "web-vitals": "^2.1.2"
@@ -1905,6 +1910,51 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
+      "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
+        "react": ">=16.x"
+      }
+    },
    "node_modules/@gar/promisify": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -7659,6 +7709,14 @@
        }
      }
    },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
    "node_modules/forever-agent": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -13949,6 +14007,14 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -18600,6 +18666,35 @@
        }
      }
    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
+      "integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
    "@gar/promisify": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -22868,6 +22963,11 @@
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
    },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
    "forever-agent": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -27317,6 +27417,12 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -3,13 +3,18 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "classnames": "^2.3.1",
+    "font-awesome": "^4.7.0",
    "node-sass": "^7.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"

--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
 .customButton {
-  background-color: red;
+  font-size: 0.75rem;
+  color: #5e72e4;
+  position: relative;
+  transition: all 0.15s ease !important;
+  letter-spacing: 0.025em;
+  text-transform: none;
+  will-change: transform;
+  line-height: 1.5 !important;
+  padding: 0.25rem 0.5rem !important;
+  border-radius: 0.25rem !important;
+  border-color: #fff;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0.1, 0.1, 0.1, 0.11),
+    0 1px 3px rgba(0.1, 0.1, 0.1, 0.8);
+  font-weight: 600;
+  line-height: 1.5 !important;
+  display: inline-block;
+  /* padding: 0.625rem 1.25rem!important; */
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 0.25rem !important;
+  margin-right: 16px;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 7px 14px rgba(0.5, 0.5, 0.93, 0.1),
+      0 3px 6px rgba(0, 0, 0, 0.8);
+    color: #212529;
+    border-color: #fff;
+    background-color: #fff;
+  }
+  &.filledButton {
+    color: #fff;
+    background-color: #5e72e4;
+  }
 }
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
 import React from "react";
 import PropTypes from "prop-types";
 import cs from "classnames";
-import styles from "./Button.module.scss";
+import style from "./Button.module.scss";

 function Button(props) {
-  return <div className={cs(styles.customButton)}>here</div>;
+  const { label, customClass, disabled, variant, handleButtonClick } = props;
+  return (
+    <button
+      onClick={handleButtonClick}
+      className={cs(style.customButton, style[variant], customClass)}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
 }

-Button.propTypes = {};
+Button.propTypes = {
+  customClass: PropTypes.string,
+  label: PropTypes.string,
+  disabled: PropTypes.bool,
+  variant: PropTypes.oneOf(["filledButton"]),
+  handleButtonClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  label: "Button",
+  variant: "filledButton",
+  customClass: "",
+};

 export default Button;
--- a/src/components/SearchBar/SearchBar.js
+++ b/src/components/SearchBar/SearchBar.js
+import React from "react";
+import { FaSearch } from "react-icons/fa";
+import styles from "./SearchBar.module.scss";
+
+function SearchBar(props) {
+  return (
+    <div className={styles.searchBar}>
+      <FaSearch className={styles.icon} />
+
+      <input className={styles.searchInput} placeholder={props.searchInput} type="text" />
+    </div>
+  );
+}
+
+export default SearchBar;
--- a/src/components/SearchBar/SearchBar.module.scss
+++ b/src/components/SearchBar/SearchBar.module.scss
+.searchBar {
+  display: flex;
+  width: 300px;
+  border-radius: 25px;
+  background-color: #d0d3e4;
+  padding: 6px;
+  text-align: center;
+  transition: width 1s;
+  &:hover {
+    width: 500px;
+    background-color: white;
+  }
+  .searchInput {
+    background-color: transparent;
+    border: transparent;
+
+    &:focus {
+      outline: none;
+    }
+  }
+  .icon {
+    padding-left: 5px;
+    padding-top: 5px;
+    padding-right: 5px;
+    width: 22px;
+    height: 22px;
+  }
+}
No results found