Fixing class -> className

src/shared/components/apps.tsx

@@ -46,9 +46,12 @@ interface AppDetailsButtonsProps {
 }
 
 const AppDetailsButtons = ({ links }: AppDetailsButtonsProps) => (
-  <div class="flex flex-row justify-between gap-2">
+  <div className="flex flex-row justify-between gap-2">
     {links.map(l => (
-      <a class="btn btn-sm btn-primary text-white normal-case" href={l.link}>
+      <a
+        className="btn btn-sm btn-primary text-white normal-case"
+        href={l.link}
+      >
         <Icon icon={l.icon} />
       </a>
     ))}

src/shared/components/common.tsx

@@ -50,9 +50,9 @@ export const DonateDesc = () => (
 );
 
 export const DonateButtons = () => (
-  <div class="flex flex-row flex-wrap justify-between gap-2">
+  <div className="flex flex-row flex-wrap justify-between gap-2">
     <a
-      class="btn btn-primary text-white sm:max-md:btn-block normal-case"
+      className="btn btn-primary text-white sm:max-md:btn-block normal-case"
       href="https://liberapay.com/Lemmy"
     >
       <T i18nKey="support_on_liberapay">
@@ -60,7 +60,7 @@ export const DonateButtons = () => (
       </T>
     </a>
     <a
-      class="btn btn-secondary text-white sm:max-md:btn-block normal-case"
+      className="btn btn-secondary text-white sm:max-md:btn-block normal-case"
       href="https://www.patreon.com/dessalines"
     >
       <T i18nKey="support_on_patreon">
@@ -68,7 +68,7 @@ export const DonateButtons = () => (
       </T>
     </a>
     <a
-      class="btn btn-primary text-white sm:max-md:btn-block normal-case"
+      className="btn btn-primary text-white sm:max-md:btn-block normal-case"
       href="https://opencollective.com/lemmy"
     >
       <T i18nKey="support_on_opencollective">
@@ -76,7 +76,7 @@ export const DonateButtons = () => (
       </T>
     </a>
     <Link
-      class="btn btn-secondary text-white sm:max-md:btn-block normal-case"
+      className="btn btn-secondary text-white sm:max-md:btn-block normal-case"
       to="/crypto"
     >
       Crypto
@@ -130,7 +130,7 @@ export const DonateBlock = () => (
   <div className="flex flex-col items-center pt-16">
     <div className={`card card-bordered ${CARD_GRADIENT} shadow-xl`}>
       <div className="card-body px-8 md:px-32 py-16">
-        <p class={`card-title text-4xl mb-3 ${TEXT_GRADIENT}`}>
+        <p className={`card-title text-4xl mb-3 ${TEXT_GRADIENT}`}>
           {i18n.t("donate")}
         </p>
         <DonateDesc />

src/shared/components/donate.tsx

@@ -26,9 +26,9 @@ const SectionTitle = ({ title }) => (
 const ContributorsBlock = () => (
   <div className="my-16">
     <SectionTitle title={i18n.t("contributers")} />
-    <p class="text-sm text-gray-300 mb-3">{i18n.t("thanks_coders")}</p>
+    <p className="text-sm text-gray-300 mb-3">{i18n.t("thanks_coders")}</p>
     <CodersBlock />
-    <p class="text-sm text-gray-300 mt-6 mb-3">
+    <p className="text-sm text-gray-300 mt-6 mb-3">
       {i18n.t("thanks_translators")}
     </p>
     <TranslatorsBlock />
@@ -139,11 +139,11 @@ interface GoldSponsorCardsProps {
 const GoldSponsorCards = ({ title, sponsors, color }: GoldSponsorCardsProps) =>
   sponsors.length > 0 && (
     <div>
-      <p class="text-sm text-gray-300 mb-3">{title}</p>
+      <p className="text-sm text-gray-300 mb-3">{title}</p>
-      <div class="flex flex-row flex-wrap gap-2 mb-2">
+      <div className="flex flex-row flex-wrap gap-2 mb-2">
         {sponsors.map(s => (
           <a
-            class={`btn btn-${color} btn-outline w-32 h-16 normal-case`}
+            className={`btn btn-${color} btn-outline w-32 h-16 normal-case`}
             href={s.link}
           >
             <div className="flex flex-wrap flex-row justify-center">
@@ -173,7 +173,7 @@ const GeneralSponsorCard = () => {
 
   return (
     <div>
-      <p class="text-sm text-gray-300 mt-6 mb-3">
+      <p className="text-sm text-gray-300 mt-6 mb-3">
         {i18n.t("general_sponsors_desc")}
       </p>
       <div className="card card-bordered bg-neutral-900 shadow-xl">

src/shared/components/icon.tsx

@@ -12,7 +12,7 @@ interface IconProps {
 }
 
 export const Icon = ({ icon, size = IconSize.Medium, classes }: IconProps) => (
-  <svg class={`icon ${size} ${classes}`}>
+  <svg className={`icon ${size} ${classes}`}>
     <title>{icon}</title>
     <use xlinkHref={`#icon-${icon}`}></use>
   </svg>

src/shared/components/instances.tsx

@@ -141,15 +141,15 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
         </div>
         <div className={`text-2xl font-bold ${TEXT_GRADIENT}`}>{domain}</div>
         <p className="text-sm text-gray-300 mb-2">{description}</p>
-        <div class="flex flex-row flex-wrap justify-between gap-2">
+        <div className="flex flex-row flex-wrap justify-between gap-2">
           <a
-            class="btn btn-primary text-white sm:max-md:btn-block bg-gradient-to-r from-[#69D066] to-[#03A80E] normal-case"
+            className="btn btn-primary text-white sm:max-md:btn-block bg-gradient-to-r from-[#69D066] to-[#03A80E] normal-case"
             href={buildUrl(domain)}
           >
             {i18n.t("browse_instance")}
           </a>
           <button
-            class="btn btn-secondary btn-outline text-white sm:max-md:btn-block normal-case"
+            className="btn btn-secondary btn-outline text-white sm:max-md:btn-block normal-case"
             onClick={() =>
               (document.getElementById(modalId) as any).showModal()
             }

src/shared/components/news.tsx

@@ -54,7 +54,7 @@ interface NewsProps {
 const NewsCard = ({ news }: NewsProps) => (
   <div className="card card-bordered bg-neutral-900 shadow-xl mb-3">
     <div className="card-body">
-      <div class="grid md:grid-cols-12 grid-cols-1 gap-4">
+      <div className="grid md:grid-cols-12 grid-cols-1 gap-4">
         <div className="md:col-span-10">
           <div className="md:flex md:flex-row md:items-baseline md:space-x-3">
             <Link to={news.url} className={`text-2xl ${TEXT_GRADIENT}`}>

src/shared/components/no-match.tsx

@@ -7,8 +7,8 @@ export class NoMatch extends Component<any, any> {
 
   render() {
     return (
-      <div class="container">
+      <div className="container mx-auto px-4">
-        <h1>404</h1>
+        <div className="pt-16 text-center text-4xl font-bold mb-8">404</div>
       </div>
     );
   }