finished basic contacts page

app/assets/stylesheets/application.scss

@@ -14,3 +14,7 @@
 @import "layouts/index";
 @import "components/index";
 @import "pages/index";
+
+body {
+  background-color: $background;
+}

app/assets/stylesheets/config/_colors.scss

@@ -14,3 +14,5 @@ $secondary: #5ED17E;
 $background: #33333D;
 $card-background: #464650;
 $navbar-background: #1F1F29;
+$text-darker: #CDCDCD;
+$icon: #EDECEC;

app/assets/stylesheets/layouts/_contacts.scss

@@ -1,17 +0,0 @@
-.card {
-  display: flex;
-  justify-content: space-between;
-
-  background-color: $card-background;
-  .profile {
-
-  }
-  .call {
-    transform: scaleX(-1);
-    -moz-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    -ms-transform: scaleX(-1);
-  }
-
-}
-

app/assets/stylesheets/pages/_contacts.scss

@@ -0,0 +1,121 @@
+a:hover {
+  text-decoration: none;
+}
+
+.card {
+  display: flex;
+  justify-content: space-between;
+  background: $card-background;
+  align-items: center;
+  margin-bottom: 10px;
+
+  border-radius: 5px;
+  box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    box-shadow: inset 0px 0px 0px 2px $primary;
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    .text {
+      p {
+        padding: 0;
+        margin: 0;
+      }
+      .darker {
+        color: $text-darker;
+      }
+    }
+  }
+  .profile {
+    margin-left: 15px;
+    margin-right: 15px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    img {
+      width: 50px;
+    }
+  }
+
+  .call {
+    margin-left: 20px;
+    margin-right: 20px;
+    transform: scaleX(-1);
+    -moz-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    -ms-transform: scaleX(-1);
+    i {
+      color: $icon;
+      font-size: 25px;
+    }
+  }
+
+}
+
+.video-feed {
+  padding-top: 67px;
+  padding-left: 50px;
+}
+
+.video-content {
+  height: 485px;
+  background-color: black;
+}
+
+.half {
+  width: 50%;
+}
+
+.text-color {
+  color: white;
+}
+
+.contacts-container {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-header {
+  border-bottom: 0px;
+  i {
+    font-size: 50px;
+  }
+}
+
+.modal-color {
+  background-color: $card-background;
+}
+
+.vertical-alignment-helper {
+    display:table;
+    height: 100%;
+    width: 100%;
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
+}
+.modal-content {
+    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
+    width:35%;
+    height:inherit;
+    /* To center horizontally */
+    margin: 0 auto;
+}
+
+.modal-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

app/assets/stylesheets/pages/_index.scss

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

app/controllers/pages_controller.rb

@@ -3,4 +3,7 @@ class PagesController < ApplicationController
 
   def call
   end
+
+  def index
+  end
 end

app/views/layouts/_contact.html.erb

@@ -1,12 +0,0 @@
-<div class="card">
-  <div class="profile img-circle">
-    <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="">
-  </div>
-  <div class="info">
-    <h3>FirstName LastName</h3>
-    <p>Last call: <%= Date.now %></p>
-  </div>
-  <div class="call">
-    <i class="fas fa-phone"></i>
-  </div>
-</div>

app/views/layouts/index.html.erb

@@ -1,15 +0,0 @@
-<div class="container">
-  <div class="contacts">
-    <h2>Contacts</h2>
-    <% 5.times do %>
-      <%= render "layouts/contact" %>
-    <% end %>
-  </div>
-  <div class="video-feed">
-    <video src=""></video>
-  </div>
-</div>
-
-
-
-

app/views/pages/_contact.html.erb

@@ -0,0 +1,38 @@
+<div class="card">
+  <div class="info">
+    <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=65>
+    <div class="text text-color">
+      <p>FirstName LastName</p>
+      <p class="darker">Last call: <%= Time.now %></p>
+    </div>
+  </div>
+  <div class="call">
+    <%= link_to "#", 'data-toggle':"modal", 'data-target':"#myModal" do  %>
+      <i class="fas fa-phone"></i>
+    <% end %>
+  </div>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="myModal" 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  %>
+                    <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-text">
+                        <h4 class="modal-title" id="myModalLabel">Calling</h4>
+                        <h4><strong>FirstName LastName</strong></h4>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

app/views/pages/index.html.erb

@@ -0,0 +1,18 @@
+<div class="container">
+  <div class="contacts-container text-color">
+    <div class="contacts half">
+      <h2>Contacts</h2>
+      <% 5.times do %>
+        <%= render "pages/contact" %>
+      <% end %>
+    </div>
+    <div class="video-feed half">
+      <div class="video-content">
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+

config/routes.rb

@@ -2,7 +2,7 @@ Rails.application.routes.draw do
   get 'video_sessions/create'
   devise_for :users
   root to: 'pages#call'
-  get '/contacts', to: 'users#index'
+  get '/contacts', to: 'pages#index'
   post '/sessions', to: 'video_sessions#create'
 
   mount ActionCable.server, at: '/cable'