style: fixed twiks

AkekoChan · Mar 22, 2024 · fd291a0 · fd291a0
1 parent 5fe58c6
commit fd291a0
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/client/src/components/map/Map.tsx b/client/src/components/map/Map.tsx
@@ -67,16 +67,19 @@ const Map = ({
 
   return (
     <div className="h-96 rounded-2xl overflow-hidden relative">
+
       { currentStep ? (<Button className="absolute bottom-0 left-0 z-500 w-fit text-alabaster-900 pl-5" onClick={() => { 
         setGeolocation(new LatLng(currentStep.geolocalisation.latitude, currentStep.geolocalisation.longitude)) 
       }}>
         <SearchIcon className="mr-1" role="decoration"/> Etape actuelle
       </Button>) : null }
+
       { flamiPosition ? (<Button className="absolute bottom-0 right-0 z-500 w-fit text-alabaster-900 pr-5" onClick={() => { 
         setGeolocation(new LatLng(flamiPosition.latitude, flamiPosition.longitude)) 
       }}>
         <SearchIcon className="mr-1" role="decoration"/> Mon Flami
       </Button>) : null }
+
       <MapContainer
         center={geolocalisation}
         zoom={12}
@@ -109,20 +112,22 @@ const Map = ({
               key={index}
             >
               <Popup>
-                <b className="text-alabaster-50">Étape n°{marker.etape}</b>
-                <p>{marker.date}</p>
-                <p>{marker.ville}</p>
+                <b className="text-alabaster-50 text-base">Étape n°{marker.etape}</b>
+                <p className="text-sm">{marker.date}</p>
+                <p className="text-sm">{marker.ville}</p>
                 {
                   currentStep && currentStep?.etape_numero === marker.etape_numero ? (
-                    <Button onClick={() => APIHandler<GenericResponse>(`/misc/g/badge/etape_${marker.etape_numero}`, false, "GET", undefined, token).then(res => {
+                    <Button className="pb-1 text-alabaster-50" onClick={() => APIHandler<GenericResponse>(`/misc/g/badge/etape_${marker.etape_numero}`, false, "GET", undefined, token).then(res => {
                       toast.success(`${res.data.message}`, {
                         style: {
                           background: "#3D3D3D",
                           color: "#FAFAFA",
                           borderRadius: "12px",
                         },
                       });
-                    })}>Récupérer le badge</Button>
+                    })}>
+                      Récupérer le badge
+                    </Button>
                     ) : null
                   }
               </Popup>

diff --git a/client/src/components/profile/BadgeDisplay.tsx b/client/src/components/profile/BadgeDisplay.tsx
@@ -25,8 +25,8 @@ const BadgeDisplay = ({ badge }: { badge: Badge }) => {
           alt={`Badge de ${badge.name}`}
         />
       </div>
-      <p className="text-2xl mb-4 font-bold text-center">{side ? badge.region : badge.name}</p>
-      <p className="text-m w-90 text-center">{side ? badge.description_region : badge.description}</p>
+      <p className="text-3xl mt-4 mb-4 font-bold text-center">{side ? badge.region : badge.name}</p>
+      <p className="text-base w-90 text-center">{side ? badge.description_region : badge.description}</p>
     </div>
   );
 };

diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
@@ -2,15 +2,15 @@ import { cva, VariantProps } from "class-variance-authority";
 import React from "react";
 
 const baseButton =
-  "text-center w-full px-8 py-4 font-roboto font-bold uppercase cursor-pointer";
+  "text-center px-8 py-4 font-roboto font-bold uppercase cursor-pointer";
 
 const buttonVariants = {
   primary:
-    "bg-tree-poppy-500 text-alabaster-950 rounded-xl shadow-primary active:shadow-none active:translate-y-1 hover:brightness-90 disabled:cursor-not-allowed disabled:bg-alabaster-600 disabled:text-alabaster-300 disabled:shadow-none disabled:hover:brightness-100 disabled:active:translate-y-0",
+    "bg-tree-poppy-500 w-full text-alabaster-950 rounded-xl shadow-primary active:shadow-none active:translate-y-1 hover:brightness-90 disabled:cursor-not-allowed disabled:bg-alabaster-600 disabled:text-alabaster-300 disabled:shadow-none disabled:hover:brightness-100 disabled:active:translate-y-0",
   secondary:
-    "bg-alabaster-950 text-alabaster-50 rounded-xl shadow-secondary border-3 border-alabaster-400 active:shadow-none active:translate-y-1 hover:brightness-90 disabled:cursor-not-allowed disabled:bg-alabaster-600 disabled:text-alabaster-300 disabled:shadow-none disabled:hover:brightness-100 disabled:active:translate-y-0 disabled:border-0",
+    "bg-alabaster-950 w-full text-alabaster-50 rounded-xl shadow-secondary border-3 border-alabaster-400 active:shadow-none active:translate-y-1 hover:brightness-90 disabled:cursor-not-allowed disabled:bg-alabaster-600 disabled:text-alabaster-300 disabled:shadow-none disabled:hover:brightness-100 disabled:active:translate-y-0 disabled:border-0",
   tertiary:
-    "text-mandy-500 hover:text-mandy-600 disabled:cursor-not-allowed disabled:text-alabaster-300 disabled:hover:text-alabaster-300",
+    "text-mandy-500 w-full hover:text-mandy-600 disabled:cursor-not-allowed disabled:text-alabaster-300 disabled:hover:text-alabaster-300",
 };
 
 const button = cva(baseButton, {