From 20878e0c92f7e1fa56ec4025b22a7594c63383ca Mon Sep 17 00:00:00 2001
From: Christoffer Nguyen <christofferhoang@gmail.com>
Date: Thu, 28 Aug 2025 22:52:29 +0200
Subject: [PATCH 1/4] add pin icon for pinned joblistings

---
 .../JoblistingItem/JoblistingItem.module.css  | 19 ++++++++++--
 .../components/JoblistingItem/index.tsx       | 31 ++++++++++---------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/lego-webapp/components/JoblistingItem/JoblistingItem.module.css b/lego-webapp/components/JoblistingItem/JoblistingItem.module.css
index b276144b51..5ea0ebe652 100644
--- a/lego-webapp/components/JoblistingItem/JoblistingItem.module.css
+++ b/lego-webapp/components/JoblistingItem/JoblistingItem.module.css
@@ -49,10 +49,10 @@ img.companyLogo {
   margin-bottom: var(--spacing-sm);
 }
 
-.deadline {
+.infoLeft {
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
+  flex-direction: column;
+  justify-content: space-between;
   min-width: 145px;
   font-size: var(--font-size-sm);
 
@@ -60,3 +60,16 @@ img.companyLogo {
     justify-content: flex-start;
   }
 }
+
+.deadline {
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+}
+
+.pin {
+  align-self: flex-end;
+  transform: rotate(45deg);
+}
diff --git a/lego-webapp/components/JoblistingItem/index.tsx b/lego-webapp/components/JoblistingItem/index.tsx
index a8c427dae4..d4722d06fb 100644
--- a/lego-webapp/components/JoblistingItem/index.tsx
+++ b/lego-webapp/components/JoblistingItem/index.tsx
@@ -1,5 +1,5 @@
 import { Flex, Icon, Image } from '@webkom/lego-bricks';
-import { CalendarClock } from 'lucide-react';
+import { CalendarClock, Pin } from 'lucide-react';
 import moment from 'moment';
 import {
   jobType,
@@ -64,20 +64,21 @@ const JoblistingItem = ({ joblisting }: JobListingItemProps) => (
           )}
         </Flex>
       </Flex>
-      <Flex
-        alignItems="center"
-        gap="var(--spacing-sm)"
-        className={styles.deadline}
-      >
-        <Icon iconNode={<CalendarClock />} size={16} />
-        {joblisting.rollingRecruitment ? (
-          'Snarest'
-        ) : (
-          <Time
-            time={joblisting.deadline}
-            format={`ll ${moment(joblisting.deadline).format('HH:mm') !== '23:59' ? 'HH:mm' : ''}`}
-          />
-        )}
+      <Flex className={styles.infoLeft}>
+        <div className={styles.pin}>
+          {joblisting.isPinned && <Icon iconNode={<Pin />} size={16} />}
+        </div>
+        <div className={styles.deadline}>
+          <Icon iconNode={<CalendarClock />} size={16} />
+          {joblisting.rollingRecruitment ? (
+            'Snarest'
+          ) : (
+            <Time
+              time={joblisting.deadline}
+              format={`ll ${moment(joblisting.deadline).format('HH:mm') !== '23:59' ? 'HH:mm' : ''}`}
+            />
+          )}
+        </div>
       </Flex>
     </div>
   </a>

From df84989252315117c06e501e1a4ede4b1ad4b348 Mon Sep 17 00:00:00 2001
From: Christoffer Nguyen <christofferhoang@gmail.com>
Date: Fri, 29 Aug 2025 13:35:35 +0200
Subject: [PATCH 2/4] refactor and add tooltip

---
 .../JoblistingItem/JoblistingItem.module.css  | 17 +++++-----------
 .../components/JoblistingItem/index.tsx       | 20 ++++++++++++-------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/lego-webapp/components/JoblistingItem/JoblistingItem.module.css b/lego-webapp/components/JoblistingItem/JoblistingItem.module.css
index 5ea0ebe652..fe5fe72baf 100644
--- a/lego-webapp/components/JoblistingItem/JoblistingItem.module.css
+++ b/lego-webapp/components/JoblistingItem/JoblistingItem.module.css
@@ -50,26 +50,19 @@ img.companyLogo {
 }
 
 .infoLeft {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
   min-width: 145px;
   font-size: var(--font-size-sm);
 
   @media (--mobile-device) {
-    justify-content: flex-start;
+    align-items: flex-start;
   }
 }
 
-.deadline {
-  display: flex;
-  align-items: center;
-  align-self: flex-end;
-  justify-content: flex-end;
-  gap: var(--spacing-sm);
-}
-
 .pin {
   align-self: flex-end;
   transform: rotate(45deg);
+
+  @media (--mobile-device) {
+    align-self: flex-start;
+  }
 }
diff --git a/lego-webapp/components/JoblistingItem/index.tsx b/lego-webapp/components/JoblistingItem/index.tsx
index d4722d06fb..a9d47479e0 100644
--- a/lego-webapp/components/JoblistingItem/index.tsx
+++ b/lego-webapp/components/JoblistingItem/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icon, Image } from '@webkom/lego-bricks';
+import { Flex, Icon, Image, Tooltip } from '@webkom/lego-bricks';
 import { CalendarClock, Pin } from 'lucide-react';
 import moment from 'moment';
 import {
@@ -64,11 +64,17 @@ const JoblistingItem = ({ joblisting }: JobListingItemProps) => (
           )}
         </Flex>
       </Flex>
