Merge pull request #185 from prose-im/master

Bump deps + simpler pricing page style
prose-im · Oct 6, 2024 · 659e32c · 659e32c
2 parents 1c95c2c + 8d5144d
commit 659e32c
Show file tree

Hide file tree

Showing 10 changed files with 1,564 additions and 1,767 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,23 +29,23 @@
     "lint": "npm run lint:js && npm run lint:prettier"
   },
   "dependencies": {
-    "vue": "3.4.32",
+    "vue": "3.5.11",
     "crisp-sdk-web": "1.0.25"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "0.3.13",
-    "@nuxt/image": "1.7.0",
-    "@nuxt/content": "2.13.0",
-    "@nuxtjs/robots": "4.0.1",
-    "@nuxtjs/sitemap": "5.3.5",
+    "@nuxt/eslint-config": "0.5.7",
+    "@nuxt/image": "1.8.1",
+    "@nuxt/content": "2.13.2",
+    "@nuxtjs/robots": "4.1.7",
+    "@nuxtjs/sitemap": "6.1.1",
     "pug": "3.0.3",
-    "sass": "1.77.6",
+    "sass": "1.78.0",
     "pug-plain-loader": "1.1.0",
-    "sass-loader": "14.2.1",
-    "eslint": "9.6.0",
-    "nuxt": "3.12.3",
-    "nuxt-svgo": "4.0.2",
-    "prettier": "2.5.1",
+    "sass-loader": "16.0.2",
+    "eslint": "9.12.0",
+    "nuxt": "3.13.2",
+    "nuxt-svgo": "4.0.6",
+    "prettier": "3.3.3",
     "lodash.merge": "4.6.2"
   }
 }
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
@@ -233,7 +233,8 @@ $size-huge-padding-sides: 38px;
   &--dark {
     #{$c}__inner {
       background-color: $color-button-dark-normal;
-      box-shadow: 0 2px 1px 0 rgba($color-button-dark-normal, 0.12),
+      box-shadow:
+        0 2px 1px 0 rgba($color-button-dark-normal, 0.12),
         inset 0 1px 0 0 rgba($color-white, 0.22);
 
       #{$c}__label {
@@ -298,7 +299,8 @@ $size-huge-padding-sides: 38px;
         #c97ebd 111.91%,
         #f67086 160.76%
       );
-      box-shadow: 0px 3px 20px -6px rgba(100, 78, 180, 0.61),
+      box-shadow:
+        0px 3px 20px -6px rgba(100, 78, 180, 0.61),
         inset 0px 1px 2px rgba(255, 255, 255, 0.33),
         inset 0px -2px 2px rgba(102, 79, 187, 0.55);
 
@@ -332,7 +334,8 @@ $size-huge-padding-sides: 38px;
         #141a75 110.18%,
         #141a75 110.19%
       );
-      box-shadow: inset 0px -2.23809px 2.23809px #3975cf,
+      box-shadow:
+        inset 0px -2.23809px 2.23809px #3975cf,
         inset 0px 1px 2px rgba(255, 255, 255, 0.33),
         inset 0px -2px 2px rgba(18, 31, 62, 0.54);
 

diff --git a/src/components/base/BaseIcon.vue b/src/components/base/BaseIcon.vue
@@ -230,22 +230,28 @@ $c: ".c-base-icon";
 
   &--blue {
     background: linear-gradient(180deg, #518eea 0%, #3458ad 100%);
-    box-shadow: 0px 17px 20px -6px rgba(81, 142, 234, 0.61),
-      inset 0px -2px 2px #234596, inset 0px 2px 2px rgba(255, 255, 255, 0.25);
+    box-shadow:
+      0px 17px 20px -6px rgba(81, 142, 234, 0.61),
+      inset 0px -2px 2px #234596,
+      inset 0px 2px 2px rgba(255, 255, 255, 0.25);
     border-radius: 64px;
   }
 
   &--pink {
     background: linear-gradient(180deg, #f67086 0%, #f86079 100%);
-    box-shadow: 0px 17px 20px -6px rgba(246, 112, 134, 0.61),
-      inset 0px -2px 2px #e84f68, inset 0px 2px 2px rgba(255, 255, 255, 0.25);
+    box-shadow:
+      0px 17px 20px -6px rgba(246, 112, 134, 0.61),
+      inset 0px -2px 2px #e84f68,
+      inset 0px 2px 2px rgba(255, 255, 255, 0.25);
     border-radius: 64px;
   }
 
   &--purple {
     background: linear-gradient(180deg, #7e67d1 0%, #644eb4 100%);
-    box-shadow: 0px 17px 20px -6px rgba(100, 78, 180, 0.61),
-      inset 0px -2px 2px #4930a2, inset 0px 2px 2px rgba(255, 255, 255, 0.25);
+    box-shadow:
+      0px 17px 20px -6px rgba(100, 78, 180, 0.61),
+      inset 0px -2px 2px #4930a2,
+      inset 0px 2px 2px rgba(255, 255, 255, 0.25);
     border-radius: 64px;
   }
 }

diff --git a/src/components/base/BaseIconCard.vue b/src/components/base/BaseIconCard.vue
@@ -170,7 +170,9 @@ $c: ".c-base-icon-card";
   border: 1px solid #81899b33;
   backdrop-filter: blur(16px);
   overflow: hidden;
-  transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
+  transition:
+    background 0.2s ease-in-out,
+    border 0.2s ease-in-out;
   height: 100%;
 
   #{$c}__content {

diff --git a/src/components/base/BaseTitle.vue b/src/components/base/BaseTitle.vue
@@ -170,16 +170,27 @@ $stroke-color: $color-background-secondary;
     // Equivalent of:
     //   - paint-order: stroke;
     //   - @include text-stroke($stroke-size rgba($stroke-color, 0.75));
-    text-shadow: 0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color,
-      0 0 $stroke-size $stroke-color, 0 0 $stroke-size $stroke-color;
+    text-shadow:
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color,
+      0 0 $stroke-size $stroke-color;
   }
 }
 

