Add pilltag/button customizations

.env.development

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.0.42"
+VITE_APP_VERSION="3.0.42-oMini"
 VITE_API_URL="http://localhost:8000/"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="/assets"

.env.production

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.0.42"
+VITE_APP_VERSION="3.0.42-oMini"
 VITE_API_URL="https://restfulsleep.phaseii.network"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="https://cdn.phaseii.network/file/PhaseII/web-assets"

public/data-sources/changelog.json

@@ -41,5 +41,5 @@
     "3.0.39": ["- (Major) Add Hitchart and Event schedule to game homepage", "- (Bugfix) Fix breaking jubeat Copius title"],
     "3.0.40": ["- (Major) Add banned user filtering on profile lists (SoffiMeower optimized)", "- (Bugfix) Fix rivals loading from incorrect versions"],
     "3.0.41": ["- (Major) Completely refactor user profile schema", "- (Major) Add Hitchart to player view", "- (Major) Add changelog archive view"],
-    "3.0.42": ["- (Major) Refactor loading state"]
+    "3.0.42-oMini": ["- (Major) Refactor loading state", "- (Minor) Add two new customizations, filled/outlined PillTags and Buttons"]
 }

src/colors.js

@@ -7,10 +7,10 @@ export const colorsBgLight = {
   white: "bg-white text-black",
   light: "bg-white text-black dark:bg-slate-900/70 dark:text-white",
   contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
-  success: "bg-emerald-500 border-emerald-500 text-white",
-  danger: "bg-red-500 border-red-500 text-white",
-  warning: "bg-yellow-500 border-yellow-500 text-white",
-  info: "bg-blue-500 border-blue-500 text-white",
+  success: "bg-emerald-700 border-emerald-500 text-white",
+  danger: "bg-red-700 border-red-500 text-white",
+  warning: "bg-yellow-700 border-yellow-500 text-white",
+  info: "bg-blue-700 border-blue-500 text-white",
 };
 
 export const colorsText = {
@@ -100,10 +100,10 @@ export const getButtonColor = (
       whiteDark: "border-white dark:border-slate-900",
       lightDark: "border-gray-100 dark:border-slate-800",
       contrast: "border-gray-800 dark:border-white",
-      success: "border-emerald-600 dark:border-emerald-800",
-      danger: "border-red-600 dark:border-red-950",
-      warning: "border-yellow-600 dark:border-yellow-950",
-      info: "border-blue-600 dark:border-blue-950",
+      success: "border-emerald-600 dark:border-emerald-600",
+      danger: "border-red-600 dark:border-red-800",
+      warning: "border-yellow-600 dark:border-yellow-700",
+      info: "border-blue-600 dark:border-blue-700",
       sakura: "border-pink-500",
       gold: "border-amber-400",
     },

src/components/BaseButton.vue

@@ -6,6 +6,8 @@ import BaseIcon from "@/components/BaseIcon.vue";
 import { useMainStore } from "@/stores/main";
 import { PhShrimp } from "@phosphor-icons/vue";
 
+const mainStore = useMainStore();
+
 const props = defineProps({
   label: {
     type: [String, Number],
@@ -91,6 +93,14 @@ const labelClass = computed(() =>
   props.small && props.icon ? "px-1" : "px-2",
 );
 
+function buttonOutline(outlineProp, customize) {
+  if (customize === undefined) {
+    return outlineProp;
+  } else {
+    return customize;
+  }
+}
+
 const componentClass = computed(() => {
   const base = [
     "inline-flex",
@@ -107,7 +117,7 @@ const componentClass = computed(() => {
     props.roundedFull ? "rounded-lg" : "rounded-sm",
     getButtonColor(
       mainStore.userCustomize.shrimpLinks ? "sakura" : props.color,
-      props.outline,
+      buttonOutline(props.outline, mainStore.userCustomize.buttonOutline),
       !props.disabled,
       props.active,
     ),
@@ -127,8 +137,6 @@ const componentClass = computed(() => {
 
   return base;
 });
-
-const mainStore = useMainStore();
 </script>
 
 <template>

src/components/PillTag.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { computed } from "vue";
+import { useMainStore } from "@/stores/main";
 import { colorsBgLight, colorsOutline } from "@/colors.js";
 import PillTagPlain from "@/components/PillTagPlain.vue";
 
+const mainStore = useMainStore();
+
 const props = defineProps({
   label: {
     type: String,
@@ -23,9 +26,19 @@ const props = defineProps({
   },
 });
 
+function isOutline(outlineProp, customize) {
+  if (customize === undefined) {
+    return outlineProp;
+  } else {
+    return customize;
+  }
+}
+
 const componentClass = computed(() => [
   props.small ? "py-1 px-3" : "py-1.5 px-4",
-  props.outline ? colorsOutline[props.color] : colorsBgLight[props.color],
+  isOutline(props.outline, mainStore.userCustomize.pillOutline)
+    ? colorsOutline[props.color]
+    : colorsBgLight[props.color],
 ]);
 </script>
 

src/stores/main.js

@@ -103,7 +103,6 @@ export const useMainStore = defineStore("main", {
     incrementLoading() {
       this.activeRequests++;
       this.isLoading = true;
-      console.log(this.activeRequests);
     },
     decrementLoading() {
       this.activeRequests = Math.max(0, this.activeRequests - 1);

src/views/Profile/CustomizeView.vue

@@ -120,6 +120,24 @@ async function revert() {
               />
             </FormField>
 
+            <FormField label="Outlined Buttons">
+              <FormCheckRadio
+                v-model="userCustomize.buttonOutline"
+                type="switch"
+                :input-value="userCustomize.buttonOutline ?? false"
+                name="buttonOutline"
+              />
+            </FormField>
+
+            <FormField label="Outlined Pill-Tags">
+              <FormCheckRadio
+                v-model="userCustomize.pillOutline"
+                type="switch"
+                :input-value="userCustomize.pillOutline ?? false"
+                name="pillOutline"
+              />
+            </FormField>
+
             <div class="space-x-2">
               <BaseButton type="submit" color="success" label="Save" />
               <BaseButton