quick name fix, pull out styles into a var

codecov · Nov 25, 2024 · dd6e8a5 · dd6e8a5
1 parent 03a3324
commit dd6e8a5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/pages/RepoPage/ActivationAlert/ActivationAlert.tsx b/src/pages/RepoPage/ActivationAlert/ActivationAlert.tsx
@@ -6,7 +6,7 @@ import { usePlanData } from 'services/account'
 import { isFreePlan } from 'shared/utils/billing'
 
 import ActivationRequiredAlert from './ActivationRequiredAlert'
-import ActivationRequiredSelfHostet from './ActivationRequiredSelfHosted'
+import ActivationRequiredSelfHosted from './ActivationRequiredSelfHosted'
 import FreePlanSeatsTakenAlert from './FreePlanSeatsTakenAlert'
 import PaidPlanSeatsTakenAlert from './PaidPlanSeatsTakenAlert'
 import UnauthorizedRepoDisplay from './UnauthorizedRepoDisplay'
@@ -33,7 +33,7 @@ function ActivationAlert() {
     !isFreePlan(planData?.plan?.value) && planData?.plan?.hasSeatsLeft
 
   if (config.IS_SELF_HOSTED) {
-    return <ActivationRequiredSelfHostet />
+    return <ActivationRequiredSelfHosted />
   }
 
   if (renderFreePlanSeatsTakenAlert) {

diff --git a/...es/RepoPage/ActivationAlert/ActivationRequiredSelfHosted/ActivationRequiredSelfHosted.tsx b/...es/RepoPage/ActivationAlert/ActivationRequiredSelfHosted/ActivationRequiredSelfHosted.tsx
@@ -6,9 +6,12 @@ import {
 import A from 'ui/A'
 import Button from 'ui/Button'
 
+const alertWrapperClassName =
+  'flex flex-col items-center justify-center gap-8 bg-ds-gray-primary pb-28 pt-12 text-center'
+
 function SeatsLimitReached() {
   return (
-    <div className="flex flex-col items-center justify-center gap-8 bg-ds-gray-primary pb-28 pt-12 text-center">
+    <div className={alertWrapperClassName}>
       <img src={upsideDownUmbrella} alt="Forbidden" className="w-36" />
       <div className="flex w-2/5 flex-col gap-1">
         <h1 className="text-2xl">Activation Required</h1>
@@ -30,7 +33,7 @@ function SeatsLimitReached() {
 
 function SeatsAvailable({ isAdmin }: { isAdmin: boolean }) {
   return (
-    <div className="flex flex-col items-center justify-center gap-8 bg-ds-gray-primary pb-28 pt-12 text-center">
+    <div className={alertWrapperClassName}>
       <img src={upsideDownUmbrella} alt="Forbidden" className="w-36" />
       <div className="flex w-2/5 flex-col gap-1">
         <h1 className="text-2xl">Activation Required</h1>