Revert "fixed a bug"

This reverts commit 49faba6ad2a99ef01827679620563a3d38a555da.

apps/frontend/src/assets/styles/global.scss

@@ -56,9 +56,9 @@ html {
   --color-text-inverted: var(--color-bg);
   --color-bg-inverted: var(--color-text);
 
-  --color-brand: #F16436;
+  --color-brand: var(--color-green);
-  --color-brand-highlight: rgba(242, 101, 53, 0.25);
+  --color-brand-highlight: rgba(0, 175, 92, 0.25);
-  --color-brand-shadow: rgba(242, 101, 53, 0.7);
+  --color-brand-shadow: rgba(0, 175, 92, 0.7);
   --color-brand-inverted: #ffffff;
 
   --tab-underline-hovered: #e2e8f0;
@@ -139,10 +139,10 @@ html {
   );
   --landing-border-gradient: linear-gradient(
     to bottom right,
-    rgba(175, 150, 129, 0.75) 0%,
+    rgba(129, 137, 175, 0.75) 0%,
-    rgba(97, 66, 66, 0.34) 100%
+    rgba(66, 71, 97, 0.34) 100%
   );
-  --landing-border-color: rgba(175, 134, 129, 0.55);
+  --landing-border-color: rgba(129, 137, 175, 0.55);
   --landing-creator-gradient: linear-gradient(180deg, #f8f8f8 0%, #f8f8f8 63.19%);
 
   --landing-blob-gradient: radial-gradient(
@@ -158,8 +158,8 @@ html {
 
   --landing-blue-label: #0098ba;
   --landing-blue-label-bg: rgba(0, 177, 216, 0.15);
-  --landing-green-label: #dd5b0b;
+  --landing-green-label: #00a936;
-  --landing-green-label-bg: rgba(221, 67, 21, 0.15);
+  --landing-green-label-bg: rgba(0, 216, 69, 0.15);
 
   --landing-raw-bg: #fff;
 }
@@ -174,22 +174,22 @@ html {
   --color-text-inactive: #929aa3;
   --color-text-dark: var(--dark-color-text-dark);
   --color-heading: #c4cfdd;
-  --color-bg: #0D0D0D;
+  --color-bg: #16181c;
-  --color-raised-bg: #202020;
+  --color-raised-bg: #26292f;
   --color-divider: #474b54;
   --color-divider-dark: #646c75;
 
   --color-text-inverted: var(--color-bg);
   --color-bg-inverted: var(--color-text);
 
-  --color-brand: #F16436;
+  --color-brand: var(--color-green);
-  --color-brand-highlight: rgba(242, 101, 53, 0.25);
+  --color-brand-highlight: rgba(27, 217, 106, 0.25);
-  --color-brand-shadow: rgba(242, 101, 53, 0.7);
+  --color-brand-shadow: rgba(27, 217, 106, 0.7);
   --color-brand-inverted: #000;
 
   --tab-underline-hovered: #414146;
 
-  --color-button-bg: #333333;
+  --color-button-bg: hsl(222, 13%, 30%);
   --color-button-text: var(--color-text);
   --color-button-bg-hover: #494f58;
   --color-button-text-hover: #ffffff;
@@ -245,42 +245,42 @@ html {
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
   --landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
-  --landing-maze-gradient-bg: linear-gradient(0deg, #371f17 0%, rgba(8, 14, 55, 0) 100%),
+  --landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
     url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
   --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
 
   --landing-color-heading: #fff;
-  --landing-color-subheading: #beb4af;
+  --landing-color-subheading: #afb6be;
 
-  --landing-transition-gradient-start: rgba(32, 26, 14, 0);
+  --landing-transition-gradient-start: rgba(14, 16, 32, 0);
-  --landing-transition-gradient-end: #1c0b06;
+  --landing-transition-gradient-end: #060a1c;
   --landing-hover-card-gradient: radial-gradient(
     50% 50% at 50% 50%,
-    #4f342c 0%,
+    #2c304f 0%,
-    rgba(50, 33, 32, 0.77) 100%
+    rgba(32, 35, 50, 0.77) 100%
   );
   --landing-border-gradient: linear-gradient(
     to bottom right,
-    rgba(221, 184, 168, 0.75) 0%,
+    rgba(168, 177, 221, 0.75) 0%,
-    rgba(221, 187, 168, 0.18) 100%
+    rgba(168, 177, 221, 0.18) 100%
   );
-  --landing-border-color: rgba(221, 174, 168, 0.55);
+  --landing-border-color: rgba(168, 177, 221, 0.55);
-  --landing-creator-gradient: linear-gradient(180deg, #000000 0%, #1d130e 100%);
+  --landing-creator-gradient: linear-gradient(180deg, #000000 0%, #0e101d 100%);
 
   --landing-blob-gradient: radial-gradient(
     50% 50% at 50% 50%,
-    rgba(79, 53, 44, 0.35) 0%,
+    rgba(44, 48, 79, 0.35) 0%,
-    rgba(50, 35, 32, 0.27) 100%
+    rgba(32, 35, 50, 0.2695) 100%
   );
-  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(94, 71, 57, 0.45);
+  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
 
-  --landing-card-bg: rgba(85, 69, 59, 0.15);
+  --landing-card-bg: rgba(59, 63, 85, 0.15);
   --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
 
   --landing-blue-label: #10c0e7;
   --landing-blue-label-bg: rgba(0, 177, 216, 0.15);
-  --landing-green-label: #ec6105;
+  --landing-green-label: #00d845;
-  --landing-green-label-bg: rgba(223, 83, 7, 0.15);
+  --landing-green-label-bg: rgba(0, 216, 69, 0.15);
 
   --landing-raw-bg: #000;
 

apps/frontend/src/components/ui/AdPlaceholder.vue

@@ -2,7 +2,7 @@
   <div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
     <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
       <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
-      <nuxt-link to="/plus" class="mt-auto items-center gap-1 text-brand hover:underline">
+      <nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
         <span>
           Support creators and Modrinth ad-free with
           <span class="font-bold">Modrinth+</span>

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -86,8 +86,8 @@
                 <UpdatedIcon />
               </Button>
               <DropdownSelect
-                v-model="selectedRange"
                 class="range-dropdown"
+                v-model="selectedRange"
                 :options="ranges"
                 name="Time range"
                 :display-name="
@@ -812,10 +812,10 @@ const defaultRanges: RangeObject[] = [
 
 .chart-button-base__selected {
   color: var(--color-contrast);
-  background-color: var(--color-brand-highlight) !important;
+  background-color: var(--color-brand-highlight);
   box-shadow:
     inset 0 0 0 transparent,
-    0 0 0 2px var(--color-brand) !important;
+    0 0 0 2px var(--color-brand);
 
   &:hover {
     background-color: var(--color-brand-highlight);

apps/frontend/src/components/ui/servers/Globe.vue

@@ -119,7 +119,7 @@ const init = () => {
   const material = new THREE.ShaderMaterial({
     uniforms: {
       outlineTexture: { value: outlineTexture },
-      globeColor: { value: new THREE.Color("#ffc69e") },
+      globeColor: { value: new THREE.Color("#60fbb5") },
     },
     vertexShader: `
       varying vec2 vUv;
@@ -151,7 +151,7 @@ const init = () => {
     transparent: true,
     side: THREE.BackSide,
     uniforms: {
-      color: { value: new THREE.Color("#fabc89") },
+      color: { value: new THREE.Color("#56f690") },
       viewVector: { value: camera.position },
     },
     vertexShader: `
@@ -262,13 +262,13 @@ onUnmounted(() => {
 <style scoped>
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(217, 84, 27, 0.3);
+    box-shadow: 0 0 0 0 rgba(27, 217, 106, 0.3);
   }
   70% {
-    box-shadow: 0 0 0 4px rgba(217, 78, 27, 0);
+    box-shadow: 0 0 0 4px rgba(27, 217, 106, 0);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(217, 84, 27, 0);
+    box-shadow: 0 0 0 0 rgba(27, 217, 106, 0);
   }
 }
 

apps/frontend/src/layouts/default.vue

@@ -839,7 +839,7 @@ useSeoMeta({
       defaultMessage: "Discover and publish Minecraft content!",
     }),
   ogType: "website",
-  ogImage: "https://cdn.modrinth.com/modrinth-newer.png",
+  ogImage: "https://cdn.modrinth.com/modrinth-new.png",
   ogUrl: link,
 
   // Twitter

apps/frontend/src/pages/servers/index.vue

@@ -33,7 +33,7 @@
       <div class="z-[5] flex w-full flex-col gap-8">
         <div class="flex flex-col gap-4">
           <div
-            class="relative h-fit w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+            class="relative h-fit w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
           >
             Beta Release
           </div>
@@ -105,7 +105,7 @@
       <div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
       <div class="relative mx-auto flex w-full max-w-7xl flex-col gap-8">
         <div
-          class="relative w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+          class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
         >
           Why Modrinth Servers?
         </div>
@@ -121,7 +121,7 @@
         <img
           src="https://cdn.modrinth.com/servers/excitement.webp"
           alt=""
-          class="absolute right-14 top-0 hidden max-w-[360px] hue-rotate-[280deg] lg:block"
+          class="absolute right-14 top-0 hidden max-w-[360px] lg:block"
         />
         <div class="relative grid w-full grid-cols-1 gap-8 lg:grid-cols-2">
           <div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
@@ -234,7 +234,7 @@
       <div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
       <div class="relative mx-auto flex w-full max-w-7xl flex-col gap-8">
         <div
-          class="relative w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+          class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
         >
           Included with your server
         </div>
@@ -250,7 +250,7 @@
         <img
           src="https://cdn.modrinth.com/servers/waving.webp"
           alt=""
-          class="absolute right-8 top-40 hidden max-w-[480px] hue-rotate-[280deg] lg:block"
+          class="absolute right-8 top-40 hidden max-w-[480px] lg:block"
         />
         <div class="grid grid-cols-1 gap-9 lg:grid-cols-2">
           <div class="grid w-full grid-cols-1 gap-8">
@@ -311,11 +311,11 @@
             style="
               background: radial-gradient(
                 86.12% 101.64% at 95.97% 94.07%,
-                rgba(217, 106, 27, 0.23) 0%,
+                rgba(27, 217, 106, 0.23) 0%,
-                rgba(115, 49, 14, 0.2) 100%
+                rgba(14, 115, 56, 0.2) 100%
               );
-              border: 1px solid rgba(107, 48, 12, 0.55);
+              border: 1px solid rgba(12, 107, 52, 0.55);
-              box-shadow: 0px 12px 38.1px rgba(217, 78, 27, 0.13);
+              box-shadow: 0px 12px 38.1px rgba(27, 217, 106, 0.13);
             "
             class="relative flex flex-col gap-4 overflow-hidden rounded-2xl p-6 text-left sm:backdrop-blur-xl md:p-12"
           >
@@ -494,7 +494,7 @@
           <div class="flex flex-col gap-8">
             <div class="flex flex-col gap-4">
               <div
-                class="relative w-fit rounded-full bg-brand-highlight px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+                class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
               >
                 Server Locations
               </div>
@@ -506,7 +506,7 @@
             <div class="flex flex-col gap-8">
               <div class="flex flex-col gap-4">
                 <div class="flex items-center gap-3">
-                  <div class="grid size-8 place-content-center rounded-full bg-brand-highlight">
+                  <div class="grid size-8 place-content-center rounded-full bg-highlight-green">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="16"
@@ -676,7 +676,7 @@
                 <div class="flex flex-row items-center justify-between">
                   <h1 class="m-0">Medium</h1>
                   <div
-                    class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-green"
+                    class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-brand"
                   >
                     M
                   </div>

packages/assets/styles/classes.scss

@@ -827,7 +827,7 @@ a,
     background: var(--color-tooltip-bg) !important;
     color: var(--color-tooltip-text) !important;
     padding: 0.5rem 0.5rem !important;
-    border-radius: 0 !important;
+    border-radius: var(--radius-sm) !important;
     filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
     font-size: 0.9rem;
     font-weight: bold;
@@ -1211,7 +1211,7 @@ select {
     border: 1px solid var(--color-button-bg) !important;
     padding: var(--gap-sm) !important;
     width: fit-content !important;
-    border-radius: 0 !important;
+    border-radius: var(--radius-md) !important;
     background-color: var(--color-raised-bg) !important;
     box-shadow: var(--shadow-floating) !important;
   }

packages/assets/styles/variables.scss

@@ -14,11 +14,11 @@
   --color-contrast: #1a202c;
   --color-accent-contrast: #ffffff;
 
-  --color-red: #fa3d3d;
+  --color-red: #cb2245;
   --color-orange: #e08325;
-  --color-green: #249D3F;
+  --color-green: #00af5c;
   --color-blue: #1f68c0;
-  --color-purple: #A379C9;
+  --color-purple: #8e32f3;
   --color-gray: #595b61;
 
   --color-red-highlight: rgba(203, 34, 69, 0.25);
@@ -34,9 +34,9 @@
   --color-blue-bg: rgba(31, 104, 192, 0.1);
   --color-purple-bg: rgba(142, 50, 243, 0.1);
 
-  --color-brand: #F16436;
+  --color-brand: var(--color-green);
-  --color-brand-highlight: rgba(242, 101, 53, 0.25);
+  --color-brand-highlight: var(--color-green-highlight);
-  --color-brand-shadow: rgba(242, 101, 53, 0.7);
+  --color-brand-shadow: rgba(0, 175, 92, 0.7);
 
   --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 91%, 0.1);
   --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 91%, 0.05);
@@ -53,17 +53,17 @@
 
   --brand-gradient-bg: linear-gradient(
     0deg,
-    rgba(182, 72, 68, 0.17) 0%,
+    rgba(68, 182, 138, 0.175) 0%,
-    rgba(250, 103, 58, 0.12) 100%
+    rgba(58, 250, 112, 0.125) 100%
   );
   --brand-gradient-strong-bg: linear-gradient(
     270deg,
-    rgba(182, 102, 68, 0.17) 0%,
+    rgba(68, 182, 138, 0.175) 0%,
-    rgba(225, 58, 36, 0.12) 100%
+    rgba(36, 225, 91, 0.12) 100%
   );
   --brand-gradient-button: rgba(255, 255, 255, 0.5);
-  --brand-gradient-border: rgba(64, 38, 32, 0.15);
+  --brand-gradient-border: rgba(32, 64, 32, 0.15);
-  --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(235, 217, 213, 0), #ecd2d0 70%);
+  --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
 
   --color-button-bg-selected: var(--color-brand);
   --color-button-text-selected: var(--color-accent-contrast);
@@ -136,11 +136,11 @@ html {
   --color-contrast: var(--dark-color-contrast);
   --color-accent-contrast: #000000;
 
-  --color-red: #fa3d3d;
+  --color-red: #ff496e;
-  --color-orange: #edbb22;
+  --color-orange: #ffa347;
-  --color-green: #249D3F;
+  --color-green: #1bd96a;
   --color-blue: #4f9cff;
-  --color-purple: #A379C9;
+  --color-purple: #c78aff;
   --color-gray: #9fa4b3;
 
   --color-red-highlight: rgba(255, 73, 110, 0.25);
@@ -156,9 +156,9 @@ html {
   --color-blue-bg: rgba(79, 156, 255, 0.2);
   --color-purple-bg: rgba(199, 138, 255, 0.2);
 
-  --color-brand: #F16436;
+  --color-brand: var(--color-green);
-  --color-brand-highlight: rgba(242, 101, 53, 0.25);
+  --color-brand-highlight: rgba(27, 217, 106, 0.25);
-  --color-brand-shadow: rgba(242, 101, 53, 0.7);
+  --color-brand-shadow: rgba(27, 217, 106, 0.7);
 
   --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
   --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
@@ -171,11 +171,11 @@ html {
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
-  --brand-gradient-bg: linear-gradient(0deg, rgba(35, 22, 14, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
+  --brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
-  --brand-gradient-strong-bg: linear-gradient(270deg, #110909 10%, #1f1613 100%);
+  --brand-gradient-strong-bg: linear-gradient(270deg, #09110d 10%, #131f17 100%);
   --brand-gradient-button: rgba(255, 255, 255, 0.08);
-  --brand-gradient-border: rgba(255, 190, 155, 0.08);
+  --brand-gradient-border: rgba(155, 255, 160, 0.08);
-  --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(31, 24, 24, 0), #1e1717 80%);
+  --brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
 
   --color-button-bg-selected: var(--color-brand-highlight);
   --color-button-text-selected: var(--color-brand);
@@ -208,13 +208,13 @@ html {
 
   --brand-gradient-bg: linear-gradient(
     0deg,
-    rgba(66, 30, 22, 0.15) 0%,
+    rgba(22, 66, 51, 0.15) 0%,
-    rgba(137, 77, 55, 0.1) 100%
+    rgba(55, 137, 73, 0.1) 100%
   );
   --brand-gradient-strong-bg: linear-gradient(
     270deg,
-    rgba(18, 10, 9, 0.6) 10%,
+    rgba(9, 18, 14, 0.6) 10%,
-    rgba(31, 21, 19, 0.5) 100%
+    rgba(19, 31, 23, 0.5) 100%
   );
 }
 
@@ -253,7 +253,7 @@ html {
 }
 
 .dark-experiments {
-  --color-button-bg: #333333;
+  --color-button-bg: #33363d;
 }
 
 .dark-mode:not(.oled-mode),
@@ -270,7 +270,3 @@ html {
     @extend .dark-experiments;
   }
 }
-
-* {
-  border-radius: 0!important;
-}

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

@@ -134,7 +134,7 @@ function hash(str) {
   position: relative;
 
   &.circle {
-    border-radius: 50%!important;
+    border-radius: 50%;
   }
 
   &:not(.no-shadow) {