refactor: Add icons to policy conditions (#5486)

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">
This commit is contained in:
Jamil
2024-06-21 14:01:26 -07:00
committed by GitHub
parent 15ad02e45f
commit 0316f480d6

View File

@@ -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"