Fix a number of light mode issues and get rid of scrollbar jumping on menus (#4760)

* Fix DEV-466, Fixes #4692 as well as a bunch of other poor contrast and inconsistency issues in light mode. Adds shadows to buttons and makes scrollbar gutter stable.

* lintttt & only do scrollbar gutter on website

* try to fix following hydration issue

* try another clientonly approach

* fix home page link animation

* lint

* remove dropdown style from checkbox & improve shadow consistency

* liiiint

Author: Prospector

apps/app-frontend/src/App.vue

@@ -765,7 +765,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<LibraryIcon />
 			</NavButton>
-			<div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
+			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
 			</suspense>

apps/app-frontend/src/components/ui/AccountsCard.vue

@@ -284,7 +284,7 @@ onUnmounted(() => {
 	z-index: 11;
 	gap: 0.5rem;
 	padding: 1rem;
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	width: max-content;
 	user-select: none;
 	-ms-user-select: none;
@@ -380,7 +380,7 @@ onUnmounted(() => {
 	text-align: left;
 
 	&.expanded {
-		border: 1px solid var(--color-button-bg);
+		border: 1px solid var(--color-divider);
 		padding: 1rem;
 	}
 }

apps/app-frontend/src/components/ui/ContextMenu.vue

@@ -119,7 +119,7 @@ onBeforeUnmount(() => {
 	background-color: var(--color-raised-bg);
 	border-radius: var(--radius-md);
 	box-shadow: var(--shadow-floating);
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	margin: 0;
 	position: fixed;
 	z-index: 1000000;
@@ -163,7 +163,7 @@ onBeforeUnmount(() => {
 	}
 
 	.divider {
-		border: 1px solid var(--color-button-bg);
+		border: 1px solid var(--color-divider);
 		margin: var(--gap-sm);
 		pointer-events: none;
 	}

apps/app-frontend/src/components/ui/InstanceCreationModal.vue

@@ -34,7 +34,7 @@
 			</div>
 			<div class="input-row">
 				<p class="input-label">Game version</p>
-				<div class="versions">
+				<div class="flex gap-4 items-center">
 					<multiselect
 						v-model="game_version"
 						class="selector"
@@ -45,7 +45,7 @@
 						open-direction="top"
 						:show-labels="false"
 					/>
-					<Checkbox v-model="showSnapshots" class="filter-checkbox" label="Show all versions" />
+					<Checkbox v-model="showSnapshots" class="shrink-0" label="Show all versions" />
 				</div>
 			</div>
 			<div v-if="loader !== 'vanilla'" class="input-row">
@@ -546,12 +546,6 @@ const next = async () => {
 	font-style: italic;
 }
 
-.versions {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
-}
-
 :deep(button.checkbox) {
 	border: none;
 }

apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue

@@ -69,7 +69,7 @@ onUnmounted(() => {
 			<SpinnerIcon class="animate-spin w-4 h-4" />
 		</div>
 	</NavButton>
-	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
+	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
 </template>
 
 <style scoped lang="scss"></style>

apps/app-frontend/src/components/ui/RunningAppBar.vue

@@ -293,7 +293,7 @@ onBeforeUnmount(() => {
 	align-items: center;
 	gap: 0.5rem;
 	border-radius: var(--radius-md);
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	padding: var(--gap-sm) var(--gap-lg);
 }
 
@@ -356,7 +356,7 @@ onBeforeUnmount(() => {
 	gap: 1rem;
 	overflow: auto;
 	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 
 	&.hidden {
 		transform: translateY(-100%);
@@ -454,7 +454,7 @@ onBeforeUnmount(() => {
 	flex-direction: column;
 	overflow: auto;
 	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	padding: var(--gap-md);
 
 	&.hidden {

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -130,7 +130,7 @@ onUnmounted(() => {
 			/>
 		</template>
 		<div
-			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised rounded-xl smart-clickable:highlight-on-hover"
+			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow rounded-xl smart-clickable:highlight-on-hover"
 		>
 			<Avatar
 				:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -181,7 +181,7 @@ const messages = defineMessages({
 			/>
 		</template>
 		<div
-			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised smart-clickable:highlight-on-hover rounded-xl"
+			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow smart-clickable:highlight-on-hover rounded-xl"
 			:class="{
 				'world-item-highlighted': highlighted,
 			}"

apps/app-frontend/src/pages/Skins.vue

@@ -427,7 +427,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
 
 	<div v-else class="flex items-center justify-center min-h-[50vh] pt-[25%]">
 		<div
-			class="bg-bg-raised rounded-lg p-7 flex flex-col gap-5 shadow-md relative max-w-xl w-full mx-auto"
+			class="bg-bg-raised card-shadow rounded-lg p-7 flex flex-col gap-5 shadow-md relative max-w-xl w-full mx-auto"
 		>
 			<img
 				:src="ExcitedRinthbot"

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

@@ -1290,3 +1290,7 @@ svg.inline-svg {
 		}
 	}
 }
+
+.card-shadow {
+	box-shadow: var(--shadow-card);
+}