replace text capitalize with capitalize first word

src/assets/scss/Global/basic.scss

@@ -23,6 +23,13 @@
   text-overflow: ellipsis;
 }
 
+.cap-first {
+  display: inline-block;
+  &::first-letter {
+    text-transform: uppercase;
+  }
+}
+
 .rounded {
   border-radius: $small;
 }

src/components/AlbumView/Header.vue

@@ -19,7 +19,7 @@
           <span v-else-if="album.is_single">Single</span>
           <span v-else>Album</span>
         </div>
-        <div class="title ellip">
+        <div class="title ellip cap-first">
           {{ album.title }}
         </div>
       </div>
@@ -118,7 +118,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
       .title {
         font-size: 2.5rem;
         font-weight: 600;
-        text-transform: capitalize;
       }
 
       .artist {

src/components/LeftSidebar/SongCard.vue

@@ -21,9 +21,9 @@
           <span v-else>MP3</span>
           • {{ track.bitrate }}
         </div>
-        <div class="title ellip">{{ props.track.title }}</div>
+        <div class="title ellip cap-first">{{ props.track.title }}</div>
         <div class="separator no-border"></div>
-        <div class="artists ellip" v-if="props.track.artists[0] !== ''">
+        <div class="artists ellip cap-first" v-if="props.track.artists[0] !== ''">
           <span
             v-for="artist in putCommas(props.track.artists)"
             :key="artist"

src/components/LeftSidebar/nowPlaying.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="now-playing-card t-center rounded">
-    <div class="headin">Now Playing</div>
+    <div class="headin">Now playing</div>
     <div
       class="button menu rounded"
       @click="showContextMenu"
@@ -67,7 +67,6 @@ const showContextMenu = (e: Event) => {
   width: 100%;
   display: grid;
   position: relative;
-  text-transform: capitalize;
 
   .l-track-time {
     display: flex;

src/components/RightSideBar/Queue/QueueActions.vue

@@ -7,7 +7,7 @@
       </button>
       <button class="shuffle-queue action">
         <SaveAsPlaylistSvg />
-        <span> Save As Playlist </span>
+        <span> Save as Playlist </span>
       </button>
     </div>
     <div class="right">

src/components/RightSideBar/Queue/playingFrom.vue

@@ -4,7 +4,7 @@
       <div class="icon image" :class="from.icon"></div>
       Playing from
     </div>
-    <div class="name">
+    <div class="name cap-first">
       <div id="to">
         {{ from.text }}
       </div>
@@ -120,7 +120,6 @@ function goTo() {
   }
 
   .name {
-    text-transform: capitalize;
     font-weight: bolder;
   }
 
@@ -130,7 +129,6 @@ function goTo() {
     display: flex;
     align-items: center;
     gap: $small;
-    text-transform: capitalize;
     color: rgba(255, 255, 255, 0.849);
 
     .icon {

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -3,7 +3,7 @@
     <div class="tab-buttons-wrapper">
       <div id="tabheaders" class="rounded noscroll">
         <div
-          class="tab"
+          class="tab cap-first"
           v-for="slot in $slots.default()"
           :key="slot.key"
           @click="s.changeTab(slot.props.name)"
@@ -55,7 +55,7 @@ const s = useSearchStore();
       display: flex;
       align-items: center;
       justify-content: center;
-      text-transform: capitalize;
+
       cursor: pointer;
       transition: all 0.3s ease;
       padding: 0 $small;

src/components/contextMenu.vue

@@ -25,7 +25,7 @@
       @click="option.action()"
     >
       <div class="icon image" :class="option.icon"></div>
-      <div class="label ellip">{{ option.label }}</div>
+      <div class="label ellip cap-first">{{ option.label }}</div>
       <div class="more image" v-if="option.children"></div>
       <div class="children rounded shadow-sm" v-if="option.children">
         <div
@@ -35,7 +35,7 @@
           :class="[{ critical: child.critical }, child.type]"
           @click="child.action()"
         >
-          <div class="label ellip">
+          <div class="label ellip cap-first">
             {{ child.label }}
           </div>
         </div>
@@ -71,7 +71,6 @@ const context = useContextStore();
     cursor: default;
     padding: $small;
     position: relative;
-    text-transform: capitalize;
 
     .more {
       height: 1.5rem;

src/components/playlists/PlaylistCard.vue

@@ -11,7 +11,7 @@
       }"
     ></div>
     <div class="bottom">
-      <div class="name ellip">{{ props.playlist.name }}</div>
+      <div class="name ellip cap-first">{{ props.playlist.name }}</div>
       <div class="count">
         <span v-if="props.playlist.count == 0">No Tracks</span>
         <span v-else-if="props.playlist.count == 1"
@@ -85,7 +85,6 @@ const props = defineProps<{
     margin-top: 1rem;
 
     .name {
-      text-transform: capitalize;
       font-weight: 900;
     }
 

src/components/shared/SongItem.vue

@@ -27,10 +27,10 @@
         ></div>
       </div>
       <div @click="emitUpdate(track)">
-        <span class="ellip title">{{ track.title }}</span>
+        <span class="ellip title cap-first">{{ track.title }}</span>
       </div>
     </div>
-    <div class="song-artists">
+    <div class="song-artists cap-first">
       <div class="ellip" v-if="track.artists[0] !== ''">
         <span
           class="artist"
@@ -44,7 +44,7 @@
       </div>
     </div>
     <router-link
-      class="song-album ellip"
+      class="song-album ellip cap-first"
       :to="{
         name: 'AlbumView',
         params: {

src/components/shared/TrackItem.vue

@@ -23,9 +23,11 @@
       ></div>
     </div>
     <div class="tags">
-      <div class="title ellip">{{ props.track.title }}</div>
+      <div class="title ellip cap-first">
+       {{ props.track.title }}
+      </div>
       <hr />
-      <div class="artist ellip">
+      <div class="artist ellip cap-first">
         <span v-for="artist in putCommas(props.track.artists)" :key="artist">{{
           artist
         }}</span>
@@ -97,7 +99,6 @@ const playThis = (track: Track) => {
   grid-template-columns: min-content 1fr;
   align-items: center;
   padding: $small 1rem;
-  // text-transform: capitalize;
 
   &:hover {
     cursor: pointer;