Add: information about prikk

webkom · Jan 31, 2025 · 8dc5249 · 8dc5249
1 parent b6c4179
commit 8dc5249
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 59 deletions.
diff --git a/app/routes/users/components/UserProfile/Penalties.module.css b/app/routes/users/components/UserProfile/Penalties.module.css
@@ -30,3 +30,16 @@
   height: 1px;
   background-color: var(--border-gray);
 }
+
+.cardContainer {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.infoIcon {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  color: black;
+}
diff --git a/app/routes/users/components/UserProfile/Penalties.tsx b/app/routes/users/components/UserProfile/Penalties.tsx
@@ -12,6 +12,8 @@ import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import styles from './Penalties.module.css';
 import PenaltyForm from './PenaltyForm';
 import type { EntityId } from '@reduxjs/toolkit';
+import { Heading1, icons } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 type Props = {
   userId: EntityId;
@@ -27,69 +29,78 @@ const Penalties = ({ userId }: Props) => {
 
   return (
     <ProfileSection title="Prikker">
-      {penalties.length ? (
-        <>
-          {penalties.map((penalty, index) => (
-            <>
-              <Flex key={penalty.id} column gap="var(--spacing-sm)">
-                <span className={styles.weight}>
-                  {penalty.weight} {penalty.weight > 1 ? 'prikker' : 'prikk'}
-                </span>
-                <LinkInfoField
-                  name="Fra arragement"
-                  to={`/events/${
-                    penalty.sourceEvent.slug || penalty.sourceEvent.id
-                  }`}
-                >
-                  {penalty.sourceEvent.title}
-                </LinkInfoField>
-                <InfoField name="Begrunnelse">{penalty.reason}</InfoField>
-                <InfoField name="Utgår">
-                  <FormatTime
-                    time={penalty.exactExpiration}
-                    className={cx('secondaryFontColor', styles.time)}
-                  />
-                </InfoField>
-
-                {canDeletePenalties && (
-                  <ConfirmModal
-                    title="Slett prikk"
-                    message="Er du sikker på at du vil slette denne prikken?"
-                    onConfirm={() => {
-                      dispatch(deletePenalty(penalty.id));
-                    }}
-                    closeOnConfirm
+      <div className={styles.cardContainer}>
+        {penalties.length ? (
+          <>
+            {penalties.map((penalty, index) => (
+              <>
+                <Flex key={penalty.id} column gap="var(--spacing-sm)">
+                  <span className={styles.weight}>
+                    {penalty.weight} {penalty.weight > 1 ? 'prikker' : 'prikk'}
+                  </span>
+                  <LinkInfoField
+                    name="Fra arragement"
+                    to={`/events/${
+                      penalty.sourceEvent.slug || penalty.sourceEvent.id
+                    }`}
                   >
-                    {({ openConfirmModal }) => (
-                      <Button danger onPress={openConfirmModal}>
-                        Slett prikk
-                      </Button>
-                    )}
-                  </ConfirmModal>
+                    {penalty.sourceEvent.title}
+                  </LinkInfoField>
+                  <InfoField name="Begrunnelse">{penalty.reason}</InfoField>
+                  <InfoField name="Utgår">
+                    <FormatTime
+                      time={penalty.exactExpiration}
+                      className={cx('secondaryFontColor', styles.time)}
+                    />
+                  </InfoField>
+
+                  {canDeletePenalties && (
+                    <ConfirmModal
+                      title="Slett prikk"
+                      message="Er du sikker på at du vil slette denne prikken?"
+                      onConfirm={() => {
+                        dispatch(deletePenalty(penalty.id));
+                      }}
+                      closeOnConfirm
+                    >
+                      {({ openConfirmModal }) => (
+                        <Button danger onPress={openConfirmModal}>
+                          Slett prikk
+                        </Button>
+                      )}
+                    </ConfirmModal>
+                  )}
+                </Flex>
+
+                {index !== penalties.length - 1 && (
+                  <div className={styles.divider} />
                 )}
+              </>
+            ))}
+          </>
+        ) : (
+          <>
+            <Flex alignItems="center" gap="var(--spacing-md)">
+              <Icon
+                name="thumbs-up-outline"
+                size={40}
+                className={styles.success}
+              />
+              <Flex column className={cx('secondaryFontColor', styles.info)}>
+                <span>Puh ...</span>
+                <span>Du har ingen prikker!</span>
               </Flex>
-
-              {index !== penalties.length - 1 && (
-                <div className={styles.divider} />
-              )}
-            </>
-          ))}
-        </>
-      ) : (
-        <>
-          <Flex alignItems="center" gap="var(--spacing-md)">
-            <Icon
-              name="thumbs-up-outline"
-              size={40}
-              className={styles.success}
-            />
-            <Flex column className={cx('secondaryFontColor', styles.info)}>
-              <span>Puh ...</span>
-              <span>Du har ingen prikker!</span>
             </Flex>
-          </Flex>
-        </>
-      )}
+          </>
+        )}
+        <a href={`https://abakus.no/pages/arrangementer/26-arrangementsregler`}>
+          <Icon
+            name="information-circle-outline"
+            size={25}
+            className={styles.infoIcon}
+          />
+        </a>
+      </div>
 
       <PenaltyForm userId={userId} />
     </ProfileSection>