style: home logo usage update

MarcoEscaleira · Apr 6, 2024 · 27b9ed3 · 27b9ed3
1 parent 48ec99a
commit 27b9ed3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -3,8 +3,8 @@ import { format } from "date-fns";
 
 export function Footer() {
   return (
-    <footer className="flex w-full items-center justify-center gap-4 bg-white p-4 mt-6">
-      <img src="/images/mtc-logo.svg" alt="Planet Earth" className="h-[34px] w-[38px] md:h-[44px] md:w-[48px]" />
+    <footer className="mt-6 flex w-full items-center justify-center gap-4 bg-white p-4">
+      <img src="/images/planet-earth.svg" alt="Planet Earth" className="h-[34px] w-[38px] md:h-[44px] md:w-[48px]" />
       <Typography color="gray" className="font-medium">
         © {format(new Date(), "yyyy")} Meet The Countries
       </Typography>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useLazyQuery } from "@apollo/client";
-import { Drawer, IconButton, List, ListItem, ListItemPrefix, Typography } from "@material-tailwind/react";
+import { Drawer, IconButton, List, ListItem, ListItemPrefix, Tooltip, Typography } from "@material-tailwind/react";
 import { Menu, Home, Play, FileQuestion, X, CircleUserRound, Power, LibraryBig } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -30,9 +30,11 @@ export function Header() {
         className={`fixed left-0 top-0 z-10 w-full px-2 py-2 sm:px-6 sm:py-4 md:px-4 ${isHome ? "bg-transparent" : "bg-white"}`}
       >
         <div className="flex items-center justify-between">
-          <Link to="/">
-            <img src="/images/mtc-logo.svg" alt="Planet Earth" className="h-[44px] w-[48px] md:h-[54px] md:w-[58px]" />
-          </Link>
+          <Tooltip content="Home">
+            <Link to="/">
+              <img src="/images/planet-earth.svg" alt="Planet Earth" className="size-[44px] md:size-[54px]" />
+            </Link>
+          </Tooltip>
           <div className="flex h-full items-center gap-3">
             {isLoggedIn && (
               <div className="flex items-center gap-2">

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -18,21 +18,18 @@ export function Component() {
         style={{ width: "100%", height: "100%", position: "relative" }}
         mapStyle="mapbox://styles/marcoescaleiradmu/clp7mzxrf01q701qycptw1thq"
       >
-        <section className="absolute left-1/2 top-1/2 flex w-80 -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center rounded-2xl bg-gray-100 bg-opacity-90 p-3 sm:w-[450px] md:w-[600px] sm:p-8">
+        <section className="absolute left-1/2 top-1/2 flex w-80 -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center rounded-2xl bg-gray-100 bg-opacity-90 p-3 sm:w-[450px] sm:p-8 md:w-[600px]">
           <img
-            src="/images/planet-earth.svg"
+            src="/images/mtc-logo.svg"
             width={180}
             height={180}
-            alt="Planet Earth"
-            className="mb-6 h-32 w-32 sm:mb-8 sm:h-44 sm:w-44"
+            alt="Planet Earth MTC"
+            className="mb-6 size-32 sm:mb-8 sm:size-44"
           />
-          <Typography variant="h1" className="mb-4 font-semibold text-3xl md:text-4xl">
-            Meet the Countries
-          </Typography>
-          <Typography variant="lead" className="mb-6 text-center sm:mb-8 sm:text-lg">
+          <Typography variant="lead" className="text-sm mb-6 text-center sm:mb-8 sm:text-lg">
             Embark on an exciting journey with us to explore uncharted territories and discover countries like never
             before.
-            <Typography className="font-medium mt-3">Are you ready for the adventure?</Typography>
+            <Typography className="mt-3 font-medium">Are you ready for the adventure?</Typography>
           </Typography>
           <div className="flex items-center justify-center">
             <Link