From a8d07a002e84e361b8c24327affe491f2337b151 Mon Sep 17 00:00:00 2001
From: Ivar Nakken <ivarnakken1441@gmail.com>
Date: Mon, 28 Oct 2024 10:05:56 +0100
Subject: [PATCH] Update registration pending card to use standardized card
 styling

---
 app/routes/events/components/Event.module.css | 15 +++------
 .../events/components/JoinEventForm.tsx       | 32 ++++++++-----------
 .../LoadingIndicator.module.css               |  2 +-
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/app/routes/events/components/Event.module.css b/app/routes/events/components/Event.module.css
index 1b204fc5d6..5641cf042d 100644
--- 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
index d12fa9f5b9..8924ba0935 100644
--- 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
index 27bda6e107..04c0cae368 100644
--- 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 {