Merge branch 'master' into cross

app/assets/stylesheets/components/_navbar.scss

@@ -12,19 +12,23 @@
 
     font-size: 2em;
     font-weight: bold;
+    a:hover {
+      color: $primary;
+    }
   }
 
-
   .right-align {
     height: 100%;
     width: 16em;
-    margin-right: 5em;
+    margin-right: 4em;
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .links {
       display: flex;
       height: inherit;
+
       div {
         height: inherit;
         display: flex;
@@ -32,19 +36,26 @@
         border-bottom: 5px solid transparent;
 
         &:first-child {
-          margin-right: 1em;
+          margin-right: 2.5em;
         }
 
         &.active {
           border-bottom: 5px solid $primary;
           color: white;
-
-           a {
-            color: white;
-           }
         }
+
+        &:hover {
+          color: white;
+        }
+
+        &.active, &:hover {
+          a {
+            color: white;
+          }
+        }
+
         a {
-          color: #C4C4C4;
+          color: $text-inactive;
           text-decoration: none;
         }
       }
@@ -53,7 +64,28 @@
 
   .profile {
     img {
-      width: 3.25em;
+      width: 3em;
+      padding: 0.2em;
+    }
+  }
+
+  .burger-menu {
+    margin-right: 20px;
+    color: $primary;
+  }
+
+  .polyglot-dropdown {
+    background-color: $navbar-background;
+
+    li {
+      a {
+        color: $text-inactive;
+
+        &:hover {
+          color: white;
+          background-color: $background;
+        }
+      }
     }
   }
 }

app/assets/stylesheets/config/_bootstrap_variables.scss

@@ -14,7 +14,7 @@ $gray-base:       $gray;
 $brand-primary:   $primary;
 $brand-success:   $green;
 $brand-info:      $yellow;
-$brand-danger:    $red;
+$brand-danger:    $warn;
 $brand-warning:   $orange;
 $brand-secondary: $secondary;
 
@@ -52,3 +52,4 @@ $border-radius-small: 2px;
 }
 
 // Override other variables below!
+$input-border-focus: $primary;

app/assets/stylesheets/config/_colors.scss

@@ -8,6 +8,7 @@ $orange: #E67E22;
 $green: #32B796;
 $gray: #000000;
 $light-gray: #F4F4F4;
+$warn: #3d63cc;
 
 $primary: #F55E4F;
 $secondary: #5ED17E;
@@ -15,4 +16,5 @@ $background: #33333D;
 $card-background: #464650;
 $navbar-background: #1F1F29;
 $text-darker: #CDCDCD;
+$text-inactive: #C4C4C4;
 $icon: #EDECEC;

app/assets/stylesheets/config/_fonts.scss

@@ -1,9 +1,9 @@
 // Import Google fonts
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500");
+@import url("https://fonts.googleapis.com/css?family=Assistant:400,700|Hind:400,700");
 
 // Define fonts for body and headers
-$body-font: "Open Sans", "Helvetica", "sans-serif";
-$headers-font: "Raleway", "Helvetica", "sans-serif";
+$body-font: "Hind", "Helvetica", "sans-serif";
+$headers-font: "Assistant", "Helvetica", "sans-serif";
 
 // To use a font file (.woff) uncomment following lines
 // @font-face {

app/assets/stylesheets/devise/_login.scss

@@ -18,13 +18,13 @@
     url('https://unsplash.com/photos/jay5BqVyf5A');
 
 
