Subjects

frontend/src/components/BackgroundContainer.vue

@@ -11,7 +11,6 @@
     padding: 20px;
     height: 100vh;
     border: 25px solid white;
-    border-radius: 50px;
     background-color: var(--color-secondary);
 }
 </style>

frontend/src/components/buttons/HeaderSubtitleButton.vue

@@ -25,10 +25,19 @@ defineProps<{
 </script>
 
 <style scoped>
+.not-clickable {
+    cursor: default;
+    pointer-events: none;
+}
+
 .subtitle-button {
     margin-right: 10px;
 }
 
+.subtitle-button-active {
+    background-color: #9fb6ff;
+}
+
 .button-text {
     color: #003eff;
     font-weight: 1000;

frontend/src/components/subject/extra/SubjectIcon.vue

@@ -0,0 +1,26 @@
+<template>
+    <v-icon color="white" :size="size">
+        {{ `mdi-${userRole}` }}
+    </v-icon>
+</template>
+
+<script setup lang="ts">
+import { SubjectRole } from "@/models/Subject";
+import { computed, toRefs } from "vue";
+
+const props = defineProps<{
+    role: SubjectRole;
+    size: string;
+}>();
+
+const { role } = toRefs(props);
+
+const userRole = computed(() => {
+    if (role.value === SubjectRole.Instructor) return "account-tie";
+    if (role.value === SubjectRole.Student) return "school";
+    if (role.value === SubjectRole.Admin) return "security";
+    return "cancel";
+});
+</script>
+
+<style scoped></style>

frontend/src/components/subject/subjectsview/SubjectCard.vue

@@ -0,0 +1,49 @@
+<template>
+    <router-link :to="{ name: 'subject', params: { subjectId: subject.id } }" class="router-link">
+        <v-card class="subject-card" height="16vh" color="#1D357EFF">
+            <SubjectIcon :role="role" size="xx-large" class="subject-icon"></SubjectIcon>
+            <v-card-title class="subject-title">
+                {{ subject?.name }}
+                <v-icon class="">mdi-chevron-right</v-icon>
+            </v-card-title>
+        </v-card>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import Subject, { SubjectRole } from "@/models/Subject";
+import SubjectIcon from "@/components/subject/extra/SubjectIcon.vue";
+
+defineProps<{
+    subject: Subject;
+    role: SubjectRole;
+}>();
+</script>
+
+<style scoped>
+.router-link {
+    text-decoration: none;
+    width: 100%;
+}
+
+.subject-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+}
+
+.subject-title {
+    color: white;
+    font-size: 3vh;
+    position: absolute;
+    bottom: 0;
+}
+
+.subject-icon {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+}
+</style>