From 0316f480d6d7b47961af6928a095fe997400a751 Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Fri, 21 Jun 2024 14:01:26 -0700
Subject: [PATCH] refactor: Add icons to policy conditions (#5486)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As I was taking screenshots of the new policy conditions feature I
realized it would be quick and easy to add icons corresponding to the
titles to continue the theme of adding visual hints to break up the
text-heavy sections.

It also looks nice in the screenshots for the blog post and newsletter
posts.

<img width="669" alt="Screenshot 2024-06-21 at 10 00 14 AM"
src="https://github.com/firezone/firezone/assets/167144/61d5d61d-4d4c-4f6f-b325-dbcb81c2c9b7">
---
 .../apps/web/lib/web/live/policies/components.ex | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/elixir/apps/web/lib/web/live/policies/components.ex b/elixir/apps/web/lib/web/live/policies/components.ex
index 041c08858..b07e29826 100644
--- a/elixir/apps/web/lib/web/live/policies/components.ex
+++ b/elixir/apps/web/lib/web/live/policies/components.ex
@@ -294,7 +294,9 @@ defmodule Web.Policies.Components do
         }
       >
         <legend class="flex justify-between items-center text-neutral-700">
-          Client location
+          <span class="flex items-center">
+            <.icon name="hero-globe-americas" class="w-5 h-5 mr-2" /> Client location
+          </span>
           <span class="shadow bg-white w-6 h-6 flex items-center justify-center rounded-full">
             <.icon
               id="policy_conditions_remote_ip_location_region_chevron"
@@ -379,7 +381,9 @@ defmodule Web.Policies.Components do
         }
       >
         <legend class="flex justify-between items-center text-neutral-700">
-          IP address
+          <span class="flex items-center">
+            <.icon name="hero-globe-alt" class="w-5 h-5 mr-2" /> IP address
+          </span>
           <span class="shadow bg-white w-6 h-6 flex items-center justify-center rounded-full">
             <.icon id="policy_conditions_remote_ip_chevron" name="hero-chevron-down" class="w-5 h-5" />
           </span>
@@ -460,7 +464,9 @@ defmodule Web.Policies.Components do
         }
       >
         <legend class="flex justify-between items-center text-neutral-700">
-          Authentication Provider
+          <span class="flex items-center">
+            <.icon name="hero-identification" class="w-5 h-5 mr-2" /> Identity provider
+          </span>
           <span class="shadow bg-white w-6 h-6 flex items-center justify-center rounded-full">
             <.icon
               id="policy_conditions_provider_id_chevron"
@@ -555,7 +561,9 @@ defmodule Web.Policies.Components do
         }
       >
         <legend class="flex justify-between items-center text-neutral-700">
-          Current time
+          <span class="flex items-center">
+            <.icon name="hero-clock" class="w-5 h-5 mr-2" /> Current time
+          </span>
           <span class="shadow bg-white w-6 h-6 flex items-center justify-center rounded-full">
             <.icon
               id="policy_conditions_current_utc_datetime_chevron"