Adjust UI spacing (#1243)

public/css/main.scss

@@ -25,3 +25,8 @@
     background-color: #503484;
   }
 }
+
+// Add a space after fontawesome icons
+.iconpadding{
+  padding-right: 6px!important;
+}

views/account/forgot.pug

@@ -6,11 +6,11 @@ block content
   form(method='POST')
     input(type='hidden', name='_csrf', value=_csrf)
     p.pb-4 Enter your email address below and we will send you password reset instructions.
-    .form-group.row
+    .form-group.row.row.mb-3
       label.col-md-3.col-form-label.font-weight-bold.text-right(for='email') Email
       .col-md-7
         input.form-control(type='email', name='email', id='email', placeholder='Email', autofocus, autocomplete='email', required)
     .form-group.offset-sm-3.col-md-7.pl-2
       button.btn.btn-primary(type='submit')
-        i.fas.fa-key.fa-sm
+        i.fas.fa-key.fa-sm.iconpadding
         | Reset Password

views/account/login.pug

@@ -16,7 +16,7 @@ block content
     .form-group
       .offset-md-3.col-md-7.pl-2
         button.col-md-3.btn.btn-primary(type='submit')
-          i.far.fa-user.fa-sm
+          i.far.fa-user.fa-sm.iconpadding
           | Login
         a.btn.btn-link(href='/forgot') Forgot your password?
     .form-group

views/account/profile.pug

@@ -10,7 +10,7 @@ block content
       label.col-md-3.col-form-label.font-weight-bold.text-right(for='email') Email
       .col-md-7
         input.form-control(type='email', name='email', id='email', value=user.email, autocomplete='email', required)
-      .offset-sm-3.col-md-7.pl-3
+      .offset-sm-3.col-md-7.pl-3.mb-2
         if user.emailVerified
           .text-success.font-italic
             | Verified
@@ -20,11 +20,11 @@ block content
             a(href='/account/verify') Send verification email
     .form-group.row
       label.col-md-3.col-form-label.font-weight-bold.text-right(for='name') Name
-      .col-md-7
+      .col-md-7.mt-2
         input.form-control(type='text', name='name', id='name', value=user.profile.name, autocomplete='name')
     .form-group.row
       label.col-md-3.col-form-label.font-weight-bold.text-right Gender
-      .col-sm-6
+      .col-sm-6.mt-2
         .form-check.form-check-inline
           input(type='radio', class='form-check-input' checked=user.profile.gender == 'male', name='gender', value='male', data-toggle='radio')
           label.form-check-label Male
@@ -38,20 +38,20 @@ block content
           label.form-check-label Other
     .form-group.row
       label.col-md-3.col-form-label.font-weight-bold.text-right(for='location') Location
-      .col-md-7
+      .col-md-7.mb-2
         input.form-control(type='text', name='location', id='location', value=user.profile.location, autocomplete)
     .form-group.row
       label.col-md-3.col-form-label.font-weight-bold.text-right(for='website') Website
-      .col-md-7
+      .col-md-7.mb-2
         input.form-control(type='text', name='website', id='website', value=user.profile.website, autocomplete='url')
     .form-group.row
       label.col-md-3.col-form-label.font-weight-bold.text-right Gravatar
-      .col-sm-4
+      .col-sm-4.mb-2
         img(src=user.gravatar(), class='profile', width='100', height='100')
     .form-group
       .offset-sm-3.col-md-7.pl-2
         button.btn.btn.btn-primary(type='submit')
-          i.fas.fa-pencil-alt.fa-sm
+          i.fas.fa-pencil-alt.fa-sm.iconpadding
           | Update Profile
 
   .pb-2.mt-2.mb-4.border-bottom
@@ -61,16 +61,16 @@ block content
     input(type='hidden', name='_csrf', value=_csrf)
     .form-group.row
       label.col-md-3.col-form-label.font-weight-bold.text-right(for='password') New Password
-      .col-md-7
+      .col-md-7.mb-2
         input.form-control(type='password', name='password', id='password', autocomplete='new-password', minlength='8', required)
     .form-group.row
       label.col-md-3.col-form-label.font-weight-bold.text-right(for='confirmPassword') Confirm Password
-      .col-md-7
+      .col-md-7.mb-2
         input.form-control(type='password', name='confirmPassword', id='confirmPassword', autocomplete='new-password', minlength='8', required)
     .form-group
       .offset-sm-3.col-md-7.pl-2
         button.btn.btn-primary(type='submit')
-          i.fas.fa-lock.fa-sm
+          i.fas.fa-lock.fa-sm.iconpadding
           | Change Password
 
   .pb-2.mt-2.mb-4.border-bottom
@@ -82,7 +82,7 @@ block content
       input(type='hidden', name='_csrf', value=_csrf)
       .offset-sm-3.col-md-7.pl-2
         button.btn.btn-danger(type='submit')
