add style to tables

hedyorg · Oct 23, 2024 · b77a209 · b77a209
1 parent 5e21d4e
commit b77a209
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/static/js/teachers.ts b/static/js/teachers.ts
@@ -655,9 +655,9 @@ export function createAccounts(prompt: string) {
 
 function createHtmlForAccountsTable(accounts: Array<any>) {
     let result = ""
-    for (let account of accounts) {
+    for (let [index, account] of accounts.entries()) {
         result += `
-          <tr class="border border-gray-600">
+          <tr class="${ index%2 ? 'bg-white' : 'bg-gray-200'}">
             <td class="text-center px-4 py-2">${account['username']}</td>
             <td class="text-center px-4 py-2">${account['password']}</td>
           </tr>`;

diff --git a/templates/create-accounts.html b/templates/create-accounts.html
@@ -53,18 +53,22 @@ <h3 class="w-full my-0 py-0">
         </form>
 
         <div id="accounts_results" class="w-1/2 gap-4 mt-4 items-center hidden">
-            <button id="copy_accounts" class="blue-btn px-4 mb-4" onclick="hedyApp.copyAccountsToClipboard('{{_('copy_clipboard')}}')">
-              {{_('copy_accounts_to_clipboard')}}
-            </button>
-            <button id="print_accounts" class="blue-btn px-4 mb-4" onclick="hedyApp.printAccounts()">
-              {{_('print_accounts')}}
-            </button>
-            <table id="accounts_table" data-cy="create_accounts_output" class="w-full border border-gray-600">
-                <tr class="">
-                    <th class="px-10 py-2 text-center">{{_('username')}}</th>
-                    <th class="px-10 py-2 text-center">{{_('password')}}</th>
-                </tr>
-            </table>
+            <div class="flex flex-row gap-4">
+                <button id="copy_accounts" class="blue-btn px-4 mb-3" onclick="hedyApp.copyAccountsToClipboard('{{_('copy_clipboard')}}')">
+                  {{_('copy_accounts_to_clipboard')}}
+                </button>
+                <button id="print_accounts" class="blue-btn px-4 mb-3" onclick="hedyApp.printAccounts()">
+                  {{_('print_accounts')}}
+                </button>
+            </div>
+            <div class="overflow-x-auto rounded-lg shadow-lg">
+                <table id="accounts_table" data-cy="create_accounts_output" class="w-full border border-gray-400">
+                    <tr class="bg-blue-300 text-blue-900">
+                        <th class="px-10 py-2 text-center">{{_('username')}}</th>
+                        <th class="px-10 py-2 text-center">{{_('password')}}</th>
+                    </tr>
+                </table>
+            </div>
         </div>
     </div>
 </div>