Improve profile page UI

app/assets/stylesheets/pages/profile.scss

@@ -53,3 +53,25 @@
   float: right;
   font-size: 12px;
 }
+
+.profile-link-holder {
+  display: inline;
+
+  &:after {
+    content: "\00B7";
+    padding: 0px 6px;
+    font-weight: bold;
+  }
+
+  &:last-child {
+    &:after {
+      content: "";
+      padding: 0;
+    }
+  }
+
+  a {
+    color: $blue-dark;
+    text-decoration: none;
+  }
+}

app/views/users/show.html.haml

@@ -24,21 +24,26 @@
 
   .cover-desc
     - unless @user.public_email.blank?
+      .profile-link-holder
         = link_to @user.public_email, "mailto:#{@user.public_email}"
     - unless @user.skype.blank?
-      ·
-      = link_to "Skype", "skype:#{@user.skype}"
+      .profile-link-holder
+        = link_to "skype:#{@user.skype}", title: "Skype" do
+          = icon('skype')
     - unless @user.linkedin.blank?
-      ·
-      = link_to "LinkedIn", "http://www.linkedin.com/in/#{@user.linkedin}"
+      .profile-link-holder
+        = link_to "http://www.linkedin.com/in/#{@user.linkedin}", title: "LinkedIn" do
+          = icon('linkedin-square')
     - unless @user.twitter.blank?
-      ·
-      = link_to "Twitter", "http://www.twitter.com/#{@user.twitter}"
+      .profile-link-holder
+        = link_to "http://www.twitter.com/#{@user.twitter}", title: "Twitter" do
+          = icon('twitter-square')
     - unless @user.website_url.blank?
-      ·
+      .profile-link-holder
         = link_to @user.short_website_url, @user.full_website_url
     - unless @user.location.blank?
-      ·
+      .profile-link-holder
+        = icon('map-marker')
         = @user.location