Refactored and cleaned up Modal and friends
This commit is contained in:
		
					parent
					
						
							
								f64426fbe0
							
						
					
				
			
			
				commit
				
					
						00a720faa9
					
				
			
		
					 31 changed files with 853 additions and 787 deletions
				
			
		|  | @ -34,6 +34,16 @@ export function CaptchaDialog(props: Readonly<PropsType>): JSX.Element { | |||
|   }; | ||||
| 
 | ||||
|   if (isClosing && !isPending) { | ||||
|     const footer = ( | ||||
|       <> | ||||
|         <Button onClick={onCancelClick} variant={ButtonVariant.Secondary}> | ||||
|           {i18n('cancel')} | ||||
|         </Button> | ||||
|         <Button onClick={onSkipClick} variant={ButtonVariant.Destructive}> | ||||
|           {i18n('CaptchaDialog--can_close__skip-verification')} | ||||
|         </Button> | ||||
|       </> | ||||
|     ); | ||||
|     return ( | ||||
|       <Modal | ||||
|         modalName="CaptchaDialog" | ||||
|  | @ -42,18 +52,11 @@ export function CaptchaDialog(props: Readonly<PropsType>): JSX.Element { | |||
|         title={i18n('CaptchaDialog--can-close__title')} | ||||
|         onClose={() => setIsClosing(false)} | ||||
|         key="skip" | ||||
|         modalFooter={footer} | ||||
|       > | ||||
|         <section> | ||||
|           <p>{i18n('CaptchaDialog--can-close__body')}</p> | ||||
|         </section> | ||||
|         <Modal.ButtonFooter> | ||||
|           <Button onClick={onCancelClick} variant={ButtonVariant.Secondary}> | ||||
|             {i18n('cancel')} | ||||
|           </Button> | ||||
|           <Button onClick={onSkipClick} variant={ButtonVariant.Destructive}> | ||||
|             {i18n('CaptchaDialog--can_close__skip-verification')} | ||||
|           </Button> | ||||
|         </Modal.ButtonFooter> | ||||
|       </Modal> | ||||
|     ); | ||||
|   } | ||||
|  | @ -71,6 +74,21 @@ export function CaptchaDialog(props: Readonly<PropsType>): JSX.Element { | |||
|     } | ||||
|   }; | ||||
| 
 | ||||
|   const footer = ( | ||||
|     <Button | ||||
|       disabled={isPending} | ||||
|       onClick={onContinueClick} | ||||
|       ref={updateButtonRef} | ||||
|       variant={ButtonVariant.Primary} | ||||
|     > | ||||
|       {isPending ? ( | ||||
|         <Spinner size="22px" svgSize="small" direction="on-captcha" /> | ||||
|       ) : ( | ||||
|         'Continue' | ||||
|       )} | ||||
|     </Button> | ||||
|   ); | ||||
| 
 | ||||
|   return ( | ||||
|     <Modal | ||||
|       modalName="CaptchaDialog.pending" | ||||
|  | @ -80,25 +98,12 @@ export function CaptchaDialog(props: Readonly<PropsType>): JSX.Element { | |||
|       hasXButton | ||||
|       onClose={() => setIsClosing(true)} | ||||
|       key="primary" | ||||
|       modalFooter={footer} | ||||
|     > | ||||
|       <section> | ||||
|         <p>{i18n('CaptchaDialog__first-paragraph')}</p> | ||||
|         <p>{i18n('CaptchaDialog__second-paragraph')}</p> | ||||
|       </section> | ||||
|       <Modal.ButtonFooter> | ||||
|         <Button | ||||
|           disabled={isPending} | ||||
|           onClick={onContinueClick} | ||||
|           ref={updateButtonRef} | ||||
|           variant={ButtonVariant.Primary} | ||||
|         > | ||||
|           {isPending ? ( | ||||
|             <Spinner size="22px" svgSize="small" direction="on-captcha" /> | ||||
|           ) : ( | ||||
|             'Continue' | ||||
|           )} | ||||
|         </Button> | ||||
|       </Modal.ButtonFooter> | ||||
|     </Modal> | ||||
|   ); | ||||
| } | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Alvaro
				Alvaro