Merge pull request #9222 from kodadot/beta

release update

.github/actions/pnpm-install/action.yml

@@ -8,7 +8,7 @@ runs:
     - name: Install Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: '18.13'
+        node-version: 20
 
     - uses: pnpm/action-setup@v2
       name: Install pnpm

.github/workflows/build.libs-ui.yml

@@ -2,11 +2,11 @@ name: Build libs/ui package
 
 on:
   push:
-    branches: [ main, beta, production, nuxt ]
+    branches: [main, beta, production, nuxt]
     paths:
       - 'libs/ui/**'
   pull_request:
-    branches: [ main, beta, production, nuxt ]
+    branches: [main, beta, production, nuxt]
     paths:
       - 'libs/ui/**'
 
@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         uses: ./.github/actions/pnpm-install

.github/workflows/playwright.yml

@@ -1,33 +1,33 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, beta, production, nuxt ]
+    branches: [main, beta, production, nuxt]
   pull_request:
-    branches: [ main, beta, production, nuxt ]
+    branches: [main, beta, production, nuxt]
 jobs:
   test:
     timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
 
-    - name: Install dependencies
-      uses: ./.github/actions/pnpm-install
+      - name: Install dependencies
+        uses: ./.github/actions/pnpm-install
 
-    - name: Run Build
-      run: pnpm generate
-
-    - name: Install Playwright Browsers
-      run: pnpm exec playwright install --with-deps chromium
+      - name: Run Build
+        run: pnpm generate
 
-    - name: Run Playwright tests
-      run: pnpm exec playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/reviewdog.yml

@@ -15,7 +15,7 @@ jobs:
         uses: ./.github/actions/pnpm-install
 
       - name: Run eslint with reviewdog
-        uses: reviewdog/action-eslint@v1.16.0
+        uses: reviewdog/action-eslint@v1.22.0
         with:
           level: error
           github_token: ${{ secrets.GITHUB_TOKEN }}

.node-version

@@ -1 +1 @@
-18
+20

Dockerfile

@@ -1,5 +1,5 @@
 # Dockerfile
-FROM node:18
+FROM node:20
 
 # Set the same pnpm version as the version in the package.json
 ENV PNPM_VERSION 8.6.0

assets/styles/components/_carousel-arrows.scss

@@ -1,12 +1,9 @@
+
+
 .arrow {
   $side-y: 32px;
   $side-x: 55px;
 
-  &-small-size {
-    $side-y: 20px;
-    $side-x: 32px;
-  }
-
   width: $side-x;
   height: $side-x;
   @apply absolute -translate-y-2/4 cursor-pointer top-2/4;
@@ -112,3 +109,124 @@
     display: none;
   }
 }
+
+
+
+// We have to duplicate this block to use variables properly unless upgrade to sass 3.x version
+// red: https://stackoverflow.com/questions/12365703/scss-variable-scope
+
+.arrow-small-size {
+  $side-y-small: 20px;
+  $side-x-small: 32px;
+  &.arrow {
+
+    width: $side-x-small;
+    height: $side-x-small;
+
+    @apply absolute -translate-y-2/4 cursor-pointer top-2/4;
+    -webkit-transform: translateY(-50%);
+
+    &-left {
+      left: -30px;
+
+      border-bottom: solid $side-y-small transparent;
+      border-top: solid $side-y-small transparent;
+      @include ktheme() {
+        border-right: solid $side-x-small theme('black');
+      }
+      &::after {
+        content: '';
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        border-bottom: solid $side-y-small - 2 transparent;
+        border-top: solid $side-y-small - 2 transparent;
+        @include ktheme() {
+          border-right: solid $side-x-small - 2 theme('white');
+        }
+        top: -($side-y-small - 2);
+        right: -($side-x-small - 1);
+        transition-duration: 0.2s;
+      }
+
+      &::before {
+        content: '';
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        border-bottom: solid $side-y-small transparent;
+        border-top: solid $side-y-small transparent;
+        @include ktheme() {
+          border-right: solid $side-x-small theme('black');
+        }
+
+        top: -($side-y-small - 6);
+        right: -($side-x-small + 4);
+      }
+    }
+
+    &-right {
+      left: auto;
+      right: -30px;
+
+      border-bottom: solid $side-y-small transparent;
+      border-top: solid $side-y-small transparent;
+      @include ktheme() {
+        border-left: solid $side-x-small theme('black');
+      }
+      &::after {
+        content: '';
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        border-bottom: solid $side-y-small - 2 transparent;
+        border-top: solid $side-y-small - 2 transparent;
+        @include ktheme() {
+          border-left: solid $side-x-small - 2 theme('white');
+        }
+        top: -($side-y-small - 2);
+        left: -($side-x-small - 1);
+        transition-duration: 0.2s;
+      }
+
+      &::before {
+        content: '';
+        width: 0;
+        height: 0;
+
+        position: absolute;
+        border-bottom: solid $side-y-small transparent;
+        border-top: solid $side-y-small transparent;
+        @include ktheme() {
+          border-left: solid $side-x-small theme('black');
+        }
+        top: -($side-y-small - 6);
+        left: -($side-x-small - 4);
+      }
+    }
+
+    &:hover {
+      &.arrow-left::after {
+        @include ktheme() {
+          border-right: solid $side-x-small - 2 theme('k-accentlight');
+        }
+      }
+
+      &.arrow-right::after {
+        @include ktheme() {
+          border-left: solid $side-x-small - 2 theme('k-accentlight');
+        }
+      }
+    }
+
+    @media screen and (max-width: 640px) {
+      display: none;
+    }
+  }
+
+}
+
+

assets/styles/components/_carousel.scss

@@ -45,40 +45,8 @@
     }
   }
 
-  .carousel-info {
-    padding: 16px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &-name {
-      width: 100%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &-collection {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      &-name {
-        @include ktheme() {
-          color: theme('k-grey');
-        }
-      }
-    }
-
-    &-arrow {
-      @include ktheme() {
-        color: theme('text-color');
-      }
-      font-family: 'Fira Code', monospace;
-    }
-  }
-
-  .navigation-wrapper {
-    position: relative;
+  .carousel-info-arrow {
+    font-family: 'Fira Code', monospace;
   }
 
   .dots {

assets/styles/components/_collection-card.scss

@@ -76,13 +76,7 @@
       }
     }
     &__name {
-      padding-left: 32px;
-      padding-right: 20px;
-      text-overflow: ellipsis;
-      font-weight: 700;
-      font-size: 1rem;
-      overflow: hidden;
-      white-space: nowrap;
+      @apply text-ellipsis font-bold text-base overflow-hidden whitespace-nowrap pl-8 pr-5;
       line-height: $header-height;
       &:hover {
         @include ktheme() {

assets/styles/components/_search.scss

@@ -74,7 +74,7 @@
 
   .search-bar-collection-search {
     @apply z-[2] absolute h-6 gap-[0.35rem] left-10 top-2 cursor-default;
-    
+
     span {
       @apply h-5 px-4 py-0 rounded-[4rem];
 
@@ -186,17 +186,6 @@
     padding: 10px $desktop-padding-x;
   }
 
-  .main-title {
-    font-weight: 700;
-  }
-
-  .name {
-    max-width: 34ch;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .secondary-info {
     @include mobile {
       flex-direction: column !important;