nicer formatting for scoreboard

public/css/app.css

@@ -8514,6 +8514,16 @@ button.close {
   margin-right: 10px;
 }
 
+.team .team-icon.outlined {
+  border-width: 4px;
+  border-style: solid;
+  margin-right: 0;
+}
+
+.team .team-icon.empty {
+  background-color: transparent !important;
+}
+
 .team .team-name {
   font-weight: bold;
 }
@@ -8700,3 +8710,16 @@ button.close {
   height: 200px;
 }
 
+.scoreboard td.score,
+.scoreboard th.score {
+  text-align: center;
+}
+
+.scoreboard td.total.score {
+  font-size: 20px;
+}
+
+.scoreboard td .team-wrap {
+  display: inline-block;
+}
+

resources/assets/sass/app.scss

@@ -22,6 +22,14 @@
     border-radius: 20px;
     margin-right: 10px;
   }
+  .team-icon.outlined {
+    border-width: 4px;
+    border-style: solid;
+    margin-right: 0;
+  }
+  .team-icon.empty {
+    background-color: transparent !important;
+  }
 
   .team-name {
     font-weight: bold;
@@ -211,3 +219,19 @@
   width: 35%;
   height: 200px;
 }
+
+
+
+.scoreboard {
+  td.score, th.score {
+    text-align: center;
+  }
+  td.total.score {
+    font-size: 20px;
+  }
+  td .team-wrap {
+    display: inline-block;
+  }
+}
+
+

resources/views/scoreboard.blade.php

@@ -5,17 +5,17 @@
     <div class="row">
         <div class="col-md-12">
 
-          <table class="table table-bordered">
+          <table class="table scoreboard">
           <thead>
             <tr>
               <th>Team</th>
               @foreach($missions as $mission)
-              <th>
+              <th class="score">
                 <h3>{{ $mission->id }}</h3>
                 {{ $mission->hashtag }}
               </th>
               @endforeach
-              <th>Score</th>
+              <th class="score">Score</th>
             </tr>
           </thead>
           <tbody>
@@ -33,17 +33,21 @@
                 </div>
               </td>
               @foreach($missions as $mission)
-              <td>
-                @if(Auth::guest())
-                  <div>{{ $mission->complete($team) ? 'Complete' : '' }}</div>
-                @else
-                  <div>{{ $mission->score($team) }}</div>
-                  <div>{{ $mission->complete($team) ? 'Complete' : '' }}</div>
-                  <div>{{ $mission->progress($team)[0].'/'.$mission->progress($team)[1] }}</div>
+              <td class="score">
+                @if(!Auth::guest())
+                  <div>{{ $mission->score($team) }}pts</div>
                 @endif
+                <div class="team-wrap">
+                  <div class="team">
+                    @if($mission->progress($team)[0] >= 1)
+                      <span class="team-icon outlined {{ $mission->complete($team) ? '' : 'empty' }}" 
+                        style="background-color: #{{ $team->color }}; border-color: #{{ $team->color }};"></span> 
+                    @endif
+                  </div>
+                </div>
               </td>
               @endforeach
-              <td>
+              <td class="total score">
                 <b>{{ $team->total_score() }}</b>
               </td>
             </tr>