Refactor components and improve localization: update SpinnerLoad dimensions, enhance styling in various components, and refine translations for World Cup draw details.

Author: EricLuceroGonzalez

app/(redirect)/page.js

@@ -29,8 +29,8 @@ export default function RootPage() {
             gap: "20px",
           }}
         >
-          <TitlePage>Redirecting to home...</TitlePage>
           <SpinnerLoad />
+          <TitlePage>Redirecting to home...</TitlePage>
           {/* Opcional: Enlaces manuales por si falla JS */}
           <a href="/es">Español</a>
           <a href="/en">English</a>

app/[locale]/about/page.js

@@ -112,7 +112,7 @@ export default async function About({ params }) {
               rel="noopener noreferrer"
             >
               <FaSquareXTwitter />
-              Twitter / X
+              Twitter
             </IconLink>
           </LinkList>
         </AboutWrapper>

app/[locale]/about/this_page/page.js

@@ -18,7 +18,6 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { FaFontAwesome } from "react-icons/fa";
 import H2Header from "@/app/components/MdCompos/H2Header";
-import H3Header from "@/app/components/MdCompos/H3Header";
 
 const LogosContainer = styled.div`
   display: flex;
@@ -27,37 +26,25 @@ const LogosContainer = styled.div`
   flex-flow: row wrap;
 
   justify-content: space-around;
-  /* @media (min-width: 2080px) {
-    flex-direction: column;
-  } */
 `;
 
 const LogosBox = styled.div`
   display: flex;
   flex-direction: row;
-  /* max-width: 90%; */
   margin: 1rem auto;
   flex-wrap: wrap;
-  /* @media (min-width: 1080px) {
-    width: 60%;
-    border: 1px dashed var(--accent);
-    }
-    @media (max-width: 880px) {
-      max-width: 80%;
-      border: 1px dashed red;
-      } */
-
   font-size: small;
   color: var(--accent);
   background-color: var(--quote-bg);
-  width: 32%;
-  @media (max-width: 729px) {
+
+  @media (max-width: 390px) {
     width: 45%;
   }
-  @media (min-width: 730px) {
-    width: 43%;
+
+  @media (600px <= width < 1080px) {
+    width: 49%;
   }
-  @media (min-width: 900px) {
+  @media (min-width: 1080px) {
     width: 32%;
   }
 `;

app/[locale]/page.js

@@ -17,6 +17,7 @@ import ScrollDiv from "../components/navigation/ScrollDiv";
 import { getAllPosts } from "../lib/api";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 import BackgroundDots from "../components/BgMovingDots";
+import SpinnerLoad from "../components/SpinnerLoad";
 export default async function Home({ params }) {
   // 1. Obtener idioma
   const { locale } = await params;

app/components/MdCompos/SorteoMundial.js

@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import SpinnerLoad from "../SpinnerLoad";
+import { SiFifa } from "react-icons/si";
 
 // ==========================================
 // STYLED COMPONENTS
@@ -21,10 +22,11 @@ const Header = styled.div`
 `;
 
 const Title = styled.h1`
-  font-size: 2.5rem;
+  font-size: x-large;
   font-weight: bold;
   color: var(--accent);
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1rem;
@@ -618,9 +620,8 @@ export default function SorteoMundialGA(props) {
     <Container>
       <Header>
         <Title>
-          <TrophyIcon />
           {t.title}
-          <TrophyIcon />
+          <SiFifa style={{ fontSize: "65px" }} />
         </Title>
         <Subtitle>{t.subtitle}</Subtitle>
       </Header>

app/components/SpinnerLoad.js

@@ -1,24 +1,26 @@
+"use client";
 import React from "react";
 import styled from "styled-components";
 
 const SpinnerLoad = () => (
-  <StyledSpinner viewBox="0 0 50 50">
+  <StyledSpinner viewBox="0 0 100 100">
     <circle
       className="path"
-      cx="25"
-      cy="25"
-      r="20"
+      cx="50"
+      cy="50"
+      r="30"
       fill="none"
       strokeWidth="4"
     />
   </StyledSpinner>
 );
 
 const StyledSpinner = styled.svg`
+  z-index: 1000;
   animation: rotate 2s linear infinite;
   margin: -25px 0 0 -25px;
-  width: 50px;
-  height: 50px;
+  width: 150px;
+  height: 150px;
 
   & .path {
     stroke: var(--accent);

app/components/navigation/footer/index.js

@@ -23,10 +23,13 @@ const FooterIcons = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  @media (max-width: 660px) {
+
+  @media (0 <=width <= 390px) {
     flex-direction: column;
     margin-top: 2rem;
+    font-size: xx-small;
   }
+  /* border: 1px solid blue; */
 `;
 
 const FooterLinks = styled.div`
@@ -39,10 +42,14 @@ const FooterTextBox = styled.div`
   margin: 0;
   display: flex;
   flex-direction: column;
+
+  width: 50%;
+  @media (min-width: 400px) {
+    width: auto;
+  }
 `;
 const FooterText = styled.p`
   font-size: smaller;
-  /* border: 1px solid red; */
 `;
 const FoooterLink = styled.a`
   padding: 2px 5px;

app/themes/GlobalStyleWrapper.js

@@ -59,6 +59,7 @@ a {
     
     --primary-border: #DEE2E6;
     --box-border-hover: #0077FF;
+    --gray-light: #919ca2ff;
   }
 
   [data-theme='dark'] {
@@ -102,6 +103,7 @@ a {
 
     --primary-border: #004966;
     --box-border-hover: #FF3366;
+    --gray-light: #919ca2ff;
   }
 
   /* Utilidades */

app/ui/ComponentsStyled.js

@@ -37,26 +37,39 @@ export const MainPageBg = styled.div`
   max-width: 100%;
   text-align: justify;
   padding: 1rem 1rem;
-  @media (min-width: 660px) {
-    font-size: large;
-    max-width: 70%;
-    margin: 0 auto;
-    /* border: 1px solid orange; */
+  margin: 0 auto;
+
+  @media (0px <= width < 390px) {
+    width: 99%;
   }
-  @media (min-width: 1300px) {
-    font-size: large;
-    width: 50%;
-    margin: 0 auto;
-    /* border: 1px solid var(--accent); */
+  @media (min-width: 390px) {
+    width: 95%;
+  }
+
+  @media (600px <= width < 780px) {
+    min-width: 80%;
+    padding: 5px;
+    box-shadow: none;
+    font-size: small;
+  }
+  @media (min-width: 1080px) {
+    width: 65%;
+  }
+  @media (min-width: 1280px) {
+    width: 65%;
   }
+  @media (min-width: 1440px) {
+    width: 60%;
+  }
+  /* border: 2px solid orange; */
 `;
 
 export const HomePageCover = styled.div`
   height: 15vh;
   display: flex;
   flex-direction: row;
   @media (max-width: 660px) {
-    height: 65vh;
+    height: 5vh;
   }
 `;
 export const HomePageCoverText = styled.div`
@@ -78,11 +91,13 @@ export const CoverTitle = styled.h1`
 `;
 export const TitlePage = styled.h1`
   color: var(--fg);
+  font-size: x-large;
+
   @media (max-width: 728px) {
     text-align: justify;
     /* padding: 1rem 1rem; */
   }
-  font-size: x-large;
+
   @media (min-width: 660px) {
     font-size: xx-large;
   }

app/ui/MarkDownComponents.js

@@ -7,7 +7,8 @@ export const MdParagraph = styled.div`
   @media (min-width: 660px) {
     font-size: large;
   }
-  /* border: 1px solid red; */
+  z-index: 1000;
+  background-color: var(--bg);
 `;
 
 export const MdListItem = styled.li`