From f71fb0bb52416b33cbfc709dfb2015e45000b0eb Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Wed, 27 Mar 2019 15:20:22 -0600 Subject: [PATCH] chore: adding emotion and initial styles --- package.json | 3 + src/App.js | 25 ++---- src/components/Navbar/Navbar.js | 72 +++++++++++------ yarn.lock | 136 +++++++++++++++++++++++++++++++- 4 files changed, 195 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 2e70657..79247d8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/core": "^10.0.10", + "@emotion/styled": "^10.0.10", + "babel-plugin-emotion": "^10.0.9", "firebase": "^5.9.0", "react": "^16.8.4", "react-dom": "^16.8.4", diff --git a/src/App.js b/src/App.js index c9fc6c5..fe61bf0 100644 --- a/src/App.js +++ b/src/App.js @@ -11,27 +11,18 @@ import User from "./components/screens/User"; import Login from "./components/screens/Login"; import Register from "./components/screens/Register"; +import { withAuthentication } from "./components/session"; + class App extends Component { + state = { + authUser: JSON.parse(localStorage.getItem("authUser")) + }; + render() { + const { authUser } = this.state; return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
@@ -43,4 +34,4 @@ class App extends Component { } } -export default App; +export default withAuthentication(App); diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index fcc2605..7797d36 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -1,27 +1,55 @@ import React from "react"; import { Link } from "react-router-dom"; -import SignOut from "../SignOut"; +import styled from "@emotion/styled"; -const Navbar = () => ( -
-
    -
  • - Landing -
    • -
  • - Account -
    • -
  • - Login -
    • -
  • - Register -
    • -
  • - -
    • -
-
+import SignOut from "../SignOut"; +import { withAuthentication } from "../session"; + +const Header = styled.div` + background-color: #fafbfc; + height: 60px; + display: grid; + grid-template-areas: "... nav ..."; + grid-template-columns: 1fr minmax(240px, 720px) 1fr; + align-items: center; +`; +const Nav = styled.div` + grid-area: nav; + max-width: 720px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; +`; +const Logo = styled.div``; +const NavIcons = styled.div` + display: flex; + flex-direction: row; + * + * { + margin-left: 10px; + } +`; + +const Navbar = ({ authUser }) => ( +
+ +
); -export default Navbar; +export default withAuthentication(Navbar); diff --git a/yarn.lock b/yarn.lock index 0a162ca..49d0f46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -868,6 +868,107 @@ resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw== +"@emotion/cache@^10.0.9": + version "10.0.9" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f" + integrity sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw== + dependencies: + "@emotion/sheet" "0.9.2" + "@emotion/stylis" "0.8.3" + "@emotion/utils" "0.11.1" + "@emotion/weak-memoize" "0.2.2" + +"@emotion/core@^10.0.10": + version "10.0.10" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.10.tgz#8d3114e5a2f8b178a7067c603a2937516f180b08" + integrity sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg== + dependencies: + "@emotion/cache" "^10.0.9" + "@emotion/css" "^10.0.9" + "@emotion/serialize" "^0.11.6" + "@emotion/sheet" "0.9.2" + "@emotion/utils" "0.11.1" + +"@emotion/css@^10.0.9": + version "10.0.9" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.9.tgz#ea0df431965a308f6cb1d61386df8ad61e5befb5" + integrity sha512-jtHhUSWw+L7yxYgNtC+KJ3Ory90/jiAtpG1qT+gTQQ/RR5AMiigs9/lDHu/vnwljaq2S48FoKb/FZZMlJcC4bw== + dependencies: + "@emotion/serialize" "^0.11.6" + "@emotion/utils" "0.11.1" + babel-plugin-emotion "^10.0.9" + +"@emotion/hash@0.7.1": + version "0.7.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53" + integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA== + +"@emotion/is-prop-valid@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc" + integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA== + dependencies: + "@emotion/memoize" "0.7.1" + +"@emotion/memoize@0.7.1": + version "0.7.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" + integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== + +"@emotion/serialize@^0.11.6": + version "0.11.6" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.6.tgz#78be8b9ee9ff49e0196233ba6ec1c1768ba1e1fc" + integrity sha512-n4zVv2qGLmspF99jaEUwnMV0fnEGsyUMsC/8KZKUSUTZMYljHE+j+B6rSD8PIFtaUIhHaxCG2JawN6L+OgLN0Q== + dependencies: + "@emotion/hash" "0.7.1" + "@emotion/memoize" "0.7.1" + "@emotion/unitless" "0.7.3" + "@emotion/utils" "0.11.1" + csstype "^2.5.7" + +"@emotion/sheet@0.9.2": + version "0.9.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.2.tgz#74e5c6b5e489a1ba30ab246ab5eedd96916487c4" + integrity sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A== + +"@emotion/styled-base@^10.0.10": + version "10.0.10" + resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.10.tgz#ffb811295c9dcd9b3c12bf93301d7d8bcb02e6f4" + integrity sha512-uZwKrBfcH7jCRAQi5ZxsEGIZ+1Zr9/lof4TMsIolC0LSwpnWkQ+JRJLy+p4ZyATee9SdmyCV0sG/VTngVSnrpA== + dependencies: + "@emotion/is-prop-valid" "0.7.3" + "@emotion/serialize" "^0.11.6" + "@emotion/utils" "0.11.1" + object-assign "^4.1.1" + +"@emotion/styled@^10.0.10": + version "10.0.10" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.10.tgz#ec241a9389a585b2c2638b709c262c28469ed92e" + integrity sha512-k4p5WxwYJUVYKBlwOmfpqxeSwdPHqUycLHJY9ftleEvMfphYLB8lt9oPEkEty5XH4URh/wyUfZ2wW2ojrHODWA== + dependencies: + "@emotion/styled-base" "^10.0.10" + babel-plugin-emotion "^10.0.9" + +"@emotion/stylis@0.8.3": + version "0.8.3" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.3.tgz#3ca7e9bcb31b3cb4afbaeb66156d86ee85e23246" + integrity sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q== + +"@emotion/unitless@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f" + integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg== + +"@emotion/utils@0.11.1": + version "0.11.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.1.tgz#8529b7412a6eb4b48bdf6e720cc1b8e6e1e17628" + integrity sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg== + +"@emotion/weak-memoize@0.2.2": + version "0.2.2" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e" + integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA== + "@firebase/app-types@0.3.6": version "0.3.6" resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.3.6.tgz#4d04f2c7ed40ba2e0a713f125ecd2ecc65b082f5" @@ -1788,6 +1889,22 @@ babel-plugin-dynamic-import-node@2.2.0: dependencies: object.assign "^4.1.0" +babel-plugin-emotion@^10.0.9: + version "10.0.9" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.9.tgz#04a0404d5a4084d5296357a393d344c0f8303ae4" + integrity sha512-IfWP12e9/wHtWHxVTzD692Nbcmrmcz2tip7acp6YUqtrP7slAyr5B+69hyZ8jd55GsyNSZwryNnmuDEVe0j+7w== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/hash" "0.7.1" + "@emotion/memoize" "0.7.1" + "@emotion/serialize" "^0.11.6" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + escape-string-regexp "^1.0.5" + find-root "^1.1.0" + source-map "^0.5.7" + babel-plugin-istanbul@^4.1.6: version "4.1.6" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45" @@ -1803,7 +1920,7 @@ babel-plugin-jest-hoist@^23.2.0: resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167" integrity sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc= -babel-plugin-macros@2.5.0: +babel-plugin-macros@2.5.0, babel-plugin-macros@^2.0.0: version "2.5.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.0.tgz#01f4d3b50ed567a67b80a30b9da066e94f4097b6" integrity sha512-BWw0lD0kVZAXRD3Od1kMrdmfudqzDzYv2qrN3l2ISR1HVp1EgLKfbOrYV9xmY5k3qx3RIu5uPAUZZZHpo0o5Iw== @@ -1816,6 +1933,11 @@ babel-plugin-named-asset-import@^0.3.1: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.1.tgz#5ec13ec446d0a1e5bb6c57a1f94c9cdedb0c50d6" integrity sha512-vzZlo+yEB5YHqI6CRRTDojeT43J3Wf3C/MVkZW5UlbSeIIVUYRKtxaFT2L/VTv9mbIyatCW39+9g/SZolvwRUQ== +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -2659,7 +2781,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.1: +convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1: version "1.6.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20" integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A== @@ -3050,6 +3172,11 @@ cssstyle@^1.0.0: dependencies: cssom "0.3.x" +csstype@^2.5.7: + version "2.6.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.3.tgz#b701e5968245bf9b08d54ac83d00b624e622a9fa" + integrity sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg== + cyclist@~0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640" @@ -4109,6 +4236,11 @@ find-cache-dir@^2.0.0: make-dir "^2.0.0" pkg-dir "^3.0.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@3.0.0, find-up@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"