From abe8c63b8d3f746680794d4c8fc8070df94f893a Mon Sep 17 00:00:00 2001
From: robines <espi.robin@gmail.com>
Date: Tue, 19 Nov 2024 01:52:28 +0100
Subject: [PATCH 1/2] Improve recruitment applet card design

---
 .../AppletCard/AppletCard.module.scss         | 27 ++++++++-----------
 .../components/AppletCard/AppletCard.tsx      | 17 ++++++------
 frontend/src/_constants.scss                  |  2 ++
 frontend/src/i18n/translations.ts             |  4 +--
 4 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss
index a5d71bbab..658fd8577 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss
+++ b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss
@@ -19,15 +19,15 @@
 
 .card {
   padding: 1rem;
-  border-radius: 3px;
-  border: 1px solid $grey-4;
+  border-radius: 5px;
+  border: 1px solid $grey-36;
   display: block;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-  max-width: 16rem;
+  width: 16rem;
 
   &:hover {
     text-decoration: none;
-    border-color: $grey-35;
+    border-color: $grey-32;
   }
 
   @include for-mobile-down {
@@ -53,19 +53,10 @@
   }
 }
 
-.wrapper {
-  @include for-mobile-down {
-    width: 100%;
-  }
-}
-
 .disabled {
   cursor: not-allowed;
-
-  .card {
-    opacity: 0.5;
-    pointer-events: none;
-  }
+  opacity: 0.5;
+  pointer-events: none;
 }
 
 .title {
@@ -80,10 +71,14 @@
 .description {
   color: $grey-2;
   font-size: 0.875rem;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
 }
 
 .content {
   position: relative;
   padding-right: 2rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
diff --git a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.tsx b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.tsx
index be44bd5da..93f43d3ac 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.tsx
@@ -1,4 +1,5 @@
 import { Icon } from '@iconify/react';
+import classNames from 'classnames';
 import { Link } from '~/Components';
 import styles from './AppletCard.module.scss';
 
@@ -11,14 +12,12 @@ type Props = {
 
 export function AppletCard({ title, description, url, disabled }: Props) {
   return (
-    <div className={`${styles.wrapper} ${disabled ? styles.disabled : ''}`}>
-      <Link url={url} className={styles.card}>
-        <div className={styles.content}>
-          <span className={styles.title}>{title}</span>
-          {description && <div className={styles.description}>{description}</div>}
-          <Icon icon="ion:arrow-forward-outline" width={16} className={styles.arrow_icon} />
-        </div>
-      </Link>
-    </div>
+    <Link url={url} className={classNames(styles.card, { [styles.disabled]: disabled })}>
+      <div className={styles.content}>
+        <span className={styles.title}>{title}</span>
+        {description && <div className={styles.description}>{description}</div>}
+        <Icon icon="ion:arrow-forward-outline" width={16} className={styles.arrow_icon} />
+      </div>
+    </Link>
   );
 }
diff --git a/frontend/src/_constants.scss b/frontend/src/_constants.scss
index 0e014582d..9786757f0 100644
--- a/frontend/src/_constants.scss
+++ b/frontend/src/_constants.scss
@@ -27,7 +27,9 @@ $black-1: #161616; // small contrast to black
 $black-2: #222222;
 $grey-5: #f4f4f4;
 $grey-4: #eeeeee;
+$grey-36: #dddddd;
 $grey-35: #cccccc;
+$grey-32: #bbbbbb;
 $grey-3: #999999;
 $grey-2: #777777;
 $grey-1: #555555;
diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts
index 7fb9b2861..8a4d5ce4c 100644
--- a/frontend/src/i18n/translations.ts
+++ b/frontend/src/i18n/translations.ts
@@ -397,7 +397,7 @@ export const nb = prepareTranslations({
   [KEY.recruitment_separate_recruitment]: 'Separat opptak',
 
   // Recruitment applets
-  [KEY.recruitment_applet_dashboard_description]: 'Gå til ditt personlige dashbord',
+  [KEY.recruitment_applet_dashboard_description]: 'Ditt personlige dashbord',
   [KEY.recruitment_applet_edit_description]: 'Rediger opptaket',
   [KEY.recruitment_applet_open_to_other_positions]: 'Åpen for mer',
   [KEY.recruitment_applet_overview_description]: 'Se hvor langt opptaket har kommet',
@@ -861,7 +861,7 @@ export const en = prepareTranslations({
   [KEY.recruitment_separate_recruitment]: 'Seperate recruitment',
 
   // Recruitment applets
-  [KEY.recruitment_applet_dashboard_description]: 'Go to your personal dashboard',
+  [KEY.recruitment_applet_dashboard_description]: 'Your personal dashboard',
   [KEY.recruitment_applet_edit_description]: 'Edit recruitment',
   [KEY.recruitment_applet_open_to_other_positions]: 'Open for more',
   [KEY.recruitment_applet_overview_description]: 'See how far the recruitment has come',

From 26524e3c3389f2cacfb17b356e410635aad73b4e Mon Sep 17 00:00:00 2001
From: robines <espi.robin@gmail.com>
Date: Tue, 19 Nov 2024 02:12:22 +0100
Subject: [PATCH 2/2] Remove not-allowed cursor

---
 .../components/AppletCard/AppletCard.module.scss                 | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss
index 658fd8577..76631d736 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss
+++ b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss
@@ -54,7 +54,6 @@
 }
 
 .disabled {
-  cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
 }