-      <Flex className={styles.infoLeft}>
-        <div className={styles.pin}>
-          {joblisting.isPinned && <Icon iconNode={<Pin />} size={16} />}
-        </div>
-        <div className={styles.deadline}>
+      <Flex
+        column={true}
+        justifyContent="space-between"
+        className={styles.infoLeft}
+      >
+        {joblisting.isPinned && (
+          <Tooltip className={styles.pin} content={<p>Sponset innlegg</p>}>
+            <Icon iconNode={<Pin />} size={16} />
+          </Tooltip>
+        )}
+        <Flex justifyContent="flex-end" gap={8}>
           <Icon iconNode={<CalendarClock />} size={16} />
           {joblisting.rollingRecruitment ? (
             'Snarest'
@@ -78,7 +84,7 @@ const JoblistingItem = ({ joblisting }: JobListingItemProps) => (
               format={`ll ${moment(joblisting.deadline).format('HH:mm') !== '23:59' ? 'HH:mm' : ''}`}
             />
           )}
-        </div>
+        </Flex>
       </Flex>
     </div>
   </a>

From 209e4ec4010f537683cb584c9a2a2d41a2951ca0 Mon Sep 17 00:00:00 2001
From: Christoffer Nguyen <christofferhoang@gmail.com>
Date: Fri, 29 Aug 2025 13:46:35 +0200
Subject: [PATCH 3/4] fixed text inside tooltip

---
 lego-webapp/components/JoblistingItem/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lego-webapp/components/JoblistingItem/index.tsx b/lego-webapp/components/JoblistingItem/index.tsx
index a9d47479e0..09769c15f3 100644
--- a/lego-webapp/components/JoblistingItem/index.tsx
+++ b/lego-webapp/components/JoblistingItem/index.tsx
@@ -70,7 +70,7 @@ const JoblistingItem = ({ joblisting }: JobListingItemProps) => (
         className={styles.infoLeft}
       >
         {joblisting.isPinned && (
-          <Tooltip className={styles.pin} content={<p>Sponset innlegg</p>}>
+          <Tooltip className={styles.pin} content={'Sponset innlegg'}>
             <Icon iconNode={<Pin />} size={16} />
           </Tooltip>
         )}

From 2eebe58e1e3d60c61b1d6bdeec3490c612f97f5c Mon Sep 17 00:00:00 2001
From: Christoffer Nguyen <christofferhoang@gmail.com>
Date: Fri, 29 Aug 2025 18:40:31 +0200
Subject: [PATCH 4/4] endret tooltip tekst

---
 lego-webapp/components/JoblistingItem/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lego-webapp/components/JoblistingItem/index.tsx b/lego-webapp/components/JoblistingItem/index.tsx
index 09769c15f3..5430c3e091 100644
--- a/lego-webapp/components/JoblistingItem/index.tsx
+++ b/lego-webapp/components/JoblistingItem/index.tsx
@@ -70,7 +70,7 @@ const JoblistingItem = ({ joblisting }: JobListingItemProps) => (
         className={styles.infoLeft}
       >
         {joblisting.isPinned && (
-          <Tooltip className={styles.pin} content={'Sponset innlegg'}>
+          <Tooltip className={styles.pin} content={'Festet annonse'}>
             <Icon iconNode={<Pin />} size={16} />
           </Tooltip>
         )}