Revamp jam index, add winner team staff backend and user frontend

5 files changed, 82 insertions, 1 deletions

diff --git a/scss/pysite/_variables.scss b/scss/pysite/_variables.scss
index 411444fc..5f410b6c 100644
--- a/scss/pysite/_variables.scss
+++ b/scss/pysite/_variables.scss
@@ -14,3 +14,9 @@ $primary_background: #7289DA;
 $muted_background: #F8F8F8;
 
 $global_border: #E5E5E5;
+$border_darker: #AAAAAA;
+
+$winner_colour_brighter: #EEBB00;
+$winner_colour: #E0B000;
+$winner_colour_hover: #DAA900;
+$winner_colour_active: #DAA015;
diff --git a/scss/pysite/pages/main/jams/_index.scss b/scss/pysite/pages/main/jams/_index.scss
index 4be7e0de..a1f80162 100644
--- a/scss/pysite/pages/main/jams/_index.scss
+++ b/scss/pysite/pages/main/jams/_index.scss
@@ -1,3 +1,6 @@
+@import "variables";
+@import "../../../../uikit/variables";
+
 $page_classes: (
   page-main-jams-index,
 );
@@ -11,5 +14,31 @@ $page_classes: (
     .theme-label {
       margin-top: 3px;
     }
+
+    .jam-tiles {
+      border-color: $border_darker transparent;
+      border-style: solid;
+      border-width: 1px;
+
+      .uk-tile-success {
+        background: $success_colour;
+      }
+
+      .uk-tile-danger {
+        background: $danger_colour;
+      }
+
+      .uk-tile-winner {
+        background: $winner_colour_brighter;
+      }
+
+      .jam-tile-text {
+        align-items: center;
+        color: $white;
+        display: flex;
+        justify-content: center;
+        text-transform: uppercase;
+      }
+    }
   }
 }
diff --git a/scss/pysite/pages/main/jams/_team_list.scss b/scss/pysite/pages/main/jams/_team_list.scss
index 83ec8aaa..75fd397d 100644
--- a/scss/pysite/pages/main/jams/_team_list.scss
+++ b/scss/pysite/pages/main/jams/_team_list.scss
@@ -17,7 +17,23 @@ $page_classes: (jam-team-list);
     }
 
     .team-card-own {
-      border: solid 1px $primary_background;
+      border: solid 2px $primary_background;
+
+      &.team-card-winner {
+        border-color: $winner_colour $winner_colour $primary_background $primary_background;
+      }
+    }
+
+    .team-badge-own {
+      color: $primary_background;
+    }
+
+    .team-card-winner {
+      border: solid 2px $winner_colour;
+    }
+
+    .team-badge-winner {
+      color: $winner_colour;
     }
 
     .team-member-avatars {
diff --git a/scss/pysite/pages/staff/jams/teams/_view.scss b/scss/pysite/pages/staff/jams/teams/_view.scss
new file mode 100644
index 00000000..54a455d4
--- /dev/null
+++ b/scss/pysite/pages/staff/jams/teams/_view.scss
@@ -0,0 +1,28 @@
+@import "variables";
+
+$page_classes: (page-staff-jams-edit-teams);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .team-winner-unset-button,
+    .team-winner-button {
+      background-color: $winner_colour;
+      border: 1px solid transparent;
+      color: $white;
+    }
+
+    .team-winner-unset-button:hover,
+    .team-winner-button:hover {
+      background-color: $winner_colour_hover;
+    }
+
+    .team-winner-unset-button:active,
+    .team-winner-button:active {
+      background-color: $winner_colour_active;
+    }
+
+    .team-card-winner {
+      border: solid 2px $winner_colour;
+    }
+  }
+}
diff --git a/scss/pysite/style.scss b/scss/pysite/style.scss
index 23f8b1bb..dace05e7 100644
--- a/scss/pysite/style.scss
+++ b/scss/pysite/style.scss
@@ -65,6 +65,8 @@
 
 @import "pages/staff/jams/infractions/view";
 
+@import "pages/staff/jams/teams/view";
+
 @import "pages/staff/tables/edit";
 @import "pages/staff/tables/table";