From 5e96e65e60858a45e76fe6c3afb3c06013a34bbb Mon Sep 17 00:00:00 2001
From: Johnnadel Salita Uy <johnnadel.salita@gmail.com>
Date: Tue, 26 Mar 2024 10:54:39 +0100
Subject: [PATCH] Table cell align right (#182)

* Add right alignment for Table data cell content

* Fix th styling for right alignment

* .
---
 src/components/Table/Table.tsx          | 10 ++++++++--
 src/components/Table/table.module.scss  | 20 ++++++++++++++++----
 src/pages/TeamDetail/TeamDetail.tsx     |  2 +-
 src/pages/TeamMembers/TeamMembers.tsx   |  2 ++
 src/pages/TeamOverview/TeamOverview.tsx |  1 +
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 7a94a790..bce10d76 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -121,6 +121,12 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
     return <ArrowUp className={selectedColumn ? styles.displayArrowOnSelectedColumn : undefined} size={18} />
   }
 
+  const alignCell = (alignment?: string) => {
+    if (alignment === 'center') return styles.alignTextCenter
+    if (alignment === 'right') return styles.alignTextRight
+    return ''
+  }
+
   return (
     <div className={styles.tableContainer}>
       <table className={styles.table}>
@@ -131,7 +137,7 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
               return (
                 <th
                   key={column.id}
-                  className={sortableColumn ? styles.sortableColumn : undefined}
+                  className={`${sortableColumn ? styles.sortableColumn : undefined} ${alignCell(column.align)}`}
                   onClick={sortableColumn ? () => handleSortBy(column.id) : undefined}
                 >
                   {sortableColumn ? (
@@ -153,7 +159,7 @@ const TableDesktopView = ({ columns, data, activeTab }: TableDesktopViewProps) =
               return (
                 <tr key={row.id + index} className={conditionalStyling(index)}>
                   {columns.map((column) => (
-                    <td key={column.id} className={column.align === 'center' ? styles.centerText : undefined}>
+                    <td key={column.id} className={alignCell(column.align)}>
                       {row[column.id]}
                     </td>
                   ))}
diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss
index e246e26d..8b0063bf 100644
--- a/src/components/Table/table.module.scss
+++ b/src/components/Table/table.module.scss
@@ -78,13 +78,13 @@
       span {
         display: inline-block;
         position: relative;
-        padding-right: 30px;
+        padding-right: 2rem;
         white-space: nowrap;
     
         svg {
           position: absolute;
           top: 50%;
-          right: 5px;
+          right: .5rem;
           transform: translateY(-50%);
           display: none;
         }
@@ -117,7 +117,7 @@
     padding: .5rem;
     border-bottom: 1px inset variables.$ssb-dark-2;
 
-    >* {
+    > * {
       display: flex;
       flex-direction: column;
 
@@ -140,9 +140,21 @@
   }
 }
 
-.centerText {
+.alignTextCenter {
   span {
     display: flex;
     justify-content: center;
   }
+}
+
+.alignTextRight {
+  text-align: right !important;
+
+  span {
+    padding-right: 0 !important;
+
+    svg {
+      left: -1.75rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/pages/TeamDetail/TeamDetail.tsx b/src/pages/TeamDetail/TeamDetail.tsx
index 1f318ede..8174dbb8 100644
--- a/src/pages/TeamDetail/TeamDetail.tsx
+++ b/src/pages/TeamDetail/TeamDetail.tsx
@@ -85,7 +85,7 @@ const SHARED_BUCKETS_TAB = {
       label: 'Tilgang',
     },
     // { id: 'delte_data', label: 'Delte data' },
-    { id: 'antall_personer', label: 'Antall personer' },
+    { id: 'antall_personer', label: 'Antall personer', align: 'right' },
   ],
 }
 
diff --git a/src/pages/TeamMembers/TeamMembers.tsx b/src/pages/TeamMembers/TeamMembers.tsx
index faa81ec5..3108e2be 100644
--- a/src/pages/TeamMembers/TeamMembers.tsx
+++ b/src/pages/TeamMembers/TeamMembers.tsx
@@ -111,10 +111,12 @@ const TeamMembers = () => {
         {
           id: 'team',
           label: 'Team',
+          align: 'right',
         },
         {
           id: 'data_admin',
           label: 'Data-admin roller',
+          align: 'right',
         },
         {
           id: 'seksjonsleder',
diff --git a/src/pages/TeamOverview/TeamOverview.tsx b/src/pages/TeamOverview/TeamOverview.tsx
index 11fb704a..6e015e8a 100644
--- a/src/pages/TeamOverview/TeamOverview.tsx
+++ b/src/pages/TeamOverview/TeamOverview.tsx
@@ -98,6 +98,7 @@ const TeamOverview = () => {
         {
           id: 'teammedlemmer',
           label: 'Teammedlemmer',
+          align: 'right',
         },
         {
           id: 'managers',