-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(frontend): Contact Us Modal (#2835)
* feature(frontend): Contact Us Modal * feature(frontend): Contact Us Modal
- Loading branch information
Showing
10 changed files
with
216 additions
and
6 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import styled from 'styled-components'; | ||
import {Modal as AntModal, Button, Typography} from 'antd'; | ||
import Plushie from 'assets/plushie.svg'; | ||
|
||
export const Container = styled.div` | ||
position: absolute; | ||
right: 12px; | ||
bottom: 12px; | ||
cursor: pointer; | ||
`; | ||
|
||
export const PlushieImage = styled.img.attrs({ | ||
src: Plushie, | ||
})``; | ||
|
||
export const PulseButtonContainer = styled.div` | ||
position: absolute; | ||
left: 2px; | ||
top: -4px; | ||
`; | ||
|
||
export const ModalFooter = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
gap: 12px; | ||
`; | ||
|
||
export const FullWidthButton = styled(Button)` | ||
&& { | ||
&& { | ||
width: 100%; | ||
margin: 0px; | ||
} | ||
} | ||
`; | ||
|
||
export const Header = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
gap: 12px; | ||
`; | ||
|
||
export const Title = styled(Typography.Title)``; | ||
|
||
export const Message = styled(Typography.Paragraph)` | ||
&& { | ||
margin: 0; | ||
} | ||
`; | ||
|
||
export const Modal = styled(AntModal).attrs({ | ||
width: 'auto', | ||
})` | ||
right: 32px; | ||
top: calc(100vh - 410px); | ||
position: absolute; | ||
height: max-content; | ||
padding: 0; | ||
.ant-modal-content { | ||
width: 340px; | ||
} | ||
.ant-modal-footer { | ||
border: none; | ||
padding-top: 0; | ||
} | ||
.ant-modal-body { | ||
padding-bottom: 19px; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import {createContext, useContext, useMemo, useState} from 'react'; | ||
import {noop} from 'lodash'; | ||
import * as S from './ContactUs.styled'; | ||
import ContactUsModal from './ContactUsModal'; | ||
import PulseButton from '../PulseButton'; | ||
|
||
interface IContext { | ||
onOpen(): void; | ||
} | ||
|
||
export const Context = createContext<IContext>({ | ||
onOpen: noop, | ||
}); | ||
|
||
export const useContactUsModal = () => useContext(Context); | ||
|
||
const ContactUs: React.FC = ({children}) => { | ||
const [isOpen, setIsOpen] = useState(false); | ||
const value = useMemo<IContext>(() => ({onOpen: () => setIsOpen(true)}), []); | ||
|
||
return ( | ||
<Context.Provider value={value}> | ||
{children} | ||
<S.Container onClick={() => setIsOpen(true)}> | ||
<S.PulseButtonContainer> | ||
<PulseButton /> | ||
</S.PulseButtonContainer> | ||
<S.PlushieImage /> | ||
</S.Container> | ||
<ContactUsModal isOpen={isOpen} onClose={() => setIsOpen(false)} /> | ||
</Context.Provider> | ||
); | ||
}; | ||
|
||
export default ContactUs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import * as S from './ContactUs.styled'; | ||
import ContactUsModalFooter from './ContactUsModalFooter'; | ||
|
||
interface IProps { | ||
isOpen: boolean; | ||
onClose(): void; | ||
} | ||
|
||
const ContactUsModal = ({isOpen, onClose}: IProps) => { | ||
return ( | ||
<S.Modal visible={isOpen} onCancel={onClose} footer={<ContactUsModalFooter />}> | ||
<S.Header> | ||
<S.PlushieImage width="100px" height="auto" /> | ||
<S.Title>Let us help you</S.Title> | ||
</S.Header> | ||
<S.Message> | ||
Technical glitches can be tricky, even for the best of us. Don't fret! We're here to save your day. | ||
Create an Issue or contact us via Discord and our tech-savvy team are ready to lend a helping hand. | ||
</S.Message> | ||
</S.Modal> | ||
); | ||
}; | ||
|
||
export default ContactUsModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import {DISCORD_URL, GITHUB_ISSUES_URL} from 'constants/Common.constants'; | ||
import * as S from './ContactUs.styled'; | ||
|
||
const ContactUsModalFooter = () => { | ||
return ( | ||
<S.ModalFooter> | ||
<a href={GITHUB_ISSUES_URL} target="_blank"> | ||
<S.FullWidthButton type="primary">Create an Issue</S.FullWidthButton> | ||
</a> | ||
<a href={DISCORD_URL} target="_blank"> | ||
<S.FullWidthButton ghost type="primary"> | ||
Contact Team on Discord | ||
</S.FullWidthButton> | ||
</a> | ||
</S.ModalFooter> | ||
); | ||
}; | ||
|
||
export default ContactUsModalFooter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import {useContactUsModal} from './ContactUs'; | ||
|
||
// eslint-disable-next-line no-restricted-exports | ||
export {default} from './ContactUs'; | ||
export {useContactUsModal}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import styled, {DefaultTheme, keyframes} from 'styled-components'; | ||
|
||
const getPulseAnimation = (theme: DefaultTheme) => | ||
keyframes` | ||
0% { | ||
transform: scale(.7); | ||
box-shadow: 0 0 0 0 ${theme.color.primaryLight}; | ||
} | ||
70% { | ||
transform: scale(1); | ||
box-shadow: 0 0 0 2px ${theme.color.primaryLight}; | ||
} | ||
100% { | ||
transform: scale(.7); | ||
box-shadow: 0 0 0 0 ${theme.color.primaryLight}; | ||
} | ||
`; | ||
|
||
export const PulseButton = styled.button` | ||
width: 9px; | ||
height: 9px; | ||
border: none; | ||
padding: 0px; | ||
border-radius: 50%; | ||
cursor: pointer; | ||
background: ${({theme}) => theme.color.primary}; | ||
animation-name: ${({theme}) => getPulseAnimation(theme)}; | ||
animation-duration: 1.5s; | ||
animation-iteration-count: infinite; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import {PulseButton} from './PulseButton.styled'; | ||
|
||
export default PulseButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters