From 01266d21d0a979b72d0ce4c41a92c2429d36d3ab Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Thu, 31 Aug 2023 19:02:23 +0530
Subject: [PATCH] table text styles

---
 src/components/Table/Pagination.svelte | 20 ++----
 src/components/Table/Select.svelte     | 29 +++-----
 src/components/Table/Table.svelte      | 95 ++++++++------------------
 3 files changed, 45 insertions(+), 99 deletions(-)

diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/Pagination.svelte
index fa90aaa7..73822874 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/Pagination.svelte
@@ -44,15 +44,17 @@
   }
 </script>
 
-<nav aria-label="pagination" class="pagination">
+<nav aria-label="pagination" class="pagination fmt-2">
   <button on:click="{goToPreviousPage}" disabled="{pageNumber === 1}"
     ><div class="icon-wrapper">
       <LeftArrow />
       <span class="visually-hidden">Previous page</span>
     </div></button
   >
-  <div class="label" aria-label="page {pageNumber}" aria-current="page">
-    <div class="records">{minRow}-{maxRow} of {intcomma(n)}</div>
+  <div class="label fmx-2" aria-label="page {pageNumber}" aria-current="page">
+    <div class="records body-caption mt-1.5">
+      {minRow}-{maxRow} of {intcomma(n)}
+    </div>
   </div>
   <button
     on:click="{goToNextPage}"
@@ -71,7 +73,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 1rem;
+
     button {
       border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
       border-radius: 50%;
@@ -105,15 +107,7 @@
       align-items: center;
       flex-direction: column;
       width: auto;
-      min-width: 110px;
-      margin: 0 0.5rem;
-      .records {
-        font-size: 0.8rem;
-        @include font-sans;
-        font-weight: 300;
-        margin: 0 1rem;
-        @include text-primary;
-      }
+      min-width: 7rem;
     }
   }
 
diff --git a/src/components/Table/Select.svelte b/src/components/Table/Select.svelte
index 2f3dee17..9e2c681e 100644
--- a/src/components/Table/Select.svelte
+++ b/src/components/Table/Select.svelte
@@ -24,10 +24,10 @@
 
 <div class="select">
   {#if label}
-    <label for="select--input">{label}</label>
+    <label class="body-caption block" for="select--input">{label}</label>
   {/if}
   <select
-    class="select--input"
+    class="select--input body-caption fpx-2"
     name="select--input"
     id="select--input"
     on:input="{input}"
@@ -42,34 +42,23 @@
   @import '../../scss/mixins';
 
   .select {
-    width: 256px;
-    @include font-sans;
-    label {
-      display: block;
-      font-size: 0.8rem;
-      font-weight: 300;
-      @include text-primary;
-      padding: 0 0 0.125rem 0;
-    }
+    width: 250px;
+
     .select--input {
       position: relative;
-      font-size: 0.8rem;
-      font-weight: 400;
-      line-height: 1;
-      height: 33px;
+      height: 2.15rem;
       border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
-      @include text-primary;
-      border-radius: 6px;
+      border-radius: 0.25rem;
       width: 100%;
-      padding: 0.5rem;
+
       -moz-appearance: none; /* Firefox */
       -webkit-appearance: none; /* Safari and Chrome */
       appearance: none; /* Remove the default arrow */
-      padding-right: 20px; /* Add some padding to make room for a custom arrow */
+
       background: transparent;
       background-image: url('data:image/svg+xml;utf8,<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z" fill="gray"/></svg>');
       background-repeat: no-repeat;
-      background-position-x: 235px;
+      background-position-x: 225px;
       background-position-y: 55%;
     }
     .select--input::-ms-expand {
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 01c07509..09c3db6c 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -214,15 +214,15 @@
   });
 </script>
 
-<Block width="{width}" id="{id}" class="{cls}">
+<Block width="{width}" id="{id}" class="fmy-5 {cls}">
   <article class="table-wrapper">
     {#if title || dek || searchable || filterList}
-      <header class="table--header">
+      <header class="table--header w-full">
         {#if title}
-          <h2 class="table--header--title">{@html title}</h2>
+          <h3 class="table--header--title">{@html title}</h3>
         {/if}
         {#if dek}
-          <p class="table--header--dek">{@html dek}</p>
+          <p class="table--header--dek body-note">{@html dek}</p>
         {/if}
         {#if searchable || filterList}
           <nav class="input">
@@ -247,8 +247,9 @@
         {/if}
       </header>
     {/if}
-    <section class="table">
+    <section class="table w-full">
       <table
+        class="w-full"
         class:paginated="{paginated}"
         class:truncated="{truncated &&
           !showAll &&
@@ -259,7 +260,7 @@
             {#each includedFields as field}
               <th
                 scope="col"
-                class="table--thead--th"
+                class="table--thead--th h4 pl-0 py-2 pr-2"
                 class:sortable="{sortable && sortableFields.includes(field)}"
                 class:sort-ascending="{sortable &&
                   sortField === field &&
@@ -272,7 +273,7 @@
               >
                 {field}
                 {#if sortable && sortableFields.includes(field)}
-                  <div class="table--thead--sortarrow avoid-clicks">
+                  <div class="table--thead--sortarrow fml-1 avoid-clicks">
                     <SortArrow
                       bind:sortDirection="{sortDirection}"
                       active="{sortField === field}"
@@ -288,6 +289,7 @@
             <tr data-row-index="{idx}">
               {#each includedFields as field}
                 <td
+                  class="body-note pl-0 py-2 pr-2"
                   data-row-index="{idx}"
                   data-field="{field}"
                   data-value="{item[field]}"
@@ -306,15 +308,18 @@
           {/if}
         </tbody>
         {#if notes || source}
-          <tfoot class="table--tfoot">
+          <tfoot class="table--tfoot block fmt-2">
             {#if notes}
               <tr>
-                <td colspan="{includedFields.length}">{@html notes}</td>
+                <td class="" colspan="{includedFields.length}">{@html notes}</td
+                >
               </tr>
             {/if}
             {#if source}
               <tr>
-                <td colspan="{includedFields.length}">{@html source}</td>
+                <td class="" colspan="{includedFields.length}"
+                  >{@html source}</td
+                >
               </tr>
             {/if}
           </tfoot>
@@ -322,8 +327,11 @@
       </table>
     </section>
     {#if truncated && data.length > truncateLength}
-      <nav aria-label="Show all button" class="show-all">
-        <button on:click="{toggleTruncate}"
+      <nav
+        aria-label="Show all button"
+        class="show-all flex items-center justify-center fmt-2"
+      >
+        <button class="body-caption" on:click="{toggleTruncate}"
           >{#if showAll}Show fewer rows{:else}Show {data.length -
               truncateLength} more rows{/if}</button
         >
@@ -342,32 +350,6 @@
 <style lang="scss">
   @import '../../scss/mixins';
 
-  .table-wrapper {
-    font-size: 1rem;
-    @include font-sans;
-    @include text-primary;
-  }
-
-  .table--header {
-    width: 100%;
-    h2.table--header--title {
-      font-weight: 500;
-      @include text-primary;
-      font-size: 1.33rem;
-      padding: 0;
-      margin: 0.5rem 0;
-    }
-    p.table--header--dek {
-      @include font-sans;
-      @include text-primary;
-      font-size: 1rem;
-      font-weight: 300;
-      line-height: 1.4;
-      padding: 0;
-      margin: 0.5rem 0;
-    }
-  }
-
   section.table {
     overflow-x: auto;
   }
@@ -375,35 +357,27 @@
     background-color: transparent;
     border-collapse: separate;
     border-spacing: 0;
-    width: 100%;
     thead {
       tr {
         th {
           border-bottom: 1px solid var(--theme-colour-text-primary);
-          @include text-primary;
+
           @include bg;
-          font-size: 0.85rem;
-          font-weight: 500;
           text-align: inherit;
-          text-transform: uppercase;
-          letter-spacing: 0.06rem;
-          line-height: 1.4;
-          padding: 0.5rem 0.75rem 0.5rem 0;
           &.sortable {
             cursor: pointer;
+            white-space: nowrap;
           }
           .table--thead--sortarrow {
             display: inline-block;
-            margin: 0 0 0 0.125rem;
+            position: relative;
+            top: 5px;
           }
         }
       }
     }
     tbody {
       td {
-        font-size: 1rem;
-        font-weight: 300;
-        padding: 0.5rem 0.75rem 0.5rem 0;
         vertical-align: top;
         border-bottom: 1px solid
           var(--theme-colour-brand-rules, var(--tr-muted-grey));
@@ -413,15 +387,12 @@
       }
     }
     tfoot.table--tfoot {
-      display: table-row;
+      border-spacing: 0 clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem);
       tr {
         border-bottom: 0;
       }
       td {
-        font-weight: 300;
-        @include text-primary;
-        font-size: 0.8rem;
-        padding: 0.5rem 0 0 0;
+        @include body-caption;
       }
     }
     &.truncated {
@@ -458,20 +429,12 @@
   }
 
   nav.show-all {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 1rem;
     button {
-      font-size: 0.8rem;
-      @include font-sans;
-      font-weight: 500;
-      min-width: 175px;
-      padding: 0.33rem 0.5rem;
+      min-width: 13rem;
+      height: 2.15rem;
       border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
-      border-radius: 4px;
+      border-radius: 0.25rem;
       @include bg;
-      @include text-primary;
       cursor: pointer;
     }
   }