MOBILE-4329 chore: Add generic table styles

src/core/features/grades/pages/course/course.html

@@ -15,7 +15,7 @@
     <core-loading [hideUntil]="loaded">
         <core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
         <div *ngIf="rows.length" class="core-grades-container">
-            <table class="core-grades-table" [class.summary]="showSummary">
+            <table class="core-table core-grades-table" [class.summary]="showSummary">
                 <thead>
                     <tr>
                         <th *ngFor="let column of columns" id="{{column.name}}" class="ion-text-start"

src/core/features/grades/pages/course/course.scss

@@ -1,67 +1,22 @@
 @use "theme/globals" as *;
 
 :host {
-    --header-background: var(--white);
-    --odd-cell-background: var(--light);
-    --odd-cell-hover: var(--gray-200);
-    --even-cell-background: var(--white);
-    --even-cell-hover: var(--light);
     --icon-color: var(--gray-500);
-    --border-color: var(--stroke);
+    --core-table-border-color: var(--stroke);
-
-    .odd {
-        --cell-background: var(--odd-cell-background);
-        --cell-hover: var(--odd-cell-hover);
-    }
-
-    .even {
-        --cell-background: var(--even-cell-background);
-        --cell-hover: var(--even-cell-hover);
-    }
-
 }
 
 :host-context(html.dark) {
-    --header-background: var(--gray-900);
-    --odd-cell-background: var(--gray-800);
-    --odd-cell-hover: var(--gray-600);
-    --even-cell-background: var(--gray-900);
-    --even-cell-hover: var(--gray-700);
     --icon-color: var(--gray-200);
 }
 
-.core-grades-table {
+table.core-table.core-grades-table {
-    border-collapse: collapse;
-    line-height: 20px;
     width: 100%;
-    font-size: 16px;
+    margin: 0px;
-    color: var(--ion-text-color);
-
-    tr {
-        border-bottom: 1px solid var(--border-color);
-    }
-
-    th, td {
-        @include padding(8px, 8px, 8px, null);
-        vertical-align: top;
-        white-space: normal;
-        text-align: start;
-    }
-
-    thead th {
-        vertical-align: bottom;
-        font-weight: bold;
-        background-color: var(--header-background);
-    }
 
     thead #gradeitem {
         @include padding(null, null, null, 24px);
     }
 
-    tbody th {
-      font-weight: normal;
-    }
-
     tbody tr.core-bold th {
       font-weight: inherit;
     }
@@ -70,9 +25,13 @@
         @include padding(null, null, null, 4px);
     }
 
+    th, td {
+        @include padding(8px, 8px, 8px, 0px);
+        vertical-align: top;
+    }
+
     .core-grades-table-gradeitem {
         @include padding(null, null, null, 4px);
-        font-weight: bold;
 
         &.column-itemname {
             @include padding(null, null, null, 0);
@@ -90,7 +49,6 @@
             --filter: var(--module-icon-filter);
         }
 
-
         ion-icon {
             color: var(--icon-color);
         }
@@ -130,21 +88,6 @@
         width: 0;
     }
 