-          i.fas.fa-trash-alt.fa-sm
+          i.fas.fa-trash-alt.fa-sm.iconpadding
           | Delete my account
 
   .pb-2.mt-2.mb-4.border-bottom

views/account/signup.pug

@@ -19,5 +19,5 @@ block content
         input.form-control(type='password', name='confirmPassword', id='confirmPassword', placeholder='Confirm Password', autocomplete='new-password', minlength='8', required)
     .form-group.offset-sm-3.col-md-7.pl-2
       button.btn.btn-success(type='submit')
-        i.fas.fa-user-plus.fa-sm
+        i.fas.fa-user-plus.fa-sm.iconpadding
         | Signup

views/api/chart.pug

@@ -6,15 +6,15 @@ block head
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fas.fa-chart-bar.fa-sm(style='color: #FF6384').fa-sm
+      i.fas.fa-chart-bar.fa-sm(style='color: #FF6384').fa-sm.iconpadding
       | Chart.js and Alpha Vantage
 
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://www.chartjs.org/docs', target='_blank').w-100
-      i.fas.fa-chart-bar.fa-sm
+      i.fas.fa-chart-bar.fa-sm.iconpadding
       | Chart.js Docs
     a.btn.btn-primary(href='https://www.alphavantage.co/documentation', target='_blank').w-100
-      i.fas.fa-money-check-alt.fa-sm
+      i.fas.fa-money-check-alt.fa-sm.iconpadding
       | Alpha Vantage Docs
   .container
     .mt-2.mb-4

views/api/facebook.pug

@@ -3,17 +3,17 @@ extends ../layout
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fab.fa-facebook-square(style='color: #335397').fa-sm
+      i.fab.fa-facebook-square(style='color: #335397').fa-sm.iconpadding
       | Facebook API
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://developers.facebook.com/docs/graph-api/quickstart/', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Quickstart
     a.btn.btn-primary(href='https://developers.facebook.com/tools/explorer', target='_blank').w-100
-      i.fab.fa-facebook.fa-sm
+      i.fab.fa-facebook.fa-sm.iconpadding
       | Graph API Explorer
     a.btn.btn-primary(href='https://developers.facebook.com/docs/graph-api/reference/', target='_blank').w-100
-      i.fas.fa-code-branch.fa-sm
+      i.fas.fa-code-branch.fa-sm.iconpadding
       | API Reference
 
   h3

views/api/foursquare.pug

