break down global.scss into smaller files

+ rename css folder to scss

src/components/AlbumView/AlbumBio.vue

@@ -11,8 +11,8 @@
         <div class="circle"></div>
         <img class="circle" :src="paths.images.artist + images.artist" alt="" />
       </div>
-      <div class="bio rounded border" v-html="bio" v-if="bio"></div>
-      <div class="bio rounded border" v-else>No bio found</div>
+      <div class="bio rounded bg-black" v-html="bio" v-if="bio"></div>
+      <div class="bio rounded bg-black" v-else>No bio found</div>
     </div>
   </div>
 </template>
@@ -54,7 +54,7 @@ defineProps<{
     width: 100%;
     margin-right: $small;
     overflow: hidden;
-    border: solid 1px $gray5;
+    bg-black: solid 1px $gray5;
     background-image: linear-gradient(37deg, $gray5 20%, $gray4);
 
     @include tablet-portrait {
@@ -89,7 +89,7 @@ defineProps<{
       height: 7rem;
       bottom: 0;
       left: calc($rectpos + 7rem);
-      border-radius: 50%;
+      bg-black-radius: 50%;
       box-shadow: 0 0 2rem rgb(0, 0, 0);
       transition: all 0.25s ease-in-out;
 
@@ -99,7 +99,7 @@ defineProps<{
     }
   }
   .bio {
-    border: solid 1px $gray5;
+    bg-black: solid 1px $gray5;
     padding: $small;
     line-height: 1.5rem;
 

src/components/ArtistsExplorer/ArtistsList.vue

@@ -9,7 +9,7 @@
     <div class="all-albums">
       <div class="item rounded" v-for="artist in artists" :key="artist">
         <div class="album-art image rounded"></div>
-        <div class="name ellip">{{ artist.name }}</div>
+        <div class="name t-center ellip">{{ artist.name }}</div>
       </div>
     </div>
   </div>
@@ -84,16 +84,8 @@ export default {
       }
 
       .name {
-        text-align: center;
         margin-top: $small;
       }
-
-      .artist {
-        font-size: small;
-        font-weight: lighter;
-        text-align: center;
-        color: rgba(255, 255, 255, 0.699);
-      }
     }
   }
 
@@ -131,4 +123,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/ArtistsExplorer/TopArtists.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script>
+<script >
 export default {
   setup() {
     const artists = [

src/components/BottomBar/BottomBar.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import "@/assets/css/BottomBar/BottomBar.scss";
-import Progress from "../LeftSidebar/NP/Progress.vue";
-import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import "@/assets/scss/BottomBar/BottomBar.scss";
 import { formatSeconds } from "@/composables/perks";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import Progress from "../LeftSidebar/NP/Progress.vue";
 
 import useQStore from "@/stores/queue";
 

src/components/LeftSidebar/nowPlaying.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l_ rounded">
+  <div class="r-now-playing t-center rounded">
     <div class="headin">Now Playing</div>
     <div
       class="button menu rounded"
@@ -56,10 +56,9 @@ const showContextMenu = (e: Event) => {
 };
 </script>
 <style lang="scss">
-.l_ {
+.r-now-playing {
   padding: 1rem;
   background-color: $primary;
-  text-align: center;
   width: 100%;
   display: grid;
   position: relative;

src/components/Logo.vue

@@ -8,7 +8,7 @@
 </template>
 
 <style lang="scss">
-@import "../assets/css/mixins.scss";
+@import "../assets/scss/mixins.scss";
 
 #logo-container {
   overflow: hidden;

src/components/RightSideBar/Home/Main.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import Recommendations from "./Recommendation.vue";
-import UpNext from "../queue/upNext.vue";
+import UpNext from "../Queue/upNext.vue";
 import useQStore from "../../../stores/queue";
 const queue = useQStore();
 </script>

src/components/RightSideBar/Home/Recommendation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-tracks rounded border">
+  <div class="r-tracks rounded bg-black">
     <div class="heading">Similar tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song.artist">

src/components/RightSideBar/NowPlaying.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="now-playing border shadow-lg">
+  <div class="now-playing bg-black shadow-lg">
     <div class="art-tags">
       <div class="duration">{{ formatSeconds(current.length) }}</div>
       <div
           :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
-          class="album-art image border"
+          class="album-art image bg-black"
       ></div>
       <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
-        <div class="separator no-border"></div>
+        <div class="separator no-bg-black"></div>
         <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
               artist

src/components/RightSideBar/Queue.vue

@@ -2,7 +2,18 @@
   <div class="up-next">
     <div class="r-grid">
       <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
-      <div class="scrollable-r border rounded">
+      <div class="queue-actions rounded bg-black">
+        <div class="left">
+          <button class="clear-queue action">Clear</button>
+          <button class="shuffle-queue action">Shuffle</button>
+          <button class="shuffle-queue action">Shuffle</button>
+          <button class="shuffle-queue action">Go to Mix</button>
+        </div>
+        <div class="right">
+          <button class="shuffle-queue action">Save as Playlist</button>
+        </div>
+      </div>
+      <div class="scrollable-r bg-black rounded">
         <div
           class="inner"
           @mouseenter="setMouseOver(true)"
@@ -25,9 +36,9 @@
 
 <script setup lang="ts">
 import TrackItem from "../shared/TrackItem.vue";
-import useQStore from "../../stores/queue";
-import PlayingFrom from "./queue/playingFrom.vue";
-import UpNext from "./queue/upNext.vue";
+import useQStore from "@/stores/queue";
+import PlayingFrom from "./Queue/playingFrom.vue";
+import UpNext from "./Queue/upNext.vue";
 import { onUpdated, ref } from "vue";
 import { focusElem } from "@/composables/perks";
 
@@ -59,9 +70,24 @@ onUpdated(() => {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: max-content 1fr max-content;
+    grid-template-rows: max-content max-content 1fr max-content;
     gap: $small;
 
+    .queue-actions {
+      display: flex;
+      justify-content: space-between;
+      gap: $small;
+      padding: $small;
+
+      .action {
+        background-color: $accent;
+        padding: $smaller;
+        border-radius: $smaller;
+        font-size: 0.8rem;
+        padding: inherit 1rem;
+      }
+    }
+
     .scrollable-r {
       height: 100%;
       padding: $small 0 $small $small;

src/components/RightSideBar/Queue/playingFrom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="playing-from" class="rounded" @click="goTo">
+  <div id="playing-from" class="bg-black rounded" @click="goTo">
     <div class="h">
       <div class="icon image" :class="from.icon"></div>
       Playing from
@@ -18,8 +18,8 @@ import {
   fromAlbum,
   fromPlaylist,
   fromSearch,
-} from "../../../interfaces";
-import { FromOptions } from "../../../composables/enums";
+} from "@/interfaces";
+import { FromOptions } from "@/composables/enums";
 import { useRouter } from "vue-router";
 import { computed } from "@vue/reactivity";
 

src/components/RightSideBar/Queue/upNext.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-item border" @click="playNext">
+  <div class="main-item bg-black" @click="playNext">
     <div class="h">Up Next</div>
     <div class="itemx shadow">
       <div
@@ -22,12 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { Track } from "../../../interfaces";
-import {putCommas} from "../../../composables/perks";
-import { paths } from "../../../config";
-const imguri = paths.images.thumb;
+import { putCommas } from "@/composables/perks";
+import { paths } from "@/config";
+import { Track } from "@/interfaces";
 
-const props = defineProps<{
+const imguri = paths.images.thumb;
+defineProps<{
   next: Track;
   playNext: () => void;
 }>();

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="artists-results border">
+  <div class="artists-results bg-black">
     <div class="grid">
       <ArtistCard
         v-for="artist in search.artists.value"
@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import ArtistCard from "../../shared/ArtistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 const search = useSearchStore();
 
 function loadMore() {

src/components/RightSideBar/Search/Main.vue

@@ -15,13 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import TabsWrapper from "./TabsWrapper.vue";
-import Tab from "./Tab.vue";
-import TracksGrid from "./TracksGrid.vue";
 import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
-import "@/assets/css/Search/Search.scss";
-
+import Tab from "./Tab.vue";
+import TabsWrapper from "./TabsWrapper.vue";
+import TracksGrid from "./TracksGrid.vue";
 </script>
 
 <style lang="scss">
@@ -31,21 +29,6 @@ import "@/assets/css/Search/Search.scss";
   width: auto;
   height: 100%;
 
-  .no-res {
-    text-align: center;
-    display: grid;
-    height: calc(100% - $small);
-    place-items: center;
-    font-size: 2rem;
-    transition: all 0.3s ease;
-    line-height: 4rem !important;
-
-    .highlight {
-      padding: $small;
-      background-color: rgb(29, 26, 26);
-    }
-  }
-
   .heading {
     padding: $medium;
     border-radius: $small;

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results border">
+  <div class="albums-results bg-black">
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"
@@ -12,9 +12,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import PCard from "../../playlists/PlaylistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 
 const search = useSearchStore();
 

src/components/shared/ArtistCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="xartist" :class="{ _is_on_sidebar: alt }">
     <div
-      class="artist-image image border-sm"
+      class="artist-image image bg-black-sm"
       :style="{ backgroundImage: `url('${imguri + artist.image}')` }"
     ></div>
     <div>
-      <p class="artist-name ellipsis">{{ artist.name }}</p>
+      <p class="artist-name t-center ellipsis">{{ artist.name }}</p>
     </div>
   </div>
 </template>
@@ -59,7 +59,6 @@ defineProps<{
 
   .artist-name {
     margin: 0;
-    text-align: center;
     font-size: 0.9rem;
     font-weight: 510;
     max-width: 7rem;

src/components/shared/SongItem.vue

@@ -12,7 +12,7 @@
     @dblclick="emitUpdate(track)"
     @contextmenu="showContextMenu"
   >
-    <div class="index">{{ index }}</div>
+    <div class="index t-center">{{ index }}</div>
     <div class="flex">
       <div @click="emitUpdate(track)" class="thumbnail">
         <img
@@ -21,9 +21,9 @@
           class="album-art image rounded"
         />
         <div
-          class="now-playing-track image"
-          v-if="isPlaying && isCurrent"
-          :class="{ active: isPlaying, not_active: !isPlaying }"
+          class="now-playing-track-indicator image"
+          v-if="isCurrent"
+          :class="{ last_played: !isPlaying }"
         ></div>
       </div>
       <div @click="emitUpdate(track)">
@@ -186,7 +186,6 @@ function emitUpdate(track: Track) {
   .index {
     color: grey;
     font-size: 0.8rem;
-    text-align: center;
     width: 2rem;
 
     @include phone-only {
@@ -245,7 +244,7 @@ function emitUpdate(track: Track) {
       cursor: pointer;
     }
 
-    .now-playing-track {
+    .now-playing-track-indicator {
       position: absolute;
       left: $small;
       top: $small;

src/components/shared/TrackItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="track-item h-1"
+    class="track-item"
     @click="playThis(props.track)"
     :class="[
       {
@@ -17,9 +17,9 @@
       }"
     >
       <div
-        class="now-playing-track image"
+        class="now-playing-track-indicator image"
         v-if="props.isCurrent"
-        :class="{ active: props.isPlaying, not_active: !props.isPlaying }"
+        :class="{ last_played: !props.isPlaying }"
       ></div>
     </div>
     <div class="tags">
@@ -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 { paths } from "../../config";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
-import { paths } from "../../config";
 
 const contextStore = useContextStore();
 const imguri = paths.images.thumb;