Add icons to explanation

Cheers Phosphor!

Cargo.toml

@@ -16,4 +16,5 @@ lazy_static = "1.4.0"
 leptos = { version = "0.5.4", features = ["csr", "nightly"] }
 leptos_meta = { version = "0.5.4", features = ["csr"] }
 log = "0.4.20"
+phosphor-leptos = "0.2.1"
 regex = "1.10.2"

index.html

@@ -187,31 +187,54 @@
     text-decoration: underline #002266 0.2em;
     background-color: #aaddff;
   }
-  .identifier-unknown {
+  .identifier-valid {
     text-decoration: underline #777700 0.2em;
     background-color: #ffffbb;
   }
   .identifier-invalid {
     text-decoration: underline #770000 0.2em;
     background-color: #ffbbbb;
   }
+  .explanation-icon.verified { color: #007700; }
+  .explanation-icon.ok       { color: #002266; }
+  .explanation-icon.valid    { color: #777700; }
+  .explanation-icon.invalid  { color: #770000; }
   .explanation-box {
     padding: 1em;
     border-radius: 0.5em;
     align-self: start;
+    display: grid;
+    column-gap: 0.5em;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1em 1fr;
+    grid-template-areas: "icon headline"
+                         "icon explanation"
   }
   .explanation-box.verified  { background-color: #bbffbb; }
   .explanation-box.ok        { background-color: #aaddff; }
   .explanation-box.valid     { background-color: #ffffbb; }
   .explanation-box.invalid   { background-color: #ffbbbb; }
   .headline {
     font-weight: bold;
-    margin: 1em;
+    grid-area: headline;
   }
   .explanation {
-    margin: 1em;
+    grid-area: explanation;
   }
-
+  .explanation-icon {
+    width: 2em;
+    height: 2em;
+    grid-area: icon;
+    align-self: center;
+    justify-self: center;
+    /* animation: animate-pop 0.5s ease-out;*/
+  }
+  /*
+  @keyframes animate-pop {
+    0%   { opacity: 0.0; transform: scale(0.5, 0.5); }
+    100% { opacity: 1.0; transform: scale(1.0, 1.0); }
+  }
+  */
   </style>
 
 </head>

src/main.rs

@@ -247,7 +247,7 @@ fn Purl(
                 status = match eval_type() {
                     EvalResult::Verified(_) => "identifier-verified",
                     EvalResult::ProbablyOk(_) => "identifier-ok",
-                    EvalResult::AtLeastValid(_) => "identifier-unknown",
+                    EvalResult::AtLeastValid(_) => "identifier-valid",
                     EvalResult::Invalid(_) => "identifier-invalid",
                 }
             )
@@ -315,14 +315,15 @@ fn Purl(
             // {subpath_rendered()}
         </div>
         { move || {
-            let (class, headline, message) = match eval_type() {
-                EvalResult::Verified(s) => ("verified", "verified", s),
-                EvalResult::ProbablyOk(s) => ("ok", "ok", s),
-                EvalResult::AtLeastValid(s) => ("valid", "valid", s),
-                EvalResult::Invalid(s) => ("invalid", "invalid", s),
+            let (class, icon, headline, message) = match eval_type() {
+                EvalResult::Verified(s) => ("verified", view!{<phosphor_leptos::Checks class="explanation-icon verified" weight=phosphor_leptos::IconWeight::Bold />}, "verified", s),
+                EvalResult::ProbablyOk(s) => ("ok", view!{<phosphor_leptos::Check class="explanation-icon ok" weight=phosphor_leptos::IconWeight::Bold />}, "ok", s),
+                EvalResult::AtLeastValid(s) => ("valid", view!{<phosphor_leptos::Question class="explanation-icon valid" weight=phosphor_leptos::IconWeight::Bold />}, "valid", s),
+                EvalResult::Invalid(s) => ("invalid", view!{<phosphor_leptos::Warning class="explanation-icon invalid" weight=phosphor_leptos::IconWeight::Bold />}, "invalid", s),
             };
             view !{
                 <div class=format!("explanation-box {class}")>
+                    {icon}
                     <span class="headline">{headline}</span>
                     <span class="explanation">{message}</span>
                 </div>