UI tweaks

misago/static/misago/css/misago/usercp.less

@@ -18,13 +18,32 @@
         a, .btn-link {
           display: inline-block;
           margin: 0px;
-          padding: 0px;
+          padding: 0px 0px;
 
+          color: @gray-light;
           line-height: @line-height-computed;
+
+          &:hover, &:focus {
+            color: @text-color;
+            text-decoration: none;
+
+            .fa {
+              color: @brand-primary
+            }
+          }
+
+          &:active {
+            color: @text-color;
+            text-decoration: none;
+
+            .fa {
+              color: @brand-primary
+            }
+          }
         }
 
         a {
-          padding: 1px 0px;
+          padding: 1px;
         }
       }
     }
@@ -147,6 +166,8 @@
     margin-left: auto;
     margin-right: auto;
 
+    text-align: center;
+
     .cropped-image-border {
       background-color: @form-panel-bg;
       border-radius: @border-radius-small;
@@ -154,5 +175,11 @@
       padding: 4px;
       margin-bottom: @line-height-computed / 2;
     }
+
+    .btn-primary {
+      display: inline-block;
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 }

misago/templates/misago/usercp/change_avatar.html

@@ -37,12 +37,14 @@
             {% if misago_settings.allow_custom_avatars %}
             <li>
               <button name="dl-gravatar" class="btn btn-link">
+                <span class="fa fa-image fa-fw"></span>
                 {% trans "Download my Gravatar" %}
               </button>
             </li>
             {% endif %}
             <li>
               <button name="set-dynamic" class="btn btn-link">
+                <span class="fa fa-cog fa-fw"></span>
                 {% trans "Generate avatar from my username" %}
               </button>
             </li>
@@ -50,12 +52,14 @@
             {% if has_source_image %}
             <li>
               <a href="{% url 'misago:usercp_crop_avatar' %}">
-                {% trans "Crop my avatar image" %}
+                <span class="fa fa-arrows-alt fa-fw"></span>
+                {% trans "Crop my avatar" %}
               </a>
             </li>
             {% endif %}
             <li>
               <a href="{% url 'misago:usercp_upload_avatar' %}">
+                <span class="fa fa-upload fa-fw"></span>
                 {% trans "Upload image from my device" %}
               </a>
             </li>
@@ -63,6 +67,7 @@
             {% if galleries_exist %}
             <li>
               <a href="{% url 'misago:usercp_avatar_galleries' %}">
+                <span class="fa fa-image fa-fw"></span>
                 {% trans "Pick avatar from gallery" %}
               </a>
             </li>

misago/templates/misago/usercp/crop_avatar.html

@@ -26,7 +26,11 @@
         <div class="cropped-image-border">
           <img id="crop-image" src="{{ avatar_url }}" alt="{% trans "Source image" %}">
         </div>
-        <button class="btn btn-primary btn-block">{% trans "Set avatar" %}</button>
+        {% if crop %}
+        <button class="btn btn-primary">{% trans "Save changes" %}</button>
+        {% else %}
+        <button class="btn btn-primary">{% trans "Set avatar" %}</button>
+        {% endif %}
       </div>
 
     </div>