@@ -3,18 +3,18 @@ extends ../layout
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fab.fa-foursquare.fa-sm
+      i.fab.fa-foursquare.fa-sm.iconpadding
       | Foursquare API
 
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://developer.foursquare.com/start', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Getting Started
     a.btn.btn-primary(href='https://developer.foursquare.com/docs/explore', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | API Console
     a.btn.btn-primary(href='https://developer.foursquare.com/docs/', target='_blank').w-100
-      i.fas.fa-code-branch.fa-sm  
+      i.fas.fa-code-branch.fa-sm.iconpadding
       | API Endpoints
   h3.text-primary Trending Venues
   table.table.table-striped.table-bordered

views/api/github.pug

@@ -7,13 +7,13 @@ block content
 
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='http://developer.github.com/guides/getting-started/', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Getting Started
     a.btn.btn-primary(href='https://apigee.com/console/github', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | API Console
     a.btn.btn-primary(href='http://developer.github.com/v3/', target='_blank').w-100
-      i.far.fa-file-alt.fa-sm
+      i.far.fa-file-alt.fa-sm.iconpadding
       | Documentation
   br
   .card.text-white.bg-primary

views/api/google-drive.pug

@@ -4,15 +4,15 @@ block content
 
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fab.fa-google.fa-sm
+      i.fab.fa-google-drive.fa-sm.iconpadding
       | Google Drive API
 
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://developers.google.com/drive/api/v3/quickstart/nodejs', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Getting Started
     a.btn.btn-primary(href='https://console.developers.google.com/apis/dashboard', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | API Console
 
   br

views/api/google-maps.pug

@@ -9,15 +9,15 @@ block content
 
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fab.fa-google.fa-sm
+      i.fab.fa-google.fa-sm.iconpadding
       | Google Maps API
 
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://developers.google.com/maps/documentation/javascript/tutorial', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Getting Started
     a.btn.btn-primary(href='https://console.developers.google.com/apis/dashboard', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | API Console
 
   h3 Markers Example

views/api/google-sheets.pug

@@ -4,33 +4,29 @@ block content
 
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fab.fa-google(style='color: #1B4A7D').fa-sm
+      i.fas.fa-table(style='color: #1B4A7D').fa-sm.iconpadding
       | Google Sheets API
   h3
     | API References
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://github.com/googleapis/google-api-nodejs-client#google-apis-nodejs-client', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Getting Started
     a.btn.btn-primary(href='https://console.developers.google.com/apis/dashboard', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | API Console
     a.btn.btn-primary(href='https://www.freecodecamp.org/news/cjn-google-sheets-as-json-endpoint', target='_blank').w-100
-      i.fas.fa-book.fa-sm
+      i.fas.fa-book.fa-sm.iconpadding
       | Exposing your Google Sheets
 
   br
   h3
     | Examples
   p
   | View data from a Google Spreadsheet at
-  a(href='https://docs.google.com/spreadsheets/d/12gm6fRAp0bC8TB2vh7sSPT3V75Ug99JaA9L0PqiWS2s/', target='_blank')
+  a(href='https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit#gid=0', target='_blank')
     |  URL
   p
-  | Get JSON endpoint from a Google Spreadsheet at
-  a(href='https://spreadsheets.google.com/feeds/cells/12gm6fRAp0bC8TB2vh7sSPT3V75Ug99JaA9L0PqiWS2s/1/public/full?alt=json', target='_blank')
-    |  URL
-  | - auth tokens required if the spreadsheet is not public
   br
   .pb-2.mt-2.mb-4.border-bottom
     h4

views/api/here-maps.pug

@@ -3,15 +3,15 @@ extends ../layout
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fas.fa-map-marked
+      i.fas.fa-map-marked.iconpadding
       | HERE Maps API
 
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://developer.here.com', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | HERE Developer Portal
     a.btn.btn-primary(href='https://developer.here.com/documentation/map-image/topics/resource-map.html', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | Image Map Parameters
 
   br

views/api/instagram.pug

@@ -3,17 +3,17 @@ extends ../layout
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.fab.fa-instagram(style='color: #517fa4').fa-sm
+      i.fab.fa-instagram(style='color: #517fa4').fa-sm.iconpadding
       | Instagram API
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='http://instagram.com/developer/', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Overview
     a.btn.btn-primary(href='https://github.com/teleportd/instagram-node', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | Node-Instagram Docs
     a.btn.btn-primary(href='http://instagram.com/developer/endpoints/', target='_blank').w-100
-      i.fas.fa-code-branch.fa-sm
+      i.fas.fa-code-branch.fa-sm.iconpadding
       | API Endpoints
 
   br

views/api/lastfm.pug

@@ -3,17 +3,17 @@ extends ../layout
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.far.fa-play-circle(style='color: #db1302').fa-sm
+      i.far.fa-play-circle(style='color: #db1302').fa-sm.iconpadding
       | Last.fm API
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://github.com/jammus/lastfm-node#lastfm-node', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Last.fm Node Docs
     a.btn.btn-primary(href='http://www.last.fm/api/account/create', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | Create API Account
     a.btn.btn-primary(href='http://www.last.fm/api', target='_blank').w-100
-      i.fas.fa-code-branch.fa-sm
+      i.fas.fa-code-branch.fa-sm.iconpadding
       | API Endpoints
 
   h3= artist.name
@@ -25,8 +25,8 @@ block content
   h4 Tags
   for tag in artist.tags
     span.label.label-primary
-      i.fas.fa-tag.fa-sm
-      | #{tag.name}
+      i.fas.fa-tag.fa-sm.iconpadding
+      | #{tag.name} |
     | 
   p
 

views/api/lob.pug

@@ -3,17 +3,17 @@ extends ../layout
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.far.fa-envelope.fa-sm
+      i.far.fa-envelope.fa-sm.iconpadding
       | Lob API
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='https://lob.com/docs', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | API Documentation 
     a.btn.btn-primary(href='https://github.com/lob/lob-node', target='_blank').w-100
-      i.fas.fa-code.fa-sm
+      i.fas.fa-code.fa-sm.iconpadding
       | Lob Node Docs
     a.btn.btn-primary(href='https://dashboard.lob.com/register', target='_blank').w-100
-      i.fas.fa-cog.fa-sm
+      i.fas.fa-cog.fa-sm.iconpadding
       | Create API Account
   .pb-2.mt-2.mb-4.border-bottom
   h3 Details of zip code: #{zipDetails.zip_code}

views/api/nyt.pug

@@ -3,18 +3,18 @@ extends ../layout
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h2
-      i.far.fa-building.fa-sm
+      i.far.fa-building.fa-sm.iconpadding
       | New York Times API
 
   .btn-group.d-flex(role='group')
     a.btn.btn-primary(href='http://developer.nytimes.com/page', target='_blank').w-100
-      i.far.fa-check-square.fa-sm
+      i.far.fa-check-square.fa-sm.iconpadding
       | Overview
     a.btn.btn-primary(href='http://prototype.nytimes.com/gst/apitool/index.html', target='_blank').w-100
-      i.fas.fa-laptop.fa-sm
+      i.fas.fa-laptop.fa-sm.iconpadding
       | API Console
     a.btn.btn-primary(href='http://developer.nytimes.com/docs', target='_blank').w-100
-      i.fas.fa-code-branch.fa-sm
+      i.fas.fa-code-branch.fa-sm.iconpadding
       | API Endpoints
 
   h4 Young Adult Best Sellers