-
   .login-content {
     position: relative;
-    top: -10vh;
+    // top: -10vh;
     padding: 50px;
     background-color: white;
     width: 25vw;
+    min-width: 300px;
     border-radius: 3px;
     box-shadow: 1px 1px 10px rgba(0,0,0, 0.21);
 

app/assets/stylesheets/pages/_contacts.scss

@@ -12,6 +12,7 @@ a:hover {
 }
 
 .card {
+  min-width: 360px;
   display: flex;
   justify-content: space-between;
   background: $card-background;
@@ -73,8 +74,17 @@ a:hover {
 }
 
 .video-content {
-  height: 485px;
-  background-color: black;
+  // height: 485px;
+
+  padding-left: 0.2vw;
+  display: flex;
+  justify-content: center;
+  .flex-video {
+    height: 100%;
+    width: 100%;
+    flex: 1 1 auto;
+  }
+  // background-color: black;
 }
 
 .half {
@@ -91,6 +101,8 @@ a:hover {
   align-items: center;
 }
 
+// Modal
+
 .modal-header {
   border-bottom: 0px;
   i {
@@ -100,6 +112,7 @@ a:hover {
 
 .modal-color {
   background-color: $card-background;
+  min-width: 296px;
 }
 
 .vertical-alignment-helper {
@@ -133,17 +146,28 @@ a:hover {
   align-items: center;
 }
 
+.modal-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media only screen and (max-width: 1100px) {
+    .modal-picture {
+      width: 50px;
+    }
+}
 
 
-
+// Contact
 
 .contact {
   color: white;
 }
 
 .contacts {
-  height: 570px;
-  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .close {
@@ -159,12 +183,10 @@ a:hover {
   filter: alpha(opacity=20);
 }
 
-
-
-
-
-
-
+.contacts-list{
+  height: 90vh;
+  overflow: scroll;
+}
 
 
 

app/assets/stylesheets/pages/_home.scss

@@ -1,4 +1,3 @@
-// Specific CSS for your home-page
 video {
   transform: rotateY(180deg);
   -webkit-transform:rotateY(180deg); /* Safari and Chrome */

app/assets/stylesheets/pages/_index.scss

@@ -1,3 +1,4 @@
 // Import page-specific CSS files here.
 @import "home";
-@import "contacts"
+@import "contacts";
+@import "settings";

app/assets/stylesheets/pages/_settings.scss

@@ -0,0 +1,125 @@
+.card-form {
+  padding: 20px;
+}
+
+.card-form-no-hover {
+  &:hover {
+    box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.input-dropdown {
+  width: 196px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $primary;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $primary;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.input-field-text-black {
+  color: black;
+}
+
+.slider.rounded {
+  border-radius: 3px;
+}
+
+.slider.rounded:before {
+  border-radius: 3px;
+}
+
+
+.settings {
+  color: white;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.font-weight-normal {
+  font-weight: normal;
+}
+
+.padding-right {
+  padding-right: 10px;
+}
+
+.margin-right {
+  margin-right: 10px;
+}
+
+.flex-inline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.center-screen {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 80vh;
+}

app/assets/stylesheets/users/_edit.scss

@@ -3,7 +3,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: calc(100vh - 4.5em); // 4.5em is height of navbar
+  padding-top: 30px;
+  // height: calc(100vh - 4.5em); // 4.5em is height of navbar
 
   form {
     flex-grow: 1;
@@ -22,10 +23,18 @@
 
     img {
       max-width: 50vw;
+      padding-top: 30px;
     }
   }
 }
 
+.small-profile-pic {
+  img {
+    width: 223px;
+    margin-bottom: 20px;
+  }
+}
+
 .profile-form {
   display: grid;
   grid-template-columns: 1fr 1fr;

app/assets/stylesheets/users/_show.scss

@@ -4,6 +4,7 @@
   display:flex;
   flex-direction: column;
   justify-content: center;
+  text-align: center;
 
   h2 {
     font-size: 1.5em;
@@ -21,33 +22,43 @@
         margin-right: .5em;
       }
     }
-    .profile-pic {
-      display: flex;
-      align-items: center;
-      margin-right: 3em;
-      img {
-        width: 10em;
-      }
-    }
-
-    .profile-text {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      color: #f2321f;
-      h1 {
-        margin: 0 0 .5em 0 ;
-      }
-      h2 {
-        margin: 0;
-      }
-      .italics {
-        font-style: italic;
-        color: white;
-      }
-    }
   }
+}
 
+.profile-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: $primary;
+  h1 {
+    margin: 0 0 .5em 0 ;
   }
+  h2 {
+    margin: 0;
+  }
+  .italics {
+    font-style: italic;
+    color: white;
+  }
+}
 
+.vcenter {
+  display: inline-block;
+  vertical-align: middle;
+  float: none;
+}
 
+.vertical-padding {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.vertical-margin {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.img-profile {
+  width: 200px;
+  height: 200px;
+}

app/controllers/application_controller.rb

@@ -6,4 +6,8 @@ class ApplicationController < ActionController::Base
   def after_sign_in_path_for(resource)
     contacts_path
   end
+
+  def default_url_options
+    { host: ENV["HOST"] || "localhost:3000" }
+  end
 end

app/controllers/connections_controller.rb

@@ -1,6 +1,5 @@
 class ConnectionsController < ApplicationController
   def new
-
   end
 
   def create
@@ -10,9 +9,17 @@ class ConnectionsController < ApplicationController
     @connection.contact = contact_user
 
     if @connection.save
-        redirect_to contacts_path
+      contact_message = nil
+      if contact_user.first_name.nil? || contact_user.last_name.nil?
+        contact_message = "#{contact_user.email}"
+      else
+        contact_message = "#{contact_user.first_name} #{contact_user.last_name}"
+      end
+      flash[:notice] = "Added #{contact_message} to contacts"
+      redirect_to contacts_path
     else
-
+      flash[:alert] = "Invalid email address!"
+      render 'new'
     end
   end
 

app/controllers/pages_controller.rb

@@ -13,8 +13,6 @@ class PagesController < ApplicationController
   end
 
 
-
-
   def cable_testing
     chatroom = 'chat_room_' + params[:chat_room_id]
     puts params

app/helpers/meta_tags_helper.rb

@@ -0,0 +1,15 @@
+module MetaTagsHelper
+  def meta_title
+    content_for?(:meta_title) ? content_for(:meta_title) : DEFAULT_META["meta_title"]
+  end
+
+  def meta_description
+    content_for?(:meta_description) ? content_for(:meta_description) : DEFAULT_META["meta_description"]
+  end
+
+  def meta_image
+    meta_image = (content_for?(:meta_image) ? content_for(:meta_image) : DEFAULT_META["meta_image"])
+    # little twist to make it work equally with an asset or a url
+    meta_image.starts_with?("http") ? meta_image : image_url(meta_image)
+  end
+end

app/javascript/components/modal.js

@@ -1,11 +1,15 @@
-
 const triggerModalEvent = () => {
-  const btn = document.getElementById("modalTrigger");
-  const modal = document.getElementById("myModal");
 
-  btn.addEventListener('click', function(event) {
-    $('#myModal').modal('show');
-  });
+  const buttons = document.querySelectorAll(".modalTrigger");
+
+  buttons.forEach(btn => {
+    if (btn) {
+      btn.addEventListener('click', function(event) {
+        const btnId = btn.getAttribute('data-user-id')
+        $("#myModal"+`${btnId}`).modal('show');
+      });
+    }
+  })
 }
 
 export { triggerModalEvent }

app/javascript/packs/application.js

@@ -4,6 +4,35 @@ import { triggerModalEvent } from "../components/modal.js";
 
 triggerModalEvent();
 
-// import { profilePageAnimation } from '../users/lesson';
+const settingsPage = document.getElementById('settings-page');
+const contactsPage = document.getElementById('contacts-page');
+
+const getSiblings = (element) => {
+  const siblings = [];
+  let sibling = element.parentNode.firstChild;
+  const skipMe = element;
+  for ( ; sibling; sibling = sibling.nextSibling )
+    if ( sibling.nodeType == 1 && sibling != element )
+      siblings.push( sibling );
+  return siblings;
+}
+
+const removeActiveClass = (element) => {
+  const siblings = getSiblings(element);
+  siblings.forEach(sibling => {
+    sibling.classList.remove('active');
+  });
+}
+
+if (settingsPage) {
+  const settings = document.getElementById('settings')
+  settings.classList.add('active');
+  removeActiveClass(settings);
+}
+
+if (contactsPage) {
+  const contacts = document.getElementById('contacts')
+  contacts.classList.add('active');
+  removeActiveClass(contacts);
+}
 
-// profilePageAnimation();

app/javascript/packs/chatrooms.js

@@ -23,13 +23,13 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
 })
 
 // Testing ActionCable
-const testBtn = document.getElementById('test-btn')
-testBtn.addEventListener('click', event => {
-  fetch(`/chat_rooms/${chatroomId}/cable_testing` , {
-    method: 'POST',
-    body: JSON.stringify({})
-  })
-})
+// const testBtn = document.getElementById('test-btn')
+// testBtn.addEventListener('click', event => {
+//   fetch(`/chat_rooms/${chatroomId}/cable_testing` , {
+//     method: 'POST',
+//     body: JSON.stringify({})
+//   })
+// })
 
 
 

app/javascript/packs/local_video.js

@@ -0,0 +1,14 @@
+const contactsVideo = document.getElementById("contacts-video")
+
+try {
+  const contactsStream = navigator.mediaDevices.getUserMedia({
+    audio: false,
+    video: true
+  }).then(stream => {
+    contactsVideo.srcObject = stream;
+    contactsVideo.muted = true;
+  })
+} catch(e) {
+  console.error(e);
+  contactsVideo.innerHTML = "Unable to getUserMedia()";
+}

app/javascript/packs/notifications.js

@@ -1,6 +1,6 @@
 import ActionCable from 'actioncable'
 
-// create App object with key cable == new cosumer
+// create App object with key cable == new consumer
 (function() {
   window.App || (window.App = {});
 
@@ -12,7 +12,6 @@ import ActionCable from 'actioncable'
 const userId = parseInt(document.getElementById("my-user-id").dataset["userId"])
 let chatRoomId = null
 
-
 App.cable.subscriptions.create({
   channel: 'NotificationsChannel'
 }, {
@@ -24,19 +23,13 @@ App.cable.subscriptions.create({
     // console.log(userId)
     console.log("received broadcast")
     // console.log(data.body)
-    if (data.head === 302 && data.body["caller"] === userId && data.path ) {
+    if (data.head === 302 && data.body["caller"] === userId && data.path) {
       window.location.pathname = data.path
-    } else if (data["message"]["user_id"] === userId) {
+    } else if (data["message"]["user_id"] === userId) { // Some error appears here but it is not fatal
       console.log("TRIGGER MODAL")
       const acceptButton = document.getElementById('accept-button')
       acceptButton.style.display = "block"
-      // const receiveCall = document.getElementById('receive-call')
-      // receiveCall.dataset.toggle = 'modal'
-      // receiveCall.dataset.target ='#calleeModal'
-      // console.log(receiveCall)
 
-      // const calleeModal = document.getElementById('calleeModal')
-      // calleeModal.modal("show")
       chatRoomId = data["message"]["chat_room_id"]
       console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`)
     } else {
@@ -47,10 +40,9 @@ App.cable.subscriptions.create({
   }
 })
 
-
+// Receive information from index.html.erb
 const acceptButton = document.getElementById('accept-button')
 
 acceptButton.addEventListener('click', event => {
-  // event.preventDefault()
   document.getElementById('chat-room-id').value = chatRoomId
 })

app/javascript/packs/settings_video.js

@@ -0,0 +1,14 @@
+const contactsVideo = document.getElementById("settings-video")
+
+try {
+  const contactsStream = navigator.mediaDevices.getUserMedia({
+    audio: false,
+    video: true
+  }).then(stream => {
+    contactsVideo.srcObject = stream;
+    contactsVideo.muted = true;
+  })
+} catch(e) {
+  console.error(e);
+  contactsVideo.innerHTML = "Unable to getUserMedia()";
+}

app/javascript/packs/webrtc.js

@@ -1,7 +1,5 @@
 // Broadcast Types
 
-class Signaling {}
-
 const JOIN_ROOM = "JOIN_ROOM";
 const EXCHANGE = "EXCHANGE";
 const REMOVE_USER = "REMOVE_USER";
@@ -16,12 +14,9 @@ let pcPeers = {}; // peer connection
 let localstream;
 
 window.onload = () => {
-  // if (document.getElementById("current-user")) {
-    currentUser = document.getElementById("current-user").innerHTML;
-    console.log(currentUser)
-    localVideo = document.getElementById("local-video");
-    remoteVideoContainer = document.getElementById("remote-video-container");
-  // }
+  currentUser = document.getElementById("current-user").innerHTML;
+  localVideo = document.getElementById("local-video");
+  remoteVideoContainer = document.getElementById("remote-video-container");
 };
 
 // Ice Credentials
@@ -37,45 +32,14 @@ document.onreadystatechange = async () => {
       })
 
       localstream = stream;
-      // if (localVideo) {
-        localVideo.srcObject = stream
-        localVideo.muted = true
-      // }
+      localVideo.srcObject = stream
+      localVideo.muted = true
     } catch (e) { console.error(e); }
   }
 };
 
-// find chatroom
-// const handleJoinSession = async () => {
-//   App.session = await App.cable.subscriptions.create("VideoSessionChannel", {
-//     connected: () => {
-//       broadcastData({
-//         type: JOIN_ROOM,
-//         from: currentUser
-//       });
-//     },
-//     received: data => {
-//       console.log("received", data);
-//       if (data.from === currentUser) return;
-//       switch (data.type) {
-//         case JOIN_ROOM:
-//           return joinRoom(data);
-//         case EXCHANGE:
-//           if (data.to !== currentUser) return;
-//           return exchange(data);
-//         case REMOVE_USER:
-//           return removeUser(data);
-//         default:
-//           return;
-//       }
-//     }
-//   });
-// };
 
-// if (document.getElementById('chatroom-hook')) {
-  const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
-
-// }
+const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
 
 const handleJoinSession = async () => {
   App['chatroom' + chatroomId] = await App.cable.subscriptions.create({
@@ -83,7 +47,6 @@ const handleJoinSession = async () => {
     room: chatroomId
   }, {
     connected: () => {
-      console.log(chatroomId)
       broadcastData({
         type: JOIN_ROOM,
         from: currentUser,
@@ -91,7 +54,6 @@ const handleJoinSession = async () => {
       });
     },
     received: data => {
-      console.log(data)
       if (data.from === currentUser) return;
       switch (data.type) {
         case JOIN_ROOM:
@@ -136,9 +98,6 @@ const removeUser = data => {
 
 
 const broadcastData = data => {
-  if (data.type === EXCHANGE) {
-    console.log("yayyy")
-  }
   fetch("chat_room_sessions", {
     method: "POST",
     body: JSON.stringify(data),
@@ -220,7 +179,7 @@ const exchange = data => {
   }
 
   if (data.sdp) {
-    sdp = JSON.parse(data.sdp);
+    const sdp = JSON.parse(data.sdp);
     pc
       .setRemoteDescription(new RTCSessionDescription(sdp))
       .then(() => {
@@ -242,3 +201,15 @@ const exchange = data => {
 };
 
 const logError = error => console.warn("Whoops! Error:", error);
+
+
+const joinButton = document.getElementById("join-btn")
+joinButton.addEventListener('click', event => {
+  handleJoinSession()
+})
+
+// WARNING: COMPLETELY HACKISH SOLUTION --> MUST INTRODUCE SOME SORT OF DELAY!
+setTimeout(function() {
+  joinButton.click()
+}, 5000);
+

app/views/chat_rooms/show.html.erb

@@ -1,27 +1,19 @@
-<button onclick="handleJoinSession()" data-room="<%= @chat_room.id %>">Join Room</button>
-<!-- <div id="join-session" data-room="<%= @chat_room.id %>"> -->
-<!-- <h1 style="color: white;">This is chatroom #<%= @chat_room.id %></h1> -->
+<div id="join-btn" data-room="<%= @chat_room.id %>"></div>
+
 <div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
 
-<!-- <button id="test-btn">Test Connection</button> -->
 <div class="call-container">
   <div id="remote-video-container">
     <div id="video_overlays">
-      <video id="local-video" autoplay></video>
+      <video id="local-video" autoplay muted></video>
     </div>
   </div>
 </div>
 
-<div>
-  <span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span>
-</div>
-
-<!-- <script>
-  const joinSession = document.getElementById("join-session")
-  joinSession.addEventListener('load', event => {
-    handleJoinSession()
-  })
-</script> -->
-
+<div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
 
 <%= javascript_pack_tag 'chatrooms' %>
+<%= javascript_pack_tag 'webrtc' %>
+
+
+

app/views/connections/new.html.erb

@@ -1,8 +1,23 @@
-<div class="align-center">
-  <h2>Add a new contact:</h2>
-  <%= form_for User.new, url: connections_path do |f| %>
-    <%= f.label :email, class: "email_label_color" %>:
-    <%= f.text_field :email %>
+<% params["action"] = "Add contact" %>
 
-    <%= f.submit %>
-  <% end %>
+<div class="center-screen">
+  <div class="align-center">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-offset-2 col-xs-8 col-xs-offset-2">
+          <h2>Enter an email address:</h2>
+        </div>
+        <%= simple_form_for User.new, url: connections_path, class: "input-group" do |f| %>
+          <div class="col-xs-offset-2 col-xs-8 col-xs-offset-2 ">
+            <div class="flex-inline">
+              <%= f.input_field :email, class: "form-control margin-right" %>
+              <div class="input-group-append">
+              <%= f.button :submit, value: "Add Contact" , class: "btn btn-primary" %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

app/views/devise/sessions/new.html.erb

@@ -11,11 +11,19 @@
         <%= f.input :password,
                     required: false,
                     input_html: { autocomplete: "current-password" } %>
-        <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
+        <div class="flex-inline space-between">
+          <%= f.label :remember_me %>
+          <label class="switch">
+            <%= f.input_field :enable_transcript, as: :boolean if devise_mapping.rememberable? %>
+            <span class="slider rounded"></span>
+          </label>
+        </div>
+
+        <%#= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
       </div>
 
       <div class="form-actions">
-        <%= f.button :submit, "Log in", class: "login btn btn-primary" %>
+        <%= f.button :submit, "Log in", class: "login btn btn-primary vertical-margin" %>
       </div>
     <% end %>
 

app/views/devise/shared/_links.html.erb

@@ -3,11 +3,11 @@
 <% end -%>
 
 <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-  <%#= link_to "Sign up", new_registration_path(resource_name) %><!-- <br /> -->
+  <%= link_to "Sign up", new_registration_path(resource_name) %><!-- <br /> -->
 <% end -%>
 
 <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-  <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
+  <%#= link_to "Forgot your password?", new_password_path(resource_name) %><br />
 <% end -%>
 
 <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>

app/views/layouts/application.html.erb

@@ -3,12 +3,18 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <%= favicon_link_tag 'favicon.ico' %> <!-- Need a favicon to change picture in title bar -->
-    <title>Polyglot</title>
+    <%= favicon_link_tag 'favicon.ico' %> <!-- Need a favicon to change picture in title bar -->
+    <title>Polyglot - Live Translation</title>
     <%= csrf_meta_tags %>
     <%= action_cable_meta_tag %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
+    <meta property="og:title" content="<%= meta_title %>" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="<%= request.original_url %>" />
+    <meta property="og:image" content="<%= meta_image %>" />
+    <meta property="og:description" content="<%= meta_description %>" />
+    <meta property="og:site_name" content="<%= meta_title %>" />
   </head>
   <body>
     <%= render 'shared/navbar' unless params["action"] == "home" || params["action"] == "new" || params["action"] == "call" %>
@@ -16,6 +22,5 @@
     <%= yield %>
     <%= javascript_include_tag 'application' %>
     <%= javascript_pack_tag 'application' %>
-
   </body>
 </html>

app/views/pages/_contact.html.erb

@@ -1,9 +1,3 @@
-<%
-def hello_world
-  puts "Hello World"
-end
-%>
-
 <div class="card">
   <div class="info">
     <% if contact.photo.url.nil? %>
@@ -12,17 +6,17 @@ end
       <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle", width:65%>
     <% end %>
     <div class="text text-color">
-      <% if contact.nil? || contact.nil? %> <!-- REPLACE WITH FIRST NAME AND LAST NAME -->
+      <% if contact.first_name.nil? || contact.last_name.nil? %>
         <p><%= contact.email %></p>
       <% else %>
-        <p><%= contact.email %></p>
-        <!-- <p><%#= contact.first_name %> <%#= contact.last_name %></p> -->
+        <p><%= contact.first_name %> <%= contact.last_name %></p>
       <% end %>
       <p class="darker">Last call: <%= Time.now %></p>
     </div>
   </div>
   <div class="call" data-user-id="<%= contact.id %>">
-    <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do  %>
+    <!-- Calls establish_call in pages_controller -->
+    <%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } do  %>
       <i class="fas fa-phone"></i>
     <% end %>
   </div>
@@ -32,30 +26,30 @@ end
 
 </div>
 
-
-
 <!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div class="modal fade" id="myModal<%= contact.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="vertical-alignment-helper">
     <div class="modal-dialog vertical-align-center">
       <div class="modal-content modal-color">
         <div class="modal-header">
-          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do  %>
+          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do  %>
             <i class="fas fa-times-circle"></i>
           <% end %>
           <div class="container">
-            <div class="modal-container">
-              <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=150>
+            <div class="modal-container modal-flex">
+              <% if contact.photo.url.nil? %>
+                <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle modal-picture" width=150>
+              <% else %>
+                <%= cl_image_tag contact.photo, class: "profile avatar dropdown-toggle img-circle modal-picture", width:150%>
+              <% end %>
               <div class="modal-text">
                 <h4 class="modal-title" id="myModalLabel">Calling</h4>
                 <h4>
                   <strong>
-                    <!-- REPLACE WITH FIRST NAME AND LAST NAME -->
-                    <% if contact.nil? || contact.nil? %>
+                    <% if contact.first_name.nil? || contact.last_name.nil? %>
                       <p><%= contact.email %></p>
                     <% else %>
-                      <p><%= contact.email %></p>
-                      <!-- <p><%#= contact.first_name %> <%#= contact.last_name %></p> -->
+                      <p><%= contact.first_name %> <%= contact.last_name %></p>
                     <% end %>
                   </strong>
                 </h4>

app/views/pages/index.html.erb

@@ -1,28 +1,37 @@
+<div id="contacts-page"></div>
+
+<!-- CONTACTS PAGE -->
 <div class="container">
   <div class="contacts-container text-color">
-    <div class="contacts half">
-      <div class="contacts-header">
-        <h2>Contacts</h2>
-
-        <%= link_to new_connection_path do %>
-          <i class="fas fa-plus-square"></i>
-        <% end %>
+    <div class="row">
+      <div class="col-xs-12 col-md-6">
+        <div class="contacts">
+          <div class="contacts-header">
+            <h2>Contacts</h2>
+            <%= link_to add_contact_path do %>
+              <i class="fas fa-plus-square"></i>
+            <% end %>
+          </div>
+          <div class="contacts-list">
+            <% current_user.contacts.each do |contact| %>
+              <%= render "pages/contact", contact: contact %>
+            <% end %>
+          </div>
+        </div>
       </div>
-      <% current_user.contacts.each do |contact| %>
-        <%= render "pages/contact", contact: contact %>
-      <% end %>
 
-
-
-    </div>
-    <div class="video-feed half">
-      <div class="video-content">
-        <!-- <video id="contacts-video" autoplay=""></video> -->
+      <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
+        <div class="video-feed">
+          <div class="video-content">
+            <video id="contacts-video" class="flex-video" autoplay=""></video>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 
+<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
 <div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
 
 <form action="/accept_call" method="post">
@@ -31,5 +40,6 @@
 </form>
 
 <%= javascript_pack_tag 'notifications' %>
+<%= javascript_pack_tag 'local_video' %>
 
 

app/views/pages/new.html.erb

@@ -8,3 +8,5 @@
 
   <%= p.button :submit, class: "btn btn-primary" %>
 <% end %>
+
+

app/views/shared/_navbar.html.erb

@@ -1,32 +1,45 @@
 <div class="polyglot-navbar">
-  <div class="logo">
-      Polyglot
-  </div>
+  <div class="logo"><%= link_to "Polyglot", contacts_path %></div>
 
-  <div class="right-align">
+  <div class="right-align hidden-xs hidden-sm">
     <div class="links">
-      <div class="active"><%= link_to "Dashboard", contacts_path %></div>
-      <div><%= link_to "Settings", setting_path %></div>
+      <div id="contacts"><%= link_to "Contacts", contacts_path %></div>
+      <div id="settings"><%= link_to "Settings", setting_path %></div>
     </div>
     <div class="profile">
-    <% if current_user.nil? %>
-      <%= link_to "Login", new_user_session_path  %>
-    <% else %>
-      <div class="dropdown">
-        <div data-toggle="dropdown">
-          <% if current_user.photo.url.nil? %>
-            <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
-          <% else %>
-            <%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
-          <% end %>
+      <% if current_user.nil? %>
+        <%= link_to "Login", new_user_session_path  %>
+      <% else %>
+        <div class="dropdown">
+          <div data-toggle="dropdown">
+            <% if current_user.photo.url.nil? %>
+              <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
+            <% else %>
+              <%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
+            <% end %>
+          </div>
+          <ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
+            <li><%= link_to "Profile", user_path(current_user) %></li>
+            <li><%= link_to "Logout", destroy_user_session_path %></li>
+          </ul>
         </div>
-        <ul class="dropdown-menu dropdown-menu-right">
-          <!-- <li><a href="#">Profile</a></li> -->
-          <li><%= link_to "Profile", user_path(current_user) %></li>
-          <li><%= link_to "Logout", destroy_user_session_path %></li>
-        </ul>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="burger-menu hidden-md hidden-lg">
+    <div class="dropdown">
+      <i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
+      <ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
+        <li><%= link_to "Contacts", contacts_path %></li>
+        <li><%= link_to "Settings", setting_path %></li>
+          <% if current_user.nil? %>
+            <li><%= link_to "Login", new_user_session_path  %></li>
+          <% else %>
+            <li><%= link_to "Profile", user_path(current_user) %></li>
+            <li><%= link_to "Logout", destroy_user_session_path %></li>
+          <% end %>
+      </ul>
     </div>
   </div>
 </div>

app/views/users/edit.html.erb

@@ -7,25 +7,24 @@
         <%= t.input :last_name %>
         <%= t.input :password %>
         <%= t.input :photo %>
-
+        <div class="small-profile-pic hidden-md hidden-lg">
+          <% if @user.photo.url.nil? %>
+            <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
+          <% else %>
+            <%= cl_image_tag current_user.photo%>
+          <% end %>
+        </div>
         <%= t.submit :Save, class: "btn btn-primary save-btn form-control" %>
         <p></p>
         <%= link_to "View my profile", user_path(@user), class: "btn btn-primary save-btn form-control" %>
       </div>
-
-
-      <div class="profile-pic">
+      <div class="profile-pic hidden-xs hidden-sm">
         <% if @user.photo.url.nil? %>
           <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
         <% else %>
           <%= cl_image_tag current_user.photo%>
         <% end %>
-
-        <%#= t.input_field :photo, onchange: 'this.form.submit();' %>
-        <%#= t.input_field :photo, as: :hidden %>
-
       </div>
-
     </div>
   <% end %>
 </div>

app/views/users/setting.html.erb

@@ -1,158 +1,101 @@
-<div class="profile-container">
-  <%= simple_form_for(@user) do |t| %>
-    <div class="profile-form">
-      <div>
-        <div class="lign">
+<div id="settings-page"></div>
 
-       <div class="card"><%= t.input :language, collection:
-[
-"Afrikaans (South Africa)",
-"Amharic (Ethiopia)",
-"Armenian (Armenia)",
-"Azerbaijani (Azerbaijan)",
-"Indonesian (Indonesia)",
-"Malay (Malaysia)",
-"Bengali (Bangladesh)",
-"Bengali (India)",
-"Catalan (Spain)",
-"Czech (Czech Republic)",
-"Danish (Denmark)",
-"German (Germany)",
-"English (Australia)",
-"English (Canada)",
-"English (Ghana)",
-"English (United Kingdom)",
-"English (India)",
-"English (Ireland)",
-"English (Kenya)",
-"English (New Zealand)",
-"English (Nigeria)",
-"English (Philippines)",
-"English (South Africa)",
-"English (Tanzania)",
-"English (United States)",
-"Spanish (Argentina)",
-"Spanish (Bolivia)",
-"Spanish (Chile)",
-"Spanish (Colombia)",
-"Spanish (Costa Rica)",
-"Spanish (Ecuador)",
-"Spanish (El Salvador)",
-"Spanish (Spain)",
-"Spanish (United States)",
-"Spanish (Guatemala)",
-"Spanish (Honduras)",
-"Spanish (Mexico)",
-"Spanish (Nicaragua)",
-"Spanish (Panama)",
-"Spanish (Paraguay)",
-"Spanish (Peru)",
-"Spanish (Puerto Rico)",
-"Spanish (Dominican Republic)",
-"Spanish (Uruguay)",
-"Spanish (Venezuela)",
-"Basque (Spain)",
-"Filipino (Philippines)",
-"French (Canada)",
-"French (France)",
-"Galician (Spain)",
-"Georgian (Georgia)",
-"Gujarati (India)",
-"Croatian (Croatia)",
-"Zulu (South Africa)",
-"Icelandic (Iceland)",
-"Italian (Italy)",
-"Javanese (Indonesia)",
-"Kannada (India)",
-"Khmer (Cambodia)",
-"Lao (Laos)",
-"Latvian (Latvia)",
-"Lithuanian (Lithuania)",
-"Hungarian (Hungary)",
-"Malayalam (India)",
-"Marathi (India)",
-"Dutch (Netherlands)",
-"Nepali (Nepal)",
-"Norwegian Bokmål (Norway)",
-"Polish (Poland)",
-"Portuguese (Brazil)",
-"Portuguese (Portugal)",
-"Romanian (Romania)",
-"Sinhala (Sri Lanka)",
-"Slovak (Slovakia)",
-"Slovenian (Slovenia)",
-"Sundanese (Indonesia)",
-"Swahili (Tanzania)",
-"Swahili (Kenya)",
-"Finnish (Finland)",
-"Swedish (Sweden)",
-"Tamil (India)",
-"Tamil (Singapore)",
-"Tamil (Sri Lanka)",
-"Tamil (Malaysia)",
-"Telugu (India)",
-"Vietnamese (Vietnam)",
-"Turkish (Turkey)",
-"Urdu (Pakistan)",
-"Urdu (India)",
-"Greek (Greece)",
-"Bulgarian (Bulgaria)",
-"Russian (Russia)",
-"Serbian (Serbia)",
-"Ukrainian (Ukraine)",
-"Hebrew (Israel)",
-"Arabic (Israel)",
-"Arabic (Jordan)",
-"Arabic (United Arab Emirates)",
-"Arabic (Bahrain)",
-"Arabic (Algeria)",
-"Arabic (Saudi Arabia)",
-"Arabic (Iraq)",
-"Arabic (Kuwait)",
-"Arabic (Morocco)",
-"Arabic (Tunisia)",
-"Arabic (Oman)",
-"Arabic (Qatar)",
-"Arabic (Lebanon)",
-"Arabic (Egypt)",
-"Persian (Iran)",
-"Hindi (India)",
-"Thai (Thailand)",
-"Korean (South Korea)",
-"Chinese, Mandarin (Traditional, Taiwan)",
-"Chinese, Cantonese (Traditional, Hong Kong)",
-"Japanese (Japan)",
-"Chinese, Mandarin (Simplified, Hong Kong)",
-"Chinese, Mandarin (Simplified, China)"] %>
+<% languages = [
+  "Afrikaans (South Africa)", "Amharic (Ethiopia)", "Armenian (Armenia)",
+  "Azerbaijani (Azerbaijan)", "Indonesian (Indonesia)", "Malay (Malaysia)",
+  "Bengali (Bangladesh)", "Bengali (India)", "Catalan (Spain)",
+  "Czech (Czech Republic)", "Danish (Denmark)", "German (Germany)",
+  "English (Australia)", "English (Canada)", "English (Ghana)",
+  "English (United Kingdom)", "English (India)", "English (Ireland)",
+  "English (Kenya)", "English (New Zealand)", "English (Nigeria)",
+  "English (Philippines)", "English (South Africa)", "English (Tanzania)",
+  "English (United States)", "Spanish (Argentina)", "Spanish (Bolivia)",
+  "Spanish (Chile)", "Spanish (Colombia)", "Spanish (Costa Rica)",
+  "Spanish (Ecuador)", "Spanish (El Salvador)", "Spanish (Spain)",
+  "Spanish (United States)", "Spanish (Guatemala)", "Spanish (Honduras)",
+  "Spanish (Mexico)", "Spanish (Nicaragua)", "Spanish (Panama)",
+  "Spanish (Paraguay)", "Spanish (Peru)", "Spanish (Puerto Rico)",
+  "Spanish (Dominican Republic)", "Spanish (Uruguay)", "Spanish (Venezuela)",
+  "Basque (Spain)", "Filipino (Philippines)", "French (Canada)",
+  "French (France)", "Galician (Spain)", "Georgian (Georgia)",
+  "Gujarati (India)", "Croatian (Croatia)", "Zulu (South Africa)",
+  "Icelandic (Iceland)", "Italian (Italy)", "Javanese (Indonesia)",
+  "Kannada (India)", "Khmer (Cambodia)", "Lao (Laos)",
+  "Latvian (Latvia)", "Lithuanian (Lithuania)", "Hungarian (Hungary)",
+  "Malayalam (India)", "Marathi (India)", "Dutch (Netherlands)",
+  "Nepali (Nepal)", "Norwegian Bokmål (Norway)", "Polish (Poland)",
+  "Portuguese (Brazil)", "Portuguese (Portugal)", "Romanian (Romania)",
+  "Sinhala (Sri Lanka)", "Slovak (Slovakia)", "Slovenian (Slovenia)",
+  "Sundanese (Indonesia)", "Swahili (Tanzania)", "Swahili (Kenya)",
+  "Finnish (Finland)", "Swedish (Sweden)", "Tamil (India)",
+  "Tamil (Singapore)", "Tamil (Sri Lanka)", "Tamil (Malaysia)",
+  "Telugu (India)", "Vietnamese (Vietnam)", "Turkish (Turkey)",
+  "Urdu (Pakistan)", "Urdu (India)", "Greek (Greece)",
+  "Bulgarian (Bulgaria)", "Russian (Russia)", "Serbian (Serbia)",
+  "Ukrainian (Ukraine)", "Hebrew (Israel)", "Arabic (Israel)",
+  "Arabic (Jordan)", "Arabic (United Arab Emirates)", "Arabic (Bahrain)",
+  "Arabic (Algeria)", "Arabic (Saudi Arabia)", "Arabic (Iraq)",
+  "Arabic (Kuwait)", "Arabic (Morocco)", "Arabic (Tunisia)",
+  "Arabic (Oman)", "Arabic (Qatar)", "Arabic (Lebanon)",
+  "Arabic (Egypt)", "Persian (Iran)", "Hindi (India)",
+  "Thai (Thailand)", "Korean (South Korea)", "Chinese, Mandarin (Traditional, Taiwan)",
+  "Chinese, Cantonese (Traditional, Hong Kong)", "Japanese (Japan)",
+  "Chinese, Mandarin (Simplified, Hong Kong)",
+  "Chinese, Mandarin (Simplified, China)" ]%>
 
+<% fonts = [
+    "Arial",
+    "Times New Roman",
+    "Calibri"
+  ] %>
+
+<div class="container">
+  <div class="contacts-container">
+    <div class="row">
+      <div class="col-xs-12 col-md-6">
+        <div class="settings">
+          <h2>Settings</h2>
+          <div>
+            <%= simple_form_for(@user) do |t| %>
+              <div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :language, class:'padding-right no-margin font-weight-normal' %>
+                  <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown form-control' %>
+                </div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :caption_font, class:'padding-right no-margin font-weight-normal' %>
+                  <%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown form-control' %>
+                </div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :caption_font_size, class:'padding-right no-margin font-weight-normal' %>
+                  <%= t.input_field :caption_font_size, class:'input-field-text-black input-dropdown form-control' %>
+                </div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %>
+                  <label class="switch">
+                    <%= t.input_field :enable_transcript, class:'input-field-text-black' %>
+                    <span class="slider round"></span>
+                  </label>
+                </div>
+
+                <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
+                <p></p>
+              </div>
+            <% end %>
+          </div>
         </div>
+      </div>
+      <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
+        <div class="video-feed">
+          <div class="video-content">
+            <video id="settings-video" class="flex-video" autoplay=""></video>
+          </div>
         </div>
-       <div class="card"><%= t.input :caption_font %></div>
-       <div class="card"><%= t.input :caption_font_size %></div>
-       <div class="card"><%= t.input :enable_transcript %></div>
-
-        <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
-        <p></p>
       </div>
-
-
-
-      <div class="profile-pic">
-        <% if @user.photo.url.nil? %>
-          <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
-        <% else %>
-          <%= cl_image_tag current_user.photo%>
-        <% end %>
-
-        <%#= t.input_field :photo, onchange: 'this.form.submit();' %>
-        <%#= t.input_field :photo, as: :hidden %>
-
-      </div>
-
     </div>
-  <% end %>
+  </div>
 </div>
 
 
-
+<%= javascript_pack_tag 'settings_video' %>
 

app/views/users/show.html.erb

@@ -1,27 +1,28 @@
-
-
-
 <div class="user-container">
-  <div class="profile">
-    <div class="profile-pic">
-      <% if @user.photo.url.nil? %>
-        <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png", class: "img-circle"%>
-      <% else %>
-        <%= cl_image_tag @user.photo, class: "img-circle"%>
-      <% end %>
-
+  <div class="row">
+    <div class="col-xs-12 col-md-3 vcenter">
+      <div class="profile-pic vertical-padding">
+        <% if @user.photo.url.nil? %>
+          <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png", class: "img-circle img-profile"%>
+        <% else %>
+          <%= cl_image_tag @user.photo, class: "img-circle img-profile"%>
+        <% end %>
+      </div>
     </div>
-    <div class="profile-text">
-      <h1><%= @user.first_name %> <%= @user.last_name %></h1>
-      <h2 class="italics" ><%= @user.email %></h2>
+    <div class="col-xs-12 col-md-4 vcenter">
+      <div class="profile-text vertical-padding">
+        <h1><%= @user.first_name %> <%= @user.last_name %></h1>
+        <h2 class="italics" ><%= @user.email %></h2>
+      </div>
     </div>
-
-      <div class="flex-end">
-        <%= link_to "Edit Information", user_edit_path(@user), class: "btn btn-primary" %>
-        <%= link_to "Delete Account", user_path(@user), class: "btn btn-danger", method: :delete, data: {
+    <div class="col-xs-12 col-md-4 vcenter">
+      <div class="flex-end vertical-padding">
+        <%= link_to "Edit Information", user_edit_path(@user), class: "btn btn-primary vertical-margin" %>
+        <%= link_to "Delete Account", user_path(@user), class: "btn btn-danger vertical-margin", method: :delete, data: {
             confirm: "Are you sure?"
           } %>
       </div>
+    </div>
   </div>
- </div>
+</div>