Reduced size of FileUploads buttons

3 files changed, 69 insertions, 66 deletions

diff --git a/README.md b/README.md
index 2f0f240..7f9ab1d 100644
--- a/README.md
+++ b/README.md
@@ -9,20 +9,23 @@ cd PTDatabaseApp &&
 npm i
 ```
 
-Then start [Rollup](https://rollupjs.org)
+The original version of this app (forked from Scott Wilkins) used [Rollup](https://rollupjs.org/guide/en/). It has now been switched to use [Vite](https://vitejs.dev/), which allows an effortless project setup for various frameworks. A project that uses `Svelte`, `tailwind`, `postcss`, can easily be instantiated with
 
+```shell
+npm create vite@latest
+```
+
+To run the development build
 ```bash
 npm run dev
 ```
 
 **note** that `npm run <arg>` is defined in [`package.json`](./package.json)
 
-Navigate to [localhost:1776](http://localhost:1776) to interact with the app through the browser. The port is *always* subject to change, so read the output in your terminal to see the port chosen by `sirv`. 
+Navigate to whichever `localhost:PORT/PTDatabaseApp` URL Vite chose for the server. The link should be written to `STDOUT` so keep an eye on your shell after running the command above.
 
 
-By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
-
-This application uses Svelte and Typescript.
+This application uses Svelte, Typescript, Tailwind, and daisyUI.
 
 ## Svelte
 Svelte is a tool for building fast web applications, similar to React, Angular, or Vue. 
@@ -47,10 +50,8 @@ and then run the compiled js file using `node` as such
 ```bash
 node app.js
 ```
-
-## Tailwind
-
-This project began by mainly utilizing the Svelte UI library named [Svelte Material UI](https://sveltematerialui.com/). As this is the first time I am working with professional-level web development tools (other than a not-so-elegant React project), I began looking into web development philosophy and methodologies. I came across a popular tool named Tailwind that is used by global companies like Github, Netflix, Heroku, Kickstarter, Twitch, and Segment. 
+Once you become familiar with Typescript, you will never go back to plain Javascript. 
+## Tailwind CSS
 
 Tailwind's utility-first fundamentals favor inline CSS in HTML files over maintaining separate CSS classes for each component. It focuses on building complex components from a constrained set of primitive utilities (the utilities offered by Tailwind through `<div class="">`). Building designs through Tailwind's utilities 
 - Saves energy investing class names for everything
@@ -61,3 +62,9 @@ Although it may feel like basically inline css but with shorter text, Tailwind's
 - Designing with constraints: The predefined design system makes it easier to build visually consistent UI
 - Responsive design: `@media` breakpoints can easily be factored in through the `sm`, `md`, `lg`, `xl`, and `2xl` prefixes
 - Hover, focus, and other states: Inline styles cannot target states like hover or focus, while Tailwind's state variants make it easy through prefixes.
+
+In this project, Tailwind directives are located in [app.css](./src/app.css)
+
+## daisyUI
+
+[daisyUI](https://daisyui.com/components/) is a Tailwind CSS component library. There are a million of component libraries to choose from when using `Svelte` and `Tailwind`. I chose this because I liked their components. 
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
index 6b4b59e..4d1c8bb 100644
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@@ -3,7 +3,7 @@
     export let desc = "";
 </script>
 
-<div class="card bg-primary text-primary-content">
+<div class="card card-compact w-100 bg-primary text-primary-content">
     <div class="card-body">
         <h2 class="card-title">{title}</h2>
         <p>{desc}</p>
diff --git a/src/components/FileUploads.svelte b/src/components/FileUploads.svelte
index da3d255..b38961f 100644
--- a/src/components/FileUploads.svelte
+++ b/src/components/FileUploads.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  let x: number | null;
-
   import { Label } from "@smui/button";
   import IconButton from "@smui/icon-button";
   import Snackbar, { Actions } from "@smui/snackbar";
@@ -16,8 +14,8 @@
   let ptSchedules: FileList | null;
   let labSchedule: FileList | null;
   let dbFile: FileList | null;
-  let snackbar;
-  let snackbarText;
+  let snackbar : Snackbar;
+  let snackbarText : Snackbar;
 
   $: {
     if (ptSchedules?.length) {
@@ -124,59 +122,57 @@
   }
 </script>
 
-<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={labSchedule}
-      />
-    </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>
-
-    <Card
-      title="Export to Local Storage"
-      desc="Save current DB to local storage. Local storage db should only be used for testing purposes to avoid data anomalies"
+<div class="flex grid m-10 grid-cols-2 gap-2">
+  <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={labSchedule}
+    />
+  </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>
+
+  <Card
+    title="Export to Local Storage"
+    desc="Save current DB to local storage. Local storage db should only be used for testing purposes to avoid data anomalies"
+  >
+    <button class="btn btn-warning" on:click={exportDB2LocalStorage}
+      >LocalStorage</button
     >
-      <button class="btn btn-warning" on:click={exportDB2LocalStorage}
-        >LocalStorage</button
-      >
-    </Card>
-  </div>
+  </Card>
 </div>
 
 <!-- https://github.com/saadeghi/daisyui/issues/221 -->