Merged in feat/CJ-17-points-expiration-table (pull request #527)

Feat/CJ-17 points expiration table

* feat(CJ-17): Added point expiration table and refactored to use Table component

* feat(CJ-17): Use Table component inside Row

* fix(CJ-117): Added missing css class and update date formatting

* fix(CJ-117): Added copy of membershipLevel route with a protectedProcedure


Approved-by: Christel Westerberg

components/TempDesignSystem/Table/TD.tsx

@@ -1,7 +1,14 @@
 import styles from "./table.module.css"
 
-function TD({ children }: React.PropsWithChildren) {
-  return <td className={styles.td}>{children}</td>
+function TD({
+  children,
+  ...rest
+}: React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) {
+  return (
+    <td className={styles.td} {...rest}>
+      {children}
+    </td>
+  )
 }
 
 export default TD

components/TempDesignSystem/Table/TR.tsx

@@ -1,7 +1,14 @@
 import styles from "./table.module.css"
 
-function TR({ children }: React.PropsWithChildren) {
-  return <tr className={styles.tr}>{children}</tr>
+function TR({
+  children,
+  ...rest
+}: React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>) {
+  return (
+    <tr className={styles.tr} {...rest}>
+      {children}
+    </tr>
+  )
 }
 
 export default TR

components/TempDesignSystem/Table/table.module.css

@@ -18,10 +18,22 @@
 }
 
 .th {
-  padding: var(--Spacing-x2) var(--Spacing-x3);
+  padding: var(--Spacing-x2);
+
   text-align: left;
+  text-wrap: nowrap;
 }
 
 .td {
-  padding: var(--Spacing-x3);
+  padding: var(--Spacing-x2);
+}
+
+@media screen and (min-width: 768px) {
+  .th {
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+  }
+
+  .td {
+    padding: var(--Spacing-x3);
+  }
 }