├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── src
    ├── lib
    │   ├── index.js
    │   └── components
    │   │   ├── styles
    │   │       ├── main.scss
    │   │       ├── _badge.scss
    │   │       ├── _base.scss
    │   │       ├── _button.scss
    │   │       └── _variables.scss
    │   │   ├── Badge.js
    │   │   └── Button.js
    ├── index.js
    ├── App.js
    └── App.css
├── dist
    ├── components
    │   ├── styles
    │   │   ├── main.scss
    │   │   ├── _badge.scss
    │   │   ├── _base.scss
    │   │   ├── _button.scss
    │   │   └── _variables.scss
    │   ├── Badge.js
    │   └── Button.js
    └── index.js
├── babel.config.json
├── .gitignore
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jawblet/npm-test/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jawblet/npm-test/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jawblet/npm-test/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | import Badge from './components/Badge';
2 | import Button from './components/Button';
3 | 
4 | export { Badge, 
5 |         Button }; 


--------------------------------------------------------------------------------
/dist/components/styles/main.scss:
--------------------------------------------------------------------------------
1 | //utils
2 | @import "variables";
3 | @import "base";
4 | 
5 | //components
6 | @import "badge";
7 | @import "button";
8 | 


--------------------------------------------------------------------------------
/src/lib/components/styles/main.scss:
--------------------------------------------------------------------------------
1 | //utils
2 | @import "variables";
3 | @import "base";
4 | 
5 | //components
6 | @import "badge";
7 | @import "button";
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );
11 | 


--------------------------------------------------------------------------------
/src/lib/components/Badge.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Badge = (props) => {
 4 |     return (
 5 |         <div className={`badge ${!props.value ? 'badge--none' :''} `}>
 6 |             <h4>{props.value || 0}</h4>
 7 |         </div>
 8 |     );
 9 | }
10 |  
11 | export default Badge;


--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "presets": [
 3 |       [
 4 |         "@babel/env",
 5 |         {
 6 |           "targets": {
 7 |             "edge": "17",
 8 |             "firefox": "60",
 9 |             "chrome": "67",
10 |             "safari": "11.1"
11 |           },
12 |           "useBuiltIns": "usage",
13 |           "corejs": "3.6.5"
14 |         }
15 |       ], 
16 |       "@babel/preset-react"
17 |     ]
18 |   }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/dist/components/styles/_badge.scss:
--------------------------------------------------------------------------------
 1 | .badge {
 2 |   display: inline-flex;
 3 |   align-items: center;
 4 |   justify-content: center;
 5 |   padding: 5px;
 6 |   font-size: 1rem;
 7 |   background-color: $accent2;
 8 |   border-radius: 1px;
 9 |   color: $off-white;
10 |   height: 1.5rem;
11 |   min-width: 1.5rem;
12 |   line-height: 100%; // center text 
13 |   cursor: pointer;
14 |     &--none {
15 |       background-color: $body-lightest;
16 |     } 
17 | }


--------------------------------------------------------------------------------
/src/lib/components/styles/_badge.scss:
--------------------------------------------------------------------------------
 1 | .badge {
 2 |   display: inline-flex;
 3 |   align-items: center;
 4 |   justify-content: center;
 5 |   padding: 5px;
 6 |   font-size: 1rem;
 7 |   background-color: $accent2;
 8 |   border-radius: 1px;
 9 |   color: $off-white;
10 |   height: 1.5rem;
11 |   min-width: 1.5rem;
12 |   line-height: 100%; // center text 
13 |   cursor: pointer;
14 |     &--none {
15 |       background-color: $body-lightest;
16 |     } 
17 | }


--------------------------------------------------------------------------------
/src/lib/components/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Button = (props) => {
 4 |     return (
 5 |         <button className={`btn btn--${props.kind} CTA`}
 6 |         data-id={props.id} 
 7 |         type={props.type} 
 8 |         name={props.name}
 9 |         value={props.value} 
10 |         disabled={props.disabled}
11 |         onClick={props.handleClick}
12 |         >
13 |             <h4>
14 |                 {props.label}
15 |             </h4> 
16 |     </button>
17 |      );
18 | }
19 |  
20 | export default Button;


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/dist/components/Badge.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.default = void 0;
 7 | 
 8 | var _react = _interopRequireDefault(require("react"));
 9 | 
