Set modal max value to fit-content by default (#6227)

exercism · Sep 22, 2023 · 871dcfa · 871dcfa
1 parent 85f2891
commit 871dcfa
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/app/css/modals/finish-student-mentor-discussion.css b/app/css/modals/finish-student-mentor-discussion.css
@@ -21,7 +21,7 @@
         @apply text-p-large;
     }
     & .lhs .explanation {
-        max-width: 640px;
+        max-width: 720px;
     }
     & .form-buttons {
         @apply flex;

diff --git a/app/javascript/components/modals/student/FinishMentorDiscussionModal.tsx b/app/javascript/components/modals/student/FinishMentorDiscussionModal.tsx
@@ -85,6 +85,7 @@ const Inner = ({
           <Step.DonationStep
             donation={donation}
             links={links}
+            setContainerModalMaxWidth={setMaxWidth}
             onSuccessfulDonation={(_, amount) => {
               setDonatedAmount(amount)
               send('SUCCESSFUL_DONATION')
@@ -143,6 +144,7 @@ const Inner = ({
   }
 }
 
+export const MODAL_MAX_WIDTH_DEFAULT_VALUE = 'fit-content'
 export const FinishMentorDiscussionModal = ({
   links,
   discussion,
@@ -154,7 +156,7 @@ export const FinishMentorDiscussionModal = ({
   donation: MentoringSessionDonation
   onCancel: () => void
 }): JSX.Element => {
-  const [maxWidth, setMaxWidth] = useState('100%')
+  const [maxWidth, setMaxWidth] = useState(MODAL_MAX_WIDTH_DEFAULT_VALUE)
   return (
     <Modal
       style={{ content: { maxWidth } }}

diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/CelebrationStep.tsx b/app/javascript/components/modals/student/finish-mentor-discussion-modal/CelebrationStep.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
 import { GraphicalIcon } from '../../../common'
+import { MODAL_MAX_WIDTH_DEFAULT_VALUE } from '../FinishMentorDiscussionModal'
 
 type Links = {
   exercise: string
@@ -16,12 +17,12 @@ export const CelebrationStep = ({
 }): JSX.Element => {
   useEffect(() => {
     setContainerModalMaxWidth('900px')
-    return () => setContainerModalMaxWidth('100%')
+    return () => setContainerModalMaxWidth(MODAL_MAX_WIDTH_DEFAULT_VALUE)
   }, [setContainerModalMaxWidth])
 
   return (
     <section className="celebrate-step neon-cat">
-      <img src="https://i.gifer.com/17xo.gif" className="gif"/>
+      <img src="https://i.gifer.com/17xo.gif" className="gif" />
       <h2>Thank you for leaving a testimonial 💙</h2>
       <p>
         <strong>You&apos;ve helped make {mentorHandle}&apos;s day.</strong>

diff --git a/app/javascript/components/modals/student/finish-mentor-discussion-modal/DonationStep.tsx b/app/javascript/components/modals/student/finish-mentor-discussion-modal/DonationStep.tsx
@@ -1,19 +1,27 @@
-import React, { lazy, Suspense } from 'react'
+import React, { lazy, Suspense, useEffect } from 'react'
 import { MentoringSessionDonation } from '@/components/types'
 import currency from 'currency.js'
 import { DiscussionActionsLinks } from '@/components/student/mentoring-session/DiscussionActions'
 import { PaymentIntentType } from '@/components/donations/stripe-form/useStripeForm'
+import { MODAL_MAX_WIDTH_DEFAULT_VALUE } from '../FinishMentorDiscussionModal'
 const Form = lazy(() => import('@/components/donations/Form'))
 
 export function DonationStep({
   donation,
   links,
   onSuccessfulDonation,
+  setContainerModalMaxWidth,
 }: {
   donation: MentoringSessionDonation
   links: DiscussionActionsLinks
+  setContainerModalMaxWidth: React.Dispatch<React.SetStateAction<string>>
   onSuccessfulDonation: (type: PaymentIntentType, amount: currency) => void
 }): JSX.Element {
+  useEffect(() => {
+    setContainerModalMaxWidth('100%')
+    return () => setContainerModalMaxWidth(MODAL_MAX_WIDTH_DEFAULT_VALUE)
+  }, [setContainerModalMaxWidth])
+
   return (
     <div id="a11y-finish-mentor-discussion" className="flex flex-row">
       <div className="mr-64">

diff --git a/...cript/components/modals/student/finish-mentor-discussion-modal/SuccessfulDonationStep.tsx b/...cript/components/modals/student/finish-mentor-discussion-modal/SuccessfulDonationStep.tsx
@@ -3,6 +3,7 @@ import currency from 'currency.js'
 import { GraphicalIcon } from '@/components/common'
 import { BadgeMedallion } from '@/components/common/BadgeMedallion'
 import type { BadgeRarity } from '@/components/types'
+import { MODAL_MAX_WIDTH_DEFAULT_VALUE } from '../FinishMentorDiscussionModal'
 
 const badge = { rarity: 'rare' as BadgeRarity, iconName: 'supporter' }
 
@@ -17,7 +18,7 @@ export function SuccessfulDonationStep({
 }): JSX.Element {
   useEffect(() => {
     setContainerModalMaxWidth('900px')
-    return () => setContainerModalMaxWidth('100%')
+    return () => setContainerModalMaxWidth(MODAL_MAX_WIDTH_DEFAULT_VALUE)
   }, [setContainerModalMaxWidth])
 
   return (