diff --git a/src/assets/background-shop.svg b/src/assets/background-shop.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c88214b9025323f349cab7b68e80a5345f2e0a17
--- /dev/null
+++ b/src/assets/background-shop.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 1500 4000" width="1500" height="4000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="1500" height="4000" fill="#dfe7ec"></rect><defs><linearGradient id="grad1_0" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="30%" stop-color="#dfe7ec" stop-opacity="1"></stop><stop offset="70%" stop-color="#dfe7ec" stop-opacity="1"></stop></linearGradient></defs><defs><linearGradient id="grad2_0" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="30%" stop-color="#dfe7ec" stop-opacity="1"></stop><stop offset="70%" stop-color="#dfe7ec" stop-opacity="1"></stop></linearGradient></defs><g transform="translate(1500, 0)"><path d="M0 1350C-182.1 1338.4 -364.1 1326.7 -516.6 1247.2C-669.1 1167.8 -792 1020.4 -876.8 876.8C-961.6 733.2 -1008.4 593.3 -1080.9 447.7C-1153.5 302.2 -1251.7 151.1 -1350 0L0 0Z" fill="#c4c3d0"></path></g><g transform="translate(0, 4000)"><path d="M0 -1350C177.7 -1335.5 355.4 -1321.1 516.6 -1247.2C677.9 -1173.4 822.7 -1040.2 888.8 -888.8C955 -737.5 942.4 -567.9 1006.1 -416.7C1069.8 -265.6 1209.9 -132.8 1350 0L0 0Z" fill="#c4c3d0"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/banners/blob.svg b/src/assets/banners/blob.svg
new file mode 100644
index 0000000000000000000000000000000000000000..76308f5017374eb6cb85fdeeaa6eb6496fea1455
--- /dev/null
+++ b/src/assets/banners/blob.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 300" width="900" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="900" height="300" fill="#931F1F"></rect><g><g transform="translate(405 13)"><path d="M63.2 -22.3C72.1 6.8 62.7 40 41.2 55.3C19.8 70.5 -13.7 67.8 -38.5 50.4C-63.3 33 -79.3 1 -71.4 -26.7C-63.6 -54.4 -31.8 -77.8 -2.3 -77.1C27.1 -76.3 54.3 -51.4 63.2 -22.3Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(598 177)"><path d="M48.3 -16.8C53.9 1.6 43.8 23.9 27.5 35.1C11.2 46.3 -11.2 46.3 -27.7 35C-44.1 23.8 -54.6 1.3 -49 -17.1C-43.4 -35.5 -21.7 -49.8 -0.2 -49.7C21.4 -49.7 42.7 -35.2 48.3 -16.8Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(81 122)"><path d="M57.3 -21.6C64.6 3.9 54.3 32.2 32.5 49C10.8 65.8 -22.4 71.1 -44 56.4C-65.6 41.7 -75.7 6.9 -66.5 -21.3C-57.2 -49.4 -28.6 -70.9 -1.8 -70.3C25 -69.7 50 -47.1 57.3 -21.6Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(834 202)"><path d="M37.7 -11.7C42.9 3.8 37.1 23.5 24.7 32C12.4 40.5 -6.7 37.9 -19.4 28.3C-32.2 18.6 -38.7 2 -34.5 -12.3C-30.2 -26.5 -15.1 -38.3 0.6 -38.5C16.2 -38.6 32.5 -27.2 37.7 -11.7Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(396 296)"><path d="M43.5 -15.1C49.2 3.3 41.6 25.1 25.7 37C9.8 49 -14.4 51 -30.7 39.8C-47.1 28.5 -55.6 3.8 -49.2 -15.7C-42.7 -35.1 -21.4 -49.5 -1.2 -49.1C18.9 -48.7 37.8 -33.6 43.5 -15.1Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(735 18)"><path d="M37 -11.3C41.9 3.1 35.7 21.8 23 30.8C10.4 39.8 -8.7 39 -20.5 30C-32.4 20.9 -37.1 3.7 -32.4 -10.3C-27.8 -24.4 -13.9 -35.2 1.1 -35.5C16 -35.9 32.1 -25.7 37 -11.3Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/banners/layered.svg b/src/assets/banners/layered.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36bbd7a160fa7ba5da703c9f3e710e4724f5c5f8
--- /dev/null
+++ b/src/assets/banners/layered.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="2000" height="200" fill="#001220"></rect><path d="M0 106L47.7 109.5C95.3 113 190.7 120 285.8 120.3C381 120.7 476 114.3 571.2 108.5C666.3 102.7 761.7 97.3 857 100C952.3 102.7 1047.7 113.3 1143 114.5C1238.3 115.7 1333.7 107.3 1428.8 104.8C1524 102.3 1619 105.7 1714.2 106.2C1809.3 106.7 1904.7 104.3 1952.3 103.2L2000 102L2000 201L1952.3 201C1904.7 201 1809.3 201 1714.2 201C1619 201 1524 201 1428.8 201C1333.7 201 1238.3 201 1143 201C1047.7 201 952.3 201 857 201C761.7 201 666.3 201 571.2 201C476 201 381 201 285.8 201C190.7 201 95.3 201 47.7 201L0 201Z" fill="#fa7268"></path><path d="M0 107L47.7 108C95.3 109 190.7 111 285.8 115.8C381 120.7 476 128.3 571.2 132.2C666.3 136 761.7 136 857 135.2C952.3 134.3 1047.7 132.7 1143 130.2C1238.3 127.7 1333.7 124.3 1428.8 122C1524 119.7 1619 118.3 1714.2 116.2C1809.3 114 1904.7 111 1952.3 109.5L2000 108L2000 201L1952.3 201C1904.7 201 1809.3 201 1714.2 201C1619 201 1524 201 1428.8 201C1333.7 201 1238.3 201 1143 201C1047.7 201 952.3 201 857 201C761.7 201 666.3 201 571.2 201C476 201 381 201 285.8 201C190.7 201 95.3 201 47.7 201L0 201Z" fill="#ef5f67"></path><path d="M0 144L47.7 143.7C95.3 143.3 190.7 142.7 285.8 139.2C381 135.7 476 129.3 571.2 126.7C666.3 124 761.7 125 857 125.7C952.3 126.3 1047.7 126.7 1143 128.2C1238.3 129.7 1333.7 132.3 1428.8 136.2C1524 140 1619 145 1714.2 145C1809.3 145 1904.7 140 1952.3 137.5L2000 135L2000 201L1952.3 201C1904.7 201 1809.3 201 1714.2 201C1619 201 1524 201 1428.8 201C1333.7 201 1238.3 201 1143 201C1047.7 201 952.3 201 857 201C761.7 201 666.3 201 571.2 201C476 201 381 201 285.8 201C190.7 201 95.3 201 47.7 201L0 201Z" fill="#e34c67"></path><path d="M0 157L47.7 158.8C95.3 160.7 190.7 164.3 285.8 164.3C381 164.3 476 160.7 571.2 157.5C666.3 154.3 761.7 151.7 857 149.7C952.3 147.7 1047.7 146.3 1143 146.2C1238.3 146 1333.7 147 1428.8 148.2C1524 149.3 1619 150.7 1714.2 151.8C1809.3 153 1904.7 154 1952.3 154.5L2000 155L2000 201L1952.3 201C1904.7 201 1809.3 201 1714.2 201C1619 201 1524 201 1428.8 201C1333.7 201 1238.3 201 1143 201C1047.7 201 952.3 201 857 201C761.7 201 666.3 201 571.2 201C476 201 381 201 285.8 201C190.7 201 95.3 201 47.7 201L0 201Z" fill="#d53867"></path><path d="M0 180L47.7 178.7C95.3 177.3 190.7 174.7 285.8 173C381 171.3 476 170.7 571.2 172.2C666.3 173.7 761.7 177.3 857 177.8C952.3 178.3 1047.7 175.7 1143 173.5C1238.3 171.3 1333.7 169.7 1428.8 169.7C1524 169.7 1619 171.3 1714.2 171.5C1809.3 171.7 1904.7 170.3 1952.3 169.7L2000 169L2000 201L1952.3 201C1904.7 201 1809.3 201 1714.2 201C1619 201 1524 201 1428.8 201C1333.7 201 1238.3 201 1143 201C1047.7 201 952.3 201 857 201C761.7 201 666.3 201 571.2 201C476 201 381 201 285.8 201C190.7 201 95.3 201 47.7 201L0 201Z" fill="#c62368"></path></svg>
\ No newline at end of file
diff --git a/src/assets/banners/stacked.svg b/src/assets/banners/stacked.svg
new file mode 100644
index 0000000000000000000000000000000000000000..04f07004594034bc415222f3139fac781b197266
--- /dev/null
+++ b/src/assets/banners/stacked.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 55L30.3 53C60.7 51 121.3 47 182 51.3C242.7 55.7 303.3 68.3 363.8 72.3C424.3 76.3 484.7 71.7 545.2 65.7C605.7 59.7 666.3 52.3 727 47.7C787.7 43 848.3 41 909 42C969.7 43 1030.3 47 1091 55.7C1151.7 64.3 1212.3 77.7 1273 83C1333.7 88.3 1394.3 85.7 1454.8 84C1515.3 82.3 1575.7 81.7 1636.2 77C1696.7 72.3 1757.3 63.7 1818 56.3C1878.7 49 1939.3 43 1969.7 40L2000 37L2000 0L1969.7 0C1939.3 0 1878.7 0 1818 0C1757.3 0 1696.7 0 1636.2 0C1575.7 0 1515.3 0 1454.8 0C1394.3 0 1333.7 0 1273 0C1212.3 0 1151.7 0 1091 0C1030.3 0 969.7 0 909 0C848.3 0 787.7 0 727 0C666.3 0 605.7 0 545.2 0C484.7 0 424.3 0 363.8 0C303.3 0 242.7 0 182 0C121.3 0 60.7 0 30.3 0L0 0Z" fill="#6198ff"></path><path d="M0 103L30.3 103C60.7 103 121.3 103 182 107C242.7 111 303.3 119 363.8 120.3C424.3 121.7 484.7 116.3 545.2 111C605.7 105.7 666.3 100.3 727 103C787.7 105.7 848.3 116.3 909 116.7C969.7 117 1030.3 107 1091 107.3C1151.7 107.7 1212.3 118.3 1273 120.7C1333.7 123 1394.3 117 1454.8 115C1515.3 113 1575.7 115 1636.2 117.7C1696.7 120.3 1757.3 123.7 1818 121.3C1878.7 119 1939.3 111 1969.7 107L2000 103L2000 35L1969.7 38C1939.3 41 1878.7 47 1818 54.3C1757.3 61.7 1696.7 70.3 1636.2 75C1575.7 79.7 1515.3 80.3 1454.8 82C1394.3 83.7 1333.7 86.3 1273 81C1212.3 75.7 1151.7 62.3 1091 53.7C1030.3 45 969.7 41 909 40C848.3 39 787.7 41 727 45.7C666.3 50.3 605.7 57.7 545.2 63.7C484.7 69.7 424.3 74.3 363.8 70.3C303.3 66.3 242.7 53.7 182 49.3C121.3 45 60.7 49 30.3 51L0 53Z" fill="#3c80ff"></path><path d="M0 129L30.3 128.7C60.7 128.3 121.3 127.7 182 129.3C242.7 131 303.3 135 363.8 135.7C424.3 136.3 484.7 133.7 545.2 132C605.7 130.3 666.3 129.7 727 132.3C787.7 135 848.3 141 909 140.7C969.7 140.3 1030.3 133.7 1091 134.7C1151.7 135.7 1212.3 144.3 1273 144.3C1333.7 144.3 1394.3 135.7 1454.8 132.7C1515.3 129.7 1575.7 132.3 1636.2 135.7C1696.7 139 1757.3 143 1818 142.3C1878.7 141.7 1939.3 136.3 1969.7 133.7L2000 131L2000 101L1969.7 105C1939.3 109 1878.7 117 1818 119.3C1757.3 121.7 1696.7 118.3 1636.2 115.7C1575.7 113 1515.3 111 1454.8 113C1394.3 115 1333.7 121 1273 118.7C1212.3 116.3 1151.7 105.7 1091 105.3C1030.3 105 969.7 115 909 114.7C848.3 114.3 787.7 103.7 727 101C666.3 98.3 605.7 103.7 545.2 109C484.7 114.3 424.3 119.7 363.8 118.3C303.3 117 242.7 109 182 105C121.3 101 60.7 101 30.3 101L0 101Z" fill="#0066ff"></path><path d="M0 187L30.3 182.7C60.7 178.3 121.3 169.7 182 167.7C242.7 165.7 303.3 170.3 363.8 173.3C424.3 176.3 484.7 177.7 545.2 177.3C605.7 177 666.3 175 727 176C787.7 177 848.3 181 909 180.7C969.7 180.3 1030.3 175.7 1091 174C1151.7 172.3 1212.3 173.7 1273 172.7C1333.7 171.7 1394.3 168.3 1454.8 165.7C1515.3 163 1575.7 161 1636.2 163C1696.7 165 1757.3 171 1818 175C1878.7 179 1939.3 181 1969.7 182L2000 183L2000 129L1969.7 131.7C1939.3 134.3 1878.7 139.7 1818 140.3C1757.3 141 1696.7 137 1636.2 133.7C1575.7 130.3 1515.3 127.7 1454.8 130.7C1394.3 133.7 1333.7 142.3 1273 142.3C1212.3 142.3 1151.7 133.7 1091 132.7C1030.3 131.7 969.7 138.3 909 138.7C848.3 139 787.7 133 727 130.3C666.3 127.7 605.7 128.3 545.2 130C484.7 131.7 424.3 134.3 363.8 133.7C303.3 133 242.7 129 182 127.3C121.3 125.7 60.7 126.3 30.3 126.7L0 127Z" fill="#0059dd"></path><path d="M0 201L30.3 201C60.7 201 121.3 201 182 201C242.7 201 303.3 201 363.8 201C424.3 201 484.7 201 545.2 201C605.7 201 666.3 201 727 201C787.7 201 848.3 201 909 201C969.7 201 1030.3 201 1091 201C1151.7 201 1212.3 201 1273 201C1333.7 201 1394.3 201 1454.8 201C1515.3 201 1575.7 201 1636.2 201C1696.7 201 1757.3 201 1818 201C1878.7 201 1939.3 201 1969.7 201L2000 201L2000 181L1969.7 180C1939.3 179 1878.7 177 1818 173C1757.3 169 1696.7 163 1636.2 161C1575.7 159 1515.3 161 1454.8 163.7C1394.3 166.3 1333.7 169.7 1273 170.7C1212.3 171.7 1151.7 170.3 1091 172C1030.3 173.7 969.7 178.3 909 178.7C848.3 179 787.7 175 727 174C666.3 173 605.7 175 545.2 175.3C484.7 175.7 424.3 174.3 363.8 171.3C303.3 168.3 242.7 163.7 182 165.7C121.3 167.7 60.7 176.3 30.3 180.7L0 185Z" fill="#004cbb"></path></svg>
\ No newline at end of file
diff --git a/src/assets/banners/stars.svg b/src/assets/banners/stars.svg
new file mode 100644
index 0000000000000000000000000000000000000000..954cce4656b9b49cbf116b5723eac3a5af7b8cb5
--- /dev/null
+++ b/src/assets/banners/stars.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="2000" height="200" fill="#001829"></rect><g fill="#297EA6"><path d="M0 -96.3L21.6 -29.7L91.6 -29.7L35 11.4L56.6 77.9L0 36.8L-56.6 77.9L-35 11.4L-91.6 -29.7L-21.6 -29.7Z" transform="translate(1672 170)"></path><path d="M0 -42.5L9.5 -13.1L40.4 -13.1L15.4 5L25 34.4L0 16.2L-25 34.4L-15.4 5L-40.4 -13.1L-9.5 -13.1Z" transform="translate(1330 135)"></path><path d="M0 -56.6L12.7 -17.5L53.9 -17.5L20.6 6.7L33.3 45.8L0 21.6L-33.3 45.8L-20.6 6.7L-53.9 -17.5L-12.7 -17.5Z" transform="translate(274 47)"></path><path d="M0 -45.3L10.2 -14L43.1 -14L16.5 5.3L26.6 36.7L0 17.3L-26.6 36.7L-16.5 5.3L-43.1 -14L-10.2 -14Z" transform="translate(800 197)"></path><path d="M0 -49.1L11 -15.2L46.7 -15.2L17.8 5.8L28.8 39.7L0 18.7L-28.8 39.7L-17.8 5.8L-46.7 -15.2L-11 -15.2Z" transform="translate(80 113)"></path><path d="M0 -51L11.4 -15.7L48.5 -15.7L18.5 6L30 41.2L0 19.5L-30 41.2L-18.5 6L-48.5 -15.7L-11.4 -15.7Z" transform="translate(505 147)"></path><path d="M0 -84.9L19.1 -26.2L80.8 -26.2L30.9 10L49.9 68.7L0 32.4L-49.9 68.7L-30.9 10L-80.8 -26.2L-19.1 -26.2Z" transform="translate(917 12)"></path><path d="M0 -68.9L15.5 -21.3L65.5 -21.3L25 8.1L40.5 55.7L0 26.3L-40.5 55.7L-25 8.1L-65.5 -21.3L-15.5 -21.3Z" transform="translate(1951 109)"></path><path d="M0 -54.7L12.3 -16.9L52.1 -16.9L19.9 6.5L32.2 44.3L0 20.9L-32.2 44.3L-19.9 6.5L-52.1 -16.9L-12.3 -16.9Z" transform="translate(1527 27)"></path><path d="M0 -54.7L12.3 -16.9L52.1 -16.9L19.9 6.5L32.2 44.3L0 20.9L-32.2 44.3L-19.9 6.5L-52.1 -16.9L-12.3 -16.9Z" transform="translate(1107 109)"></path><path d="M0 -65.1L14.6 -20.1L61.9 -20.1L23.7 7.7L38.3 52.7L0 24.9L-38.3 52.7L-23.7 7.7L-61.9 -20.1L-14.6 -20.1Z" transform="translate(667 11)"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/shop-background.svg b/src/assets/shop-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0c8f7e41d593aba7339abf5f4e5ef71bf3613b31
--- /dev/null
+++ b/src/assets/shop-background.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="2000" height="200" fill="#931F1F"></rect><g><g transform="translate(47 22)"><path d="M81.9 -28.5C92.5 5.8 77.8 46.3 50.6 65C23.3 83.7 -16.5 80.6 -44.5 60.4C-72.6 40.2 -88.9 3 -79.5 -29.7C-70.1 -62.4 -35.1 -90.6 0.3 -90.7C35.7 -90.8 71.4 -62.8 81.9 -28.5Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(1876 62)"><path d="M47.2 -13.7C53.6 4.4 46 28.7 29.2 41C12.5 53.4 -13.5 53.9 -29.1 42.1C-44.7 30.3 -50 6.2 -43.4 -12.2C-36.8 -30.6 -18.4 -43.2 1 -43.5C20.4 -43.8 40.8 -31.9 47.2 -13.7Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(480 114)"><path d="M38 -12.3C44.2 6.7 40.7 28.9 27.9 38.1C15.1 47.4 -7 43.7 -22 32.3C-37 20.9 -44.9 1.8 -40.1 -15.3C-35.3 -32.4 -17.6 -47.7 -0.9 -47.4C15.9 -47.1 31.9 -31.3 38 -12.3Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(1093 186)"><path d="M70.5 -21.4C80.3 7.1 69.4 43.9 43.5 63.5C17.7 83.2 -23.2 85.7 -48.2 67.4C-73.1 49 -82.1 9.7 -71.4 -20.1C-60.7 -50 -30.4 -70.3 0 -70.3C30.4 -70.3 60.7 -50 70.5 -21.4Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(1631 144)"><path d="M58.4 -22.4C64.9 0.9 51.8 27.1 32 40.7C12.2 54.3 -14.4 55.3 -34.2 42.1C-54 28.9 -67 1.5 -60.1 -22.3C-53.3 -46 -26.7 -66 -0.3 -65.9C26 -65.8 52 -45.6 58.4 -22.4Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g><g transform="translate(789 190)"><path d="M66.4 -19.3C76.4 8.9 67.9 45.4 43.9 63.6C19.9 81.8 -19.7 81.7 -42.6 63.8C-65.6 45.9 -71.9 10.2 -62 -17.9C-52.2 -46.1 -26.1 -66.8 1.1 -67.1C28.3 -67.5 56.5 -47.5 66.4 -19.3Z" stroke="#F7760E" fill="none" stroke-width="20"></path></g></g></svg>
\ No newline at end of file
diff --git a/src/components/LeaderboardComponents/Leaderboard.vue b/src/components/LeaderboardComponents/Leaderboard.vue
index 4b1006543b6a7526b3d91805e416c499b8fc765c..cbed60338d34c4b03e64ec83c8fc7d52761c440f 100644
--- a/src/components/LeaderboardComponents/Leaderboard.vue
+++ b/src/components/LeaderboardComponents/Leaderboard.vue
@@ -1,6 +1,6 @@
<template>
<div id="leaderboard">
- <div class="ribbon"></div>
+
<table>
<tbody>
<tr v-for="(entry, index) in leaderboard" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.id === userStore.id }">
@@ -8,18 +8,12 @@
<td class="name" @click="navigateToUserProfile(entry.user?.id ?? 0)">{{ entry.user?.firstName }}</td>
<td class="points" v-if="index === 0">
{{ entry.score }}
- <div class="medal">
- <img class="gold-medal"
- src="https://github.com/malunaridev/Challenges-iCodeThis/blob/master/4-leaderboard/assets/gold-medal.png?raw=true"
- alt="gold medal" />
- </div>
</td>
<td v-else class="points">{{ entry.score }}</td>
</tr>
</tbody>
<tbody id="line">`</tbody>
<tbody v-if="!userInLeaderboard">
- <tr></tr>
<tr v-for="(entry, index) in leaderboardExtra" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.id === userStore.id }">
<td class="number">{{ entry.rank }}</td>
<td class="name" @click="navigateToUserProfile(entry.user?.id ?? 0)">{{ entry.user?.firstName }}</td>
@@ -62,9 +56,11 @@ const navigateToUserProfile = (id: number) => {
</script>
<style scoped>
+
#leaderboard {
- width: 100%;
+ max-width: 80%;
position: relative;
+ box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
table {
@@ -84,7 +80,7 @@ tr {
height: 4rem;
}
-tr:not(:first-child):hover {
+tr:hover {
background-color: #fff;
transform: scale(1.1);
-webkit-box-shadow: 0px 5px 15px 8px #e4e7fb;
@@ -95,10 +91,6 @@ tr:nth-child(even) {
background-color: #f9f9f9;
}
-tr:nth-child(1) {
- color: #fff;
-}
-
td {
height: 2rem;
font-family: "Rubik", sans-serif;
@@ -109,7 +101,7 @@ td {
.number {
width: 1rem;
- font-size: 2.2rem;
+ font-size: 1.4rem;
font-weight: bold;
text-align: left;
display: flex;
@@ -117,7 +109,7 @@ td {
}
.name {
- font-size: 1.3rem;
+ font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
@@ -125,7 +117,7 @@ td {
.points {
font-weight: bold;
- font-size: 1.3rem;
+ font-size: 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
@@ -155,7 +147,7 @@ td {
width: 106%;
height: 4.5rem;
top: -0.5rem;
- background-color: #0A58CA;
+ background-color: #003A58;
position: absolute;
/**left: -1rem;*/
box-shadow: 0px 15px 11px -6px #7a7a7d;
@@ -168,7 +160,7 @@ td {
bottom: -0.8rem;
left: 0.35rem;
transform: rotate(45deg);
- background-color: #0A58CA;
+ background-color: #003A58;
position: absolute;
z-index: -1;
}
@@ -180,7 +172,7 @@ td {
bottom: -0.8rem;
right: 0.35rem;
transform: rotate(45deg);
- background-color: #0A58CA;
+ background-color: #003A58;
position: absolute;
z-index: -1;
}
@@ -188,7 +180,7 @@ td {
#line {
width: 100%;
height: 0.01rem;
- border-top: 8px solid #0A58CA;
+ border-top: 8px solid #003A58
}
tr.is-user-5 {
diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue
index 010e1db278968c23fbc71c7b3917f153a2a57a2a..a1d386d9c319e0aeeffbbcf8130d09cfe88d84c7 100644
--- a/src/components/UserProfile/UserProfileLayout.vue
+++ b/src/components/UserProfile/UserProfileLayout.vue
@@ -22,7 +22,9 @@ async function setupForm() {
firstname.value = response.firstName;
lastname.value = response.lastName;
- imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
+ if (response.profileImage) {
+ imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
+ }
getInventory();
} catch (err) {
console.error(err)
@@ -64,24 +66,23 @@ const toUpdateUserSettings = () => {
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col 12">
<div class="card">
- <div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
- <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
-
- <img :src="imageUrl" alt="Generisk plassholderbilde" class="img-fluid img-thumbnail mt-4 mb-2"
- style="width: 150px; z-index: 1">
- <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
- data-mdb-ripple-color="dark" style="z-index: 1;" id="toUpdate" @click="toUpdateUserSettings">
- Rediger profil
- </button>
- </div>
- <div class="ms-3" style="margin-top: 130px;">
- <h1 data-cy="firstname">{{ firstname }} {{ lastname }}</h1>
+ <div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;" id="banner">
+ <div class=" d-flex flex-column align-items-center justify-content-center">
+ <img :src="imageUrl" alt="Generisk plassholderbilde" class="img-fluid img-thumbnail"
+ style="width: 150px; height:150px; margin-left: 25px; margin-right: 15px;">
</div>
+ <h1 data-cy="firstname" style="display: flex; align-items: end; margin-bottom: 20px;">{{ firstname }} {{ lastname }}</h1>
</div>
- <div class="p-4 text-black" style="background-color: #f8f9fa;">
+ <div class="p-3 text-black" style="background-color: #f8f9fa;">
<div class="d-flex justify-content-end text-center py-1">
- <div>
+ <div style="width: 100%; display: flex; justify-content: start">
+ <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
+ data-mdb-ripple-color="dark" style="z-index: 1; height: 40px; margin-left: 17px" id="toUpdate" @click="toUpdateUserSettings">
+ Rediger profil
+ </button>
+ </div>
+ <div>
<p class="mb-1 h2" data-cy="points">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
<p class="small text-muted mb-0">Poeng</p>
</div>
@@ -249,6 +250,10 @@ const toUpdateUserSettings = () => {
}
}
+#banner {
+ background-image: url('../src/assets/banners/stacked.svg');
+}
+
.card-1 {
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
diff --git a/src/views/LeaderboardView.vue b/src/views/LeaderboardView.vue
index f67a36c231f896006f6aae3dc265e052970f2a7d..68b4f25358fd99611482efe4170095cee23b3692 100644
--- a/src/views/LeaderboardView.vue
+++ b/src/views/LeaderboardView.vue
@@ -17,15 +17,15 @@
</div>
<main>
<div id="leaderboard">
- <h1><img src="@/assets/items/pigcoin.png" style="width: 2rem" alt="pig coin"> Totale poeng</h1>
+ <h1><img src="@/assets/items/pigcoin.png" style="width: 2rem" alt="pig coin"> Poeng</h1>
<Leaderboard :leaderboard="pointsLeaderboardData" :leaderboardExtra="pointsLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
- <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="ild"> Nåværende rekke</h1>
+ <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="ild"> Streak</h1>
<Leaderboard :leaderboard="currentLeaderboardData" :leaderboardExtra="currentLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
- <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="ild"> Høyeste rekke</h1>
+ <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="ild"> Streak</h1>
<Leaderboard :leaderboard="streakLeaderboardData" :leaderboardExtra="streakLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
</main>
@@ -175,7 +175,7 @@ main {
}
h1 {
- font-weight: 500;
+ font-weight: 700;
margin-bottom: 1rem;
}
diff --git a/src/views/ShopView.vue b/src/views/ShopView.vue
index f89b948c9954468514615b5d3cce8d840cfab31d..fc35bb4a7243918395de43b96d207fa4887e4383 100644
--- a/src/views/ShopView.vue
+++ b/src/views/ShopView.vue
@@ -1,10 +1,11 @@
<template>
- <br>
+ <div id="background">
+ <br>
<div id="dropdownContainer">
- <h1 class="box">Marked</h1>
+ <h1 class="box">Butikk</h1>
</div>
- <div class="container">
- <div class="row">
+ <div class="container d-flex justify-content-center">
+ <div class="row col-md-10">
<div class="col-md-12">
<h1>Stash</h1>
<div class="category row justify-content-between mb-5 m-2">
@@ -71,6 +72,7 @@
</div>
</div>
+ </div>
</template>
<script setup lang="ts">
@@ -138,6 +140,10 @@ onMounted(() => {
.box {
width: 90%;
+ justify-content: center;
+ text-align: center;
+ font-size: 5rem;
+ font-weight: 700;
}
.card:hover {
@@ -156,6 +162,10 @@ onMounted(() => {
#dropdownContainer {
display: flex;
justify-content: center;
+ align-items: center;
margin-bottom: 2rem;
}
+
+#background {
+}
</style>
\ No newline at end of file
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index 25c115a09c939372286102bdb68feccf09957776..3bd443b9d4c5701f695a903a7e5b8bdf274706ca 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -1,11 +1,15 @@
<template>
- <div class="container">
- <h1>Dine venner</h1>
+ <div class="container" style="margin-bottom: 3rem;">
+ <h1 class="my-3">Dine venner</h1>
<div>
- <button class="btn btn-primary pull-right" @click="addNewFriends">+ Legg til venn</button>
+ <button class="btn pull-right" @click="addNewFriends" id="addFriend">+ Legg til venn</button>
<div class="my-3">
- <button class="btn pages" @click="setupFriends">Dine venner</button>
- <button class="btn pages" @click="requestFriend">Venneforespørsler</button>
+ <button class="btn pages" @click="setupFriends" :class="{ 'active-tab': showFriends }">
+ Dine venner
+ </button>
+ <button class="btn pages" @click="requestFriend" :class="{ 'active-tab': showRequests }">
+ Venneforespørsler
+ </button>
</div>
</div>
<div v-if="showFriends">
@@ -23,7 +27,7 @@
</div>
<h3><router-link to="" data-cy="navigateToFriend" href="#" class="btn stretched-link"
id="profileName" @click="navigateToFriend(friend.id)">{{
- friend.firstName }}</router-link></h3>
+ friend.firstName }} {{ friend.lastName }}</router-link></h3>
<div class="desc">{{ friend.firstName }} {{ friend.lastName }}</div>
<div class="contacts">
<a class="text removeFriend" data-bs-toggle="collapse"
@@ -432,7 +436,7 @@ ul.friend-list .right p {
position: relative;
width: 100%;
height: 60px;
- background-color: #3afe;
+ background-color: rgba(7, 46, 74, 0.895);
}
.card-one .header::before,
@@ -566,4 +570,25 @@ ul.friend-list .right p {
border-radius: 0px;
margin: 0px 5px;
}
+
+.pages {
+ border-bottom: 2px solid #000;
+ /* default border */
+ border-radius: 0px;
+ margin: 0px 5px;
+}
+
+.active-tab {
+ border-bottom: 4px solid #000;
+ /* thicker border when active */
+}
+
+#addFriend {
+ background-color: #084766;
+ color: white;
+}
+
+#addFriend:hover {
+ background-color: #003b58f5;
+}
</style>
\ No newline at end of file