fix: challenge modal styles (#987)

standardnotes · Apr 19, 2022 · 9f8c402 · 9f8c402
1 parent 8fe7df3
commit 9f8c402
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -208,9 +208,11 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         )}
         <ProtectedIllustration className="w-30 h-30 mb-4" />
         <div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div>
-        <div className="text-center text-sm max-w-76 mb-4">{challenge.subheading}</div>
+        {challenge.subheading && (
+          <div className="text-center text-sm max-w-76 mb-4 break-word">{challenge.subheading}</div>
+        )}
         <form
-          className="flex flex-col items-center min-w-76 mb-4"
+          className="flex flex-col items-center min-w-76"
           onSubmit={(e) => {
             e.preventDefault()
             submit().catch(console.error)
@@ -230,7 +232,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         <Button
           variant="primary"
           disabled={isProcessing}
-          className="min-w-76 mb-3.5"
+          className="min-w-76 mt-1 mb-3.5"
           onClick={() => {
             submit().catch(console.error)
           }}

diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
@@ -39,9 +39,9 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
   }, [isInvalid])
 
   return (
-    <>
+    <div className="w-full mb-3">
       {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
-        <div className="mt-3 min-w-76">
+        <div className="min-w-76">
           <div className="text-sm font-medium mb-2">Allow protected access for</div>
           <div className="flex items-center justify-between bg-grey-4 rounded p-1">
             {ProtectionSessionDurations.map((option) => {
@@ -91,6 +91,6 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
       {isInvalid && (
         <div className="text-sm color-danger mt-2">Invalid authentication, please try again.</div>
       )}
-    </>
+    </div>
   )
 }