From 8bda7112151e779db695757ee513b3ff9cfb2a6e Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sat, 20 Apr 2024 13:34:47 -0400
Subject: [PATCH] Update the style of the server result

---
 .../app/(pages)/server/[[...slug]]/page.tsx   |  2 +-
 .../app/components/server/server-result.tsx   | 64 +++++++++++--------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
index 392ea38..5770ec4 100644
--- a/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/server/[[...slug]]/page.tsx
@@ -70,7 +70,7 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
 
                 {/* Server Result */}
                 {result && (
-                    <div className="flex justify-center scale-90 xs:scale-100 transition-all transform-gpu">
+                    <div className="flex justify-center scale-[.71] xs:scale-75 sm:scale-100 transition-all transform-gpu">
                         <ServerResult server={result} />
                     </div>
                 )}
diff --git a/Frontend/src/app/components/server/server-result.tsx b/Frontend/src/app/components/server/server-result.tsx
index 33eed76..2cd7450 100644
--- a/Frontend/src/app/components/server/server-result.tsx
+++ b/Frontend/src/app/components/server/server-result.tsx
@@ -30,45 +30,55 @@ const ServerResult = ({ server }: ServerResultProps): ReactElement => {
     return (
         <div
             className={cn(
-                "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
+                "w-[37.5rem] relative p-1.5 py-1 flex gap-2 items-center pointer-events-none",
                 `bg-[url("/media/dirt-background.png")] bg-center bg-repeat ${minecraft.className}`
             )}
         >
             {/* Favicon */}
             <Image
+                className="h-16 w-16"
                 src={favicon || `${config.apiEndpoint}/server/icon/fallback`}
                 alt={`${server.hostname}'s Favicon`}
                 width={64}
                 height={64}
             />
 
-            {/* Name & MOTD */}
-            <div className="flex flex-col">
-                <h1>{server.hostname}</h1>
-                {server.motd.html.map(
-                    (line: string, index: number): ReactElement => {
-                        return (
-                            <p
-                                key={index}
-                                className="pointer-events-auto"
-                                dangerouslySetInnerHTML={{ __html: line }}
-                            ></p>
-                        );
-                    }
-                )}
-            </div>
+            {/* Content */}
+            <div className="-translate-y-1 w-full h-full flex flex-col gap-1">
+                {/* Name & Ping */}
+                <div className="w-full flex justify-between">
+                    <h1>{server.hostname}</h1>
 
-            {/* Ping */}
-            <div className="absolute top-0.5 right-0.5 flex gap-1 items-center">
-                <p>
-                    {server.players.online}/{server.players.max}
-                </p>
-                <Image
-                    src="/media/full-ping.png"
-                    alt="Ping!"
-                    width={28}
-                    height={28}
-                />
+                    {/* Players & Ping */}
+                    <div className="flex gap-1 items-center">
+                        <p className="text-[#AAAAAA]">
+                            {server.players.online}
+                            <span className="text-[#555555]">/</span>
+                            {server.players.max}
+                        </p>
+                        <Image
+                            src="/media/ping-full.png"
+                            alt="Ping!"
+                            width={21}
+                            height={21}
+                        />
+                    </div>
+                </div>
+
+                {/* MOTD */}
+                <div className="w-full flex flex-col">
+                    {server.motd.html.map(
+                        (line: string, index: number): ReactElement => {
+                            return (
+                                <p
+                                    key={index}
+                                    className="leading-[1.15rem] pointer-events-auto"
+                                    dangerouslySetInnerHTML={{ __html: line }}
+                                ></p>
+                            );
+                        }
+                    )}
+                </div>
             </div>
         </div>
     );