🎨 Improve UI in contest table (#1874)

Author: KATO-Hiro

src/lib/components/SubmissionStatus/UpdatingDropdown.svelte

@@ -30,6 +30,7 @@
   import { enhance } from '$app/forms';
 
   import { Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
+  import Check from 'lucide-svelte/icons/check';
 
   import type { TaskResult } from '$lib/types/task';
 
@@ -180,13 +181,19 @@
     {activeUrl}
     {dropdownStatus}
     {closeDropdown}
-    class="absolute w-32 z-20 left-auto right-0 mt-8"
+    class="absolute w-32 z-20 left-auto right-0 mt-5"
   >
-    <DropdownUl>
+    <DropdownUl class="border rounded-lg shadow">
       {#if isLoggedIn}
         {#each submissionStatusOptions as submissionStatus}
           <DropdownLi href="javascript:void(0)" onclick={() => handleClick(submissionStatus)}>
-            {submissionStatus.labelName}
+            <div class="flex items-center justify-between">
+              {submissionStatus.labelName}
+
+              {#if taskResult.status_name === submissionStatus.innerName}
+                <Check class="w-4 h-4 text-primary-600 dark:text-gray-300" strokeWidth={3} />
+              {/if}
+            </div>
           </DropdownLi>
         {/each}
       {:else}

src/lib/components/TaskTables/TaskTable.svelte

@@ -54,7 +54,7 @@
   }
 
   function getBodyCellClasses(contestId: string, taskIndex: string): string {
-    const baseClasses = 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1 border';
+    const baseClasses = 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1';
     const backgroundColor = getBackgroundColor(taskTable[contestId][taskIndex]);
 
     return `${baseClasses} ${backgroundColor}`;
@@ -135,17 +135,15 @@
 <!-- https://github.com/kenkoooo/AtCoderProblems/blob/master/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx -->
 <!-- https://github.com/birdou/atcoder-blogs/blob/main/app/atcoder-blogs-frontend/src/pages/BlogTablePage/BlogTablePage.tsx -->
 <!-- https://tailwindcss.com/docs/position#sticky-positioning-elements -->
-<div class="container w-full overflow-hidden rounded-md border border-gray-100 shadow-sm">
+<div class="container w-full overflow-hidden rounded-md border shadow-sm">
   <div class="w-full overflow-auto">
     <Table id="task-table" class="text-md table-fixed w-full" aria-label="Task table">
       <TableHead class="text-sm bg-gray-100">
-        <TableHeadCell class="w-full xl:w-16 px-2 text-center border" scope="col">
-          Round
-        </TableHeadCell>
+        <TableHeadCell class="w-full xl:w-16 px-2 text-center" scope="col">Round</TableHeadCell>
 
         {#if taskTableHeaderIds.length}
           {#each taskTableHeaderIds as taskTableHeaderId}
-            <TableHeadCell class="text-center border" scope="col">
+            <TableHeadCell class="text-center" scope="col">
               {taskTableHeaderId}
             </TableHeadCell>
           {/each}
@@ -156,7 +154,7 @@
         {#if contestIds.length && taskTableHeaderIds.length}
           {#each contestIds as contestId}
             <TableBodyRow class="flex flex-wrap xl:table-row">
-              <TableBodyCell class="w-full xl:w-16 truncate px-2 py-2 text-center border">
+              <TableBodyCell class="w-full xl:w-16 truncate px-2 py-2 text-center">
                 {getContestRoundLabel(provider, contestId)}
               </TableBodyCell>
 

src/lib/components/TaskTables/TaskTableBodyCell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
+  import ChevronDown from 'lucide-svelte/icons/chevron-down';
 
   import type { TaskResult } from '$lib/types/task';
 
@@ -20,10 +20,12 @@
   let updatingDropdown: UpdatingDropdown;
 </script>
 
-<div class="flex items-center w-full space-x-1 text-left text-sm sm:text-md">
+<div
+  class="flex items-center w-full pl-0 lg:pl-1 space-x-1 lg:space-x-2 text-left text-sm sm:text-md"
+>
   {@render taskGradeLabel(taskResult)}
 
-  <div class="flex justify-between w-full min-w-0">
+  <div class="flex items-center justify-between w-full min-w-0">
     {@render taskTitleAndExternalLink(taskResult)}
     {@render submissionUpdaterAndLinksOfTaskDetailPage(taskResult)}
   </div>
@@ -62,7 +64,7 @@
       onclick={() => updatingDropdown.toggle()}
       aria-label="Update submission for {selectedTaskResult.title}"
     >
-      <EllipsisVertical class="w-4 h-4 mx-auto" />
+      <ChevronDown class="w-4 h-4 mx-auto" />
     </button>
 
     <UpdatingDropdown bind:this={updatingDropdown} {taskResult} {isLoggedIn} {onupdate} />