Misc/polish

app/assets/stylesheets/_variables.scss

@@ -1,15 +1,34 @@
-$header-color: #000103;
-$background-color: #333138;
-$line-color: #515052;
-$font-color: #fffffa;
-$font-secondary-color: #878787;
-$highlight-color: #00538F;
-$link-hover-color: #cccccc;
-$delete-color: rgb(200, 0, 0);
+$bg-dark: hsl(250, 2, 10);
+$bg: hsl(250, 2, 15);
+$bg-light: hsl(250, 2, 25);
+
+$brand: hsl(210, 80, 30);
+
+$text-bold: hsl(0, 0, 95);
+$text: hsl(0, 0, 90);
+$text-muted: hsl(0, 0, 60);
+
+$success: hsl(120, 80%, 30%);
+$warning: hsl(50, 80%, 30%);
+$danger: hsl(0, 80, 30);
+
 $font-size: 20px;
 $roundness: 10px;
 
+$max-page-width: 1400px;
+
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
-$breakpoint-xl: 1200px;
+$breakpoint-xl: 1200px;
+
+/* Deprecated styles to be fazed out */
+
+$header-color: $bg-dark;
+$background-color: $bg;
+$line-color: $bg-light;
+$font-color: $text;
+$font-secondary-color: $text-muted;
+$highlight-color: $brand;
+$link-hover-color: #cccccc;
+$delete-color: $danger;

app/assets/stylesheets/footer.scss

@@ -5,12 +5,17 @@ footer {
     padding: 10px;
     display: flex;
     gap: 1rem;
-    justify-content: center; // or center / flex-start as needed
+    justify-content: center;
     align-items: center;
 
     a {
         margin: 0 0.5rem;
         text-decoration: none;
         color: inherit;
     }
+
+    @media (max-width: $breakpoint-lg) {
+        width: 100%; 
+        margin: 0;
+    }
 }

app/assets/stylesheets/form.scss

@@ -16,12 +16,12 @@
     input, select {
         height: 34px;
         width: 100%;
-        padding: 0 5px;
+        padding: 0 0.5rem;
         outline: none;
         border-radius: 5px;
         background-color: $line-color;
         color: $font-color;
-        border: 2px solid $background-color;
+        border: none;
         margin-bottom: 4px;
     }
 

app/assets/stylesheets/header.scss

