Improved style of settings page

app/assets/javascripts/components/features/account/components/action_bar.jsx

@@ -34,8 +34,8 @@ const ActionBar = React.createClass({
     }
 
     return (
-      <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px', lineHeight: '36px' }}>
+      <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto' }}>
-        {actionButton} <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase' }}>{infoText}</span>
+        {actionButton} <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase', float: 'right', display: 'block' }}>{infoText}</span>
       </div>
     );
   },

app/assets/stylesheets/application.scss

@@ -127,7 +127,23 @@ body {
     margin-bottom: 15px;
   }
 
-  input[type=text], input[type=email], input[type=password] {
+  .file-field {
+    padding: 15px 0;
+
+    label {
+      font-family: 'Roboto';
+      font-size: 16px;
+      color: #fff;
+      width: 100px;
+      display: inline-block;
+    }
+
+    input[type=file] {
+      width: 280px;
+    }
+  }
+
+  input[type=text], input[type=email], input[type=password], textarea {
     background: transparent;
     border: 0;
     border-bottom: 2px solid #9baec8;
@@ -137,6 +153,7 @@ body {
     display: block;
     width: 100%;
     outline: 0;
+    font-family: 'Roboto';
 
     &:invalid {
       box-shadow: none;

app/controllers/settings_controller.rb

@@ -1,4 +1,6 @@
 class SettingsController < ApplicationController
+  layout 'auth'
+  
   before_action :authenticate_user!
   before_action :set_account
 

app/views/settings/show.html.haml

@@ -1,14 +1,17 @@
 - content_for :page_title do
   Edit profile
 
-= simple_form_for @account, url: settings_path, method: :put do |f|
+= form_for @account, url: settings_path, html: { method: :put } do |f|
-  = f.error_notification
+  .field
+    = f.text_field :display_name, placeholder: 'Display name'
+  .field
+    = f.text_area :note, placeholder: 'Bio'
+  .file-field
+    = f.label :avatar
+    = f.file_field :avatar
+  .file-field
+    = f.label :header
+    = f.file_field :header
 
-  .form-inputs
+  .actions
-    = f.input :display_name
+    = f.button 'Save changes', type: :submit 
-    = f.input :note
-    = f.input :avatar
-    = f.input :header
-
-  .form-actions
-    = f.button :submit, 'Save changes'