reduce modal max-width

src/components/WelcomeModal.vue

@@ -10,40 +10,9 @@
       for all your local music files 💿️.
     </p>
     <hr />
-    <p>
-      To get started, you need to have
-      <a href="https://github.com/geoffrey45/alice-core" target="_blank"
-        ><span class="inline-code">alice server </span></a
-      >
-      running on your computer, and accessible via
-      <a href="http://localhost:1970"
-        ><span class="inline-code">localhost:1970</span></a
-      >.
-    </p>
-    <p>
-      On top of that, you need to enable loading mixed content in your browser
-      to to load local images 🖼️. Firefox usually supports this by default, but
-      you may need to enable it in Chrome.
-    </p>
+    <p class="t-center">Let there be music!</p>
     <hr />
     <br />
-    <div class="instructions rounded">
-      <div class="t-center">How to enable loading mixed content in</div>
-      <div class="button-group">
-        <a
-          href="https://support.mozilla.org/en-US/kb/mixed-content-blocking-firefox"
-          target="_blank"
-        >
-          <button>🦊 Firefox</button>
-        </a>
-        <a
-          href="https://support.google.com/chrome/answer/95617?hl=en"
-          target="_blank"
-        >
-          <button>🦝 Chrome</button>
-        </a>
-      </div>
-    </div>
 
     <div class="bottom-banner">
       <div class="creator t-center">
@@ -64,14 +33,6 @@
     line-height: 1.5rem;
   }
 
-  .inline-code {
-    font-size: 0.9rem;
-    color: $red;
-    border-radius: $smaller;
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-      "Consolas", "Liberation Mono";
-  }
-
   hr {
     border: none;
     border-bottom: 1px $gray3 solid;
@@ -95,22 +56,7 @@
 
     a {
       color: $red;
-    }
-  }
-
-  .instructions {
-    background-color: $gray4;
-    padding: $small;
-
-    .button-group {
-      margin-top: 1rem;
-      display: flex;
-      justify-content: space-evenly;
-      gap: 1rem;
-
-      button {
-        padding: 0 $medium;
-      }
+      cursor: pointer !important;
     }
   }
 }

src/components/modal.vue

@@ -3,7 +3,7 @@
     <div class="bg" @click="modal.hideModal"></div>
     <div class="m-content rounded">
       <div class="heading">{{ modal.title }}</div>
-      <div class="cancel image" @click="modal.hideModal"></div>
+      <div class="close image" @click="modal.hideModal"></div>
       <NewPlaylist
         v-if="modal.component == modal.options.newPlaylist"
         :track="modal.props.track"
@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
 import useModalStore from "../stores/modal";
+
 import NewPlaylist from "./modals/NewPlaylist.vue";
 import UpdatePlaylist from "./modals/updatePlaylist.vue";
 import WelcomeModal from "./WelcomeModal.vue";
@@ -53,6 +54,7 @@ function hideModal() {
   width: 100vw;
   display: grid;
   place-items: center;
+  // padding: 1rem;
 
   .bg {
     position: absolute;
@@ -65,12 +67,12 @@ function hideModal() {
 
   .m-content {
     width: 100%;
-    max-width: 35rem;
-    padding: 1rem;
+    max-width: 30rem;
+    padding: 2rem;
     position: relative;
-    background-color: $gray;
+    background-color: $black;
 
-    .cancel {
+    .close {
       width: 2rem;
       height: 2rem;
       position: absolute;

src/components/modals/NewPlaylist.vue

@@ -8,8 +8,8 @@
       name="name"
       id="modal-playlist-name-input"
     />
-    <br />
-    <button type="submit">Create</button>
+    <br /><br>
+    <button type="submit" class="circular btn-active">Create</button>
   </form>
 </template>
 
@@ -95,6 +95,11 @@ function create(e: Event) {
   button {
     margin: 0 auto;
     width: 6rem;
+    transition: all .25s ease-out;
+
+    &:hover {
+      width: 10rem;
+    }
   }
 }
 </style>

src/components/modals/updatePlaylist.vue

@@ -35,7 +35,7 @@
         }"
       />
     </div>
-    <button>
+    <button class="circular btn-active">
       {{ clicked ? "Updating" : "Update" }}
     </button>
   </form>

src/composables/useKeyboard.ts

@@ -21,7 +21,7 @@ export default function (queue: typeof useQStore) {
     let ctrlKey = e.ctrlKey;
 
     function FocusedOnInput(target: HTMLElement) {
-      return target.tagName === "INPUT" || target.tagName === "TEXTAREA";
+      return target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "BUTTON";
     }
 
     if (FocusedOnInput(target)) return;

src/stores/notification.ts

@@ -21,7 +21,7 @@ const useNotifStore = defineStore("notification", {
 });
 
 class Notification {
-  constructor(text: string, type?: NotifType) {
+  constructor(text: string, type: NotifType = NotifType.Info) {
     useNotifStore().showNotification(text, type);
   }
 }