data summary modal ui

UPRI-NOAH · Sep 7, 2023 · 4a67809 · 4a67809
1 parent b668fc0
commit 4a67809
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 42 deletions.
diff --git a/...res/noah-playground/components/risk-assessment-group/risk-assessment-group.component.html b/...res/noah-playground/components/risk-assessment-group/risk-assessment-group.component.html
@@ -3,9 +3,7 @@
     <a class="fixed max-w-xs items-center">
       <div class="mapboxgl-ctrl-bottom-left">
         <div class="mapboxgl-ctrl">
-          <button class="raBtn" (click)="openModalPopu()">
-            Risk Assessment
-          </button>
+          <button class="raBtn" (click)="openModalPopu()">Data Summary</button>
           <span role="button" class="x-raBtn" (click)="closeBtnRisk()"></span>
         </div>
       </div>
@@ -74,7 +72,7 @@
           (click)="toggleRain($event)"
         ></noah-risk-assessment-rain>
         <div class="flex items-center pt-2">
-          <div class="flex flex-col pl-8">
+          <div class="flex flex-col pl-6">
             <div class="text-lg f-f-r mb-2">Legend</div>
             <div class="flex items-center mb-1">
               <label class="inline-flex items-center">

diff --git a/...res/noah-playground/components/risk-assessment-group/risk-assessment-group.component.scss b/...res/noah-playground/components/risk-assessment-group/risk-assessment-group.component.scss
@@ -1,13 +1,14 @@
 .raBtn {
   position: relative;
-  background-color: #071d3b;
-  color: #fff;
+  background-color: #ffffff;
+  color: #000000;
   font-size: 18px;
+  font-weight: bold;
   display: inline-block;
   margin: 5px;
   padding: 9px 16px 7px;
   border-radius: 4px;
-  transition: background 0.3s ease;
+  transition: background-color 0.3s ease;
   position: relative;
   border: none;
   white-space: nowrap;
@@ -16,8 +17,8 @@
 
 .x-raBtn::before {
   position: absolute;
-  width: 11px;
-  height: 11px;
+  width: 16px;
+  height: 16px;
   right: 2px;
   top: 1px;
   border: 1px solid white;
@@ -28,10 +29,11 @@
 
 .x-raBtn::after {
   position: absolute;
-  width: 5px;
-  height: 5px;
-  right: 5px;
-  top: 4px;
+  width: 6px;
+  height: 6px;
+  right: 6px;
+  font-weight: bold;
+  top: 6px;
   content: ' ';
   background: -webkit-linear-gradient(
       -45deg,

diff --git a/...res/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html b/...res/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
@@ -18,7 +18,7 @@
       bg-white bg-clip-padding
       rounded-md
       outline-none
-      text-current
+      text-xl
     "
   >
     <div
@@ -31,39 +31,61 @@
         rounded-t-md
       "
     >
-      <h5
-        class="text-2xl font-medium leading-normal text-gray-800"
+      <p
+        class="font-medium leading-normal text-gray-800"
         id="exampleModalScrollableLabel"
       >
         In the event of a Flood 100-year return period, how many people might be
         affected and need evacuation in the Philippines?
-      </h5>
-      <button
-        type="button"
-        class="
-          btn-close
-          box-content
-          w-4
-          h-4
-          p-1
-          text-black
-          border-2
-          font-bold
-          rounded-none
-          opacity-50
-          focus:shadow-none focus:outline-none focus:opacity-100
-          hover:text-black hover:opacity-75 hover:no-underline
-        "
-        data-bs-dismiss="modal"
-        (click)="closeModal()"
-        aria-label="Close"
-      >
-        X
-      </button>
+      </p>
+      <div class="flex flex-shrink-0 flex-wrap justify-end">
+        <button
+          type="button"
+          class="
+            btn-close
+            box-content
+            w-4
+            h-4
+            p-1
+            text-black
+            font-bold
+            rounded-none
+            opacity-50
+            focus:shadow-none focus:outline-none focus:opacity-100
+            hover:text-black hover:opacity-75 hover:no-underline
+          "
+          data-bs-dismiss="modal"
+          (click)="hideModal()"
+          aria-label="Close"
+        >
+          _
+        </button>
+        <button
+          type="button"
+          class="
+            btn-close
+            box-content
+            w-4
+            h-4
+            p-1
+            text-black
+            font-bold
+            rounded-none
+            opacity-50
+            focus:shadow-none focus:outline-none focus:opacity-100
+            hover:text-black hover:opacity-75 hover:no-underline
+          "
+          data-bs-dismiss="modal"
+          (click)="closeModal()"
+          aria-label="Close"
+        >
+          X
+        </button>
+      </div>
     </div>
     <div class="flex-auto overflow-auto relative p-4">
       <!--  -->
-      <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+      <div class="relative shadow-md sm:rounded-lg">
         <div class="pb-4 bg-white dark:bg-gray-900">
           <label for="table-search" class="sr-only">Search</label>
           <div class="relative mt-1">
@@ -207,7 +229,7 @@
         rounded-b-md
       "
     >
-      <button
+      <!-- <button
         type="button"
         class="
           inline-block
@@ -258,7 +280,7 @@
         (click)="hideModal()"
       >
         Hide Modal
-      </button>
+      </button> -->
     </div>
   </div>
 </div>