Adding bottom spacer.

src/shared/components/apps.tsx

@@ -1,7 +1,7 @@
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
 import { i18n } from "../i18next";
-import { TEXT_GRADIENT } from "./common";
+import { BottomSpacer, TEXT_GRADIENT } from "./common";
 import {
   ANDROID_APPS,
   API_LIBRARIES,
@@ -146,6 +146,7 @@ export class Apps extends Component<any, any> {
         <WebAppsBlock />
         <CliAppsBlock />
         <ApiLibrariesBlock />
+        <BottomSpacer />
       </div>
     );
   }

src/shared/components/common.tsx

@@ -70,3 +70,5 @@ export const SupportDonateBlock = () => (
     </div>
   </div>
 );
+
+export const BottomSpacer = () => <div className="pb-32" />;

src/shared/components/contact.tsx

@@ -1,7 +1,7 @@
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
 import { i18n } from "../i18next";
-import { TEXT_GRADIENT } from "./common";
+import { BottomSpacer, TEXT_GRADIENT } from "./common";
 import { Icon } from "./icon";
 
 const TitleBlock = () => (
@@ -48,6 +48,7 @@ export class Contact extends Component<any, any> {
         </Helmet>
         <TitleBlock />
         <ContactBlock />
+        <BottomSpacer />
       </div>
     );
   }

src/shared/components/donate.tsx

@@ -5,7 +5,12 @@ import { T } from "inferno-i18next";
 import { translators } from "../translations/translators";
 import { languagesAll, countries } from "countries-list";
 import { isBrowser } from "../utils";
-import { Badge, SupportDonateBlock, TEXT_GRADIENT } from "./common";
+import {
+  Badge,
+  BottomSpacer,
+  SupportDonateBlock,
+  TEXT_GRADIENT,
+} from "./common";
 import {
   CODERS,
   GOLD_SPONSORS,
@@ -166,7 +171,7 @@ const GeneralSponsorCard = () => {
 };
 
 const CryptoBlock = () => (
-  <div className="pb-16">
+  <div>
     <SectionTitle title={"Crypto"} />
     <div className="card card-bordered bg-neutral-900 shadow-xl">
       <div className="card-body p-4">
@@ -268,6 +273,7 @@ export class Donate extends Component<any, any> {
         <ContributorsBlock />
         <SponsorsBlock />
         <CryptoBlock />
+        <BottomSpacer />
       </div>
     );
   }

src/shared/components/icon.tsx

@@ -1,31 +1,22 @@
-import { Component } from "inferno";
+export enum IconSize {
+  Small = "w-3 h-3",
+  Medium = "w-4 h-4",
+  Large = "w-6 h-6",
+}
 
 interface IconProps {
   icon: string;
+  size?: IconSize;
   classes?: string;
 }
 
-export class Icon extends Component<IconProps, any> {
-  constructor(props: any, context: any) {
-    super(props, context);
-  }
+export const Icon = ({ icon, size = IconSize.Medium, classes }: IconProps) => (
+  <svg class={`icon ${size} ${classes}`}>
+    <title>{icon}</title>
+    <use xlinkHref={`#icon-${icon}`}></use>
+  </svg>
+);
 
-  render() {
-    return (
-      <svg class={`icon ${this.props.classes}`}>
-        <title>{this.props.icon}</title>
-        <use xlinkHref={`#icon-${this.props.icon}`}></use>
-      </svg>
-    );
-  }
-}
-
-export class Spinner extends Component<any, any> {
-  constructor(props: any, context: any) {
-    super(props, context);
-  }
-
-  render() {
-    return <Icon icon="spinner" classes="icon-spinner spin" />;
-  }
-}
+export const Spinner = () => (
+  <Icon icon="spinner" classes="icon-spinner spin" />
+);

src/shared/components/main.tsx

@@ -5,7 +5,7 @@ import { i18n } from "../i18next";
 import { T } from "inferno-i18next";
 import { isBrowser } from "../utils";
 import { Icon } from "./icon";
-import { SupportDonateBlock, TEXT_GRADIENT } from "./common";
+import { BottomSpacer, SupportDonateBlock, TEXT_GRADIENT } from "./common";
 
 const TitleBlock = () => (
   <div className="pt-16 flex flex-col items-center">
@@ -378,6 +378,7 @@ export class Main extends Component<any, any> {
         <DiscussionPlatformBlock />
         <MoreFeaturesBlock />
         <SupportDonateBlock />
+        <BottomSpacer />
       </div>
     );
   }

src/shared/components/navbar.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, linkEvent } from "inferno";
 import { Link } from "inferno-router";
