Improve profile design and background previews to preview with the us…

…er's current background and profile design
LorittaBot · Nov 14, 2024 · 2403032 · 2403032
1 parent 5402390
commit 2403032
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/.../kotlin/net/perfectdreams/loritta/morenitta/website/views/dashboard/user/DailyShopView.kt b/.../kotlin/net/perfectdreams/loritta/morenitta/website/views/dashboard/user/DailyShopView.kt
@@ -173,7 +173,7 @@ class DailyShopView(
 
                                                             img(
                                                                 classes = "canvas-preview",
-                                                                src = "/api/v1/users/@me/profile?type=${activeProfileDesignId}"
+                                                                src = "/api/v1/users/@me/profile?type=${activeProfileDesignId}&background=${shopItem.internalName}"
                                                             ) {
                                                                 style = "width: 400px; aspect-ratio: 4/3;"
                                                             }
@@ -280,14 +280,7 @@ class DailyShopView(
                                                     div(classes = "canvas-preview-wrapper-wrapper") {
                                                         div(classes = "canvas-preview-wrapper") {
                                                             img(
-                                                                classes = "canvas-preview-only-bg",
-                                                                src = "/api/v1/users/@me/profile?type=${shopItem.internalName}&background=${activeBackgroundId}"
-                                                            ) {
-                                                                style = "width: 400px; aspect-ratio: 4/3;"
-                                                            }
-
-                                                            img(
-                                                                classes = "canvas-preview",
+                                                                classes = "canvas-preview-profile-design",
                                                                 src = "/api/v1/users/@me/profile?type=${shopItem.internalName}&background=${activeBackgroundId}"
                                                             ) {
                                                                 style = "width: 400px; aspect-ratio: 4/3;"
@@ -371,7 +364,7 @@ class DailyShopView(
                                                 }
 
                                                 is ProfileDesignItemWrapper -> {
-                                                    "/api/v1/users/@me/profile?type=${shopItem.internalName}"
+                                                    "/api/v1/users/@me/profile?type=${shopItem.internalName}&background=${activeBackgroundId}"
                                                 }
                                             }
 

diff --git a/loritta-bot-discord/src/main/sass-dashboard/components/_daily-shop.scss b/loritta-bot-discord/src/main/sass-dashboard/components/_daily-shop.scss
@@ -177,6 +177,15 @@
   max-width: 100%;
 }
 
+.canvas-preview-profile-design {
+  transition-duration: 0.3s;
+  height: auto;
+  transform: rotateY(-10deg);
+  margin-bottom: 50px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
+  max-width: 100%;
+}
+
 .canvas-preview:hover {
   opacity: 0;
   transition-duration: 0.3s;