diff --git a/package-lock.json b/package-lock.json
index 1631057d87271924175bf2fe4f25c3fe0a346986..e1206746379c6e2efb74eb43c551f2d2cc0b4778 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,14 @@
"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",
@@ -1906,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",
@@ -7660,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",
@@ -18609,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",
@@ -22877,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",
diff --git a/package.json b/package.json
index 494d872e8d79fa97b6faebf75d586ce225cdb2f0..715429ba57aa4dbcb87db17b361b076d80533218 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,14 @@
"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",
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index acc1b1f6c799ea2f480a83ab5ab36f4ca2e17aea..7e14d63ae4a2ea2def9c9d7026f6ed3139bf9edc 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -1,3 +1,43 @@
.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;
+ }
}
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 81d9f273cf0dc01672cda8f26e51b6cc500a58a5..e73ff80b0876aef51106eb267fbc8a70e15aed36 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -1,12 +1,33 @@
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;
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
index 47bd75fe68f73210808690284dca728c292b1cf2..6f9137cb5929efbd9848f2b2e533d5210d4962e2 100644
--- a/src/components/Card/index.jsx
+++ b/src/components/Card/index.jsx
@@ -5,7 +5,7 @@ import styles from "./Card.module.scss";
function Card(props) {
const {customClass, children } = props;
return (
- <div className={cs(styles.card, customClass )} title="Copy to Clipboard">
+ <div className={cs(styles.card, customClass )}>
{children}
</div>
);
diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..2034b1056faa159956ab836bf39004d211ae17ba
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.js
@@ -0,0 +1,15 @@
+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;
diff --git a/src/components/SearchBar/SearchBar.module.scss b/src/components/SearchBar/SearchBar.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dfd6120dc2036cd8ceb2dfa066a4d138e9d9fc10
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.module.scss
@@ -0,0 +1,28 @@
+.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;
+ }
+}