10 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11 | 
12 | const Badge = props => {
13 |   return /*#__PURE__*/_react.default.createElement("div", {
14 |     className: "badge ".concat(!props.value ? 'badge--none' : '', " ")
15 |   }, /*#__PURE__*/_react.default.createElement("h4", null, props.value || 0));
16 | };
17 | 
18 | var _default = Badge;
19 | exports.default = _default;


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | Object.defineProperty(exports, "Badge", {
 7 |   enumerable: true,
 8 |   get: function get() {
 9 |     return _Badge.default;
10 |   }
11 | });
12 | Object.defineProperty(exports, "Button", {
13 |   enumerable: true,
14 |   get: function get() {
15 |     return _Button.default;
16 |   }
17 | });
18 | 
19 | var _Badge = _interopRequireDefault(require("./components/Badge"));
20 | 
21 | var _Button = _interopRequireDefault(require("./components/Button"));
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import Button from './lib/components/Button';
 2 | import Badge from './lib/components/Badge';
 3 | import './App.css';
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div style={{ display:'flex', 
 8 |               flexDirection:'column', 
 9 |               alignItems:'start', 
10 |               justifyContent:'center', 
11 |               gap:'1.5rem', 
12 |               padding: '5rem' }}>
13 |       <p>Wow, look at this component library.</p>
14 |       <h5>A notification badge:</h5>
15 |         <Badge value={3}/>
16 |       <br/>
17 |      <h5>A button:</h5>
18 |         <Button label="Enter" kind="primary"/>
19 |     </div>
20 |   );
21 | }
22 | 
23 | export default App;
24 | 


--------------------------------------------------------------------------------
/dist/components/styles/_base.scss:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::after,
 3 | *::before {
 4 |       margin: 0;
 5 |       padding: 0;
 6 |       border: 0;
 7 |       box-sizing: inherit; 
 8 |   }
 9 | 
10 | html {
11 |     box-sizing: border-box;
12 |     font-size: 90%;
13 |     line-height: 1;
14 |     width: 100%;
15 |     color: $body;
16 |     background: $off-white;
17 |     font-family: 'Helvetica';
18 |   }
19 | 
20 | h4 {
21 |   font-size: 0.8rem;
22 |   font-weight: lighter;
23 |   text-transform: uppercase;
24 |   letter-spacing: 0.5px;
25 | }
26 | 
27 | button {
28 |     background: none;
29 |     border: none;
30 |     padding: none;
31 |     cursor: pointer;
32 |     &:focus {
33 |       outline: none;
34 |     }
35 |   }


--------------------------------------------------------------------------------
/src/lib/components/styles/_base.scss:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::after,
 3 | *::before {
 4 |       margin: 0;
 5 |       padding: 0;
 6 |       border: 0;
 7 |       box-sizing: inherit; 
 8 |   }
 9 | 
10 | html {
11 |     box-sizing: border-box;
12 |     font-size: 90%;
13 |     line-height: 1;
14 |     width: 100%;
15 |     color: $body;
16 |     background: $off-white;
17 |     font-family: 'Helvetica';
18 |   }
19 | 
20 | h4 {
21 |   font-size: 0.8rem;
22 |   font-weight: lighter;
23 |   text-transform: uppercase;
24 |   letter-spacing: 0.5px;
25 | }
26 | 
27 | button {
28 |     background: none;
29 |     border: none;
30 |     padding: none;
31 |     cursor: pointer;
32 |     &:focus {
33 |       outline: none;
34 |     }
35 |   }


--------------------------------------------------------------------------------
/dist/components/Button.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.default = void 0;
 7 | 
 8 | var _react = _interopRequireDefault(require("react"));
 9 | 
10 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11 | 
12 | const Button = props => {
13 |   return /*#__PURE__*/_react.default.createElement("button", {
14 |     className: "btn btn--".concat(props.kind, " CTA"),
15 |     "data-id": props.id,
16 |     type: props.type,
17 |     name: props.name,
18 |     value: props.value,
19 |     disabled: props.disabled,
20 |     onClick: props.handleClick
21 |   }, /*#__PURE__*/_react.default.createElement("h4", null, props.label));
22 | };
23 | 
24 | var _default = Button;
25 | exports.default = _default;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## A small but functional npm package
 2 | 
 3 | 
 4 | ### Install
 5 | 
 6 | Install using `npm install jawblia`
 7 | 
 8 | ### Usage 
 9 | 
10 | In a React app, use the Button or Badge components:  
11 | `import { Button } from 'jawblia'`  
12 | `import { Badge } from 'jawblia'` 
13 | 
14 | #### Button props
15 | 
16 | | Name        | Description      
17 | | ----------- | -----------      
18 | | kind        | 'Primary' | 'Outline' | 'Inline' | 'Ghost' | ' Warning'            
19 | | data-id     | string             
20 | | type        | 'button' | 'submit' | 'reset'             
21 | | name        | string             
22 | | value       | string             
23 | | disabled    | Boolean          
24 | | onClick     | function         
25 | 
26 | 
27 | #### Badge props
28 | 
29 | | Name        | Description | 
30 | | ----------- | ----------- |
31 | | value       | integer     |
32 | 