@@ -1,37 +1,45 @@
 @import "variables";
 
 header {
-    height: 60px;
-    width: 100%;
-    line-height: 60px;
-    background-color: $header-color;
-    border-bottom: 1px solid $line-color;
+    background-color: $bg-dark;
+    width: 400px;
+    border-right: 1px solid $bg-light;
+    flex-shrink: 0;
+    padding: 1rem;
+    height: 100vh;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    flex-shrink: 0;  
 
-    a {
-        color: $font-color;
-        text-decoration: none;
-    }
+    .side-heading {
+        .title {
+            font-size: 2.5rem;
+            line-height: 2.5rem;
+        }
 
-    form {
-        display: inline;
-    }
+        .account {
+            margin-bottom: 0.5rem;
+        }
 
-    button {
-        height: 50px;
-        border: none;
-        background-color: $header-color;
+        border-bottom: 1px solid $bg-light;
+        margin-bottom: 0.5rem;
+    }
+    a {
         color: $font-color;
         text-decoration: none;
-        display: inline;
     }
 
-    .title {
-        display: inline-block;
-        font-size: 32px;
+    .due-date {
+        color: $font-secondary-color;
+        font-style: italic;
     }
 
-    .header-links {
-        float: right;
-        margin-right: 20px;
+    @media (max-width: $breakpoint-lg) {
+        width: 100%;
+        max-width: 100%;
+        border-right: none;
+        position: relative;
+        height: fit-content;
     }
 }

app/assets/stylesheets/home.scss

@@ -1,33 +1,69 @@
 @import "variables";
 
 html, body {
-  height: 100%;
-  margin: 0;
+    height: 100%;
+    margin: 0;
+    color: $font-color;
+    font-family: Roboto, sans-serif;
+    font-size: $font-size;
 }
 
 body {
     background-color: $background-color;
-    color: $font-color;
-    font-family: Roboto, sans-serif;
-    font-size: $font-size;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+
+    @media (max-width: $breakpoint-lg) {
+        flex-direction: column;
+    }
 }
 
 main {
     flex: 1;
     display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 
     @media (max-width: $breakpoint-lg) {
         flex-direction: column;
     }
 }
 
+.not-header {
+    width: calc(100% - 400px); 
+    margin-left: 400px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.not-header-login {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+h1, h2, h3 {
+    color: $text-bold;
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
 .main-content {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     padding: 1rem;
+    width: 100%;
+    max-width: $max-page-width;
+    margin: 0 auto;
 }
 
 .module-list {
@@ -36,14 +72,18 @@ main {
         color: $font-color;
         text-decoration: none;
     }
+
+    .card-heading {
+        margin-bottom: 0.5rem;
+    }
 }
 
 .gt-card {
     padding: $roundness;
     border-radius: $roundness;
     //background-color: $line-color;
     border: 1px solid $line-color;
-    margin: 0 0 10px;
+    margin: 0 0 0.5rem;
     max-width: 100%;
     //box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
 }
@@ -183,30 +223,6 @@ main {
     font-size: 40px;
 }
 
-.sidebar {
-    max-width: 400px;
-    border-right: 1px solid $line-color;
-    flex-shrink: 0;
-    padding: 1rem;
-
-    a {
-        color: $font-color;
-        text-decoration: none;
-    }
-
-    .due-date {
-        color: $font-secondary-color;
-        font-style: italic;
-    }
-
-    @media (max-width: $breakpoint-lg) {
-        width: 100%;
-        max-width: 100%;
-        border-right: none;
-
-    }
-}
-
 .col.mod-code {
     width: 100px !important;
     flex: 0 0 100px;
@@ -227,17 +243,23 @@ main {
 }
 
 .login-container {
-    max-width: 400px;
-    width: 100%;
-    height: 100%;
-    margin: 5% auto 0;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .login {
-    h2 {
-        margin-bottom: 20px;
+    width: fit-content;
+    .gt-card {
+        padding: 1rem;
+    }
+
+    h1 {
+        margin-bottom: 1rem;
     }
     .omniauth {
+        width: 100%;
         color: $font-color;
         background: none;
         border: 1px solid $line-color;
@@ -250,19 +272,24 @@ main {
     }
 
     .field {
+        border-radius: $roundness;
         margin-bottom: 10px;
     }
 
     #user_remember_me {
         width: 20px;
-        margin: 0 0.5rem 0 0;
+        margin: 0;
     }
 
     .checkbox-container {
         display: flex;
         align-items: center;
         gap: 0.5rem; 
     }
+
+    input[type="submit"] {
+        margin: 0.5rem 0 !important;
+    }
 }
 
 .center {
@@ -278,7 +305,7 @@ main {
     text-align: center;
     color: $font-secondary-color;
     font-size: 0.9rem;
-    margin: 20px 0 10px;
+    margin: 0.5rem 0;
 
     &::before,
     &::after {
@@ -294,4 +321,27 @@ main {
     &::after {
         margin-left: 10px;
     }
+}
+
+.alert-bar {
+    width: 100%;
+    padding: 0.5rem;
+    text-align: center;
+    margin: 0;
+}
+
+.ab-notice {
+    background-color: $success;
+}
+
+.ab-danger {
+    background-color: $danger;
+}
+
+.ab-warning {
+    background-color: $warning;
+}
+
+.text-danger {
+    color: $danger;
 }

app/controllers/users_controller.rb

@@ -22,7 +22,7 @@ def show
       end
 
     @exam_type_data = Exam.joins(:uni_module)
-                          .where(uni_modules: current_user.uni_modules)
+                          .where(uni_module: current_user.uni_modules)
                           .group(:type)
                           .sum('exams.weight * uni_modules.credits / 100')
   end

app/models/uni_module.rb

@@ -45,7 +45,7 @@ def achieved_score(user)
 
   # Gets the percentage completion of the module based on the exams taken
   def completion_percentage(user)
-    return 0 if exams.exists?
+    return 0 unless exams.exists?
 
     exams_with_results(user).sum(:weight)
   end