ボタン類の UI 修正 (#30)

* ui: トップページのボタン類を修正

* ui: 管理ページのボタン類

* ui: トップのボタンにアイコン

* ui: 作成ページの修正

* ui: ローディングを考えるまで一旦戻す

Author: naka-12

web/src/routes/+page.svelte

@@ -2,6 +2,10 @@
   import { onMount } from "svelte";
   import { type Client, createClient } from "~/api/client.ts";
   import Header from "~/components/header.svelte";
+  import MdiWrench from "virtual:icons/mdi/wrench";
+  import MdiVote from "virtual:icons/mdi/vote";
+  import MdiCog from "virtual:icons/mdi/cog";
+  import MdiGraph from "virtual:icons/mdi/graph";
 
   const client: Client = createClient({ fetch });
   async function getMyProjects(options?: { signal: AbortSignal }) {
@@ -37,58 +41,55 @@
   <Header title="" />
   <div class="p-2 hm-blocks-container">
     <div class="hm-block">
-      <section>
-        <h2 class="text-xl">プロジェクトを新規作成する</h2>
-        <div class="flex justify-center p-6">
-          <a href="/new" class="btn btn-lg btn-primary">新規作成</a>
-        </div>
-      </section>
-      <section>
-        {#if !projects}
-          <span>Welcome! this is being prerendered.</span>
-        {:else}
-          <ul class="list w-full bg-base-200 rounded-box shadow-md">
-            <li class="p-4 pb-2 text-xl opacity-60 tracking-wide">
-              作成・提出したプロジェクト
+      <h2 class="text-xl">プロジェクトを作る</h2>
+      <div class="flex justify-center p-2">
+        <a href="/new" class="btn btn-xl btn-primary"
+          ><MdiWrench class="mr-1" />新規作成</a
+        >
+      </div>
+    </div>
+    {#if !projects}
+      <div class="flex justify-center p-4">
+        <!-- TODO: 何もないときも常に loading になってしまう -->
+        <span>Welcome! this is being prerendered.</span>
+      </div>
+    {:else}
+      <div class="hm-block">
+        <h2 class="text-xl">作成・提出したプロジェクト</h2>
+        <ul class="list w-full bg-base-200 my-1 rounded-lg">
+          {#if projects.length === 0}
+            <li class="list-row flex">
+              作成・提出したプロジェクトはありません。
             </li>
-            {#if projects.length === 0}
-              <li class="list-row flex">
-                作成・提出したプロジェクトはありません。
+          {:else}
+            {#each projects as project}
+              <li class="list-row flex items-center">
+                <span class="h-full flex-1">{project.name}</span>
+                {#if project.is_admin}
+                  <a
+                    class="btn btn-primary btn-sm btn-outline"
+                    href="/{project.id}/config"
+                  >
+                    <MdiCog />
+                    管理
+                  </a>
+                {:else if project.closed_at !== null && new Date(project.closed_at).getTime() < new Date().getTime()}
+                  <!-- 締切済み -->
+                  <a class="btn btn-primary btn-sm" href="/{project.id}/result">
+                    <MdiGraph />
+                    結果
+                  </a>
+                {:else}
+                  <a class="btn btn-primary btn-sm" href="/{project.id}/submit">
+                    <MdiVote />
+                    提出
+                  </a>
+                {/if}
               </li>
-            {:else}
-              {#each projects as project}
-                <li class="list-row flex">
-                  <span class="h-full flex-1">{project.name}</span>
-                  {#if project.is_admin}
-                    <a
-                      class="btn btn-primary btn-sm btn-outline"
-                      href="/{project.id}/config"
-                    >
-                      管理
-                    </a>
-                  {/if}
-                  {#if project.closed_at !== null && new Date(project.closed_at).getTime() < new Date().getTime()}
-                    <!-- 締切済み -->
-                    <a
-                      class="btn btn-success btn-sm"
-                      href="/{project.id}/result"
-                    >
-                      結果
-                    </a>
-                  {:else}
-                    <a
-                      class="btn btn-primary btn-sm"
-                      href="/{project.id}/submit"
-                    >
-                      提出
-                    </a>
-                  {/if}
-                </li>
-              {/each}
-            {/if}
-          </ul>
-        {/if}
-      </section>
-    </div>
+            {/each}
+          {/if}
+        </ul>
+      </div>
+    {/if}
   </div>
 </div>