--------------------------------------------------------------------------------
/dist/components/styles/_button.scss:
--------------------------------------------------------------------------------
 1 | %btn {
 2 |   height: 3rem;
 3 |   min-width: 3rem;
 4 |   border-radius: $border-small; 
 5 |   display: flex;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   cursor: pointer;
 9 |   background-color: $sand2;
10 |   position: relative;
11 |   transition: all $short-fade;
12 |   &:hover {
13 |     background-color: $accent;
14 |   }
15 |   &:active,
16 |   &--active {
17 |       background-color: $sand2;
18 |     }
19 |   &:disabled {
20 |     cursor: not-allowed;
21 |     &:hover {
22 |       background-color: inherit;
23 |     }
24 |   }
25 | }
26 | 
27 | //general additional styles for all buttons
28 | .btn {
29 |   @extend %btn; 
30 |   &--primary { 
31 |     background-color: $sand3;
32 |   }
33 |   &--outline {
34 |     border: 3px solid $sand3;
35 |   }
36 |   &--ghost {
37 |     color: $body-lightest;
38 |     background-color: $sand2;
39 |   }
40 |   &--inline {
41 |       background-color: inherit;
42 |    }
43 |   &--warning{
44 |       color: $error;
45 |       background-color: $error-light; 
46 |       &:hover {
47 |         background-color: $error-light; 
48 |       }
49 |     }
50 | }
51 | 
52 | //LONG BUTTON
53 | .CTA { 
54 |   min-width: 6rem;
55 |   padding: 0 0.5rem;
56 |   border: 3px solid transparent;
57 | }
58 | 
59 | 


--------------------------------------------------------------------------------
/src/lib/components/styles/_button.scss:
--------------------------------------------------------------------------------
 1 | %btn {
 2 |   height: 3rem;
 3 |   min-width: 3rem;
 4 |   border-radius: $border-small; 
 5 |   display: flex;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   cursor: pointer;
 9 |   background-color: $sand2;
10 |   position: relative;
11 |   transition: all $short-fade;
12 |   &:hover {
13 |     background-color: $accent;
14 |   }
15 |   &:active,
16 |   &--active {
17 |       background-color: $sand2;
18 |     }
19 |   &:disabled {
20 |     cursor: not-allowed;
21 |     &:hover {
22 |       background-color: inherit;
23 |     }
24 |   }
25 | }
26 | 
27 | //general additional styles for all buttons
28 | .btn {
29 |   @extend %btn; 
30 |   &--primary { 
31 |     background-color: $sand3;
32 |   }
33 |   &--outline {
34 |     border: 3px solid $sand3;
35 |   }
36 |   &--ghost {
37 |     color: $body-lightest;
38 |     background-color: $sand2;
39 |   }
40 |   &--inline {
41 |       background-color: inherit;
42 |    }
43 |   &--warning{
44 |       color: $error;
45 |       background-color: $error-light; 
46 |       &:hover {
47 |         background-color: $error-light; 
48 |       }
49 |     }
50 | }
51 | 
52 | //LONG BUTTON
53 | .CTA { 
54 |   min-width: 6rem;
55 |   padding: 0 0.5rem;
56 |   border: 3px solid transparent;
57 | }
58 | 
59 | 


--------------------------------------------------------------------------------
/dist/components/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | $max-width: 1140px; 
 2 |  
 3 | //text 
 4 | $body: #312F2C;
 5 | $body-medium: #433D37;
 6 | $body-light: #776B5E; 
 7 | $body-lightest: #C7BEB6;
 8 | 
 9 | //palette 
