redesign search tab switcher buttons

~ imitate ubuntu-style tabbed buttons

package.json

@@ -11,17 +11,14 @@
   "dependencies": {
     "@vueuse/core": "^8.5.0",
     "axios": "^0.26.1",
-    "defu": "^6.0.0",
-    "mitt": "^3.0.0",
     "pinia": "^2.0.11",
-    "register-service-worker": "^1.7.1",
     "sass": "^1.49.0",
     "sass-loader": "^10",
     "vite-svg-loader": "^3.4.0",
     "vue": "^3.2.37",
     "vue-debounce": "^3.0.2",
     "vue-router": "^4.1.3",
-    "webpack": "^5.64.4"
+    "webpack": "^5.74.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/assets/scss/Global/app-grid.scss

@@ -18,7 +18,7 @@
 #acontent {
   grid-area: content;
   max-width: 1955px;
-  overflow: hidden auto;
+  overflow: hidden scroll;
   margin-top: -$small;
 
   .nav {

src/assets/scss/Global/index.scss

@@ -1,11 +1,5 @@
-@import
-"./app-grid.scss",
-"./controls.scss",
-"./inputs.scss",
-"./scrollbars.scss",
-"./state.scss",
-"./variants.scss",
-"./basic.scss";
+@import "./app-grid.scss", "./controls.scss", "./inputs.scss",
+  "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss";
 
 :root {
   --separator: #ffffff46;
@@ -22,6 +16,7 @@ body {
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "SF Compact Display" !important;
   font-size: 1rem;
   overflow: hidden;
   image-rendering: -webkit-optimize-contrast;

src/assets/scss/index.scss

@@ -1,4 +1,4 @@
-@import
+@import 
 "./mixins.scss",
 "./variables",
 "./moz.scss",
@@ -6,3 +6,9 @@
 "./BottomBar/BottomBar.scss",
 "./Global"
 ;
+
+
+@font-face {
+    font-family: "SF Compact Display";
+    src: url("../sf-compact.woff") format("woff");
+}

src/components/RightSideBar/Home/Recommendation.vue

@@ -3,7 +3,7 @@
     <div class="heading">Similar tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song.artist">
-        <img src="../../../assets/images/null.webp" class="rounded" />
+        <img src="" class="rounded" />
         <div class="tags">
           <div class="title">{{ song.title }}</div>
           <div class="artist">{{ song.artist }}</div>

src/components/RightSideBar/Queue.vue

@@ -71,20 +71,15 @@ onUpdated(() => {
 
     .scrollable-r {
       height: 100%;
-      padding: $small;
       overflow: hidden;
       display: grid;
       grid-template-rows: max-content 1fr;
-      gap: $medium;
 
       .inner {
-        height: 100%;
-        margin-right: -$small;
         overflow: scroll;
-        margin-top: 1rem;
-        padding-right: $small;
         overflow-x: hidden;
         scrollbar-color: grey transparent;
+        margin: 1rem 0;
       }
     }
   }

src/components/RightSideBar/Queue/QueueActions.vue

@@ -33,8 +33,8 @@ const queue = useQueueStore();
   display: flex;
   justify-content: space-between;
   gap: $small;
-  margin-bottom: -1.25rem;
-  margin-top: $small;
+  margin: 1rem;
+  margin-bottom: 0;
 
   .action {
     padding: $smaller;

src/components/RightSideBar/Search/AlbumGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results border">
+  <div class="albums-results">
     <div class="grid">
       <AlbumCard
         v-for="album in search.albums.value"
@@ -27,9 +27,8 @@ function loadMore() {
 <style lang="scss">
 .right-search .albums-results {
   border-radius: 0.5rem;
-  margin-top: $small;
-  padding: $small;
   overflow-x: hidden;
+  margin: 0 1rem;
 
   .result-item:hover {
     background-color: $gray4;
@@ -38,6 +37,7 @@ function loadMore() {
   .grid {
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
+    justify-content: flex-start;
     gap: 0.75rem;
   }
 }

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="artists-results bg-black">
+  <div class="artists-results" v-if="search.artists.value.length">
     <div class="grid">
       <ArtistCard
         v-for="artist in search.artists.value"
@@ -26,15 +26,22 @@ function loadMore() {
 
 <style lang="scss">
 .right-search .artists-results {
-  border-radius: 0.5rem;
-  padding: $small;
-  margin-bottom: $small;
+  display: grid;
+  margin: 0 1rem;
 
   .xartist {
     background-color: $gray;
+
+    .artist-image {
+      width: 7rem;
+      height: 7rem;
+      aspect-ratio: 1 !important;
+      object-fit: cover;
+    }
   }
 
   .grid {
+    display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0.75rem;
   }

src/components/RightSideBar/Search/Main.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
+      <Tab name="Top Results">
+        <ArtistGrid />
+      </Tab>
       <Tab name="tracks">
         <TracksGrid />
       </Tab>
@@ -10,6 +13,9 @@
       <Tab name="artists">
         <ArtistGrid />
       </Tab>
+      <Tab name="Playlists">
+        <ArtistGrid />
+      </Tab>
     </TabsWrapper>
   </div>
 </template>

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,16 +1,19 @@
 <template>
-  <div id="right-tabs">
-    <div id="tabheaders">
-      <div
-        class="tab rounded"
-        v-for="slot in $slots.default()"
-        :key="slot.key"
-        @click="s.changeTab(slot.props.name)"
-        :class="{ activetab: slot.props.name === s.currentTab }"
-      >
-        {{ slot.props.name }}
+  <div id="right-tabs" class="bg-black rounded">
+    <div class="tab-buttons-wrapper">
+      <div id="tabheaders" class="rounded noscroll">
+        <div
+          class="tab"
+          v-for="slot in $slots.default()"
+          :key="slot.key"
+          @click="s.changeTab(slot.props.name)"
+          :class="{ activetab: slot.props.name === s.currentTab }"
+        >
+          {{ slot.props.name }}
+        </div>
       </div>
     </div>
+
     <div id="tab-content">
       <slot />
     </div>
@@ -26,30 +29,46 @@ const s = useSearchStore();
 <style lang="scss">
 #right-tabs {
   height: 100%;
-  margin-right: $small;
   display: grid;
   grid-template-rows: min-content 1fr;
 
-  #tabheaders {
+  .tab-buttons-wrapper {
     display: flex;
-    gap: $small;
-    margin: $small 0;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #tabheaders {
+    display: grid;
+    grid-template-columns: repeat(5, max-content);
+    justify-content: space-around;
+    margin: 1rem;
+    width: max-content;
+    background: linear-gradient(37deg, $gray3, $gray4, $gray3);
+    height: 2rem;
+
+    & > * {
+      border-left: solid 1px $gray3;
+    }
 
     .tab {
-      background-color: $gray3;
-      padding: $small;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       text-transform: capitalize;
       cursor: pointer;
-      display: flex;
-      justify-content: center;
       transition: all 0.3s ease;
-      width: 4rem;
+      padding: 0 $small;
+
+      &:first-child {
+        border-left: solid 1px transparent;
+      }
     }
 
     .activetab {
-      background-color: $accent;
-      width: 6rem;
+      background-color: $darkblue;
       transition: all 0.3s ease;
+      border-left: solid 1px transparent;
     }
   }
 
@@ -57,8 +76,8 @@ const s = useSearchStore();
     height: 100%;
     overflow: auto;
     overflow-x: hidden;
-    border-radius: $small;
-    background-color: $gray;
+    padding-bottom: 1rem;
+
     // overflow: hidden;
   }
 }

src/components/RightSideBar/Search/TracksGrid.vue

@@ -19,7 +19,6 @@
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "../../shared/TrackItem.vue";
 import useQStore from "../../../stores/queue";
-import { Track } from "../../../interfaces";
 import useSearchStore from "../../../stores/search";
 
 const queue = useQStore();
@@ -38,8 +37,6 @@ function updateQueue(index: number) {
 
 <style lang="scss">
 .right-search #tracks-results {
-  border-radius: 0.5rem;
-  padding: $small;
   height: 100% !important;
   overflow: hidden;
 

src/components/shared/ArtistCard.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="xartist" :class="{ _is_on_sidebar: alt }">
-    <div
-      class="artist-image image bg-black-sm"
-      :style="{ backgroundImage: `url('${imguri + artist.image}')` }"
-    ></div>
+    <img class="artist-image shadow-sm" :src="imguri + artist.image" alt="" />
     <div>
       <p class="artist-name t-center ellipsis">{{ artist.name }}</p>
     </div>
@@ -38,22 +35,18 @@ defineProps<{
   cursor: pointer;
 
   .artist-image {
-    width: 8em;
-    height: 8em;
+    width: 8rem;
+    height: 8rem;
     border-radius: 60%;
     margin-bottom: $small;
-    background-size: 8rem 8rem;
-    background-position: center;
-    background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;
     transition-delay: 0.25s;
+    object-fit: cover;
   }
 
   &:hover {
     .artist-image {
-      background-position: 50% 20%;
       border-radius: 20%;
-      background-size: 10rem 10rem;
     }
   }
 

src/components/shared/TrackItem.vue

@@ -36,15 +36,15 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { ContextSrc } from "../../composables/enums";
-import { putCommas } from "../../composables/perks";
-import trackContext from "../../contexts/track_context";
-import { Track } from "../../interfaces";
+import { ContextSrc } from "@/composables/enums";
+import { putCommas } from "@/composables/perks";
+import trackContext from "@/contexts/track_context";
+import { Track } from "@/interfaces";
 
-import { paths } from "../../config";
-import useContextStore from "../../stores/context";
-import useModalStore from "../../stores/modal";
-import useQueueStore from "../../stores/queue";
+import { paths } from "@/config";
+import useContextStore from "@/stores/context";
+import useModalStore from "@/stores/modal";
+import useQueueStore from "@/stores/queue";
 
 const contextStore = useContextStore();
 const imguri = paths.images.thumb;
@@ -84,7 +84,7 @@ const playThis = (track: Track) => {
 
 <style lang="scss">
 .currentInQueue {
-  background-color: $gray3;
+  background: linear-gradient(37deg, $gray4, $gray3, $gray3);
 }
 
 .contexton {
@@ -93,17 +93,15 @@ const playThis = (track: Track) => {
 }
 
 .track-item {
-  display: flex;
+  display: grid;
+  grid-template-columns: min-content 1fr;
   align-items: center;
-  border-radius: 0.5rem;
-  position: relative;
-  height: 4rem;
-  padding: 0.5rem 0.5rem 0.5rem 4rem;
-  text-transform: capitalize;
+  padding: $small 1rem;
+  // text-transform: capitalize;
 
   &:hover {
     cursor: pointer;
-    background-color: $gray4 !important;
+    background: linear-gradient(37deg, $gray4, $gray3, $gray3);
   }
 
   hr {
@@ -111,9 +109,11 @@ const playThis = (track: Track) => {
     margin: 0.1rem;
   }
 
+  // .tags {
+  //   border: solid 1px;
+  // }
+
   .album-art {
-    position: absolute;
-    left: $small;
     display: flex;
     align-items: center;
     justify-content: center;

src/main.js

@@ -1,5 +1,4 @@
 import "./assets/scss/index.scss";
-import "./registerServiceWorker";
 
 import { createPinia } from "pinia";
 import { createApp } from "vue";

src/registerServiceWorker.js

@@ -1,32 +0,0 @@
-/* eslint-disable no-console */
-
-import { register } from 'register-service-worker'
-
-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated () {
-      console.log('New content is available; please refresh.')
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
-}

yarn.lock

@@ -41,10 +41,10 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@types/eslint-scope@^3.7.0":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
+"@types/eslint-scope@^3.7.3":
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
+  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
   dependencies:
     "@types/eslint" "*"
     "@types/estree" "*"
@@ -57,11 +57,16 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/estree@^0.0.50":
+"@types/estree@*":
   version "0.0.50"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
   integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
 
+"@types/estree@^0.0.51":
+  version "0.0.51"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
+  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.8":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@@ -344,11 +349,16 @@ acorn-jsx@^5.3.1:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.4.1, acorn@^8.7.0:
+acorn@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
+acorn@^8.7.1:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
 ajv-keywords@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
@@ -668,11 +678,6 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defu@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/defu/-/defu-6.0.0.tgz#b397a6709a2f3202747a3d9daf9446e41ad0c5fc"
-  integrity sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==
-
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -741,10 +746,10 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-enhanced-resolve@^5.8.3:
-  version "5.8.3"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz#6d552d465cce0423f5b3d718511ea53826a7b2f0"
-  integrity sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==
+enhanced-resolve@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
+  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -1448,10 +1453,10 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-json-parse-better-errors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
@@ -1576,11 +1581,6 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
-mitt@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
-  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
-
 mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@@ -1796,11 +1796,6 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-register-service-worker@^1.7.1:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/register-service-worker/-/register-service-worker-1.7.2.tgz#6516983e1ef790a98c4225af1216bc80941a4bd2"
-  integrity sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -2191,10 +2186,10 @@ vue@^3.2.37:
     "@vue/server-renderer" "3.2.37"
     "@vue/shared" "3.2.37"
 
-watchpack@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"
-  integrity sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==
+watchpack@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
+  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
@@ -2204,34 +2199,34 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.64.4:
-  version "5.68.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.68.0.tgz#a653a58ed44280062e47257f260117e4be90d560"
-  integrity sha512-zUcqaUO0772UuuW2bzaES2Zjlm/y3kRBQDVFVCge+s2Y8mwuUTdperGaAv65/NtRL/1zanpSJOq/MD8u61vo6g==
+webpack@^5.74.0:
+  version "5.74.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
+  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
   dependencies:
-    "@types/eslint-scope" "^3.7.0"
-    "@types/estree" "^0.0.50"
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
     "@webassemblyjs/ast" "1.11.1"
     "@webassemblyjs/wasm-edit" "1.11.1"
     "@webassemblyjs/wasm-parser" "1.11.1"
-    acorn "^8.4.1"
+    acorn "^8.7.1"
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.8.3"
+    enhanced-resolve "^5.10.0"
     es-module-lexer "^0.9.0"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.2.9"
-    json-parse-better-errors "^1.0.2"
+    json-parse-even-better-errors "^2.3.1"
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
     schema-utils "^3.1.0"
     tapable "^2.1.1"
     terser-webpack-plugin "^5.1.3"
-    watchpack "^2.3.1"
+    watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
 which-boxed-primitive@^1.0.2: