From 1d114affa1f09e9dd13a0163c27bf3ef38ac98f6 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 19:00:12 -0500
Subject: SVG wrapper component `Icon.svelte` for storing all SVGs, allowing
 SVG paths to be hidden away in one file

---
 src/components/AssignLabs/PT.svelte | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

(limited to 'src/components/AssignLabs')

diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
index 7db84f9..297ee21 100644
--- a/src/components/AssignLabs/PT.svelte
+++ b/src/components/AssignLabs/PT.svelte
@@ -1,36 +1,26 @@
 <script lang="ts">
     import type PeerTeacher from "../../models/PeerTeacher";
+    import Icon from "../helpers/Icon.svelte";
     export let pt: PeerTeacher;
 </script>
 
 <!-- PT Box -->
-<div class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black">
+<div
+    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
+>
     <!-- Top half, name and button -->
-    <div class="flex flex-row items-center">
+    <div class="flex flex-row items-center ">
         <!-- Left half, name -->
         <strong class="flex-grow text-sm">{pt.name}</strong>
-        <!-- Right half, button -->
 
+        <!-- Right half, button -->
         <!-- The button to open modal -->
         <label for="my-modal-4" class="">
-            <svg
-                on:click={() => console.log(pt.name)}
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width={2}
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-            </svg>
+            <Icon name="info" class="h-6 w-6" />
         </label>
 
-        <input type="checkbox" id="my-modal-4" class="modal-toggle"/>
+        <!-- Modal PT event info -->
+        <input type="checkbox" id="my-modal-4" class="modal-toggle" />
         <label for="my-modal-4" class="modal cursor-pointer">
             <label class="modal-box relative" for="">
                 <h3 class="text-lg font-bold ">
@@ -45,6 +35,6 @@
         </label>
     </div>
 
-    <!-- Bottom -->
-    <div>Hours: {pt.lab_hours}</div>
+    <!-- Bottom half, hours -->
+    <div class="">Hours: {pt.lab_hours}</div>
 </div>
-- 
cgit v1.2.3