10 | $off-white: #FFFCF8; //background
11 | $sand: #FAF3ED; //depth + contrast 
12 | $sand2: #F2EADF; //depth + contrast 
13 | $sand3: #EFDDC8; //pop styles + highlights 
14 | $sand4: #E1C7A9;// borders + details
15 | 
16 | $accent: rgba(247, 192, 110, 0.75);
17 | $accent2: #EA9144;
18 | $accent3: rgb(219, 107, 38);
19 | 
20 | //other 
21 | $error: #973618;
22 | $error-light: #eb8c6f;
23 | 
24 | //borders 
25 | $border-large: 1rem;
26 | $border-small: 0.5rem; 
27 | $border-smallest: 5px; 
28 | 
29 | $border-body: 1px solid $body; 
30 | $border-trans: 1px solid transparent; 
31 | $border: 1px solid black; //for testing 
32 | 
33 | //shadow
34 | $transparent: rgba(235, 233, 229, 0.75);
35 | $shadow: rgb(235, 233, 229); // for shadows and disabled states
36 | $soft-shadow: 4px 4px 16px $shadow, 
37 | -4px -4px 16px #fff;
38 | 
39 | //animation
40 | $shortest-fade: .15s;
41 | $short-fade: .35s;
42 | $long-fade: .7s;
43 | 
44 | // 0.5rem 1rem 1.5rem 3rem 5rem 10rem 
45 | 
46 | :root {
47 |     --sand: #{$sand};
48 |     --sand2: #{$sand2};
49 |     --sand3: #{$sand3};
50 |     --sand4: #{$sand4};
51 |     --offwhite: #{$off-white};
52 |     --body: #{$body};
53 |     --body-medium: #{$body-medium};
54 |     --body-light: #{$body-light};
55 |     --body-lightest: #{$body-lightest};
56 |     --error: #{$error};
57 |     --errorlight: #{$error-light};
58 |     --accent: #{$accent};
59 |     --accent2: #{$accent2};
60 |     --accent3: #{$accent3};
61 |     --shadow: #{$shadow};
62 | }
63 | 


--------------------------------------------------------------------------------
/src/lib/components/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | $max-width: 1140px; 
 2 |  
 3 | //text 
 4 | $body: #312F2C;
 5 | $body-medium: #433D37;
 6 | $body-light: #776B5E; 
 7 | $body-lightest: #C7BEB6;
 8 | 
 9 | //palette 
10 | $off-white: #FFFCF8; //background
11 | $sand: #FAF3ED; //depth + contrast 
12 | $sand2: #F2EADF; //depth + contrast 
13 | $sand3: #EFDDC8; //pop styles + highlights 
14 | $sand4: #E1C7A9;// borders + details
15 | 
16 | $accent: rgba(247, 192, 110, 0.75);
17 | $accent2: #EA9144;
18 | $accent3: rgb(219, 107, 38);
19 | 
20 | //other 
21 | $error: #973618;
22 | $error-light: #eb8c6f;
23 | 
24 | //borders 
25 | $border-large: 1rem;
26 | $border-small: 0.5rem; 
27 | $border-smallest: 5px; 
28 | 
29 | $border-body: 1px solid $body; 
30 | $border-trans: 1px solid transparent; 
31 | $border: 1px solid black; //for testing 
32 | 
33 | //shadow
34 | $transparent: rgba(235, 233, 229, 0.75);
35 | $shadow: rgb(235, 233, 229); // for shadows and disabled states
36 | $soft-shadow: 4px 4px 16px $shadow, 
37 | -4px -4px 16px #fff;
38 | 
39 | //animation
40 | $shortest-fade: .15s;
41 | $short-fade: .35s;
42 | $long-fade: .7s;
43 | 
44 | // 0.5rem 1rem 1.5rem 3rem 5rem 10rem 
45 | 
46 | :root {
47 |     --sand: #{$sand};
48 |     --sand2: #{$sand2};
49 |     --sand3: #{$sand3};
50 |     --sand4: #{$sand4};
51 |     --offwhite: #{$off-white};
52 |     --body: #{$body};
53 |     --body-medium: #{$body-medium};
54 |     --body-light: #{$body-light};
55 |     --body-lightest: #{$body-lightest};
56 |     --error: #{$error};
57 |     --errorlight: #{$error-light};
58 |     --accent: #{$accent};
59 |     --accent2: #{$accent2};
60 |     --accent3: #{$accent3};
61 |     --shadow: #{$shadow};
62 | }
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jawblia",
 3 |   "description": "Two test React components",
 4 |   "author": "Jawblia",
 5 |   "keywords": ["react", "components", "ui"],
 6 |   "version": "0.1.0",
 7 |   "private": false,
 8 |   "main": "dist/index.js",
 9 |   "module": "dist/index.js",
