Update registration pending card to use standardized card styling

webkom · Oct 28, 2024 · a8d07a0 · a8d07a0
1 parent 99e68c6
commit a8d07a0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 30 deletions.
diff --git a/app/routes/events/components/Event.module.css b/app/routes/events/components/Event.module.css
@@ -20,17 +20,10 @@
   margin-top: var(--spacing-md);
 }
 
-.registrationPending {
-  line-height: 1.3;
-  text-align: center;
-  margin: var(--spacing-md) 0;
-}
-
-.registrationPendingHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  margin-bottom: var(--spacing-md);
+.registrationPendingTooltip {
+  display: inline;
+  vertical-align: middle;
+  margin-left: var(--spacing-xs);
 }
 
 .eventPrice {

diff --git a/app/routes/events/components/JoinEventForm.tsx b/app/routes/events/components/JoinEventForm.tsx
@@ -8,7 +8,7 @@ import {
   ProgressBar,
 } from '@webkom/lego-bricks';
 import { sumBy } from 'lodash';
-import { Info, UserMinus } from 'lucide-react';
+import { CircleHelp, UserMinus } from 'lucide-react';
 import moment from 'moment-timezone';
 import { useState, useEffect } from 'react';
 import { Field } from 'react-final-form';
@@ -41,6 +41,7 @@ import {
   toReadableSemester,
 } from '../utils';
 import styles from './Event.module.css';
+import sharedStyles from './EventDetail/EventDetail.module.css';
 import PaymentRequestForm from './StripeElement';
 import type { EventRegistrationStatus } from 'app/models';
 import type { PoolRegistrationWithUser } from 'app/reducers/events';
@@ -104,21 +105,16 @@ const RegistrationPending = ({
 }: {
   reg_status?: EventRegistrationStatus;
 }) => (
-  <Card className={styles.registrationPending}>
-    <span className={styles.registrationPendingHeader}>
-      <h3>
-        Vi behandler din{' '}
-        {reg_status === 'PENDING_UNREGISTER'
-          ? 'avregistrering'
-          : 'registrering'}
-        .
-      </h3>
-    </span>
-    <p>
-      Det kan ta et øyeblikk eller to.
-      <br />
-      <i>Du trenger ikke refreshe siden.</i>
+  <Card severity="info" className={sharedStyles.card}>
+    <Card.Header>
+      Vi behandler din{' '}
+      {reg_status === 'PENDING_UNREGISTER' ? 'avregistrering' : 'registrering'}
+    </Card.Header>
+    <span>
+      Det kan ta et øyeblikk eller to, og du trenger ikke refreshe siden
       <Tooltip
+        style={{ display: 'inline-block' }}
+        className={styles.registrationPendingTooltip}
         content={
           <span>
             Avhengig av last på våre servere kan dette ta litt tid. Ved mistanke
@@ -134,9 +130,9 @@ const RegistrationPending = ({
           </span>
         }
       >
-        <Icon iconNode={<Info />} size={20} />
+        <Icon iconNode={<CircleHelp />} size={18} />
       </Tooltip>
-    </p>
+    </span>
     <ProgressBar />
   </Card>
 );
@@ -342,7 +338,7 @@ const JoinEventForm = ({ title, event, registration }: Props) => {
             )}
 
             {sumPenalties > 0 && event.heedPenalties && (
-              <Card severity="warning">
+              <Card severity="warning" className={sharedStyles.card}>
                 <Card.Header>NB!</Card.Header>
                 <p>
                   {sumPenalties > 2

diff --git a/packages/lego-bricks/src/components/LoadingIndicator/LoadingIndicator.module.css b/packages/lego-bricks/src/components/LoadingIndicator/LoadingIndicator.module.css
@@ -45,7 +45,7 @@
 .progressLine::before {
   height: 3px;
   width: 100%;
-  margin: 0;
+  margin-top: var(--spacing-sm);
 }
 
 .progressLine {