GlcoinCore/squeaknode
1
0
Fork 0
mirror of https://github.com/yzernik/squeaknode.git synced 2026-08-13 12:33:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add about modal (#2139)

Browse source 
* Add basic about modal to nav page

* Include github link and telegram link in about modal
This commit is contained in:
Jonathan Zernik 2022-04-13 03:17:48 -04:00 • committed by GitHub
parent 552cfcbecb
commit 2347e53c5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/Icons.js
View file

@ -164,3 +164,7 @@ export const ICON_NEWMSG = (props) => {
export const ICON_SEND = (props) => {
return <svg style={props.styles} viewBox="0 0 24 24"><g><path d="M21.13 11.358L3.614 2.108c-.29-.152-.64-.102-.873.126-.23.226-.293.577-.15.868l4.362 8.92-4.362 8.92c-.143.292-.08.643.15.868.145.14.333.212.523.212.12 0 .24-.028.35-.087l17.517-9.25c.245-.13.4-.386.4-.664s-.155-.532-.4-.662zM4.948 4.51l12.804 6.762H8.255l-3.307-6.76zm3.307 8.26h9.498L4.948 19.535l3.307-6.763z"></path></g></svg>
}
export const ICON_QUESTION = (props) => {
return <svg style={props.styles} viewBox="0 0 16 16"><g><path fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215 0 1.344-.665 2.288-1.79 2.973-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712 1.03-.632 1.397-1.135 1.397-2.028 0-.979-.758-1.698-1.926-1.698-1.009 0-1.71.529-1.938 1.402-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09 0-.618-.473-1.092-1.095-1.092-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"/></g></svg>
}

45
frontend/src/components/Nav/index.js
View file

@ -4,7 +4,7 @@ import './style.scss'
import { ICON_LOGO, ICON_HOME, ICON_HASH, ICON_BELL, ICON_INBOX
, ICON_LIST, ICON_USER, ICON_LAPTOP, ICON_SETTINGS, ICON_HOMEFILL, ICON_HASHFILL,
ICON_BELLFILL, ICON_LISTFILL, ICON_USERFILL, ICON_LAPTOPFILL, ICON_FEATHER,
ICON_CLOSE,ICON_IMGUPLOAD, ICON_INBOXFILL, ICON_LIGHT, ICON_DARK, ICON_TWITTER } from '../../Icons'
ICON_CLOSE,ICON_IMGUPLOAD, ICON_INBOXFILL, ICON_LIGHT, ICON_DARK, ICON_TWITTER, ICON_QUESTION } from '../../Icons'
import { ReactComponent as YourSvg } from '../../icon.svg';
import axios from 'axios'
import {API_URL} from '../../config'
@ -47,6 +47,7 @@ const Nav = ({history}) => {
const [theme, setTheme] = useState(true)
const [modalOpen, setModalOpen] = useState(false)
const [sellPriceModalOpen, setSellPriceModalOpen] = useState(false)
const [aboutModalOpen, setAboutModalOpen] = useState(false)
const [styleBody, setStyleBody] = useState(false)
const [newSellPriceMsat, setNewSellPriceMsat] = useState(0)
@ -96,6 +97,12 @@ const Nav = ({history}) => {
setTimeout(()=>{ setSellPriceModalOpen(!sellPriceModalOpen) },20)
}
const toggleAboutModal = (param, type) => {
setMoreMenu(false);
setStyleBody(!styleBody)
setTimeout(()=>{ setAboutModalOpen(!aboutModalOpen) },20)
}
const handleModalClick = (e) => {
e.stopPropagation()
@ -200,7 +207,7 @@ const Nav = ({history}) => {
<div onClick={()=>openMore()} style={{display: moreMenu ? 'block' : 'none'}} className="more-menu-background">
<div className="more-modal-wrapper">
{moreMenu ?
<div style={{top: `${document.getElementById('moremenu').getBoundingClientRect().top - 40}px`, left: `${document.getElementById('moremenu').getBoundingClientRect().left}px`, height: '208px' }} onClick={(e)=>handleMenuClick(e)} className="more-menu-content">
<div style={{top: `${document.getElementById('moremenu').getBoundingClientRect().top - 40}px`, left: `${document.getElementById('moremenu').getBoundingClientRect().left}px`, height: '258px' }} onClick={(e)=>handleMenuClick(e)} className="more-menu-content">
<div onClick={changeTheme} className="more-menu-item">
<span>Change Theme</span>
<span>{theme ? <ICON_DARK/> : <ICON_LIGHT />}</span>
@ -213,6 +220,10 @@ const Nav = ({history}) => {
<span>Forward Tweets</span>
<span><ICON_TWITTER /></span>
</div>
<div onClick={toggleAboutModal} className="more-menu-item">
<span>About</span>
<span><ICON_QUESTION /></span>
</div>
<div onClick={()=>logout()} className="more-menu-item">
Log out
</div>
@ -283,6 +294,36 @@ const Nav = ({history}) => {
</div>
</div>
{/* Modal for about info */}
<div onClick={()=>toggleAboutModal()} style={{display: aboutModalOpen ? 'block' : 'none'}} className="modal-edit">
<div onClick={(e)=>handleModalClick(e)} className="modal-content">
<div className="modal-header">
<div className="modal-closeIcon">
<div onClick={()=>toggleAboutModal()} className="modal-closeIcon-wrap">
<ICON_CLOSE />
</div>
</div>
<p className="modal-title">About Squeaknode</p>
</div>
<div className="modal-body">
<div className="edit-input-wrap">
Squeaknode is open-source software. View the source code here:&nbsp;
<a href="https://github.com/squeaknode/squeaknode"
target="_blank" rel="noopener noreferrer"
style={{color: "blue", fontWeight: 'bold'}}
>https://github.com/squeaknode/squeaknode</a>
</div>
<div className="edit-input-wrap">
Have questions? Join the telegram chat here:&nbsp;
<a href="https://t.me/squeaknode"
target="_blank" rel="noopener noreferrer"
style={{color: "blue", fontWeight: 'bold'}}
>t.me/squeaknode</a>
</div>
</div>
</div>
</div>
{/* Block screen with modal when make squeak is waiting. */}
<div style={{display: useSelector(selectMakeSqueakStatus) === 'loading' ? 'block' : 'none'}} className="modal-edit">
<div style={{minHeight: '270px', height: 'initial'}} className="modal-content">