From e1f1d84201ea23bdc38bcaa9c0acce0541e226ab Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Sat, 4 Jul 2020 10:26:29 +0530 Subject: [PATCH] - designing the dashboard - resume preview - create resume modal --- gatsby-browser.js | 20 +++- gatsby-config.js | 4 + package-lock.json | 92 ++++++++++++++++++- package.json | 5 +- src/components/dashboard/CreateResume.js | 34 +++++++ .../dashboard/CreateResume.module.css | 31 +++++++ src/components/dashboard/ResumePreview.js | 64 +++++++++++++ .../dashboard/ResumePreview.module.css | 40 ++++++++ src/components/dashboard/TopNavbar.js | 41 +++++++++ src/components/dashboard/TopNavbar.module.css | 8 ++ src/components/landing/Hero.js | 7 +- src/components/router/LoadingScreen.js | 19 ++++ src/components/router/PrivateRoute.js | 21 +++++ src/components/shared/Input.js | 32 +++++++ src/components/shared/Input.module.css | 15 +++ src/components/shared/Logo.js | 4 +- src/contexts/ModalContext.js | 6 ++ src/contexts/UserContext.js | 15 ++- src/modals/AuthModal.js | 8 +- src/modals/BaseModal.js | 8 +- src/modals/CreateResumeModal.js | 55 +++++++++++ src/modals/ModalRegistrar.js | 2 + src/pages/404.js | 4 +- src/pages/app.js | 17 ++++ src/pages/app/dashboard.js | 25 +++++ src/styles/global.css | 1 - src/styles/toastify.css | 4 +- 27 files changed, 556 insertions(+), 26 deletions(-) create mode 100644 src/components/dashboard/CreateResume.js create mode 100644 src/components/dashboard/CreateResume.module.css create mode 100644 src/components/dashboard/ResumePreview.js create mode 100644 src/components/dashboard/ResumePreview.module.css create mode 100644 src/components/dashboard/TopNavbar.js create mode 100644 src/components/dashboard/TopNavbar.module.css create mode 100644 src/components/router/LoadingScreen.js create mode 100644 src/components/router/PrivateRoute.js create mode 100644 src/components/shared/Input.js create mode 100644 src/components/shared/Input.module.css create mode 100644 src/modals/CreateResumeModal.js create mode 100644 src/pages/app.js create mode 100644 src/pages/app/dashboard.js diff --git a/gatsby-browser.js b/gatsby-browser.js index 43392b69..e08081ee 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,19 +1,29 @@ import React from "react"; +import { MuiThemeProvider, createMuiTheme } from "@material-ui/core"; import "firebase/auth"; import "firebase/analytics"; import "firebase/firestore"; +import { ModalProvider } from "./src/contexts/ModalContext"; import { ThemeProvider } from "./src/contexts/ThemeContext"; +import { UserProvider } from "./src/contexts/UserContext"; import "./src/styles/colors.css"; import "./src/styles/tailwind.css"; import "./src/styles/global.css"; -import { ModalProvider } from "./src/contexts/ModalContext"; -import { UserProvider } from "./src/contexts/UserContext"; + +const theme = createMuiTheme({ + typography: { + fontWeightRegular: 500, + fontFamily: ["Montserrat", "sans-serif"].join(","), + }, +}); export const wrapRootElement = ({ element }) => ( - - {element} - + + + {element} + + ); diff --git a/gatsby-config.js b/gatsby-config.js index 05da31c5..40ae4f30 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -13,6 +13,10 @@ module.exports = { ], }, }, + { + resolve: `gatsby-plugin-create-client-paths`, + options: { prefixes: [`/app/*`] }, + }, `gatsby-plugin-lodash`, `gatsby-plugin-react-helmet`, { diff --git a/package-lock.json b/package-lock.json index 39e59947..1babb109 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3611,6 +3611,13 @@ "better-queue-memory": "^1.0.1", "node-eta": "^0.9.0", "uuid": "^3.0.0" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + } } }, "better-queue-memory": { @@ -7989,6 +7996,33 @@ "mime-types": "^2.1.12" } }, + "formik": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.1.4.tgz", + "integrity": "sha512-oKz8S+yQBzuQVSEoxkqqJrKQS5XJASWGVn6mrs+oTWrBoHgByVwwI1qHiVc9GKDpZBU9vAxXYAKz2BvujlwunA==", + "requires": { + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.14", + "lodash-es": "^4.17.14", + "react-fast-compare": "^2.0.1", + "scheduler": "^0.18.0", + "tiny-warning": "^1.0.2", + "tslib": "^1.10.0" + }, + "dependencies": { + "deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" + }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + } + } + }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -8325,6 +8359,11 @@ "ansi-regex": "^4.1.0" } }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + }, "yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -8388,6 +8427,14 @@ "micromatch": "^3.1.10" } }, + "gatsby-plugin-create-client-paths": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/gatsby-plugin-create-client-paths/-/gatsby-plugin-create-client-paths-2.3.9.tgz", + "integrity": "sha512-e5kT2LhLWHSVWGdcyG6x5YT2zECAl7KImV7Q4M/TR+MOqa0Z9FCg664aljmaDZeR6tFAnZXzvmy29PPd9eOGbw==", + "requires": { + "@babel/runtime": "^7.10.3" + } + }, "gatsby-plugin-firebase": { "version": "0.2.0-beta.4", "resolved": "https://registry.npmjs.org/gatsby-plugin-firebase/-/gatsby-plugin-firebase-0.2.0-beta.4.tgz", @@ -8655,6 +8702,11 @@ "proper-lockfile": "^4.1.1", "xdg-basedir": "^4.0.0" } + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, @@ -9013,6 +9065,11 @@ "version": "0.7.3", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==" + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, @@ -11799,6 +11856,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, + "lodash-es": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", + "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" + }, "lodash-webpack-plugin": { "version": "0.11.5", "resolved": "https://registry.npmjs.org/lodash-webpack-plugin/-/lodash-webpack-plugin-0.11.5.tgz", @@ -15824,6 +15886,11 @@ "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" + }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" } } }, @@ -16648,6 +16715,11 @@ "websocket-driver": ">=0.5.1" } }, + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + }, "websocket-driver": { "version": "0.6.5", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz", @@ -17620,6 +17692,13 @@ "requires": { "temp-dir": "^1.0.0", "uuid": "^3.0.1" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + } } }, "term-size": { @@ -18599,9 +18678,9 @@ "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, "uuid": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.2.0.tgz", + "integrity": "sha512-CYpGiFTUrmI6OBMkAdjSDM0k5h8SkkiTP4WAjQgDgNB1S3Ou9VBEvr6q0Kv2H1mMk7IWfxYGpMH5sd5AvcIV2Q==" }, "v8-compile-cache": { "version": "1.1.2", @@ -19134,6 +19213,13 @@ "requires": { "ansi-colors": "^3.0.0", "uuid": "^3.3.2" + }, + "dependencies": { + "uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" + } } }, "webpack-merge": { diff --git a/package.json b/package.json index f5121db0..30415714 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "@material-ui/core": "^4.11.0", "classnames": "^2.2.6", "firebase": "^7.15.5", + "formik": "^2.1.4", "gatsby": "^2.23.12", "gatsby-image": "^2.4.12", + "gatsby-plugin-create-client-paths": "^2.3.9", "gatsby-plugin-firebase": "^0.2.0-beta.4", "gatsby-plugin-lodash": "^3.3.9", "gatsby-plugin-manifest": "^2.4.17", @@ -35,7 +37,8 @@ "react-helmet": "^6.1.0", "react-icons": "^3.10.0", "react-loader-spinner": "^3.1.14", - "react-toastify": "^6.0.8" + "react-toastify": "^6.0.8", + "uuid": "^8.2.0" }, "devDependencies": { "prettier": "2.0.5", diff --git a/src/components/dashboard/CreateResume.js b/src/components/dashboard/CreateResume.js new file mode 100644 index 00000000..ff47d898 --- /dev/null +++ b/src/components/dashboard/CreateResume.js @@ -0,0 +1,34 @@ +import React, { useContext } from "react"; +import { MdAdd } from "react-icons/md"; +import styles from "./CreateResume.module.css"; +import ModalContext from "../../contexts/ModalContext"; + +const CreateResume = () => { + const { createResumeModal } = useContext(ModalContext); + + const handleClick = () => { + createResumeModal.setOpen(true); + }; + + return ( +
+
+ +
+
{}} + > + +
+
+

Create New Resume

+
+
+ ); +}; + +export default CreateResume; diff --git a/src/components/dashboard/CreateResume.module.css b/src/components/dashboard/CreateResume.module.css new file mode 100644 index 00000000..a783e025 --- /dev/null +++ b/src/components/dashboard/CreateResume.module.css @@ -0,0 +1,31 @@ +.resume { + @apply relative flex flex-col items-center; +} + +.resume > .backdrop { + max-width: 184px; + height: 260px; + @apply rounded absolute w-full bg-black shadow; + @apply absolute text-gray-500 flex justify-center items-center; +} + +.resume > .page { + max-width: 184px; + height: 260px; + @apply rounded absolute w-full bg-white; + @apply transition-opacity duration-200 ease-in-out; + @apply cursor-pointer absolute text-gray-500 flex justify-center items-center; +} + +.resume > .page:hover { + @apply transition-opacity duration-200 ease-in-out opacity-25; +} + +.resume > .meta { + margin-top: 260px; + @apply text-center; +} + +.resume > .meta p { + @apply mt-3 font-medium leading-normal; +} diff --git a/src/components/dashboard/ResumePreview.js b/src/components/dashboard/ResumePreview.js new file mode 100644 index 00000000..b1a696f7 --- /dev/null +++ b/src/components/dashboard/ResumePreview.js @@ -0,0 +1,64 @@ +import React, { useState } from "react"; +import { MdMoreHoriz, MdOpenInNew } from "react-icons/md"; +import { Menu, MenuItem } from "@material-ui/core"; +import styles from "./ResumePreview.module.css"; + +const ResumePreview = ({ title, subtitle }) => { + const [anchorEl, setAnchorEl] = useState(null); + + const handleClick = () => { + console.log("Hello, World!"); + }; + + const handleMenuClick = (event) => { + event.stopPropagation(); + setAnchorEl(event.currentTarget); + }; + + const handleMenuClose = () => { + setAnchorEl(null); + }; + + return ( +
+
+ Resume Preview +
+
+ + + + Duplicate + + Delete + + +
+
+

{title}

+ {subtitle} +
+
+ ); +}; + +export default ResumePreview; diff --git a/src/components/dashboard/ResumePreview.module.css b/src/components/dashboard/ResumePreview.module.css new file mode 100644 index 00000000..2e33cbf7 --- /dev/null +++ b/src/components/dashboard/ResumePreview.module.css @@ -0,0 +1,40 @@ +.resume { + @apply relative flex flex-col items-center; +} + +.resume > .backdrop { + max-width: 184px; + height: 260px; + @apply rounded absolute w-full bg-black shadow; +} + +.resume > .backdrop img { + max-width: 184px; + height: 260px; + @apply w-full object-cover rounded; +} + +.resume > .page { + max-width: 184px; + height: 260px; + @apply rounded absolute w-full bg-black; + @apply opacity-0 transition-opacity duration-200 ease-in-out; + @apply absolute text-gray-500 flex flex-col justify-evenly items-center; +} + +.resume > .page:hover { + @apply opacity-75 transition-opacity duration-200 ease-in-out; +} + +.resume > .meta { + margin-top: 260px; + @apply flex flex-col items-center; +} + +.resume > .meta p { + @apply mt-3 font-medium leading-normal; +} + +.resume > .meta span { + font-size: 10px; +} diff --git a/src/components/dashboard/TopNavbar.js b/src/components/dashboard/TopNavbar.js new file mode 100644 index 00000000..f7f798c9 --- /dev/null +++ b/src/components/dashboard/TopNavbar.js @@ -0,0 +1,41 @@ +import React, { useContext } from "react"; +import Logo from "../shared/Logo"; +import UserContext from "../../contexts/UserContext"; +import styles from "./TopNavbar.module.css"; +import { navigate, Link } from "gatsby"; + +const TopNavbar = () => { + const { user, logout } = useContext(UserContext); + + const handleLogout = async () => { + await logout(); + navigate("/"); + }; + + return ( +
+
+ + + + +
+ + + {user.displayName} +
+
+
+ ); +}; + +export default TopNavbar; diff --git a/src/components/dashboard/TopNavbar.module.css b/src/components/dashboard/TopNavbar.module.css new file mode 100644 index 00000000..274e5acc --- /dev/null +++ b/src/components/dashboard/TopNavbar.module.css @@ -0,0 +1,8 @@ +.navbar { + height: 65px; + @apply w-full shadow; +} + +.navbar > div { + @apply h-full flex items-center justify-between; +} diff --git a/src/components/landing/Hero.js b/src/components/landing/Hero.js index 4f6c592c..4b21734d 100644 --- a/src/components/landing/Hero.js +++ b/src/components/landing/Hero.js @@ -5,6 +5,7 @@ import ModalContext from "../../contexts/ModalContext"; import UserContext from "../../contexts/UserContext"; import Button from "../shared/Button"; import Logo from "../shared/Logo"; +import { navigate } from "gatsby"; const Hero = () => { const { user, loading } = useContext(UserContext); @@ -13,9 +14,11 @@ const Hero = () => { const handleLogin = () => authModal.setOpen(true); + const handleGotoApp = () => navigate("/app/dashboard"); + return (
- +

Reactive Resume

@@ -27,7 +30,7 @@ const Hero = () => { {user ? (