fix: icons and "Sort By" div overlapping (#913)

Author: S1NJED

src/components/Grid.tsx

@@ -643,7 +643,7 @@ class Grid extends React.Component<
           if (cardsOfType.length) {
             return (
               // Add a header for the card type
-              <>
+              <div className="marketplace-content">
                 {/* Add a header for the card type */}
                 <h2 className="marketplace-card-type-heading">{t(`tabs.${cardType.name}`)}</h2>
                 {/* Add the grid and cards */}
@@ -654,7 +654,7 @@ class Grid extends React.Component<
                 >
                   {cardsOfType}
                 </div>
-              </>
+              </div>
             );
           }
           return null;
@@ -666,8 +666,15 @@ class Grid extends React.Component<
           </Button>
         ) : null}
         <footer className="marketplace-footer">
-          {!this.state.endOfList &&
-            (this.state.rest && this.state.cards.length > 0 ? <LoadMoreIcon onClick={this.loadMore.bind(this)} /> : <LoadingIcon />)}
+          {!this.state.endOfList ? (
+            this.state.rest && this.state.cards.length > 0 ? (
+              <LoadMoreIcon onClick={this.loadMore.bind(this)} />
+            ) : (
+              <LoadingIcon />
+            )
+          ) : (
+            <div style={{ height: "64px" }} />
+          )}
         </footer>
         <TopBarContent switchCallback={this.switchTo.bind(this)} links={this.CONFIG.tabs} activeLink={this.CONFIG.activeTab} />
       </section>

src/components/Icons/LoadMoreIcon.tsx

@@ -3,7 +3,12 @@ import React from "react";
 export default class LoadMoreIcon extends React.Component<{ onClick: () => void }> {
   render() {
     return (
-      <div onClick={this.props.onClick}>
+      <div
+        style={{
+          marginTop: "60px"
+        }}
+        onClick={this.props.onClick}
+      >
         <p
           style={{
             fontSize: 100,

src/components/Icons/LoadingIcon.tsx

@@ -18,7 +18,15 @@ const LoadingIcon = () => {
   //   })));
 
   return (
-    <svg width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" role="img" aria-label="Loading Icon">
+    <svg
+      style={{ marginTop: "60px" }}
+      width="100px"
+      height="100px"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      role="img"
+      aria-label="Loading Icon"
+    >
       <circle cx="50" cy="50" r="0" fill="none" stroke="currentColor" strokeWidth="2">
         <animate
           attributeName="r"

src/styles/components/_grid.scss

@@ -152,3 +152,7 @@
   bottom: 32px;
   left: 100%;
 }
+
+.marketplace-content {
+  margin-top: 60px;
+}