Enhance LocationCarrousel styles and Badge component functionality

aelassas · Dec 28, 2024 · 3da3fd8 · 3da3fd8
1 parent 4ed33ab
commit 3da3fd8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/frontend/src/assets/css/location-carrousel.css b/frontend/src/assets/css/location-carrousel.css
@@ -42,18 +42,22 @@ div.location-caroussel div.box div.location-image img {
   max-height: 100%;
 }
 
-div.location-caroussel div.box div.location-image .location-icon{
+div.location-caroussel div.box div.location-image .location-icon {
   color: #939393;
 }
 
 div.location-caroussel div.box div.title {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding-right: 12px;
 }
 
+div.location-caroussel div.box div.title .title-badge {
+  margin-top: 10px;
+}
+
 div.location-caroussel div.box h2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;

diff --git a/frontend/src/components/Badge.tsx b/frontend/src/components/Badge.tsx
@@ -6,10 +6,16 @@ interface BadgeProps {
   backgroundColor: string
   color: string
   text: string
+  className?: string
 }
 
-const Badge = ({ backgroundColor, color, text }: BadgeProps) => (
-  <div className="badge" style={{ backgroundColor, color }}>{text}</div>
+const Badge = ({
+  backgroundColor,
+  color,
+  text,
+  className,
+}: BadgeProps) => (
+  <div className={`badge ${className}`} style={{ backgroundColor, color }}>{text}</div>
 )
 
 export default Badge
diff --git a/frontend/src/components/LocationCarrousel.tsx b/frontend/src/components/LocationCarrousel.tsx
@@ -78,7 +78,7 @@ const LocationCarrousel = ({
             </div>
             <div className="title">
               <h2>{location.name}</h2>
-              <Badge backgroundColor="#B3E5FC" color="#044f71" text="New" />
+              <Badge backgroundColor="#B3E5FC" color="#044f71" text="New" className="title-badge" />
               {/* <Badge backgroundColor="#B3E5FC" color="#2D7AB3" text="New" /> */}
               {/* <Badge backgroundColor="#FFE0B2" color="#EF8743" text="200 m from you" />
               <Badge backgroundColor="#FEEBEE" color="#F37977" text="-20% sale" /> */}