Update badge styles on profile page

Author: kenanwright1988

profiles/templates/profiles/profile.html

@@ -42,13 +42,13 @@
                 {% endif %}
                 </div>
             </div>
-            <div class="card mt-3">
+            <div class="card mt-3 trophy-case">
                 <div class="p-3">
                     <label class="w-100">Hackathon Badges</label>
                     {% for team in user.get_participated_teams %}
                         {% if team.hackathon.badge_url %}
 
-                            <img class="card-img-top profile-image hover_badge mini-badge" src="{{ team.hackathon.badge_url }}" alt="Hackathon badge" style="height: 75px; width: 75px;" data-toggle="modal" data-target="#badgeModal" data-badge-url="{{ team.hackathon.badge_url }}">
+                            <img class="card-img-top profile-image" src="{{ team.hackathon.badge_url }}" alt="Hackathon badge" style="height: 70px; width: 70px;" data-toggle="modal" data-target="#badgeModal" data-badge-url="{{ team.hackathon.badge_url }}">
                         {% endif %}
                     {% endfor %}
                 </div>
@@ -168,6 +168,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
+                <h5 class="modal-title" id="badgeModalLabel"></h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>

static/css/profile.css

@@ -70,3 +70,43 @@ html form label,
 .dark-text {
     font-weight: 700;
 }
+
+.trophy-case {
+    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
+    border: 2px solid #d1d1d1;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin-top: 20px;
+    position: relative;
+}
+
+.trophy-case::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 10px;
+    background: #d1d1d1;
+    border-radius: 5px 5px 0 0;
+}
+
+.trophy-case::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 10px;
+    background: #d1d1d1;
+    border-radius: 0 0 5px 5px;
+}
+
+.trophy-case .card-img-top {
+    border: 2px solid #d1d1d1;
+    border-radius: 5px;
+    margin: 5px;
+}