@dataemergencia/emergency 0.1.0 → 0.2.0

package/dist/styles.css

@@ -1,11 +1,13 @@
 :root {
   --de-emergency-red: red;
   --de-emergency-red-hover: #ff3535;
+  --de-emergency-red-pressed: #e33327;
   --de-emergency-on-red: #fff;
   --de-emergency-blue: #00adf6;
   --de-emergency-blue-hover: #29bfff;
   --de-emergency-primary: #007bff;
   --de-emergency-primary-dark: #1e40af;
+  --de-emergency-primary-foreground: #f9f9f9;
   --de-emergency-text: #3d4461;
   --de-emergency-text-secondary: #686868;
   --de-emergency-white: #fff;
@@ -141,7 +143,7 @@
   align-items: center;
   gap: .75rem;
   width: 100%;
-  padding: 1.5rem;
+  padding: 1.5rem 1rem;
   display: flex;
   position: relative;
   overflow-y: auto;
@@ -167,18 +169,18 @@
 .de-emergency-sos-img-kMlO0G {
   aspect-ratio: 1;
   object-fit: cover;
-  border-radius: 50%;
-  width: clamp(3.5rem, 12.5vw, 5rem);
+  width: clamp(3.5rem, 17.5vw, 6rem);
   height: auto;
+  fill: var(--de-emergency-primary);
+  border-radius: 50%;
   animation: 1.5s infinite de-emergency-de-emergency-pulse-kMlO0G;
 }
 
 .de-emergency-emergency-panel__footer-kMlO0G {
   background: var(--de-emergency-white-soft, #f7f7f7);
   border-radius: .5rem .5rem 0 0;
-  flex-wrap: wrap;
   grid-row: 3;
-  justify-content: space-evenly;
+  justify-content: center;
   align-items: center;
   gap: 1rem;
   padding: 1.25rem;
@@ -193,7 +195,7 @@
   justify-content: center;
   align-items: center;
   gap: .5rem;
-  width: min(100%, 10rem);
+  width: min(100%, 14rem);
   padding: .5rem;
   font-size: clamp(1rem, 5vw, 1.35rem);
   font-weight: 600;
@@ -279,13 +281,17 @@
 }
 
 .de-emergency-emergency-status__header-kMlO0G {
-  color: var(--de-emergency-on-red, #fff);
   background: var(--de-emergency-primary, #007bff);
   border-radius: .5rem;
   grid-template-columns: 1fr .5fr .5fr .5fr;
   align-items: center;
+  padding: .5rem 1rem;
   font-weight: 500;
   display: grid;
+
+  & .de-emergency-emergency-status__cell-text-kMlO0G {
+    color: var(--de-emergency-primary-foreground, #3d4461);
+  }
 }
 
 .de-emergency-emergency-status__body-kMlO0G {
@@ -306,6 +312,7 @@
   border-radius: .5rem;
   grid-template-columns: 1fr .5fr .5fr .5fr;
   align-items: center;
+  padding: .5rem;
   transition: background-color .125s ease-out;
   display: grid;
 }
@@ -347,7 +354,9 @@
 
 .de-emergency-status-icon-kMlO0G {
   border-radius: 50%;
-  font-size: clamp(.9rem, 5vw, 1.25rem);
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: clamp(1rem, 5vw, 1.5rem);
   display: inline-flex;
 }
 
@@ -363,74 +372,12 @@
   color: var(--de-emergency-red, red);
 }
 
-.de-emergency-emergency-status__message-row-kMlO0G {
-  background: var(--de-emergency-white, #fff);
-  outline: 1px dashed var(--de-emergency-gray-medium, #5555);
-  border-radius: .5rem;
-  justify-content: space-between;
-  align-items: center;
-  gap: .5rem;
-  padding: .5rem;
-  display: flex;
-}
-
-.de-emergency-emergency-status__message-row--success-kMlO0G {
-  outline-color: var(--de-emergency-success, #4cd03a);
-}
-
-.de-emergency-emergency-status__message-row--failed-kMlO0G {
-  outline-color: var(--de-emergency-red, red);
-}
-
-.de-emergency-emergency-status__message-text-container-kMlO0G {
-  align-items: center;
-  gap: .5rem;
-  margin: 0;
-  display: flex;
-}
-
-.de-emergency-emergency-status__message-icon-kMlO0G {
-  flex: none;
-}
-
-.de-emergency-emergency-status__message-icon--success-kMlO0G {
-  color: var(--de-emergency-success, #4cd03a);
-}
-
-.de-emergency-emergency-status__message-icon--failed-kMlO0G {
-  color: var(--de-emergency-red, red);
-}
-
-.de-emergency-emergency-status__message-text-kMlO0G {
-  text-align: left;
-  font-size: clamp(.75rem, 3vw, .9rem);
-}
-
-.de-emergency-emergency-status__message-sent-at-kMlO0G {
-  display: block;
-}
-
-.de-emergency-sent-at--verified-kMlO0G {
-  color: var(--de-emergency-green, green);
-  background: var(--de-emergency-success-soft, #dcffd8);
-  border-radius: .25rem;
-  flex-direction: row-reverse;
-  align-items: center;
-  gap: .25rem;
-  padding: .25rem .5rem;
-  font-size: clamp(.6rem, 2.5vw, .75rem);
-  display: flex;
-}
-
-.de-emergency-sent-at--verified-kMlO0G svg {
-  color: var(--de-emergency-green, green);
-}
-
 .de-emergency-emergency-status-panel__refresh-btn-container-kMlO0G {
   flex-direction: row-reverse;
   justify-content: space-between;
   align-items: center;
   gap: .5rem;
+  margin-block-start: .75rem;
   display: flex;
 }
 
@@ -476,6 +423,7 @@
 
 .de-emergency-emergency-status__loading-kMlO0G {
   border-radius: .5rem;
+  flex-direction: column;
   justify-content: center;
   align-self: center;
   align-items: center;
@@ -488,8 +436,8 @@
   border: .1875rem solid #ccc;
   border-top-color: var(--de-emergency-primary, #007bff);
   border-radius: 50%;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
   animation: 1s linear infinite de-emergency-de-emergency-spin-kMlO0G;
   display: inline-block;
 }
@@ -590,6 +538,11 @@
   font-size: 3rem;
   animation: 2s infinite de-emergency-de-emergency-pulse-kMlO0G;
   display: flex;
+
+  & svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 }
 
 .de-emergency-simulacrum-success-message__icon-kMlO0G {
@@ -608,7 +561,7 @@
   flex-direction: column;
   flex: 1;
   align-items: center;
-  gap: 1rem;
+  gap: .5rem;
   display: flex;
 }
 
@@ -631,14 +584,15 @@
   color: var(--de-emergency-text, #3d4461);
   text-align: center;
   opacity: .95;
+  text-wrap: pretty;
   margin: 0;
   line-height: 1.4;
 }
 
 .de-emergency-simulacrum-success-message__details-kMlO0G, .de-emergency-emergency-error-message__details-kMlO0G {
   flex-direction: column;
-  gap: .5rem;
-  margin-top: 2.5rem;
+  gap: .25rem;
+  margin-block-start: 1.75rem;
   display: flex;
 }
 
@@ -659,141 +613,123 @@
 
 .de-emergency-emergency-confirmation-kMlO0G {
   z-index: 30;
-  background: #0f0f0f8c;
+  background: #00000080;
   justify-content: center;
   align-items: center;
-  padding: 1.5rem;
-  animation: .25s ease-out de-emergency-de-emergency-fade-in-kMlO0G;
+  padding: .5rem;
+  animation: .15s linear de-emergency-de-emergency-fade-in-kMlO0G;
   display: flex;
   position: absolute;
   inset: 0;
 }
 
 .de-emergency-emergency-confirmation__card-kMlO0G {
-  text-align: center;
   background: var(--de-emergency-white, #fff);
-  border-top: .35rem solid var(--de-emergency-primary, #007bff);
   border-radius: var(--de-emergency-radius, .5rem);
+  border: 1px solid #0000002d;
   flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  width: min(100%, 22rem);
-  padding: 1.5rem;
-  animation: .3s ease-out de-emergency-de-emergency-slide-in-kMlO0G;
+  width: min(100%, 31.25rem);
   display: flex;
-  box-shadow: 0 20px 60px #0000004d;
 }
 
-.de-emergency-emergency-confirmation__card--danger-kMlO0G {
-  border-top-color: var(--de-emergency-error, #dc3545);
-}
-
-.de-emergency-emergency-confirmation__icon-kMlO0G {
-  width: 3.5rem;
-  height: 3.5rem;
-  color: var(--de-emergency-primary, #007bff);
-  background: #007bff1a;
-  border-radius: 50%;
+.de-emergency-emergency-confirmation__body-kMlO0G {
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  font-size: 2rem;
+  gap: .75rem;
+  width: 100%;
+  min-height: 15rem;
+  padding: .75rem;
   display: flex;
 }
 
-.de-emergency-emergency-confirmation__card--danger-kMlO0G .de-emergency-emergency-confirmation__icon-kMlO0G {
-  color: var(--de-emergency-error, #dc3545);
-  background: #dc35451a;
+.de-emergency-emergency-confirmation__icon-kMlO0G {
+  opacity: .75;
+  font-size: 4rem;
+  line-height: 1;
+}
+
+.de-emergency-emergency-confirmation__icon-kMlO0G svg {
+  width: 1em;
+  height: 1em;
+}
+
+.de-emergency-emergency-confirmation__icon--danger-kMlO0G {
+  color: var(--de-emergency-red, red);
+}
+
+.de-emergency-emergency-confirmation__icon--information-kMlO0G {
+  color: var(--de-emergency-information, #3fabf3);
 }
 
 .de-emergency-emergency-confirmation__title-kMlO0G {
+  text-align: center;
+  color: var(--de-emergency-text, #3d4461);
   margin: 0;
-  font-size: clamp(1.15rem, 4vw, 1.4rem);
+  font-size: clamp(1.25rem, 2.25vw, 1.5rem);
   font-weight: 600;
 }
 
 .de-emergency-emergency-confirmation__text-kMlO0G {
-  color: var(--de-emergency-text, #3d4461);
+  text-align: center;
+  text-wrap: stable;
+  width: min(100%, 22rem);
   margin: 0;
-  font-size: .95rem;
-  line-height: 1.5;
+  font-size: clamp(.875rem, 1.5vw, 1rem);
+  font-weight: 300;
 }
 
-.de-emergency-emergency-confirmation__actions-kMlO0G {
-  flex-wrap: wrap;
+.de-emergency-emergency-confirmation__footer-kMlO0G {
+  flex-direction: row-reverse;
   justify-content: center;
+  align-items: center;
   gap: .75rem;
   width: 100%;
+  padding: 1rem;
   display: flex;
 }
 
 .de-emergency-emergency-confirmation__button-kMlO0G {
-  white-space: nowrap;
-  border-radius: .5rem;
-  flex: 1;
+  text-align: center;
+  text-transform: capitalize;
+  vertical-align: middle;
+  border: 2px solid;
+  border-radius: .25rem;
+  flex: 1 1 0;
   min-width: 8rem;
-  padding: .75rem 1rem;
-  font-weight: 600;
+  padding: .5rem;
+  font-size: 1rem;
+  font-weight: 400;
+  transition: all .125s ease-in-out;
 }
 
 .de-emergency-emergency-confirmation__button--cancel-kMlO0G {
   color: var(--de-emergency-text, #3d4461);
-  background: var(--de-emergency-white-soft, #f7f7f7);
-  border: 1px solid var(--de-emergency-gray-medium, #5555);
+  border-color: #0000;
+}
+
+.de-emergency-emergency-confirmation__button--cancel-kMlO0G:hover {
+  background: var(--de-emergency-background, #f5f5f5);
 }
 
 .de-emergency-emergency-confirmation__button--confirm-kMlO0G {
   color: var(--de-emergency-on-red, #fff);
-  background: var(--de-emergency-primary, #007bff);
+  background: var(--de-emergency-information, #3fabf3);
+  border-color: var(--de-emergency-information, #3fabf3);
 }
 
 .de-emergency-emergency-confirmation__button--danger-kMlO0G {
   color: var(--de-emergency-on-red, #fff);
-  background: var(--de-emergency-error, #dc3545);
-}
-
-.de-emergency-emergency-confirmation__button-kMlO0G:focus-visible {
-  outline: 2px solid var(--de-emergency-text, #3d4461);
-  outline-offset: 2px;
-}
-
-.de-emergency-emergency-fallback-kMlO0G {
-  text-align: left;
-  background: var(--de-emergency-white-soft, #f7f7f7);
-  border: 1px solid var(--de-emergency-gray-medium, #5555);
-  border-radius: var(--de-emergency-radius, .5rem);
-  flex-direction: column;
-  gap: .5rem;
-  width: min(100%, 22rem);
-  padding: 1rem;
-  display: flex;
-}
-
-.de-emergency-emergency-fallback__title-kMlO0G {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
+  background: var(--de-emergency-red, red);
+  border-color: var(--de-emergency-red, red);
 }
 
-.de-emergency-emergency-fallback__text-kMlO0G {
-  color: var(--de-emergency-text-secondary, #686868);
-  margin: 0;
-  font-size: .9rem;
-  line-height: 1.45;
+.de-emergency-emergency-confirmation__button--danger-kMlO0G:hover {
+  background: var(--de-emergency-red-pressed, #e33327);
+  border-color: var(--de-emergency-red-pressed, #e33327);
 }
 
-.de-emergency-emergency-fallback__phone-kMlO0G {
-  color: var(--de-emergency-on-red, #fff);
-  background: var(--de-emergency-primary, #007bff);
-  border-radius: .5rem;
-  justify-content: center;
-  align-items: center;
-  padding: .65rem 1rem;
-  font-weight: 600;
-  text-decoration: none;
-  display: inline-flex;
-}
-
-.de-emergency-emergency-fallback__phone-kMlO0G:focus-visible {
+.de-emergency-emergency-confirmation__button-kMlO0G:focus-visible {
   outline: 2px solid var(--de-emergency-text, #3d4461);
   outline-offset: 2px;
 }
@@ -931,6 +867,12 @@
   left: 100%;
 }
 
+@media (width >= 601px) {
+  .de-emergency-emergency-confirmation__card-kMlO0G {
+    width: min(100%, 28rem);
+  }
+}
+
 @media (width <= 600px) {
   .de-emergency-emergency-status__panel-kMlO0G {
     width: 100%;
@@ -938,7 +880,11 @@
   }
 
   .de-emergency-emergency-status-panel__refresh-btn-container-kMlO0G {
-    justify-content: center;
+    justify-content: space-between;
+
+    & .de-emergency-emergency-status__loading-kMlO0G {
+      flex-direction: row;
+    }
   }
 
   .de-emergency-emergency-status-panel__refresh-btn-kMlO0G {
@@ -951,6 +897,10 @@
     font-size: clamp(.75rem, 3vw, .95rem);
   }
 
+  .de-emergency-emergency-status__header-kMlO0G {
+    padding: .25rem .75rem;
+  }
+
   .de-emergency-emergency-status__cell-kMlO0G, .de-emergency-emergency-status__cell-text-kMlO0G {
     padding: .25rem;
   }
@@ -971,7 +921,6 @@
   }
 
   .de-emergency-emergency-panel__button-kMlO0G {
-    width: min(100%, 9rem);
     font-size: 1rem;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataemergencia/emergency",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Framework-agnostic emergency client for DataEmergencia, with a mountable React panel and an IIFE build.",
   "license": "MIT",
   "type": "module",
@@ -74,7 +74,8 @@
     "example:vanilla:mock": "node examples/vanilla/mock-bff.mjs",
     "lab": "vp dev",
     "release": "bash ./scripts/release.sh",
-    "split": "bash ./scripts/split.sh"
+    "split": "bash ./scripts/split.sh",
+    "bump": "pnpm version --no-git-tag-version"
   },
   "dependencies": {
     "axios": "^1.20.0",