fix: Styling alert for API usage banner (#4360)

Flagsmith · Jul 18, 2024 · 61cfdbf · 61cfdbf
1 parent bce6530
commit 61cfdbf
Showing 1 changed file with 28 additions and 21 deletions.
diff --git a/frontend/web/components/OrganisationLimit.tsx b/frontend/web/components/OrganisationLimit.tsx
@@ -36,34 +36,41 @@ const OrganisationLimit: FC<OrganisationLimitType> = ({
     totalApiCalls?.totals.total,
   )}/${Format.shortenNumber(maxApiCalls?.max_api_calls)}`
 
-  const alertMaxApiCallsText = `You have used ${apiUsageMessageText} of your allowed requests.`
+  const alertMaxApiCallsText = `You have used ${apiUsageMessageText} of your allowed requests`
 
   const QuotaExceededMessage = () => {
     return (
       <div
         className={'alert alert-danger announcement'}
         style={{ display: 'initial' }}
       >
-        <span className='icon-alert'>
-          <Icon name='close-circle' />
-        </span>
-        <>
-          Your organisation has exceeded its API usage quota{' '}
-          {`(${alertMaxApiCallsText}).`}{' '}
-          {Utils.getPlanName(organisationPlan) === 'Free' ? (
-            <b>Please upgrade your plan to continue receiving service.</b>
-          ) : (
-            <b>Automated billing for the overages may apply.</b>
-          )}
-        </>
-        <Button
-          className='btn ml-3'
-          onClick={() => {
-            document.location.replace(Constants.upgradeURL)
-          }}
-        >
-          Upgrade plan
-        </Button>
+        <Row>
+          <span className='icon-alert'>
+            <Icon name='close-circle' />
+          </span>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            Your organisation has exceeded its API usage quota{' '}
+            {`(${alertMaxApiCallsText}).`}{' '}
+            {Utils.getPlanName(organisationPlan) === 'Free' ? (
+              <b>Please upgrade your plan to continue receiving service.</b>
+            ) : (
+              <b>Automated billing for the overages may apply.</b>
+            )}
+          </div>
+          <Button
+            className='btn ml-3'
+            onClick={() => {
+              document.location.replace(Constants.upgradeURL)
+            }}
+          >
+            Upgrade plan
+          </Button>
+        </Row>
       </div>
     )
   }