-import { Icon } from "./icon";
+import { Icon, IconSize } from "./icon";
 import { i18n, languages } from "../i18next";
 import classNames from "classnames";
 
@@ -28,7 +28,11 @@ function handleLanguageChange(_: any, event: ChangeEvent<HTMLSelectElement>) {
 export const Footer = () => <Navbar footer />;
 
 export const Navbar = ({ footer = false }) => (
-  <div className={classNames("navbar px-10", { "sticky top-[100vh]": footer })}>
+  <div
+    className={classNames("navbar px-10", {
+      "sticky top-[100vh]": footer,
+    })}
+  >
     <div className="navbar-start">
       <Link className="btn btn-ghost normal-case text-xl" to="/">
         <img src="/static/assets/images/lemmy.svg" className="h-12 w-12" />
@@ -64,13 +68,17 @@ export const Navbar = ({ footer = false }) => (
             className="btn btn-ghost sm:max-lg:hidden"
             href="https://github.com/LemmyNet"
           >
-            <Icon icon="github" classes="w-6 h-6" />
+            <Icon icon="github" size={IconSize.Large} />
           </a>
         </>
       )}
-      <div className="dropdown dropdown-end">
+      <div
+        className={classNames("dropdown dropdown-end", {
+          "dropdown-top": footer,
+        })}
+      >
         <label tabIndex={0} className="btn btn-ghost lg:hidden">
-          <Icon icon="align-right" classes="w-6 h-6" />
+          <Icon icon="align-right" size={IconSize.Large} />
         </label>
         <ul
           tabIndex={0}
@@ -79,7 +87,7 @@ export const Navbar = ({ footer = false }) => (
           <NavLinks />
           <li>
             <a className="btn btn-ghost" href="https://github.com/LemmyNet">
-              <Icon icon="github" classes="w-6 h-6" />
+              <Icon icon="github" size={IconSize.Large} />
             </a>
           </li>
         </ul>

src/shared/components/news-item.tsx

@@ -3,6 +3,7 @@ import { Helmet } from "inferno-helmet";
 import { i18n } from "../i18next";
 import { news_md } from "../translations/news";
 import { isBrowser, mdToHtml } from "../utils";
+import { BottomSpacer } from "./common";
 
 const title = i18n.t("news");
 
@@ -34,6 +35,7 @@ export class NewsItem extends Component<any, any> {
             <div dangerouslySetInnerHTML={mdToHtml(this.markdown)} />
           </article>
         </div>
+        <BottomSpacer />
       </div>
     );
   }

src/shared/components/news.tsx

@@ -4,7 +4,7 @@ import { Helmet } from "inferno-helmet";
 import { i18n } from "../i18next";
 import { isBrowser } from "../utils";
 import { news_md } from "../translations/news";
-import { Badge, TEXT_GRADIENT } from "./common";
+import { Badge, BottomSpacer, TEXT_GRADIENT } from "./common";
 import { Icon } from "./icon";
 
 const title = i18n.t("news");
@@ -108,6 +108,7 @@ export class News extends Component<any, any> {
         </Helmet>
         <TitleBlock />
         <NewsCards />
+        <BottomSpacer />
       </div>
     );
   }