Feature/f 65 move high hunger countries (#39)

* fix: reduce the size of button, remove the text and add tooltip * feat: change bottom position of alert and change color of the pulse * feat: move button the right and made the button smaller * fix: position and size of skeleton --------- Co-authored-by: Armanpreet Ghotra <[email protected]>
jst-seminar-rostlab-tum · Nov 18, 2024 · d79dc36 · d79dc36
1 parent f0af01b
commit d79dc36
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/components/HungerAlert/HungerAlert.tsx b/src/components/HungerAlert/HungerAlert.tsx
@@ -22,12 +22,15 @@ export default function HungerAlert({ countryMapData }: HungerAlertProps) {
   );
 
   return (
-    <div className="absolute bottom-20 left-20 z-10 cursor-pointer">
-      <button className={HungerAlertOperations.getPulseClasses()} onClick={toggleModal} type="button">
-        <p className="text-4xl font-bold mb-2">{countriesWithHighHunger.length}</p>
-        <p className="text-center font-medium text-sm px-4">Number of Countries with Very High Levels of Hunger</p>
+    <div className="absolute bottom-0 left-0 z-10 cursor-pointer" style={{ bottom: '18rem', left: '1.86rem' }}>
+      <button
+        className={`${HungerAlertOperations.getPulseClasses()} p-1 text-sm`}
+        onClick={toggleModal}
+        style={{ width: '4rem', height: '4rem' }}
+        type="button"
+      >
+        <p className="text-4xl">{countriesWithHighHunger.length}</p>
       </button>
-
       <PopupModal
         isModalOpen={isModalOpen}
         toggleModal={toggleModal}

diff --git a/src/components/HungerAlert/HungerAlertSkeleton.tsx b/src/components/HungerAlert/HungerAlertSkeleton.tsx
@@ -2,10 +2,11 @@ import { Skeleton } from '@nextui-org/skeleton';
 
 export default function HungerAlertSkeleton() {
   return (
-    <div className="absolute bottom-20 left-20 z-10 cursor-pointer">
-      <Skeleton className="rounded-full flex flex-col items-center justify-center text-center bg-white dark:bg-content2 relative p-5">
-        <div className="w-36 h-36" />
-      </Skeleton>
+    <div className="absolute bottom-0 left-0 z-10 cursor-pointer " style={{ bottom: '18rem', left: '1.86rem' }}>
+      <Skeleton
+        className="rounded-full flex flex-col items-center justify-center text-center bg-white dark:bg-content2 relative p-5"
+        style={{ width: '4rem', height: '4rem' }}
+      />
     </div>
   );
 }
diff --git a/src/components/HungerAlert/style.css b/src/components/HungerAlert/style.css
@@ -7,9 +7,10 @@
   right: 0;
   bottom: 0;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.2);
+  background: #3F3F46;
   z-index: -1;
   animation: pulse-animation 2s infinite ease-out;
+  border: 2px solid #f7b750;
 }
 
 .pulse::after {