forked from brave/brave-core
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
pin popup, error popup, error handling, tooltip
- Loading branch information
1 parent
686d7e8
commit e7be948
Showing
10 changed files
with
387 additions
and
57 deletions.
There are no files selected for viewing
24 changes: 24 additions & 0 deletions
24
components/brave_rewards/resources/page/ping_doc_signer/components/ErrorPopup/ErrorPopup.tsx
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 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at https://mozilla.org/MPL/2.0/. */ | ||
| import * as React from 'react'; | ||
| import { | ||
| StyledErrorPopup, | ||
| StyledErrorTitle, | ||
| StyledErrorMessage, | ||
| StyledErrorButtons, | ||
| StyledConfirmButton | ||
| } from './styles'; | ||
| import { ErrorPopupProps } from '../../utils/types'; | ||
|
|
||
| export const ErrorPopup: React.FC<ErrorPopupProps> = ({ message, onContinue }) => ( | ||
| <StyledErrorPopup> | ||
| <StyledErrorTitle> | ||
| Action Incomplete! | ||
| </StyledErrorTitle> | ||
| <StyledErrorMessage>{message}</StyledErrorMessage> | ||
| <StyledErrorButtons> | ||
| <StyledConfirmButton onClick={onContinue} $continue>Continue</StyledConfirmButton> | ||
| </StyledErrorButtons> | ||
| </StyledErrorPopup> | ||
| ); |
79 changes: 79 additions & 0 deletions
79
components/brave_rewards/resources/page/ping_doc_signer/components/ErrorPopup/styles.ts
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,79 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at https://mozilla.org/MPL/2.0/. */ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const StyledErrorPopup = styled('div')` | ||
| position: fixed; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| background-color: #323639; | ||
| border-radius: 24px; | ||
| padding: 20px 45px; | ||
| width: 595px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| height: fit-content; | ||
| border: 1px solid #CACACA; | ||
| transition: height 0.3s ease; | ||
| overflow: hidden; | ||
| z-index: 1000; | ||
| ` | ||
|
|
||
| export const StyledErrorTitle = styled('h2')<{ verification?: boolean }>` | ||
| color: Red; | ||
| font-family: Poppins; | ||
| font-size: ${p => p.verification ? '40px' : '45px'}; | ||
| margin: 12px 0 0 0; | ||
| padding: 0; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| ` | ||
|
|
||
| export const StyledErrorMessage = styled('p')` | ||
| color: #FFF; | ||
| font-family: Poppins; | ||
| font-size: 20px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| margin-top: -5px; | ||
| ` | ||
|
|
||
| export const StyledErrorName = styled('p')` | ||
| color: #FFF; | ||
| font-family: Poppins; | ||
| font-size: 25px; | ||
| font-style: normal; | ||
| margin: -10px 0 10px 0; | ||
| font-weight: 700; | ||
| line-height: normal; | ||
| ` | ||
|
|
||
| export const StyledErrorButtons = styled('div')` | ||
| display: flex; | ||
| margin-top: 45px; | ||
| justify-content: center; | ||
| gap: 28px; | ||
| margin-left: 350px; | ||
| ` | ||
|
|
||
| export const StyledConfirmButton = styled('button')<{ $continue?: boolean }>` | ||
| display: flex; | ||
| padding: 15px 35px; | ||
| align-items: baseline; | ||
| gap: 10px; | ||
| background-color: ${p => p.$continue ? '#2BB563' : 'white'}; | ||
| color: ${p => p.$continue ? 'white' : 'black'}; | ||
| border: none; | ||
| border-radius: 40px; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| &:hover { | ||
| background-color: ${p => p.$continue ? '#2BB563' : '#2BB563'}; | ||
| color: white; | ||
| } | ||
| ` |
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
54 changes: 54 additions & 0 deletions
54
components/brave_rewards/resources/page/ping_doc_signer/components/InputPopup/InputPopup.tsx
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,54 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this file, | ||
| * You can obtain one at https://mozilla.org/MPL/2.0/. */ | ||
| import { useState } from 'react'; | ||
| import * as React from 'react'; | ||
| import { PopupContainer, PopupContent, Title, InputField, ButtonContainer, BackButton, CompleteButton, InputWrapper, EyeButton } from './styles'; | ||
|
|
||
| interface InputPopupProps { | ||
| userName: string; | ||
| onBack: () => void; | ||
| onComplete: (pin: string) => void; | ||
| } | ||
|
|
||
| const InputPopup: React.FC<InputPopupProps> = ({ userName, onBack, onComplete }) => { | ||
| const [pin, setPin] = useState(''); | ||
| const [showPassword, setShowPassword] = useState(false); | ||
|
|
||
| const handlePinChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| setPin(event.target.value); | ||
| }; | ||
|
|
||
| const handleComplete = () => { | ||
| onComplete(pin); | ||
| }; | ||
|
|
||
| const togglePasswordVisibility = () => { | ||
| setShowPassword(!showPassword); | ||
| }; | ||
|
|
||
| return ( | ||
| <PopupContainer> | ||
| <PopupContent> | ||
| <Title>{userName}</Title> | ||
| <InputWrapper> | ||
| <InputField | ||
| type={showPassword ? "text" : "password"} | ||
| placeholder="Please enter your signature pin" | ||
| value={pin} | ||
| onChange={handlePinChange} | ||
| /> | ||
| <EyeButton onClick={togglePasswordVisibility}> | ||
| {showPassword ? "👁️" : "👁️🗨️"} | ||
| </EyeButton> | ||
| </InputWrapper> | ||
| <ButtonContainer> | ||
| <BackButton onClick={onBack}>Back</BackButton> | ||
| <CompleteButton onClick={handleComplete}>Complete signature</CompleteButton> | ||
| </ButtonContainer> | ||
| </PopupContent> | ||
| </PopupContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default InputPopup; |
Oops, something went wrong.