style: wrap /topics in card with header, use solid pink btn-primary on both /topics and /popular/topics

1 files changed, 21 insertions, 17 deletions

diff --git a/resources/views/topicindex.blade.php b/resources/views/topicindex.blade.php
index d5cf223..0920b85 100644
--- a/resources/views/topicindex.blade.php
+++ b/resources/views/topicindex.blade.php
@@ -11,36 +11,40 @@ html {
 
 <div class="text-center container">
 
-<div class="container row text-white text-lg" style="margin-top: 20px">
+<div class="container row" style="margin-top: 20px">
 	<ul class="list-inline">
 	@foreach ($letters as $letter)
 		<li class="list-inline-item">
-		<a href="#{{$letter->name}}" class="text-white">{{$letter->name}}</a>
+			<a href="#{{$letter->name}}" class="text-white">{{$letter->name}}</a>
 		</li>
 	@endforeach
 	</ul>
 </div>
 
-@php ($curLetter = "")
-@foreach ($topics->get() as $topic)
-	@if ( "" != $topic->name )
-		@php ( $firstLetter = strtoupper(substr($topic->name, 0, 1)) )
-		@if ( $curLetter != $firstLetter )
-			<div class="container row">
-				<h2 id="{{$firstLetter}}">
+<div class="card">
+	<h1 class="card-header">
+		Topics
+	</h1>
+	<div class="card-body">
+	@php ($curLetter = "")
+	@foreach ($topics->get() as $topic)
+		@if ( "" != $topic->name )
+			@php ( $firstLetter = strtoupper(substr($topic->name, 0, 1)) )
+			@if ( $curLetter != $firstLetter )
+				<h3 id="{{$firstLetter}}">
 					<a class="text-white" href="#{{$firstLetter}}">
-					{{ $firstLetter }}
+						{{ $firstLetter }}
 					</a>
-				</h2>
-			</div>
-			<hr>
-
+				</h3>
+				<hr>
+			@endif
 			@php ($curLetter = $firstLetter)
-
 		@endif
-		<a href="{{ route('topic', $topic->name) }}" class="btn btn-lg btn-outline-pink">{{ ucwords($topic->name) }}</a>
+		<a href="{{ route('topic', $topic->name) }}" class="btn btn-lg btn-primary mx-1 my-1">{{ ucwords($topic->name) }}</a>
 	@endif
-@endforeach
+	@endforeach
+	</div>
+</div>
 
 </div>
 @endsection