updates domain and adapts theme

.env

@@ -1,5 +1,5 @@
 VITE_ENVIRONMENT=dev
-VITE_BACKEND_URL=https://skyjo-backend.voltvector.org
+VITE_BACKEND_URL=https://backend.skylo-game.com
 
 #VITE_ENVIRONMENT=local
 #VITE_BACKEND_URL=http://localhost:3001

src/App.tsx

@@ -64,7 +64,7 @@ export default function App() {
   }, []);
 
   return (
-    <div className="bg-gray-900 w-screen h-screen">
+    <div className="bg-teal-900 font-theme w-screen h-screen">
       {!gameData && (
         <SessionManager
           isConnected={isConnected}

src/components/Footer.tsx

@@ -39,12 +39,7 @@ export const Footer: FC<Footer> = ({
   const isEndOfGame = gameData.phase === "game ended";
 
   return (
-    <div
+    <div className="p-4 rounded-lg shadow-lg flex flex-col justify-between text-white bg-gradient-to-b from-teal-600 to-teal-700">
-      style={{
-        backgroundImage: "linear-gradient(to bottom, #4B5563,#1F2937)",
-      }}
-      className="p-4 rounded-lg shadow-lg flex flex-col justify-between text-white"
-    >
       <div className="flex justify-between">
         <div className="flex items-center">
           <Text>Session: {session} </Text>
@@ -61,7 +56,7 @@ export const Footer: FC<Footer> = ({
         </div>
       </div>
       {gameData.players.map((player, index) => (
-        <div key={index} className="mb-3 pt-2 mt-2 border-t border-gray-600">
+        <div key={index} className="mb-3 pt-2 mt-2 border-t border-black">
           <div className="flex justify-between items-center">
             <Text>
               {player?.name} {player.socketId == socket.id && "👤"}{" "}

src/components/SessionManager.tsx

@@ -50,7 +50,7 @@ export const SessionManager: FC<SessionManagerProps> = ({
   return (
     <section>
       <div className="w-full h-full absolute top-0 left-0 z-0 bg-gradient-to-b from-theme-bg to-teal-500">
-        <div className="font-theme py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 z-10 relative">
+        <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 z-10 relative">
           <h1 className="drop-shadow-black mb-4 text-7xl font-extrabold tracking-tight leading-none md:text-8xl lg:text-8xl text-white">
             SKYLO
           </h1>

src/global/Button.tsx

@@ -9,7 +9,7 @@ const Button: FC<ButtonProps> = ({ variant, children, ...rest }) => {
   if (variant === "secondary") {
     return (
       <button
-        className="border border-black text-white focus:outline-none focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-theme-secondary hover:bg-theme-secondary-hover focus:ring-gray-700"
+        className="border border-black text-white focus:outline-none focus:ring-4 rounded-lg text-md px-3 py-1.5 mr-2 bg-theme-secondary hover:bg-theme-secondary-hover focus:ring-gray-700"
         {...rest}
       >
         {children}
@@ -18,7 +18,7 @@ const Button: FC<ButtonProps> = ({ variant, children, ...rest }) => {
   }
   return (
     <button
-      className="border border-black text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 bg-theme-primary hover:bg-theme-primary-hover focus:outline-none focus:ring-blue-800"
+      className="border border-black text-white focus:ring-4 rounded-lg text-md px-5 py-2 mr-2 bg-theme-primary hover:bg-theme-primary-hover focus:outline-none focus:ring-blue-800"
       {...rest}
     >
       {children}

src/global/Text.tsx

@@ -6,7 +6,7 @@ type TextNormalProps = HTMLProps<HTMLParagraphElement> & {
 
 const Text: FC<TextNormalProps> = ({ children, ...rest }) => {
   return (
-    <p className="text-sm font-medium text-white" {...rest}>
+    <p className="text-lg font-medium drop-shadow-black text-white" {...rest}>
       {children}
     </p>
   );