diff --git a/.gitignore b/.gitignore index 69fdfe1d..f058b07b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ node_modules build -.yarn \ No newline at end of file +.yarn +# Local Netlify folder +.netlify \ No newline at end of file diff --git a/client/.gitignore b/client/.gitignore index c4890e18..7f468da3 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -25,3 +25,6 @@ yarn-debug.log* yarn-error.log* .yarn + +# Local Netlify folder +.netlify \ No newline at end of file diff --git a/client/src/components/Apps/GoogleDrive/DownloadPage/DownloadPage.js b/client/src/components/Apps/GoogleDrive/DownloadPage/DownloadPage.js index 45381987..4b3d7932 100644 --- a/client/src/components/Apps/GoogleDrive/DownloadPage/DownloadPage.js +++ b/client/src/components/Apps/GoogleDrive/DownloadPage/DownloadPage.js @@ -1,139 +1,143 @@ -import {useState} from 'react' +import { useState } from 'react' +import Modal from '../Modal/index' -function DownloadPage () { +function DownloadPage() { - const [clicked, setClicked] = useState("desc"); + const [clicked, setClicked] = useState("desc"); - return( -
-
-
- -
- -
+ const [showModal, setShowModal] = useState(false); -

Supported Languages

-

English

-

Pricing

-

Free

-

Categories

- - - -
-
-

Google Drive

-
- - - - + const openModal = () => { + setShowModal(prev => !prev); + }; + + return ( +
+
+
+ +
+ + +
+ +

Supported Languages

+

English

+

Pricing

+

Free

+

Categories

+ + + +
+
+

Google Drive

+
+ + + + +
+ {clicked === "desc" ? ( +
+

+ Get notified as soon as someone makes a comment or suggestion +

+
+ +

+ {" "} + Google Drive{" "} + + APP + {" "} + 5:58 PM +

+

+ Jane Lorenson janel@{" "} + commented on +

+

+ Summer Retreat Financial Planning +

+
+

+ Is this going to be enough money for breakfast +

+

+ "Yes, i think this budget is perfect. Thanks!" +

- {clicked === "desc" ? ( -
-

- Get notified as soon as someone makes a comment or suggestion -

-
- -

- {" "} - Google Drive{" "} - - APP - {" "} - 5:58 PM -

-

- Jane Lorenson janel@{" "} - commented on -

-

- Summer Retreat Financial Planning -

-
-

- Is this going to be enough money for breakfast -

-

- "Yes, i think this budget is perfect. Thanks!" -

-
-
-
- ) : null} - {clicked === "desc" ? ( -
-

- Stay up to date about what’s happening on Google Drive without - leaving Zuri by connecting Google Drive and Zuri app -

-

- With Google Drive on Zuri, you can stay updated on: -

-
    -
  • New Commits
    • -
  • New Pull Requests
    • -
  • New Issues
    • -
  • Code Reviews
    • -
-
- ) : null}
- ) + ) : null} + {clicked === "desc" ? ( +
+

+ Stay up to date about what’s happening on Google Drive without + leaving Zuri by connecting Google Drive and Zuri app +

+

+ With Google Drive on Zuri, you can stay updated on: +

+
    +
  • New Commits
    • +
  • New Pull Requests
    • +
  • New Issues
    • +
  • Code Reviews
    • +
+
+ ) : null} +
+
+ ) } export default DownloadPage \ No newline at end of file diff --git a/client/src/components/Apps/GoogleDrive/GoogleDrive.module.css b/client/src/components/Apps/GoogleDrive/GoogleDrive.module.css index 5b299aa9..a727ef96 100644 --- a/client/src/components/Apps/GoogleDrive/GoogleDrive.module.css +++ b/client/src/components/Apps/GoogleDrive/GoogleDrive.module.css @@ -92,4 +92,89 @@ .markGreen { border-bottom: #0acf83 1px solid; -} \ No newline at end of file +} + +.modal_background { + width: 100%; + height: 100vh; + background: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + position: absolute; + z-index: 16; + top: 0; + left: 0 +} + +.modal_wrapper { + width: 50%; + height: 60%; + box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2); + background: #0d6efd; + color: #000; + position: absolute; + z-index: 9; + border-radius: 10px; + display: flex; + justify-content: center; + top: 20% +} + +.modal_content { + display: flex; + justify-content: center; + line-height: 1.8; + color: #141414; +} + .modal_button { + padding: 10px 24px; + background: #141414; + color: #fff; + border: none; + } + + .close_button { + cursor: pointer; + position: absolute; + top: 20px; + right: 20px; + width: 32px; + height: 32px; + padding: 0; + z-index: 10; + color: white + } + + .name_style{ + font-size: 18px; + color: white; + font-weight: 400; + display: flex; + align-items: center; + margin-top: 10% + } + + .input_section { + padding: 10px; + border-radius: 4px; + border: 1px solid black; + width: 100%; + height: 100%; + margin-top: 50px; + border: none; + outline: transparent; + } + + .submit_button { + margin-top: 60px; + padding: 5px; + width: 20%; + border-radius: 4px; + } + + .close_icon { + color: white; + margin-left: 10%;; + margin-top: 10px + } + diff --git a/client/src/components/Apps/GoogleDrive/Modal/Form.js b/client/src/components/Apps/GoogleDrive/Modal/Form.js new file mode 100644 index 00000000..5b5e978a --- /dev/null +++ b/client/src/components/Apps/GoogleDrive/Modal/Form.js @@ -0,0 +1,45 @@ +import React from 'react'; + +import styles from "../GoogleDrive.module.css"; + + +class NameForm extends React.Component { + constructor(props) { + super(props); + this.state = { value: '' }; + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(event) { + this.setState({ value: event.target.value }); + } + + handleSubmit(event) { + alert('A comment was submitted: ' + this.state.value); + event.preventDefault(); + } + + render() { + return ( +
+
+ + +
+ +
+
+
+ ); + } +} + +export default NameForm \ No newline at end of file diff --git a/client/src/components/Apps/GoogleDrive/Modal/index.js b/client/src/components/Apps/GoogleDrive/Modal/index.js new file mode 100644 index 00000000..3b4323a3 --- /dev/null +++ b/client/src/components/Apps/GoogleDrive/Modal/index.js @@ -0,0 +1,59 @@ +import React, { useRef, useEffect, useCallback } from 'react'; +import { func } from 'prop-types'; +import { AiOutlineCloseCircle } from 'react-icons/ai'; +import styles from "../GoogleDrive.module.css"; +import NameForm from './Form'; + + +const Modal = ({ showModal, setShowModal }) => { + const modalRef = useRef(); + + const closeModal = e => { + if (modalRef.current === e.target) { + setShowModal(false); + } + }; + + const keyPress = useCallback( + e => { + if (e.key === 'Escape' && showModal) { + setShowModal(false); + console.log('I pressed'); + } + }, + [setShowModal, showModal] + ); + + useEffect( + () => { + document.addEventListener('keydown', keyPress); + return () => document.removeEventListener('keydown', keyPress); + }, + [keyPress] + ); + + return ( + <> + {showModal ? ( +
+ +
+ + setShowModal(prev => !prev)} + /> +
+
+ ) : null} + + ); +}; + +Modal.propTypes = { + showModal: func, + setShowModal: func, +}; + +export default Modal \ No newline at end of file