clean up

src/components/MediaLibrary/MediaLibrary.css

@@ -1,3 +1,5 @@
+@import './MediaLibraryFooter.css';
+
 :root {
   --mediaLibraryCardWidth: 300px;
   --mediaLibraryCardMargin: 10px;
@@ -33,31 +35,6 @@
   margin-top: 20px;
 }
 
-.nc-mediaLibrary-buttonRight {
-  float: right;
-  margin-left: 10px;
-}
-
-.nc-mediaLibrary-buttonLeft {
-  float: left;
-  margin-right: 10px;
-}
-
-.nc-mediaLibrary-button-loader {
-  float: left;
-  margin: 8px 20px;
-}
-
-.nc-mediaLibrary-button-loaderSpinner {
-  position: static;
-}
-
-.nc-mediaLibrary-button-loaderText {
-  position: relative;
-  top: 2px;
-  margin-left: 18px;
-}
-
 .nc-mediaLibrary-searchInput {
   @apply --input;
   font-family: var(--fontFamilyPrimary);
@@ -69,14 +46,6 @@
   z-index: 1;
 }
 
-.nc-mediaLibrary-thumbnail {
-  max-height: 44px;
-  max-width: 88px;
-  margin: -10px auto;
-  display: block;
-  border-radius: 4px;
-}
-
 .nc-mediaLibrary-emptyMessage {
   height: 100%;
   width: 100%;
@@ -88,9 +57,6 @@
   align-items: center;
 }
 
-.nc-mediaLibrary-paginatingMessage {
-}
-
 .nc-mediaLibrary-cardGrid-container {
   height: calc(100% - 150px);
   margin: 20px auto 0;
@@ -109,6 +75,7 @@
   border: var(--textFieldBorder);
   border-radius: var(--borderRadius);
   cursor: pointer;
+  overflow: hidden;
 }
 
 .nc-mediaLibrary-card-selected {

src/components/MediaLibrary/MediaLibraryFooter.css

@@ -0,0 +1,25 @@
+.nc-mediaLibrary-footer-buttonRight {
+  float: right;
+  margin-left: 10px;
+}
+
+.nc-mediaLibrary-footer-buttonLeft {
+  float: left;
+  margin-right: 10px;
+}
+
+.nc-mediaLibrary-footer-button-loader {
+  float: left;
+  margin: 8px 20px;
+}
+
+.nc-mediaLibrary-footer-button-loaderSpinner {
+  position: static;
+}
+
+.nc-mediaLibrary-footer-button-loaderText {
+  position: relative;
+  top: 2px;
+  margin-left: 18px;
+}
+

src/components/MediaLibrary/MediaLibraryFooter.js

@@ -16,17 +16,17 @@ const MediaLibraryFooter = ({
   const shouldShowLoader = isPersisting || isDeleting;
   const loaderText = isPersisting ? 'Uploading...' : 'Deleting...';
   const loader = (
-    <div className="nc-mediaLibrary-button-loader">
-      <Loader className="nc-mediaLibrary-button-loaderSpinner" active/>
-      <strong className="nc-mediaLibrary-button-loaderText">{loaderText}</strong>
+    <div className="nc-mediaLibrary-footer-button-loader">
+      <Loader className="nc-mediaLibrary-footer-button-loaderSpinner" active/>
+      <strong className="nc-mediaLibrary-footer-button-loaderText">{loaderText}</strong>
     </div>
   );
   return (
     <div>
       <Button
         label="Delete"
         onClick={onDelete}
-        className="nc-mediaLibrary-buttonLeft"
+        className="nc-mediaLibrary-footer-buttonLeft"
         disabled={shouldShowLoader || !hasSelection}
         accent
         raised
@@ -35,7 +35,7 @@ const MediaLibraryFooter = ({
         label="Upload"
         accept={forImage}
         onChange={onPersist}
-        className="nc-mediaLibrary-buttonLeft"
+        className="nc-mediaLibrary-footer-buttonLeft"
         disabled={shouldShowLoader}
         primary
         raised
@@ -44,14 +44,14 @@ const MediaLibraryFooter = ({
       <Button
         label="Close"
         onClick={onClose}
-        className="nc-mediaLibrary-buttonRight"
+        className="nc-mediaLibrary-footer-buttonRight"
         raised
       />
       { !canInsert ? null :
         <Button
           label="Insert"
           onClick={onInsert}
-          className="nc-mediaLibrary-buttonRight"
+          className="nc-mediaLibrary-footer-buttonRight"
           disabled={!hasSelection}
           primary
           raised