From 95bfe6b7c2dd9aa4e15268c02ef5131298c76fe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Charvet=20=E9=BB=91=E7=93=9C?=
 <greg@geekingfrog.com>
Date: Wed, 12 Jun 2024 11:52:57 +0100
Subject: [PATCH] Fix contributor tab css and icons (#325)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Wrap the content into a container

* Swap the icons for free ones

A few that were missed during
https://github.com/beyond-all-reason/teiserver/pull/313

* Apply mix format

---------

Co-authored-by: Dominik Stańczak-Marikin <stanczakdominik@gmail.com>
---
 .../account/profile/contributor.html.heex     | 86 ++++++++++---------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/lib/teiserver_web/live/account/profile/contributor.html.heex b/lib/teiserver_web/live/account/profile/contributor.html.heex
index 5cec833f9..c2f2cfe05 100644
--- a/lib/teiserver_web/live/account/profile/contributor.html.heex
+++ b/lib/teiserver_web/live/account/profile/contributor.html.heex
@@ -12,51 +12,53 @@
   }
 </style>
 
-<div class="row mt-2 mb-3">
-  <div class="col">
-    <h4>User flag</h4>
-    <%= if @show_flag_config do %>
-      You can enter any
-      <a href="https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes">
-        ISO Country code <Fontawesome.icon icon="arrow-up-right-from-square" style="regular" />
-      </a>
-      and even a few extra ones. <br /><br />
-      Your current country code is: "<span class="monospace"><%= @country_code %></span>".
-      <br /><br />
+<div class="container card">
+  <div class="row mt-2 mb-3">
+    <div class="col">
+      <h4>User flag</h4>
+      <%= if @show_flag_config do %>
+        You can enter any
+        <a href="https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes">
+          ISO Country code <Fontawesome.icon icon="arrow-up-right-from-square" style="solid" />
+        </a>
+        and even a few extra ones. <br /><br />
+        Your current country code is: "<span class="monospace"><%= @country_code %></span>".
+        <br /><br />
 
-      <input
-        type="text"
-        name="country_code"
-        value={@temp_country_code}
-        class="form-control"
-        style="max-width: 150px;"
-        phx-keyup="set-temp_country_code"
-      />
+        <input
+          type="text"
+          name="country_code"
+          value={@temp_country_code}
+          class="form-control"
+          style="max-width: 150px;"
+          phx-keyup="set-temp_country_code"
+        />
 
-      <%= if @error_message do %>
-        <div class="text-danger">
-          <%= @error_message %>
+        <%= if @error_message do %>
+          <div class="text-danger">
+            <%= @error_message %>
+          </div>
+        <% end %>
+
+        <div :if={@temp_country_code && @country_code != @temp_country_code} class="pt-2">
+          <span class="btn btn-secondary" phx-click="revert-country_code">
+            <Fontawesome.icon icon="cancel" style="solid" size="2x" /><br />
+            Revert to <%= @country_code %>
+          </span>
+          &nbsp;&nbsp;&nbsp;
+          <span class="btn btn-secondary" phx-click="clear-country_code">
+            <Fontawesome.icon icon="arrow-rotate-left" style="solid" size="2x" /><br /> Clear
+          </span>
+          &nbsp;&nbsp;&nbsp;
+          <span class="btn btn-success" phx-click="save-country_code">
+            <Fontawesome.icon icon="check" style="solid" size="2x" /><br /> Save changes
+          </span>
         </div>
+      <% else %>
+        You have currently set your profile to hide your flag and thus cannot select a custom one. To undo this please
+        <a href={~p"/account/settings"}>settings page</a>
+        to alter this.
       <% end %>
-
-      <div :if={@temp_country_code && @country_code != @temp_country_code} class="pt-2">
-        <span class="btn btn-secondary" phx-click="revert-country_code">
-          <Fontawesome.icon icon="cancel" style="regular" size="2x" /><br />
-          Revert to <%= @country_code %>
-        </span>
-        &nbsp;&nbsp;&nbsp;
-        <span class="btn btn-secondary" phx-click="clear-country_code">
-          <Fontawesome.icon icon="arrow-rotate-left" style="regular" size="2x" /><br /> Clear
-        </span>
-        &nbsp;&nbsp;&nbsp;
-        <span class="btn btn-success" phx-click="save-country_code">
-          <Fontawesome.icon icon="check" style="solid" size="2x" /><br /> Save changes
-        </span>
-      </div>
-    <% else %>
-      You have currently set your profile to hide your flag and thus cannot select a custom one. To undo this please
-      <a href={~p"/account/settings"}>settings page</a>
-      to alter this.
-    <% end %>
+    </div>
   </div>
 </div>