From 02a82e1e5911c78e3109a1eee0489875379206ec Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 31 Mar 2023 18:09:14 -0700
Subject: [PATCH] Fix folia projects not showing as a plugin (#1069)

---
 composables/cosmetics.js |  1 +
 layouts/default.vue      | 56 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/composables/cosmetics.js b/composables/cosmetics.js
index 4ff876af..b715e792 100644
--- a/composables/cosmetics.js
+++ b/composables/cosmetics.js
@@ -25,6 +25,7 @@ export const useCosmetics = () =>
           datapack: 'list',
           user: 'list',
         },
+        hideBetaPrompt: false,
       }
     }
 
diff --git a/layouts/default.vue b/layouts/default.vue
index d1548758..6597dc40 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -242,6 +242,12 @@
       </section>
     </header>
     <main>
+      <div v-if="$orElse(!$cosmetics.hideBetaPrompt, true)" class="beta-prompt universal-card">
+        <span class="text">The <span class="colored">NEW</span> Modrinth Technologies™ website BETA is now live!!</span>
+        <a href="https://blog.modrinth.com/p/new-site-beta" class="iconified-button" target="_blank">Learn more</a>
+        <a href="https://beta.modrinth.com/" class="iconified-button primary">Try it out</a>
+        <button class="square-button" aria-label="Close banner" @click="$cosmetics.hideBetaPrompt = true;saveCosmetics()"><CrossIcon/></button>
+      </div>
       <ModalCreation v-if="auth.user" ref="modal_creation" />
       <slot id="main" />
     </main>
@@ -1076,5 +1082,55 @@ export default defineNuxtComponent({
     }
   }
 }
+.beta-prompt {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #002B4B;
+  border-radius: 0;
+  border: 1px solid #14679E;
+  font-family: serif;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: bold;
+  gap: 1rem;
+  flex-wrap: wrap;
+  max-width: 20rem;
+  z-index: 100;
+  margin: 1rem;
+
+  .colored {
+    color: #BDA9FF;
+  }
+
+  .iconified-button, .square-button {
+    background-color: #00111e;
+    border-radius: 0;
+    color: white;
+    flex-shrink: 0;
+
+    &.primary {
+      background-color: #7EFFAD;
+      color: black;
+    }
+  }
+
+  .square-button {
+    background-color: transparent;
+
+    &:hover, &:active {
+      background-color: rgba(0, 17, 30, 0.3);
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .beta-prompt {
+    display: none;
+  }
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>