Add scrollWrapperThin class and apply it

Musish · Aug 1, 2020 · 0df8e0e · 0df8e0e
1 parent 947ecf6
commit 0df8e0e
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 12 deletions.
diff --git a/src/app/assets/styles/common.scss b/src/app/assets/styles/common.scss
@@ -64,8 +64,8 @@ img {
   overflow: auto;
 
   &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+    width: 7px;
+    height: 7px;
     border-radius: 2px;
   }
 
@@ -106,7 +106,16 @@ img {
     scrollbar-color: lighten($accent_color, 18%) $background_color;
   }
 
-  &-thick {
+  &Thin {
+    @extend .scrollWrapper;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    scrollbar-width: thin; // Firefox specific
+  }
+
+  &Thick {
     @extend .scrollWrapper;
     &::-webkit-scrollbar {
       width: 9px;

diff --git a/src/app/components/Common/Modal/Modal.scss b/src/app/components/Common/Modal/Modal.scss
@@ -16,7 +16,7 @@
   animation: fadein 0.1s ease-out;
 
   .modal {
-    @extend .scrollWrapper-thick;
+    @extend .scrollWrapper;
 
     width: 70%;
     max-width: 900px;

diff --git a/src/app/components/Common/PageContent/PageContent.scss b/src/app/components/Common/PageContent/PageContent.scss
@@ -1,7 +1,7 @@
 @import '../../../assets/styles/common.scss';
 
 .pageContent {
-  @extend .scrollWrapper-thick;
+  @extend .scrollWrapperThick;
 
   padding: 0 1.5em 15px;
   flex: 1;

diff --git a/src/app/components/Common/Tracks/TracksGrid/TracksGrid.tsx b/src/app/components/Common/Tracks/TracksGrid/TracksGrid.tsx
@@ -26,7 +26,7 @@ const TracksGrid: React.FC<TracksGridProps> = ({
   playTrack,
 }) => {
   return (
-    <div className={commonClasses.scrollWrapper}>
+    <div className={commonClasses.scrollWrapperThin}>
       <div className={classes.trackGrid}>
         {tracks.map((track, index) => (
           <TrackListItem

diff --git a/src/app/components/Routes/Catalog/Browse/ItemList.tsx b/src/app/components/Routes/Catalog/Browse/ItemList.tsx
@@ -70,7 +70,7 @@ const ItemList: React.FC<ItemListProps> = ({
   return (
     <>
       <h3>{title}</h3>
-      <div className={commonClasses.scrollWrapper}>
+      <div className={commonClasses.scrollWrapperThin}>
         <div className={cx(classes.scrollGrid)} style={styles}>
           {finalItems.map((item: MediaItem) => {
             switch (type) {

diff --git a/src/app/components/Routes/Catalog/ForYou/ForYouPage.tsx b/src/app/components/Routes/Catalog/ForYou/ForYouPage.tsx
@@ -83,7 +83,7 @@ class ForYouPage extends React.Component<ForYouPageProps, ForYouPageState> {
     return (
       <>
         <h3>{translate.recentlyPlayed}</h3>
-        <div className={cx(commonClasses.scrollWrapper)}>
+        <div className={cx(commonClasses.scrollWrapperThin)}>
           <div className={classes.scrollGrid}>
             {recentlyPlayed.map((item: RecentlyPlayedItem) => {
               switch (item.type) {
@@ -115,7 +115,7 @@ class ForYouPage extends React.Component<ForYouPageProps, ForYouPageState> {
     return (
       <>
         <h3>{translate.heavyRotation}</h3>
-        <div className={commonClasses.scrollWrapper}>
+        <div className={commonClasses.scrollWrapperThin}>
           <div className={classes.scrollGrid}>
             {heavyRotation.map((item: HeavyRotationItem) => {
               switch (item.type) {
@@ -166,8 +166,8 @@ class ForYouPage extends React.Component<ForYouPageProps, ForYouPageState> {
       return (
         <React.Fragment key={id}>
           <h3>{group.attributes.title.stringForDisplay}</h3>
-          <div className={cx(commonClasses.scrollWrapper)}>
-            <div className={cx(commonClasses.scrollWrapper)}>
+          <div className={cx(commonClasses.scrollWrapperThin)}>
+            <div className={cx(commonClasses.scrollWrapperThin)}>
               <div className={classes.scrollGrid}>
                 {items.data.map((item: RecommendationGroupItem) => {
                   switch (item.type) {

diff --git a/src/app/components/Routes/Library/Artists/ArtistsPage.scss b/src/app/components/Routes/Library/Artists/ArtistsPage.scss
@@ -12,7 +12,7 @@
 }
 
 .artistList {
-  @extend .scrollWrapper;
+  @extend .scrollWrapperThin;
 
   width: 250px;
   height: 100%;