-    .ion-no-border {
-        border: 0 !important;
-    }
-
-    .dimmed_text,
-    .hidden {
-        opacity: .7;
-    }
-
-    .odd, .even {
-        td, th, th[aria-current="page"] {
-            background-color: var(--cell-background);
-        }
-    }
-
     .core-grades-grade-clickable {
         cursor: pointer;
         &:hover {

src/core/features/reportbuilder/components/report-detail/report-detail.html

@@ -22,7 +22,7 @@
             </ng-container>
 
             <ng-container *ngIf="!isCardLayout">
-                <table>
+                <table class="core-table">
                     <thead>
                         <tr>
                             <th *ngFor="let header of state.report.data.headers">
@@ -30,7 +30,7 @@
                             </th>
                         </tr>
                     </thead>
-                    <tbody>
+                    <tbody class="auto-striped">
                         <tr *ngFor="let row of state.report.data.rows">
                             <td *ngFor="let column of row.columns">
                                 <core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source$ | async"

src/core/features/reportbuilder/components/report-detail/report-detail.scss

@@ -1,9 +1,4 @@
-@use "theme/globals" as *;
-
 :host {
-    --header-background: var(--white);
-    --border-color: var(--stroke);
-
     .report-title {
         ion-item {
             width: 100%;
@@ -11,32 +6,9 @@
     }
 
     table {
-        width: 98%;
-        margin: 1em auto;
-        border-collapse: collapse;
-        color: var(--ion-text-color);
         overflow-x: auto;
-        display: block;
-
-        tbody {
-            display: table;
-        }
-
-        th {
-            background-color: var(--header-background);
-        }
-
-        tr {
-            border-bottom: 1px solid var(--border-color);
-
-            &:nth-child(even) {
-                background: var(--light);
-            }
-        }
 
         th, td {
-            @include padding(8px, 8px, 8px, null);
-            text-align: start;
             min-width: 200px;
         }
 

src/theme/theme.base.scss

@@ -1711,9 +1711,11 @@ ion-input .native-input {
     }
 }
 
-input {
+ion-input,
+ion-input input,
+ion-textarea {
     --placeholder-color: var(--ion-placeholder-color);
-    --placeholder-opacity: .85;
+    --placeholder-opacity: .65;
 }
 
 // Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info.
@@ -1905,6 +1907,10 @@ swiper-container {
 }
 
 
+.core-flex-no-grow {
+    flex-grow: 0;
+}
+
 // Loader animation.
 .core-loading {
     position: relative;
@@ -2015,3 +2021,83 @@ ion-item.item-label-stacked ion-datetime-button {
     margin-bottom: 8px;
     align-self: self-end;
 }
+
+// Table App styles
+table.core-table {
+    border-collapse: collapse;
+    line-height: 20px;
+    width: 98%;
+    margin: 1em auto;
+    color: var(--text-color);
+
+
+    thead th {
+        vertical-align: bottom;
+        font-weight: bold;
+        font-size: 14px;
+        background-color: var(--core-table-header-background);
+    }
+
+    tbody th {
+        font-weight: normal;
+    }
+
+    th, td {
+        padding: 8px;
+        white-space: normal;
+        text-align: start;
+    }
+
+    tr {
+        border-bottom: 1px solid var(--core-table-border-color);
+    }
+
+    tbody td {
+        font-size: 16px;
+    }
+
+    .odd {
+        --cell-background: var(--core-table-odd-cell-background);
+        --cell-hover: var(--core-table-odd-cell-hover);
+    }
+
+    .even {
+        --cell-background: var(--core-table-even-cell-background);
+        --cell-hover: var(--core-table-even-cell-hover);
+    }
+
+    .odd, .even {
+        td, th, th[aria-current="page"] {
+            background-color: var(--cell-background);
+
+            &:hover {
+                background-color: var(--cell-hover);
+            }
+        }
+    }
+
+    tbody.auto-striped tr:nth-child(odd) {
+        background-color: var(--core-table-odd-cell-background);
+
+        &:hover {
+            background-color: var(--core-table-even-odd-hover);
+        }
+    }
+
+    tbody.auto-striped tr:nth-child(even) {
+        background-color: var(--core-table-even-cell-background);
+
+        &:hover {
+            background-color: var(--core-table-even-cell-hover);
+        }
+    }
+
+    .ion-no-border {
+        border: 0 !important;
+    }
+
+    .dimmed_text,
+    .hidden {
+        opacity: .7;
+    }
+}

src/theme/theme.dark.scss

@@ -169,4 +169,10 @@ html.dark {
 
     --addon-forum-border-color: var(--gray-500);
     --addon-forum-highlight-color: var(--gray-800);
+
+    --core-table-header-background: var(--gray-900);
+    --core-table-odd-cell-background: var(--gray-800);
+    --core-table-odd-cell-hover: var(--gray-600);
+    --core-table-even-cell-background: var(--gray-900);
+    --core-table-even-cell-hover: var(--gray-700);
 }

src/theme/theme.light.scss

@@ -381,6 +381,13 @@ html {
     --core-dd-question-radius: 10px;
     --core-dd-question-border: var(--medium);
 
+    --core-table-header-background: var(--white);
+    --core-table-odd-cell-background: var(--light);
+    --core-table-odd-cell-hover: var(--gray-200);
+    --core-table-even-cell-background: var(--white);
+    --core-table-even-cell-hover: var(--light);
+    --core-table-border-color: var(--stroke);
+
     --rotate-expandable: rotate(90deg);
     &[dir=rtl] {
         --rotate-expandable: rotate(-90deg);