diff --git a/src/components/page/PageHeader.vue b/src/components/page/PageHeader.vue
@@ -406,7 +406,8 @@ $hover-transition-duration: 150ms;
     display: flex;
     align-items: center;
     border-radius: $page-header-bar-height;
-    box-shadow: rgba($color-black, 0.086) 0 0.6px 0.6px -1.25px,
+    box-shadow:
+      rgba($color-black, 0.086) 0 0.6px 0.6px -1.25px,
       rgba($color-black, 0.076) 0 2.25px 2.25px -2.5px,
       rgba($color-black, 0.03) 0 10px 10px -3.75px;
   }

diff --git a/src/components/page/PageHeaderMenuToggle.vue b/src/components/page/PageHeaderMenuToggle.vue
@@ -97,7 +97,8 @@ $c: ".c-page-header-menu-toggle";
 
     :nth-child(1),
     :nth-child(2) {
-      transition: opacity 0s calc(var(--transition-duration) / 2),
+      transition:
+        opacity 0s calc(var(--transition-duration) / 2),
         transform calc(var(--transition-duration) / 2)
           calc(var(--transition-duration) / 2) cubic-bezier(0.86, 0, 0.07, 1);
     }
@@ -114,15 +115,17 @@ $c: ".c-page-header-menu-toggle";
     :nth-child(4) {
       opacity: 0;
       transform-origin: 50% 50%;
-      transition: transform calc(var(--transition-duration) / 2)
+      transition:
+        transform calc(var(--transition-duration) / 2)
           cubic-bezier(0.86, 0, 0.07, 1),
         opacity 0s calc(var(--transition-duration) / 2);
     }
 
     &--open {
       :nth-child(1),
       :nth-child(2) {
-        transition: transform calc(var(--transition-duration) / 2)
+        transition:
+          transform calc(var(--transition-duration) / 2)
             cubic-bezier(0.86, 0, 0.07, 1),
           opacity 0s calc(var(--transition-duration) / 2);
         opacity: 0;
@@ -139,7 +142,8 @@ $c: ".c-page-header-menu-toggle";
       :nth-child(3),
       :nth-child(4) {
         opacity: 1;
-        transition: opacity 0s calc(var(--transition-duration) / 2),
+        transition:
+          opacity 0s calc(var(--transition-duration) / 2),
           transform calc(var(--transition-duration) / 2)
             calc(var(--transition-duration) / 2) cubic-bezier(0.86, 0, 0.07, 1);
       }

diff --git a/src/components/section/home/SectionHomeMain.vue b/src/components/section/home/SectionHomeMain.vue
@@ -190,7 +190,8 @@ $inner-padding-top-base: 74px;
     overflow: hidden;
     border-radius: 12px;
     backdrop-filter: blur(40px);
-    box-shadow: 0 4px 12px rgba($color-black, 0.035),
+    box-shadow:
+      0 4px 12px rgba($color-black, 0.035),
       inset 0px 0.5px 1px #ffffff;
 
     #{$c}__application-contents {

diff --git a/src/components/section/pricing/SectionPricingMain.vue b/src/components/section/pricing/SectionPricingMain.vue
@@ -14,13 +14,6 @@
     .c-section-pricing-main__wrapper
       .c-section-pricing-main__box
         .c-section-pricing-main__decorations
-          span(
-            v-for="bubble in decorationBubbles"
-            :class=`[
-              "c-section-pricing-main__decorations-bubble",
-              "c-section-pricing-main__decorations-bubble--" + bubble
-            ]`
-          )
 
         .c-section-pricing-main__inner
           base-descripted-title(
@@ -192,8 +185,6 @@ export default {
     return {
       // --> DATA <--
 
-      decorationBubbles: ["blue", "pink"],
-
       planFeatures: {
         community: [
           {
@@ -330,35 +321,8 @@ $plan-section-separated-margin-sides-medium: 28px;
     &::before {
       content: "";
       background-color: rgba($color-background-primary, 0.5);
-      backdrop-filter: blur(50px);
       z-index: 1;
     }
-
-    #{$c}__decorations-bubble {
-      position: absolute;
-      z-index: 0;
-      border-radius: 100%;
-
-      &--blue {
-        background-color: $color-base-blue-light;
-        aspect-ratio: 1.2;
-        width: 50%;
-        left: 0;
-        bottom: 0;
-        opacity: 0.3;
-        transform: translate(-33%, 40%);
-      }
-
-      &--pink {
-        background-color: $color-base-pink-light;
-        aspect-ratio: 1.15;
-        width: 100%;
-        right: 0;
-        bottom: 0;
-        opacity: 0.25;
-        transform: translate(72%, 75%);
-      }
-    }
   }
 
   #{$c}__inner {
@@ -370,7 +334,8 @@ $plan-section-separated-margin-sides-medium: 28px;
     background-color: rgba($color-white, 0.9);
     border: 1px solid $color-border-primary;
     border-radius: 18px;
-    box-shadow: 0 0 0 -1px rgba($color-black, 0.09),
+    box-shadow:
+      0 0 0 -1px rgba($color-black, 0.09),
       0 2px 2px -2px rgba($color-black, 0.08),
       0 10px 10px -3px rgba($color-black, 0.03);