[pull] master from monkeytypegame:master

backend/__tests__/__integration__/global-setup.ts

@@ -7,6 +7,7 @@ export async function setup(): Promise<void> {
   process.env.TZ = "UTC";
 
   //use testcontainer to start mongodb
+  console.log("\x1b[36mMongoDB starting...\x1b[0m");
   const mongoContainer = new GenericContainer("mongo:5.0.13")
     .withExposedPorts(27017)
     .withWaitStrategy(Wait.forListeningPorts());
@@ -17,8 +18,10 @@ export async function setup(): Promise<void> {
     27017,
   )}`;
   process.env["TEST_DB_URL"] = mongoUrl;
+  console.log(`\x1b[32mMongoDB is running on ${mongoUrl}\x1b[0m`);
 
   //use testcontainer to start redis
+  console.log("\x1b[36mRedis starting...\x1b[0m");
   const redisContainer = new GenericContainer("redis:6.2.6")
     .withExposedPorts(6379)
     .withWaitStrategy(Wait.forLogMessage("Ready to accept connections"));
@@ -29,11 +32,15 @@ export async function setup(): Promise<void> {
     6379,
   )}`;
   process.env["REDIS_URI"] = redisUrl;
+  console.log(`\x1b[32mRedis is running on ${redisUrl}\x1b[0m`);
 }
 
 async function stopContainers(): Promise<void> {
+  console.log("\x1b[36mMongoDB stopping...\x1b[0m");
   await startedMongoContainer?.stop();
+  console.log("\x1b[36mRedis stopping...\x1b[0m");
   await startedRedisContainer?.stop();
+  console.log(`\x1b[32mContainers stopped.\x1b[0m`);
 }
 
 export async function teardown(): Promise<void> {

backend/package.json

@@ -84,7 +84,7 @@
     "oxlint-tsgolint": "0.11.0",
     "readline-sync": "1.4.10",
     "supertest": "7.1.4",
-    "testcontainers": "11.10.0",
+    "testcontainers": "11.11.0",
     "tsx": "4.16.2",
     "typescript": "5.9.3",
     "vitest": "4.0.15"

frontend/src/styles/media-queries-blue.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(768px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(blue) {
   #mediaQueryDebug {
     background: #29b6f6;
     &::before {

frontend/src/styles/media-queries-brown.scss

@@ -1,5 +1,7 @@
 //this is very overkill for the modern world so dont worry too much about this width
-@media only screen and (max-width: 425px) {
+@use "./media.scss" as *;
+
+@include media-query(brown) {
   #mediaQueryDebug {
     background: #8d6e63;
     &::before {

frontend/src/styles/media-queries-gray.scss

@@ -1,5 +1,7 @@
 //this is very overkill for the modern world so dont worry too much about this width
-@media only screen and (max-width: 330px) {
+@use "./media.scss" as *;
+
+@include media-query(gray) {
   #mediaQueryDebug {
     background: gray;
     &::before {

frontend/src/styles/media-queries-green.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(1024px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(green) {
   #mediaQueryDebug {
     background: #9ccc65;
     &::before {

frontend/src/styles/media-queries-orange.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(1536px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(orange) {
   #mediaQueryDebug {
     background: #ffa726;
     &::before {

frontend/src/styles/media-queries-purple.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(640px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(purple) {
   #mediaQueryDebug {
     background: #7e57c2;
     &::before {

frontend/src/styles/media-queries-yellow.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(1280px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(yellow) {
   #mediaQueryDebug {
     background: #ffee58;
     &::before {