Improve recruitment applet card design

Samfundet · Nov 19, 2024 · abe8c63 · abe8c63
1 parent 7f4b8b9
commit abe8c63
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/...d/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletCard/AppletCard.module.scss b/...d/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
@@ -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
@@ -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
@@ -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',