From c7e14c159bab9f8b7af8e7c2fa20b3f3cfc2766c Mon Sep 17 00:00:00 2001
From: dvelo <52332868+DeveloLongScript@users.noreply.github.com>
Date: Thu, 8 Aug 2024 18:02:46 -0500
Subject: [PATCH] fix: fixing the spaced classNames

---
 src/app/account/favorites/page.tsx           |  2 +-
 src/components/FavoritesView.tsx             |  8 +-
 src/components/IconDisplay.tsx               |  6 +-
 src/components/ServerCard.tsx                | 26 +++----
 src/components/ServerList.tsx                | 82 ++++++++++----------
 src/components/ServerView.tsx                | 16 ++--
 src/components/Stat.tsx                      | 10 +--
 src/components/TextFromPathname.tsx          | 18 ++---
 src/components/clerk/LoggedInPopover.tsx     | 14 ++--
 src/components/clerk/SignInPopoverButton.tsx |  4 +-
 src/components/clerk/Topbar.tsx              |  8 +-
 src/components/misc/TextCopyComp.tsx         |  6 +-
 12 files changed, 99 insertions(+), 101 deletions(-)

diff --git a/src/app/account/favorites/page.tsx b/src/app/account/favorites/page.tsx
index 995b26f..22e1fe8 100644
--- a/src/app/account/favorites/page.tsx
+++ b/src/app/account/favorites/page.tsx
@@ -3,7 +3,7 @@ import FavoritesView from "@/components/FavoritesView";
 export default function Favorites() {
   return (
     <main>
-      <div className="  pt-[60px] p-4">
+      <div className="pt-[60px] p-4">
         <FavoritesView />
       </div>
     </main>
diff --git a/src/components/FavoritesView.tsx b/src/components/FavoritesView.tsx
index cbc02bd..9f602af 100644
--- a/src/components/FavoritesView.tsx
+++ b/src/components/FavoritesView.tsx
@@ -40,7 +40,7 @@ export default function FavoritesView() {
   if (loading) {
     return (
       <>
-        <Spinner className="  flex items-center" />
+        <Spinner className="flex items-center" />
         <br />
       </>
     );
@@ -54,7 +54,7 @@ export default function FavoritesView() {
           Your favorites are empty. Maybe favorite a server!
         </div>
       )}
-      <div className="  grid sm:grid-cols-4 gap-4">
+      <div className="grid sm:grid-cols-4 gap-4">
         {apiFavorites.map((server: ServerResponse) => (
           <Card key={server.name}>
             <CardHeader>
@@ -63,7 +63,7 @@ export default function FavoritesView() {
                 <Button
                   size="icon"
                   variant="secondary"
-                  className="  min-w-[128px] max-w-[328px] mb-2 h-[32px] max-md:hidden"
+                  className="min-w-[128px] max-w-[328px] mb-2 h-[32px] max-md:hidden"
                   onClick={() => {
                     navigator.clipboard.writeText(
                       server.name + ".mshf.minehut.gg"
@@ -79,7 +79,7 @@ export default function FavoritesView() {
                     <Button
                       size="icon"
                       variant="secondary"
-                      className="  w-[32px] h-[32px] mb-2 ml-2 max-md:hidden"
+                      className="w-[32px] h-[32px] mb-2 ml-2 max-md:hidden"
                       onClick={() => {
                         router.push("/server/" + server.name);
                       }}
diff --git a/src/components/IconDisplay.tsx b/src/components/IconDisplay.tsx
index 8657909..b4d6780 100644
--- a/src/components/IconDisplay.tsx
+++ b/src/components/IconDisplay.tsx
@@ -21,7 +21,7 @@ export default function IconDisplay(props: { server: any }) {
         />
       </TooltipTrigger>
       <TooltipContent>
-        <div className="  font-mono">
+        <div className="font-mono">
           {props.server.icon != null
             ? props.server.icon.toLowerCase()
             : "oak_sign"}
@@ -42,7 +42,7 @@ export function IconDisplayClient(props: { server: string }) {
 
   useEffect(() => {
     fetch(
-      "https://api.minehut.com/server/" + props.server + "?byName=true",
+      "https://api.minehut.com/server/" + props.server + "?byName=true"
     ).then((b) => b.json().then((c) => setIcon(c.server.icon)));
   }, []);
 
@@ -62,7 +62,7 @@ export function IconDisplayClient(props: { server: string }) {
             />
           </TooltipTrigger>
           <TooltipContent>
-            <div className="  font-mono">
+            <div className="font-mono">
               {icon != null ? icon.toLowerCase() : "oak_sign"}
             </div>
             {icon == null && (
diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 9701c34..76c22eb 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -40,13 +40,13 @@ export default function ServerCard({ b, motd }: any) {
           className="min-h-[450px] max-h-[450px] mb-4 flex items-start"
         >
           <CardHeader>
-            <CardTitle className="  m-0">
+            <CardTitle className="m-0">
               <IconDisplay server={b} /> {b.name}{" "}
               <Drawer>
                 <DrawerTrigger>
                   <Button
                     size="icon"
-                    className="  w-[24px] h-[24px] ml-2 md:hidden"
+                    className="w-[24px] h-[24px] ml-2 md:hidden"
                     variant="secondary"
                   >
                     <EllipsisVertical size={16} />
@@ -67,7 +67,7 @@ export default function ServerCard({ b, motd }: any) {
                       }}
                     >
                       Copy server IP
-                      <Copy size={18} className="  ml-4" />
+                      <Copy size={18} className="ml-4" />
                     </Button>
                     <Button
                       variant="ghost"
@@ -81,7 +81,7 @@ export default function ServerCard({ b, motd }: any) {
                 </DrawerContent>
               </Drawer>
               {b.author != undefined ? (
-                <div className="  text-sm text-muted-foreground">
+                <div className="text-sm text-muted-foreground">
                   by {b.author}
                 </div>
               ) : (
@@ -89,11 +89,11 @@ export default function ServerCard({ b, motd }: any) {
               )}
               <TagShower server={b} />
             </CardTitle>
-            <CardDescription className="  float-left inline">
-              <span className="  flex items-center">
+            <CardDescription className="float-left inline">
+              <span className="flex items-center">
                 {b.playerData.playerCount == 0 ? (
                   <div
-                    className="  items-center border"
+                    className="items-center border"
                     style={{
                       width: ".5rem",
                       height: ".5rem",
@@ -102,7 +102,7 @@ export default function ServerCard({ b, motd }: any) {
                   />
                 ) : (
                   <div
-                    className="  items-center"
+                    className="items-center"
                     style={{
                       backgroundColor: "#0cce6b",
                       width: ".5rem",
@@ -112,7 +112,7 @@ export default function ServerCard({ b, motd }: any) {
                   />
                 )}
 
-                <span className="  pl-1">
+                <span className="pl-1">
                   {b.playerData.playerCount}{" "}
                   {b.playerData.playerCount == 1 ? "player" : "players"}{" "}
                   currently online
@@ -125,7 +125,7 @@ export default function ServerCard({ b, motd }: any) {
                     <Button
                       size="icon"
                       variant="secondary"
-                      className="  min-w-[128px] max-w-[328px] h-[32px] mt-2 ml-2 max-md:hidden"
+                      className="min-w-[128px] max-w-[328px] h-[32px] mt-2 ml-2 max-md:hidden"
                       onClick={() => {
                         navigator.clipboard.writeText(
                           b.name + ".mshf.minehut.gg"
@@ -142,7 +142,7 @@ export default function ServerCard({ b, motd }: any) {
                           <Button
                             size="icon"
                             variant="secondary"
-                            className="  w-[32px] h-[32px] mt-2 ml-2 max-md:hidden"
+                            className="w-[32px] h-[32px] mt-2 ml-2 max-md:hidden"
                           >
                             <Layers size={18} />
                           </Button>
@@ -165,7 +165,7 @@ export default function ServerCard({ b, motd }: any) {
                     }}
                   >
                     Copy server IP
-                    <div className="  RightSlot">
+                    <div className="RightSlot">
                       <Copy size={18} />
                     </div>
                   </ContextMenuItem>
@@ -193,7 +193,7 @@ export default function ServerCard({ b, motd }: any) {
           }}
         >
           Copy server IP
-          <div className="  RightSlot">
+          <div className="RightSlot">
             <Copy size={18} />
           </div>
         </ContextMenuItem>
diff --git a/src/components/ServerList.tsx b/src/components/ServerList.tsx
index abb22a0..72b05ca 100644
--- a/src/components/ServerList.tsx
+++ b/src/components/ServerList.tsx
@@ -108,10 +108,10 @@ export default function ServerList() {
   if (loading) {
     return (
       <>
-        <Spinner className="  flex items-center" />
+        <Spinner className="flex items-center" />
         <br />
         <div
-          className="  flex justify-center"
+          className="flex justify-center"
           dangerouslySetInnerHTML={{ __html: randomText }}
         ></div>
       </>
@@ -120,7 +120,7 @@ export default function ServerList() {
 
   return (
     <>
-      <div className="  max-lg:grid-cols-2 grid grid-cols-3 gap-4 ">
+      <div className="max-lg:grid-cols-2 grid grid-cols-3 gap-4 ">
         <Stat
           title="Players online"
           desc={serverList.getExtraData().total_players.toString()}
@@ -181,7 +181,7 @@ export default function ServerList() {
         </Stat>
         <Stat
           title="Current most popular server (in filter)"
-          className="  max-lg:col-span-2"
+          className="max-lg:col-span-2"
           desc={
             <>
               {serverList.currentServers[0] != undefined
@@ -197,11 +197,11 @@ export default function ServerList() {
       </div>
       <br />
       <Separator />
-      <div className="  mt-3 ml-3">
+      <div className="mt-3 ml-3">
         <Button
           onClick={() => events.emit("search-request-event")}
           variant="secondary"
-          className="  max-lg:mb-3"
+          className="max-lg:mb-3"
         >
           Search{" "}
           <code className="ml-2 flex items-center">
@@ -211,12 +211,12 @@ export default function ServerList() {
         </Button>
         <Popover>
           <PopoverTrigger>
-            <Button className="  ml-3" variant="secondary">
+            <Button className="ml-3" variant="secondary">
               Filter
               <code className="ml-2">{filters.length}</code>
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="  w-[390px] z-3">
+          <PopoverContent className="w-[390px] z-3">
             <RadioGroup
               onValueChange={(v) => {
                 toast.promise(
@@ -351,41 +351,41 @@ export default function ServerList() {
                 }
               })()}
             >
-              <div className="  items-top flex space-x-2">
+              <div className="items-top flex space-x-2">
                 <RadioGroupItem id="smaller" value="smaller" />
-                <div className="  grid gap-1.5 leading-none">
+                <div className="grid gap-1.5 leading-none">
                   <label
                     htmlFor="smaller"
-                    className="  text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                   >
                     Only allow smaller servers
                   </label>
-                  <p className="  text-sm text-muted-foreground">
+                  <p className="text-sm text-muted-foreground">
                     Server have 15-7 players, cannot be{" "}
                     <Badge variant="secondary">Always Online</Badge>
                   </p>
                 </div>
               </div>
-              <div className="  items-top flex space-x-2">
+              <div className="items-top flex space-x-2">
                 <RadioGroupItem id="bigger" value="bigger" />
-                <div className="  grid gap-1.5 leading-none">
+                <div className="grid gap-1.5 leading-none">
                   <label
                     htmlFor="bigger"
-                    className="  text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                   >
                     Only allow bigger servers
                   </label>
-                  <p className="  text-sm text-muted-foreground">
+                  <p className="text-sm text-muted-foreground">
                     Server has 16 players or more
                   </p>
                 </div>
               </div>
-              <div className="  items-top flex space-x-2">
+              <div className="items-top flex space-x-2">
                 <RadioGroupItem id="none" value="none" />
-                <div className="  grid gap-1.5 leading-none">
+                <div className="grid gap-1.5 leading-none">
                   <label
                     htmlFor="none"
-                    className="  text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                   >
                     Custom/no requirements
                   </label>
@@ -394,13 +394,13 @@ export default function ServerList() {
             </RadioGroup>
             <br />
             <br />
-            <strong className="  pb-2">Tags</strong>
+            <strong className="pb-2">Tags</strong>
             <br />
 
             {allTags.map((tag) => (
               <div key={tag.docsName}>
                 {tag.docsName && tag.__filter == undefined && (
-                  <div className="  items-top flex space-x-2 pb-1">
+                  <div className="items-top flex space-x-2 pb-1">
                     <Checkbox
                       disabled={templateFilter && tag.__disab != undefined}
                       id={tag.docsName}
@@ -445,12 +445,12 @@ export default function ServerList() {
                         });
                       }}
                     />
-                    <div className="  grid gap-1.5 leading-none">
+                    <div className="grid gap-1.5 leading-none">
                       <label
                         htmlFor={tag.docsName}
-                        className="  text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                       >
-                        <Badge variant={tag.role} className="  mr-1">
+                        <Badge variant={tag.role} className="mr-1">
                           {tag.docsName}
                         </Badge>
                       </label>
@@ -464,7 +464,7 @@ export default function ServerList() {
             <br />
             {allCategories.map((categorie) => (
               <div
-                className="  items-top flex space-x-2 pb-1"
+                className="items-top flex space-x-2 pb-1"
                 key={categorie.name}
               >
                 <Checkbox
@@ -508,12 +508,12 @@ export default function ServerList() {
                     return nameFilters["c-" + categorie.name];
                   })()}
                 />
-                <div className="  grid gap-1.5 leading-none">
+                <div className="grid gap-1.5 leading-none">
                   <label
                     htmlFor={categorie.name}
-                    className="  text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                   >
-                    <Badge variant={categorie.role} className="  mr-1">
+                    <Badge variant={categorie.role} className="mr-1">
                       {categorie.name}
                     </Badge>
                   </label>
@@ -524,7 +524,7 @@ export default function ServerList() {
         </Popover>
         <Button
           variant="secondary"
-          className="  md:ml-3 "
+          className="md:ml-3 "
           onClick={() => {
             setRandomData(serverList.getRandomServer());
             setRandom(true);
@@ -534,7 +534,7 @@ export default function ServerList() {
         </Button>
         <Button
           variant="secondary"
-          className="  ml-3"
+          className="ml-3"
           onClick={() => {
             toast.promise(
               new Promise((s, e) => {
@@ -585,7 +585,7 @@ export default function ServerList() {
                 <DialogTitle>
                   <IconDisplay server={randomData} /> {randomData.name}
                   {randomData.author != undefined ? (
-                    <div className="  text-sm text-muted-foreground">
+                    <div className="text-sm text-muted-foreground">
                       by {randomData.author}
                     </div>
                   ) : (
@@ -593,11 +593,11 @@ export default function ServerList() {
                   )}
                   <TagShower server={randomData} />
                 </DialogTitle>
-                <DialogDescription className="  float-left inline">
-                  <span className="  flex items-center">
+                <DialogDescription className="float-left inline">
+                  <span className="flex items-center">
                     {randomData.playerData.playerCount == 0 ? (
                       <div
-                        className="  items-center border"
+                        className="items-center border"
                         style={{
                           width: ".5rem",
                           height: ".5rem",
@@ -606,7 +606,7 @@ export default function ServerList() {
                       />
                     ) : (
                       <div
-                        className="  items-center"
+                        className="items-center"
                         style={{
                           backgroundColor: "#0cce6b",
                           width: ".5rem",
@@ -616,7 +616,7 @@ export default function ServerList() {
                       />
                     )}
 
-                    <span className="  pl-1">
+                    <span className="pl-1">
                       {randomData.playerData.playerCount}{" "}
                       {randomData.playerData.playerCount == 1
                         ? "player"
@@ -628,11 +628,11 @@ export default function ServerList() {
                   <strong>Server IP</strong>
                   <br />
                   <br />
-                  <code className="  border p-3 rounded">
+                  <code className="border p-3 rounded">
                     {randomData.name}.mshf.minehut.gg{" "}
                     <Button
                       size="icon"
-                      className="  ml-1 h-[20px]"
+                      className="ml-1 h-[20px]"
                       onClick={() => {
                         setTextCopied(true);
                         navigator.clipboard.writeText(
@@ -643,7 +643,7 @@ export default function ServerList() {
                       }}
                     >
                       {textCopied ? (
-                        <Check size={16} className="  flex items-center" />
+                        <Check size={16} className="flex items-center" />
                       ) : (
                         <p>Copy</p>
                       )}
@@ -676,7 +676,7 @@ export default function ServerList() {
             setLoading(false);
           });
         }}
-        loader={<Spinner className="  flex items-center" />}
+        loader={<Spinner className="flex items-center" />}
         endMessage={
           <p
             style={{ textAlign: "center" }}
@@ -766,7 +766,7 @@ export function TagShower(props: { server: OnlineServer; className?: string }) {
                   </Badge>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <div className="  font-normal">
+                  <div className="font-normal">
                     {t.tooltip}
                     <br />
                     Click the tag to learn more about it.
diff --git a/src/components/ServerView.tsx b/src/components/ServerView.tsx
index 5efb5f3..8bbc5be 100644
--- a/src/components/ServerView.tsx
+++ b/src/components/ServerView.tsx
@@ -69,7 +69,7 @@ export default function ServerView(props: { server: string }) {
         <Spinner className="flex items-center" />
         <br />
         <div
-          className="  flex justify-center"
+          className="flex justify-center"
           dangerouslySetInnerHTML={{ __html: randomText }}
         ></div>
       </>
@@ -78,9 +78,9 @@ export default function ServerView(props: { server: string }) {
   return (
     <>
       {single.grabOnline() == undefined && (
-        <div className="  grid pl-4 pr-4">
+        <div className="grid pl-4 pr-4">
           <div
-            className="   rounded p-2"
+            className=" rounded p-2"
             style={{ backgroundColor: "rgba(244, 63, 94, .16)" }}
           >
             <strong className="flex items-center">
@@ -95,13 +95,13 @@ export default function ServerView(props: { server: string }) {
         </div>
       )}
 
-      <div className="  grid p-4 sm:grid-cols-3 gap-4">
-        <Card className="  sm:col-span-2">
+      <div className="grid p-4 sm:grid-cols-3 gap-4">
+        <Card className="sm:col-span-2">
           <BetterHeader>
-            <CardTitle className="  flex items-center">
+            <CardTitle className="flex items-center">
               {single.grabOnline() == undefined ? (
                 <div
-                  className="  items-center mr-1"
+                  className="items-center mr-1"
                   style={{
                     width: ".75rem",
                     height: ".75rem",
@@ -111,7 +111,7 @@ export default function ServerView(props: { server: string }) {
                 />
               ) : (
                 <div
-                  className="  items-center mr-1"
+                  className="items-center mr-1"
                   style={{
                     width: ".75rem",
                     height: ".75rem",
diff --git a/src/components/Stat.tsx b/src/components/Stat.tsx
index da6909f..a48d5aa 100644
--- a/src/components/Stat.tsx
+++ b/src/components/Stat.tsx
@@ -10,14 +10,12 @@ export default function Component(props: {
   return (
     <Card className={props.className}>
       {props.children}
-      <CardHeader className="  flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="  text-sm font-medium m-0">
-          {props.title}
-        </CardTitle>
-        <props.icon className="  h-4 w-4 text-muted-foreground" />
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium m-0">{props.title}</CardTitle>
+        <props.icon className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div className="  text-2xl font-bold">{props.desc}</div>
+        <div className="text-2xl font-bold">{props.desc}</div>
       </CardContent>
     </Card>
   );
diff --git a/src/components/TextFromPathname.tsx b/src/components/TextFromPathname.tsx
index 259317a..3c2aa90 100644
--- a/src/components/TextFromPathname.tsx
+++ b/src/components/TextFromPathname.tsx
@@ -14,17 +14,17 @@ export default function TextFromPathname() {
     <>
       {pathname == "/" && (
         <>
-          <BreadcrumbSeparator className="  max-sm:hidden" />
-          <BreadcrumbItem className="  max-sm:hidden">
+          <BreadcrumbSeparator className="max-sm:hidden" />
+          <BreadcrumbItem className="max-sm:hidden">
             <BreadcrumbPage>Home</BreadcrumbPage>
           </BreadcrumbItem>
         </>
       )}
       {pathname?.startsWith("/server") && (
         <>
-          <BreadcrumbSeparator className="  max-sm:hidden" />
-          <BreadcrumbItem className="  max-sm:hidden">Server</BreadcrumbItem>
-          <BreadcrumbSeparator className="  max-sm:hidden" />
+          <BreadcrumbSeparator className="max-sm:hidden" />
+          <BreadcrumbItem className="max-sm:hidden">Server</BreadcrumbItem>
+          <BreadcrumbSeparator className="max-sm:hidden" />
           <BreadcrumbItem>
             <BreadcrumbPage>
               {pathname.split("/server/")[1].split("/")[0]}
@@ -50,7 +50,7 @@ export default function TextFromPathname() {
       )}
       {pathname == "/account/favorites" && (
         <>
-          <BreadcrumbSeparator className="  max-sm:hidden" />
+          <BreadcrumbSeparator className="max-sm:hidden" />
           <BreadcrumbItem>
             <BreadcrumbPage>Favorites</BreadcrumbPage>
           </BreadcrumbItem>
@@ -58,7 +58,7 @@ export default function TextFromPathname() {
       )}
       {pathname == "/account/claim-account" && (
         <>
-          <BreadcrumbSeparator className="  max-sm:hidden" />
+          <BreadcrumbSeparator className="max-sm:hidden" />
           <BreadcrumbItem>
             <BreadcrumbPage>Claim Minecraft Account</BreadcrumbPage>
           </BreadcrumbItem>
@@ -66,7 +66,7 @@ export default function TextFromPathname() {
       )}
       {pathname == "/account/settings" && (
         <>
-          <BreadcrumbSeparator className="  max-sm:hidden" />
+          <BreadcrumbSeparator className="max-sm:hidden" />
           <BreadcrumbItem>
             <BreadcrumbPage>Settings</BreadcrumbPage>
           </BreadcrumbItem>
@@ -74,7 +74,7 @@ export default function TextFromPathname() {
       )}
       {pathname == "/legal/external-content-agreement" && (
         <>
-          <BreadcrumbSeparator className="  max-sm:hidden" />
+          <BreadcrumbSeparator className="max-sm:hidden" />
           <BreadcrumbItem>
             <BreadcrumbPage>Legal</BreadcrumbPage>
           </BreadcrumbItem>
diff --git a/src/components/clerk/LoggedInPopover.tsx b/src/components/clerk/LoggedInPopover.tsx
index e6bd874..14f5188 100644
--- a/src/components/clerk/LoggedInPopover.tsx
+++ b/src/components/clerk/LoggedInPopover.tsx
@@ -9,31 +9,31 @@ export default function LoggedInPopover() {
   const { user } = useUser();
 
   return (
-    <div className="  grid w-full">
-      <strong className="  text-center">Logged in as {user?.username}</strong>
-      <small className="  text-center">
-        Make comments about servers and favorite servers. Secured by Clerk
+    <div className="grid w-full">
+      <strong className="text-center">Logged in as {user?.username}</strong>
+      <small className="text-center">
+        Make comments about servers and favorite servers. Secured by Clerk
       </small>
       <br />
       <Button
         variant={"ghost"}
         onClick={() => router.push("/account/settings")}
       >
-        <UserCog size={18} className="  mr-2" />
+        <UserCog size={18} className="mr-2" />
         Security/Profile settings
       </Button>
       <Button
         variant={"ghost"}
         onClick={() => router.push("/account/favorites")}
       >
-        <Star size={18} className="  mr-2" /> Favorites
+        <Star size={18} className="mr-2" /> Favorites
       </Button>
       <Button
         variant={"ghost"}
         className="text-red-500"
         onClick={() => clerk.signOut()}
       >
-        <X size={18} className="  mr-2" />
+        <X size={18} className="mr-2" />
         Logout
       </Button>
     </div>
diff --git a/src/components/clerk/SignInPopoverButton.tsx b/src/components/clerk/SignInPopoverButton.tsx
index 526282f..890c145 100644
--- a/src/components/clerk/SignInPopoverButton.tsx
+++ b/src/components/clerk/SignInPopoverButton.tsx
@@ -32,8 +32,8 @@ export default function SignInPopoverButton({
       </PopoverTrigger>
       <PopoverContent className="w-full">
         <div className=" grid w-[200px]">
-          <strong className="  text-center">Login</strong>
-          <small className="  text-center">
+          <strong className="text-center">Login</strong>
+          <small className="text-center">
             Make comments about servers and favorite servers. Secured by Clerk
           </small>
           <br />
diff --git a/src/components/clerk/Topbar.tsx b/src/components/clerk/Topbar.tsx
index 4ca8508..492ebca 100644
--- a/src/components/clerk/Topbar.tsx
+++ b/src/components/clerk/Topbar.tsx
@@ -17,7 +17,7 @@ export default function TopBar({ inter }: { inter: string }) {
   return (
     <>
       <SignedOut>
-        <div className="  mt-1 gap-1 grid grid-cols-5">
+        <div className="mt-1 gap-1 grid grid-cols-5">
           <SignInPopoverButton className="col-span-2" variant="outline" />
           <Popover>
             <PopoverTrigger>
@@ -32,7 +32,7 @@ export default function TopBar({ inter }: { inter: string }) {
           <Button variant="ghost" size="icon">
             <svg
               viewBox="0 0 438.549 438.549"
-              className="  h-[1.2rem] w-[1.2rem]"
+              className="h-[1.2rem] w-[1.2rem]"
             >
               <path
                 fill="currentColor"
@@ -68,7 +68,7 @@ export default function TopBar({ inter }: { inter: string }) {
           <Popover>
             <PopoverTrigger>
               <Button size="icon" variant="ghost" className="mb-1">
-                <InfoIcon className="  h-[1.2rem] w-[1.2rem]" />
+                <InfoIcon className="h-[1.2rem] w-[1.2rem]" />
               </Button>
             </PopoverTrigger>
             <PopoverContent>
@@ -86,7 +86,7 @@ export default function TopBar({ inter }: { inter: string }) {
           >
             <svg
               viewBox="0 0 438.549 438.549"
-              className="  h-[1.2rem] w-[1.2rem]"
+              className="h-[1.2rem] w-[1.2rem]"
             >
               <path
                 fill="currentColor"
diff --git a/src/components/misc/TextCopyComp.tsx b/src/components/misc/TextCopyComp.tsx
index 7618897..c323b74 100644
--- a/src/components/misc/TextCopyComp.tsx
+++ b/src/components/misc/TextCopyComp.tsx
@@ -9,11 +9,11 @@ export function TextCopyComp() {
   const [textCopied, setTextCopied] = useState(false);
 
   return (
-    <code className="  border p-3 rounded">
+    <code className="border p-3 rounded">
       MHSFPV.minehut.gg{" "}
       <Button
         size="icon"
-        className="  ml-1 h-[20px]"
+        className="ml-1 h-[20px]"
         onClick={() => {
           setTextCopied(true);
           navigator.clipboard.writeText("MHSFPV.minehut.gg");
@@ -22,7 +22,7 @@ export function TextCopyComp() {
         }}
       >
         {textCopied ? (
-          <Check size={16} className="  flex items-center" />
+          <Check size={16} className="flex items-center" />
         ) : (
           <p>Copy</p>
         )}