fix: clean up some CSS

src/components/helpers/carousel/Carousel.jsx

@@ -47,14 +47,13 @@ export default function EmblaCarousel({ data }) {
   }, [emblaApi, onSelect]);
 
   return (
-    <div className="embla">
-      <div className="embla__viewport" ref={emblaRef}>
-        <div className="embla__container">
+    <div className="carousel">
+      <div className="carousel_viewport" ref={emblaRef}>
+        <div className="carousel_container">
           {data.map((photo, index) => (
-            <div className="embla__slide" key={index}>
-              <div className="embla__slide__inner">
+            <div className="carousel_slide" key={index}>
+              <div className="carousel_slide__inner">
                 <img
-                  className="embla__slide__img"
                   src={photo.url.default}
                   alt="Marketplace example screenshot"
                 />
@@ -64,7 +63,7 @@ export default function EmblaCarousel({ data }) {
         </div>
       </div>
       <button
-        className="embla__button embla__button--prev"
+        className="carousel_button prev"
         onClick={() => scroll('prev')}
         disabled={!prevBtnEnabled}
         title="Previous"
@@ -72,7 +71,7 @@ export default function EmblaCarousel({ data }) {
         <MdOutlineArrowBackIos />
       </button>
       <button
-        className="embla__button embla__button--next"
+        className="carousel_button next"
         onClick={() => scroll('next')}
         disabled={!nextBtnEnabled}
         title="Next"

src/components/helpers/carousel/carousel.scss

@@ -1,24 +1,22 @@
-.embla {
+.carousel {
   position: relative;
   width: 350px;
   margin-left: 5px;
 }
 
-.embla__viewport {
+.carousel_viewport {
   overflow: hidden;
   width: 100%;
+  &.is-draggable {
+    cursor: move;
+    cursor: grab;
+  }
+  &.is-dragging {
+    cursor: grabbing;
+  }
 }
 
-.embla__viewport.is-draggable {
-  cursor: move;
-  cursor: grab;
-}
-
-.embla__viewport.is-dragging {
-  cursor: grabbing;
-}
-
-.embla__container {
+.carousel_container {
   display: flex;
   user-select: none;
   -webkit-touch-callout: none;
@@ -27,31 +25,31 @@
   margin-left: -10px;
 }
 
-.embla__slide {
+.carousel_slide {
   position: relative;
   min-width: 100%;
   padding-left: 10px;
+  img {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    width: auto;
+    min-height: 100%;
+    min-width: 100%;
+    max-width: none;
+    transform: translate(-50%, -50%);
+  }
 }
 
-.embla__slide__inner {
+.carousel_slide__inner {
   position: relative;
   overflow: hidden;
   height: 190px;
 }
 
-.embla__slide__img {
-  position: absolute;
-  display: block;
-  top: 50%;
-  left: 50%;
-  width: auto;
-  min-height: 100%;
-  min-width: 100%;
-  max-width: none;
-  transform: translate(-50%, -50%);
-}
 
-.embla__button {
+.carousel_button {
   outline: 0;
   cursor: pointer;
   touch-action: manipulation;
@@ -67,22 +65,14 @@
   justify-content: center;
   align-items: center;
   padding: 0;
-}
-
-.embla__button:disabled {
-  cursor: default;
-  opacity: 0.3;
-}
-
-.embla__button__svg {
-  width: 100%;
-  height: 100%;
-}
-
-.embla__button--prev {
-  left: 27px;
-}
-
-.embla__button--next {
-  right: 27px;
-}
+  &:disabled {
+    cursor: default;
+    opacity: 0.3;
+  }
+  &.prev {
+    left: 27px;
+  }
+  &.next {
+    right: 27px;
+  }
+}

src/components/modals/main/marketplace/Item.jsx

@@ -103,8 +103,8 @@ export default class Item extends PureComponent {
         <div className="itemPage">
           <div className="itemShowcase">
             {this.props.data.data.photos ? (
-              <div className="embla">
-                <div className="embla__container">
+              <div className="carousel">
+                <div className="carousel_container">
                   <ImageCarousel data={this.props.data.data.photos} />
                 </div>
               </div>

src/components/modals/main/marketplace/Items.jsx

@@ -47,11 +47,11 @@ export default function Items({
               <span className="subtitle">{collection.description}</span>
             </div>
             {collection.news === true ? (
-              <a className="nice-button" href={collection.news_link}>
+              <a className="collectionButton" href={collection.news_link}>
                 {variables.getMessage('modals.main.marketplace.learn_more')} <MdOutlineOpenInNew />
               </a>
             ) : (
-              <button className="nice-button" onClick={() => collectionFunction(collection.name)}>
+              <button className="collectionButton" onClick={() => collectionFunction(collection.name)}>
                 <MdOutlineArrowForward />{' '}
                 {variables.getMessage('modals.main.marketplace.explore_collection')}
               </button>

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -388,7 +388,7 @@ export default class Marketplace extends PureComponent {
                     <span className="subtitle">{item.description}</span>
                   </div>
                   <button
-                    className="nice-button"
+                    className="collectionButton"
                     onClick={() => this.toggle('collection', item.name)}
                   >
                     <MdOutlineArrowForward />{' '}

src/components/modals/main/scss/marketplace/_main.scss

@@ -408,8 +408,8 @@ p.author {
     justify-content: center;
   }
 
-  button.nice-button,
-  a.nice-button {
+  button.collectionButton,
+  a.collectionButton {
     display: flex;
     align-items: center;
     gap: 15px;
@@ -428,7 +428,7 @@ p.author {
   }
 }
 
-a.nice-button {
+a.collectionButton {
   height: 40px;
   text-decoration: none;
   @include themed() {