Started working on a new dashboard look and function.

application/views/index/index.phtml

@@ -18,23 +18,39 @@
 ?>
 <div class="section">
     <div class="row">
-        <div class="small-12 medium-4 columns text-center">
-            <div class="radius">
-                <h5>Hours this week</h5>
-                <div class="circular">38</div>
-            </div>
-        </div>
-        <div class="small-12 medium-4 columns text-center">
-            <div class="radius">
-                <h5>Total Vacation Time</h5>
-                <div class="circular">121</div>
-            </div>
+        <div class="small-12 columns text-center">
+            <h2>Current Pay Period</h2>
+            <h3 class="subheader">November 26th 2015 to December 25th 2015</h3>
         </div>
-        <div class="small-12 medium-4 columns text-center">
-            <div class="radius">
-                <h5>Total Sick Time</h5>
-                <div class="circular">70</div>
-            </div>
+    </div>
+    <div class="row">
+        <div class="small-12 columns">
+            <ul class="small-block-grid-3">
+                <li>
+                    <div class="card alert">
+                        <div class="title">Week Validated</div>
+                        <div class="value">20</div>
+                    </div>
+                </li>
+                <li>
+                    <div class="card">
+                        <div class="title">Month Validated</div>
+                        <div class="value">20</div>
+                    </div>
+                </li>
+                <li>
+                    <div class="card">
+                        <div class="title"></div>
+                        <div class="value">20</div>
+                    </div>
+                </li>
+                <li>
+                    <div class="card">
+                        <div class="title">Validated Week Hours</div>
+                        <div class="value">20</div>
+                    </div>
+                </li>
+            </ul>
         </div>
     </div>
 </div>

public/timetrackerStyle/scss/_settings.scss

@@ -149,20 +149,6 @@ $primary-color: #315476;
   background-color:#fff;
 }
 
-.circular {
-  font-size:3em !important;
-  background-color:$info-color;
-  border-radius:50%;
-  width:125px;
-  height:125px;
-  margin-left:auto;
-  margin-right:auto;
-  padding-top:21px;
-  border:7px solid #fff;
-  box-shadow: 0px 0px 10px #888888;
-  margin-bottom:30px;
-}
-
 .warning {
   background-color:$warning-color !important;
   color:#fff !important;
@@ -223,6 +209,23 @@ $primary-color: #315476;
   color:$primary-color;
 }
 
+.card {
+  border:1px solid #eaeaea;
+  margin:0px;
+  padding:20px;
+}
+
+.card .title {
+  text-align:center;
+  font-size:1.5em;
+  text-transform: uppercase;
+}
+
+.card .value {
+  text-align:center;
+  font-size:3.0em;
+}
+
 // We use these to control various global styles
 // $body-bg: $white;
 // $body-font-color: $jet;