Use heroicons for issues

dainst · Jun 10, 2024 · 1d10d11 · 1d10d11
1 parent 6145e65
commit 1d10d11
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 51 deletions.
diff --git a/server/assets/css/app.css b/server/assets/css/app.css
@@ -8,27 +8,33 @@
   border: 1px solid transparent;
   border-radius: 4px;
 }
+
 .alert-info {
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
 }
+
 .alert-warning {
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
 }
+
 .alert-danger {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
 }
+
 .alert p {
   margin-bottom: 0;
 }
+
 .alert:empty {
   display: none;
 }
+
 .invalid-feedback {
   color: #a94442;
   display: block;
@@ -46,20 +52,20 @@
   transition: opacity 1s ease-out;
 }
 
-.phx-loading{
+.phx-loading {
   cursor: wait;
 }
 
 .phx-modal {
-  opacity: 1!important;
+  opacity: 1 !important;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .phx-modal-content {
@@ -95,28 +101,53 @@
 .fade-in {
   animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
 }
+
 .fade-out {
   animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
 }
 
-@keyframes fade-in-scale-keys{
-  0% { scale: 0.95; opacity: 0; }
-  100% { scale: 1.0; opacity: 1; }
+@keyframes fade-in-scale-keys {
+  0% {
+    scale: 0.95;
+    opacity: 0;
+  }
+
+  100% {
+    scale: 1.0;
+    opacity: 1;
+  }
 }
 
-@keyframes fade-out-scale-keys{
-  0% { scale: 1.0; opacity: 1; }
-  100% { scale: 0.95; opacity: 0; }
+@keyframes fade-out-scale-keys {
+  0% {
+    scale: 1.0;
+    opacity: 1;
+  }
+
+  100% {
+    scale: 0.95;
+    opacity: 0;
+  }
 }
 
-@keyframes fade-in-keys{
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+@keyframes fade-in-keys {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
 
-@keyframes fade-out-keys{
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+@keyframes fade-out-keys {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
 }
 
 :root {
@@ -172,6 +203,18 @@ nav {
   display: none;
 }
 
+.issue-group h3 div img {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  top: 0.1em;
+  margin-right: 0.25em;
+}
+
+.issue-group h3 div {
+  cursor: pointer;
+}
+
 .monitoring-issue {
   text-align: center;
   border-radius: 5px;
@@ -187,7 +230,7 @@ nav {
 }
 
 .monitoring-issue.error {
-  background-color: rgb(253, 53, 53); 
+  background-color: rgb(253, 53, 53);
   color: white;
 }
 
@@ -213,33 +256,13 @@ nav {
   border-color: transparent #000000 transparent #000000;
   display: block;
 }
+
 @keyframes issue-loading-anim {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
-}
-
-.folder-icon::before{ 
-  content: "";
-  background-image:url(/images/icon_folder.png);
-  background-size: 100% 100%;
-  display: inline-block;
-  height: 25px;
-  width:25px;
-  position:relative;
-  top:5px;
-}
-
-.open-folder-icon::before{
-  content: "";
-  background-image: url(/images/icon_open_folder.png);
-  background-size: 100% 100%;
-  display: inline-block;
-  height: 25px;
-  width:25px;
-  position:relative;
-  top:5px;
 }
diff --git a/server/lib/field_hub_web/live/project_show_live.html.heex b/server/lib/field_hub_web/live/project_show_live.html.heex
@@ -109,19 +109,19 @@
                 <%= "None." %>
             <% issue_groups -> %>
                 <%= for {{type, severity}, issues} <- issue_groups do %>
-                <section id={"#{type}-issue-group"} class="issue-group hide">
-                <h3 class={issue_classes(severity)}>
-                    <span class="show-toggle folder-icon" style="cursor: pointer;" phx-click={JS.remove_class("hide", to: "##{type}-issue-group")}>
-                        <%= get_issue_type_label(type) %> (<%= Enum.count(issues) %>)
-                    </span>
-                    <span class="hide-toggle open-folder-icon" style="cursor: pointer;" phx-click={JS.add_class("hide", to: "##{type}-issue-group")}>
-                        <%= get_issue_type_label(type) %> (<%= Enum.count(issues) %>)
-                    </span>
-                </h3>
-
-                <.live_component module={ProjectShowLiveIssues} id={type} issues={issues} project={@project} />
-
-                </section>
+                    <section id={"#{type}-issue-group"} class="issue-group hide">
+                        <h3 class={issue_classes(severity)}>
+                            <div class="show-toggle" phx-click={JS.remove_class("hide", to: "##{type}-issue-group")}>
+                                <img src="/images/hero-icons/folder.svg"/><%= get_issue_type_label(type) %> (<%= Enum.count(issues) %>)
+                            </div>
+                            <div class="hide-toggle" phx-click={JS.add_class("hide", to: "##{type}-issue-group")}>
+                                <img src="/images/hero-icons/folder-open.svg"/><%= get_issue_type_label(type) %> (<%= Enum.count(issues) %>)
+                            </div>
+                        </h3>
+
+                        <.live_component module={ProjectShowLiveIssues} id={type} issues={issues} project={@project} />
+
+                    </section>
                 <% end %>
         <% end %>
     </section>