3 files changed, 67 insertions, 40 deletions
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
new file mode 100644
index 0000000..a063e96
--- /dev/null
+++ b/src/components/Card.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    export let title = "";
+    export let desc = "";
+</script>
+
+<div class="card w-96 bg-primary text-primary-content">
+    <div class="card-body">
+        <h2 class="card-title">{title}</h2>
+        <p>{desc}</p>
+        <div class="card-actions justify-end">
+            <slot/>
+        </div>
+    </div>
+</div>
diff --git a/src/components/EditorActions.svelte b/src/components/FileUploads.svelte
index aacbf0e..d48f455 100644
--- a/src/components/EditorActions.svelte
+++ b/src/components/FileUploads.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import Button, { Label } from "@smui/button";
+  import { Label } from "@smui/button";
   import IconButton from "@smui/icon-button";
   import Snackbar, { Actions } from "@smui/snackbar";
-  import FileUpload from "./FileUpload.svelte";
+  import UploadButton from "./UploadButton.svelte";
+  import Card from "./Card.svelte";
   import {
     parseDatabaseFile,
     parseLabScheduleFile,
@@ -98,45 +99,57 @@
   }
 </script>
 
-<div id="action-bar">
-  <FileUpload accept="text/plain" multiple={true} bind:files={ptSchedules}>
-    <Label>Add PT</Label>
-  </FileUpload>
-  <FileUpload accept="application/json" bind:files={labSchedule}>
-    <Label>Import Labs</Label>
-  </FileUpload>
-  <FileUpload accept="application/json" bind:files={dbFile}>
-    <Label>Import DB</Label>
-  </FileUpload>
-  <Button
-    variant="raised"
-    ripple={false}
-    on:click={exportDB}
-    style="overflow: hidden; margin-left: 0.1em; margin-right: 0.5em;"
-  >
-    <Label>Export DB</Label>
-  </Button>
-  <div id="info" />
+<div class="flex flex-col items-center justify-center h-full ">
+  <div class="flex grid grid-cols-2 gap-6">
+    <Card
+      title="Peer Teacher"
+      desc="Upload one or more Peer Teacher schedule txt files"
+    >
+      <UploadButton
+        accept="text/plain"
+        multiple={true}
+        bind:files={ptSchedules}
+      />
+    </Card>
+
+    <Card
+      title="Labs"
+      desc="Upload one or more Labs as json file. Acquired from Howdy"
+    >
+      <UploadButton
+        color="btn-success"
+        accept="application/json"
+        multiple={true}
+        bind:files={ptSchedules}
+      />
+    </Card>
+
+    <Card
+      title="Data Base"
+      desc="Upload the json database file to continue working"
+    >
+      <UploadButton
+        color="btn-info"
+        accept="application/json"
+        multiple={true}
+        bind:files={dbFile}
+      />
+    </Card>
+
+    <Card
+      title="Export DB"
+      desc="Download the json database file to save your work. Remember to save it on the cloud somewhere!"
+    >
+      <button class="btn btn-warning" on:click={exportDB}>Download</button>
+    </Card>
+  </div>
 </div>
+
+<!-- https://github.com/saadeghi/daisyui/issues/221 -->
+<!-- Snackbar is a work in progress for Daisyui. Until then, keep smui -->
 <Snackbar bind:this={snackbar} labelText={snackbarText}>
   <Label />
   <Actions>
     <IconButton class="material-icons" title="Dismiss">close</IconButton>
   </Actions>
 </Snackbar>
-
-<style>
-
-  #action-bar {
-    display: flex;
-    justify-content: space-evenly;
-    align-content: center;
-    border-radius: 1em;
-    /* background-image: linear-gradient(to right, red, purple); */
-    background-size: 100vw;
-    max-height: 2em;
-    max-width: 100vw;
-    overflow: hidden;
-    padding: 0.6em;
-  }
-</style>
diff --git a/src/components/FileUpload.svelte b/src/components/UploadButton.svelte
index d325e32..a592a25 100644
--- a/src/components/FileUpload.svelte
+++ b/src/components/UploadButton.svelte
@@ -2,10 +2,10 @@
   export let accept = "";
   export let multiple = false;
   export let files: FileList | null = null;
+  export let color = "";
 </script>
 
-<label class="mdc-button mdc-button--raised mdc-ripple-upgraded">
-  <div class="mdc-button__ripple" />
-  <slot>Upload</slot>
+<label class="btn {color}">
+  Upload
   <input type="file" {accept} {multiple} bind:files hidden />
 </label>