Convert profile page to Bootstrap classes

app/views/members/show.html.haml

@@ -1,3 +1,52 @@
-= render partial: 'shared/title', locals: { title: "My Profile", date: nil }
-#member_profile
-  = render partial: 'members/show', locals: { member: @member }
+.container-fluid.stripe.reverse
+  .row.align-items-center
+    .col-auto
+      = image_tag(@member.avatar(80), alt: @member.full_name, class: 'rounded-circle mb-2')
+    .col-auto
+      %h2.mb-0= @member.full_name
+      %small
+        Member since
+        %em #{l(@member.created_at, format: :website_format)}
+
+.container-fluid#member_profile
+  .row
+    .col-12.col-md-7.mb-4
+      %h4 Details
+      %dl
+        - if @member.pronouns.present?
+          %dt Pronouns
+          %dd= @member.pronouns || 'Not specified'
+
+        %dt Email
+        %dd= mail_to @member.email, @member.email
+
+        %dt Twitter handle
+        %dd= link_to "@#{@member.twitter}", twitter_url_for(@member.twitter)
+
+        %dt Phone number
+        %dd= @member.mobile || 'N/A'
+
+        %dt About
+        %dd= @member.about_you
+
+        - if @member.skills.any?
+          %dt Skills
+          %dd
+            - @member.skills.each do |skill|
+              .badge.bg-secondary= skill.name
+
+      = link_to 'Update your details', edit_member_path, class: 'btn btn-primary', role: 'button'
+
+    .col-12.col-md-4.offset-md-1.mb-4
+      - if @member.groups.any?
+        %h4 Subscriptions
+        %ul.list-unstyled.ml-0
+          - @member.groups.each do |group|
+            %li
+              = link_to chapter_path(group.chapter.slug) do
+                #{group.name} (#{group.chapter.name})
+      - else
+        %i.fa.fa-warning
+        %small You are not subscribed to any groups.
+
+      = link_to 'Manage subscriptions', subscriptions_path, class: 'btn btn-secondary btn-sm', role: 'button'