10 |   "typings": "dist/index.d.ts",
11 |   "files": [ "dist", "README.md" ],
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/jawblia/npm-test.git"
15 |   },
16 |   "dependencies": {
17 |     "@babel/polyfill": "^7.12.1",
18 |     "@testing-library/jest-dom": "^5.11.4",
19 |     "@testing-library/react": "^11.1.0",
20 |     "@testing-library/user-event": "^12.1.10",
21 |     "node-sass": "^5.0.0",
22 |     "web-vitals": "^1.0.1"
23 |   },
24 |   "scripts": {
25 |     "start": "react-scripts start",
26 |     "test": "react-scripts test",
27 |     "sass": "node-sass src/lib/components/styles/main.scss src/App.css -w",
28 |     "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
29 |     "eject": "react-scripts eject"
30 |   },
31 |   "eslintConfig": {
32 |     "extends": [
33 |       "react-app",
34 |       "react-app/jest"
35 |     ]
36 |   },
37 |   "browserslist": {
38 |     "production": [
39 |       ">0.2%",
40 |       "not dead",
41 |       "not op_mini all"
42 |     ],
43 |     "development": [
44 |       "last 1 chrome version",
45 |       "last 1 firefox version",
46 |       "last 1 safari version"
47 |     ]
48 |   },
49 |   "devDependencies": {
50 |     "react": "^17.0.2",
51 |     "react-dom": "^17.0.2",
52 |     "react-scripts": "4.0.3",
53 |     "@babel/cli": "^7.13.14",
54 |     "@babel/core": "^7.13.14",
55 |     "@babel/preset-env": "^7.13.12"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --sand: #FAF3ED;
  3 |   --sand2: #F2EADF;
  4 |   --sand3: #EFDDC8;
  5 |   --sand4: #E1C7A9;
  6 |   --offwhite: #FFFCF8;
  7 |   --body: #312F2C;
  8 |   --body-medium: #433D37;
  9 |   --body-light: #776B5E;
 10 |   --body-lightest: #C7BEB6;
 11 |   --error: #973618;
 12 |   --errorlight: #eb8c6f;
 13 |   --accent: rgba(247, 192, 110, 0.75);
 14 |   --accent2: #EA9144;
 15 |   --accent3: #db6b26;
 16 |   --shadow: #ebe9e5; }
 17 | 
 18 | *,
 19 | *::after,
 20 | *::before {
 21 |   margin: 0;
 22 |   padding: 0;
 23 |   border: 0;
 24 |   box-sizing: inherit; }
 25 | 
 26 | html {
 27 |   box-sizing: border-box;
 28 |   font-size: 90%;
 29 |   line-height: 1;
 30 |   width: 100%;
 31 |   color: #312F2C;
 32 |   background: #FFFCF8;
 33 |   font-family: 'Helvetica'; }
 34 | 
 35 | h4 {
 36 |   font-size: 0.8rem;
 37 |   font-weight: lighter;
 38 |   text-transform: uppercase;
 39 |   letter-spacing: 0.5px; }
 40 | 
 41 | button {
 42 |   background: none;
 43 |   border: none;
 44 |   padding: none;
 45 |   cursor: pointer; }
 46 |   button:focus {
 47 |     outline: none; }
 48 | 
 49 | .badge {
 50 |   display: inline-flex;
 51 |   align-items: center;
 52 |   justify-content: center;
 53 |   padding: 5px;
 54 |   font-size: 1rem;
 55 |   background-color: #EA9144;
 56 |   border-radius: 1px;
 57 |   color: #FFFCF8;
 58 |   height: 1.5rem;
 59 |   min-width: 1.5rem;
 60 |   line-height: 100%;
 61 |   cursor: pointer; }
 62 |   .badge--none {
 63 |     background-color: #C7BEB6; }
 64 | 
 65 | .btn {
 66 |   height: 3rem;
 67 |   min-width: 3rem;
 68 |   border-radius: 0.5rem;
 69 |   display: flex;
 70 |   justify-content: center;
 71 |   align-items: center;
 72 |   cursor: pointer;
 73 |   background-color: #F2EADF;
 74 |   position: relative;
 75 |   transition: all 0.35s; }
 76 |   .btn:hover {
 77 |     background-color: rgba(247, 192, 110, 0.75); }
 78 |   .btn:active {
 79 |     background-color: #F2EADF; }
 80 |   .btn:disabled {
 81 |     cursor: not-allowed; }
 82 |     .btn:disabled:hover {
 83 |       background-color: inherit; }
 84 | 
 85 | .btn--primary {
 86 |   background-color: #EFDDC8; }
 87 | 
 88 | .btn--outline {
 89 |   border: 3px solid #EFDDC8; }
 90 | 
 91 | .btn--ghost {
 92 |   color: #C7BEB6;
 93 |   background-color: #F2EADF; }
 94 | 
 95 | .btn--inline {
 96 |   background-color: inherit; }
 97 | 
 98 | .btn--warning {
 99 |   color: #973618;
100 |   background-color: #eb8c6f; }
101 |   .btn--warning:hover {
102 |     background-color: #eb8c6f; }
103 | 
104 | .CTA {
105 |   min-width: 6rem;
106 |   padding: 0 0.5rem;
107 |   border: 3px solid transparent; }
108 | 


--------------------------------------------------------------------------------