More monorepo migration fixes (#1257)

* fix: More monorepo migration fixes

* fix: Corrected icon sizes & other fixes

* fix(theseus): Change color of mod installation button

* fix(theseus): More Turborepo fixes

* chore: Prettier

---------

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

packages/assets/styles/variables.scss

@@ -3,11 +3,6 @@ html {
   --dark-color-base: #b0bac5;
   --dark-color-contrast: #ecf9fb;
 
-  --color-ad: rgba(125, 75, 162, 0.2);
-  --color-ad-raised: rgba(190, 140, 243, 0.5);
-  --color-ad-contrast: black;
-  --color-ad-highlight: var(--color-purple);
-
   --gap-xs: 0.25rem;
   --gap-sm: 0.5rem;
   --gap-md: 0.75rem;
@@ -60,6 +55,11 @@ html {
 
   --color-tooltip-text: var(--color-accent-contrast);
   --color-tooltip-bg: var(--color-base);
+
+  --color-ad: #d6e6f9;
+  --color-ad-raised: #b1c8e4;
+  --color-ad-contrast: var(--color-text);
+  --color-ad-highlight: #088cdb;
 }
 
 .dark-mode,
@@ -98,6 +98,11 @@ html {
 
   --color-tooltip-text: var(--color-base);
   --color-tooltip-bg: var(--color-button-bg);
+
+  --color-ad: #1f324a;
+  --color-ad-raised: #2e4057;
+  --color-ad-contrast: var(--color-text);
+  --color-ad-highlight: #088cdb;
 }
 
 .oled-mode {
@@ -105,4 +110,6 @@ html {
   --color-bg: #000000;
   --color-raised-bg: #101013;
   --color-button-bg: #222329;
+
+  --color-ad: #0d1828;
 }

packages/ui/src/components/base/Button.vue

@@ -48,31 +48,36 @@ const props = defineProps({
 const accentedButton = computed(() =>
   ['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color),
 )
+
+const classes = computed(() => {
+  const color = props.color
+  return {
+    'icon-only': props.iconOnly,
+    'btn-large': props.large,
+    'btn-danger': color === 'danger',
+    'btn-primary': color === 'primary',
+    'btn-secondary': color === 'secondary',
+    'btn-highlight': color === 'highlight',
+    'btn-red': color === 'red',
+    'btn-orange': color === 'orange',
+    'btn-green': color === 'green',
+    'btn-blue': color === 'blue',
+    'btn-purple': color === 'purple',
+    'btn-gray': color === 'gray',
+    'btn-transparent': props.transparent,
+    'btn-hover-filled': props.hoverFilled,
+    'btn-hover-filled-only': props.hoverFilledOnly,
+    'btn-outline': props.outline,
+    'color-accent-contrast': accentedButton,
+  }
+})
 </script>
 
 <template>
   <router-link
     v-if="link && link.startsWith('/')"
     class="btn"
-    :class="{
-      'icon-only': iconOnly,
-      'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
-      'btn-transparent': transparent,
-      'btn-hover-filled': hoverFilled,
-      'btn-hover-filled-only': hoverFilledOnly,
-      'btn-outline': outline,
-      'color-accent-contrast': accentedButton,
-    }"
+    :class="classes"
     :to="link"
     :target="external ? '_blank' : '_self'"
   >
@@ -83,25 +88,7 @@ const accentedButton = computed(() =>
   <a
     v-else-if="link"
     class="btn"
-    :class="{
-      'icon-only': iconOnly,
-      'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
-      'btn-transparent': transparent,
-      'btn-hover-filled': hoverFilled,
-      'btn-hover-filled-only': hoverFilledOnly,
-      'btn-outline': outline,
-      'color-accent-contrast': accentedButton,
-    }"
+    :class="classes"
     :href="link"
     :target="external ? '_blank' : '_self'"
   >
@@ -109,30 +96,7 @@ const accentedButton = computed(() =>
     <ExternalIcon v-if="external && !iconOnly" class="external-icon" />
     <UnknownIcon v-if="!$slots.default" />
   </a>
-  <button
-    v-else
-    class="btn"
-    :class="{
-      'icon-only': iconOnly,
-      'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
-      'btn-transparent': transparent,
-      'btn-hover-filled': hoverFilled,
-      'btn-hover-filled-only': hoverFilledOnly,
-      'btn-outline': outline,
-      'color-accent-contrast': accentedButton,
-    }"
-    @click="action"
-  >
+  <button v-else class="btn" :class="classes" @click="action">
     <slot />
     <UnknownIcon v-if="!$slots.default" />
   </button>