fix(popup): review popup design

CartONG · Mar 26, 2024 · 791ccf0 · 791ccf0
1 parent 9568787
commit 791ccf0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/src/components/Stats.vue b/src/components/Stats.vue
@@ -42,17 +42,17 @@
       </p>
       <div class="flex flex-row justify-around mb-2 text-main">
         <div class="flex flex-col">
-          <span class="icon icon-female text-3xl text-center"/>
+          <span class="icon icon-female text-4xl text-center"/>
           <span id="statsFemale" class="font-bold text-center"/>
           <p class="text-xs uppercase text-center">{{ $t("stats.females") }}</p>
         </div>
         <div class="flex flex-col">
-          <span class="icon icon-male text-3xl text-center"/>
+          <span class="icon icon-male text-4xl text-center"/>
           <span id="statsMale" class="font-bold text-center"/>
           <p class="text-xs uppercase text-center">{{ $t("stats.males") }}</p>
         </div>
         <div class="flex flex-col">
-          <span class="icon icon-kid text-3xl text-center"/>
+          <span class="icon icon-kid text-4xl text-center"/>
           <span id="statsMinor" class="font-bold text-center"/>
           <p class="text-xs uppercase text-center">{{ $t("stats.minors") }}</p>
         </div>
@@ -73,7 +73,7 @@
         <div class="flex flex-row">
           <span class="icon icon-bib text-3xl text-left text-secondary"/>
           <div class="flex flex-col">
-            <span id="statsChildren" class="font-bold text-center text-secondary"/>
+            <span id="statsChildren" class="font-bold text-left text-secondary"/>
             <p class="text-3xs uppercase text-left text-secondary text-stats-box">{{ $t("stats.children") }}</p>
           </div>
         </div>

diff --git a/src/components/popUpContent/DeathDescription.vue b/src/components/popUpContent/DeathDescription.vue
@@ -7,10 +7,10 @@
         </div>
         <p class="font-bold">{{ format(deathData.date, "full") }}</p>
         <hr class="border-dotted border-main border"/>
-        <p class="text-sm"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
+        <p class="text-sm mt-2 mb-2"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
           <span class="font-bold">{{ deathData.boatInvolved }}</span>
         </p>
-        <p class="text-sm"><span class="icon icon-rescue text-xl mr-3"/> {{ $t("popup.peoplesNB") }}:
+        <p class="text-sm mb-2"><span class="icon icon-rescue text-xl mr-3"/> {{ $t("popup.peoplesNB") }}:
           <span class="font-bold">{{ deathData.deathNumber }}</span>
         </p>
         <p class="text-sm flex" v-if="deathData.testimonySrc.length > 0">

diff --git a/src/components/popUpContent/IncidentDescription.vue b/src/components/popUpContent/IncidentDescription.vue
@@ -7,10 +7,10 @@
           </div>
           <p class="font-bold">{{ format(incidentData.date, "full") }}</p>
           <hr class="border-dotted border-main border"/>
-          <p class="text-sm"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
+          <p class="text-sm mb-2 mt-2"><span class="icon icon-lifebuoy text-xl mr-3"/> {{ $t("popup.boatInvolved") }}:
             <span class="font-bold">{{ incidentData.boatInvolved }}</span>
           </p>
-          <p class="text-sm flex">
+          <p class="text-sm mb-2 flex">
             <img src="@/assets/warning.svg" class="popup-icon"> {{ $t("popup.facts") }}:
             <span class="font-bold">{{ incidentData.incAction }}</span>
           </p>

diff --git a/src/components/popUpContent/OperationDescription.vue b/src/components/popUpContent/OperationDescription.vue
@@ -85,7 +85,7 @@
 <script lang="ts" setup>
 // import { Colors } from "@/utils/Colors"
 import { store } from "@/main"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 import { OpsData } from "@/classes/data/OpsData"
 import { format } from "@formkit/tempo"
 
@@ -116,4 +116,8 @@ function setCurrentImage (url: string) {
   button {
     left: 100%;
   }
+
+  p, span {
+  color: var(--text-color);
+}
   </style>