Set default border color to border-color-gray500

client/src/components/AppFooter.vue

@@ -5,9 +5,7 @@ log.debug("AppFooter created");
 </script>
 
 <template>
-  <footer
+  <footer class="px-8 py-4 bg-gray-200 border-t flex flex-col lg:flex-row">
-    class="px-8 py-4 bg-gray-200 border-t border-gray-500 flex flex-col lg:flex-row"
-  >
     <div>@2022 VBV</div>
     <div class="lg:ml-8">FAQ</div>
     <div class="lg:ml-8">Datenschutzbestimmungen</div>

client/src/components/MobileMenu.vue

@@ -25,7 +25,7 @@ const clickLink = (to: string) => {
   <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
     <div>
       <div>
-        <div v-if="userStore.loggedIn" class="border-b border-gray-500 -mx-4 px-8 pb-4">
+        <div v-if="userStore.loggedIn" class="border-b -mx-4 px-8 pb-4">
           <div class="-ml-4 flex">
             <div v-if="userStore.avatar_url">
               <img
@@ -47,7 +47,7 @@ const clickLink = (to: string) => {
           </div>
         </div>
         <div>
-          <div v-if="true" class="mt-6 pb-6 border-b border-gray-500">
+          <div v-if="true" class="mt-6 pb-6 border-b">
             <h4 class="text-gray-900 text-sm">Kurs: Versicherungsvermittler/in</h4>
             <ul class="mt-6">
               <li>
@@ -64,7 +64,7 @@ const clickLink = (to: string) => {
               </li>
             </ul>
           </div>
-          <div class="mt-6 pb-6 border-b border-gray-500">
+          <div class="mt-6 pb-6 border-b">
             <ul>
               <li>Shop</li>
               <li class="mt-6">

client/src/components/competences/CompetenceDetail.vue

@@ -20,7 +20,7 @@ const togglePerformanceCriteria = () => {
 
 <template>
   <div>
-    <div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
+    <div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8">
       <div class="mb-4 flex flex-row justify-between items-center">
         <h2 class="text-large">
           {{ competence.competence_id }} {{ competence.title }}
@@ -45,7 +45,7 @@ const togglePerformanceCriteria = () => {
       <li
         v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
         :key="performanceCriteria.id"
-        class="mb-4 pb-4 border-b border-gray-500"
+        class="mb-4 pb-4 border-b"
       >
         <PerformanceCriteriaRow
           :criteria="performanceCriteria"

client/src/components/learningPath/CircleOverview.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
         Hier zeigen wir dir, was du in diesem Circle lernen wirst.
       </p>
 
-      <div class="mt-8 p-4 border border-gray-500">
+      <div class="mt-8 p-4 border">
         <h3>Du wirst in der Lage sein, ...</h3>
 
         <ul class="mt-4">
@@ -45,7 +45,7 @@ const props = defineProps<{
         <li
           v-for="jobSituation in circle.job_situations"
           :key="jobSituation.id"
-          class="job-situation border border-gray-500 p-4 text-large flex items-center"
+          class="job-situation border p-4 text-large flex items-center"
         >
           {{ jobSituation.value }}
         </li>

client/src/components/learningPath/LearningContent.vue

@@ -26,9 +26,7 @@ const block = computed(() => {
 
 <template>
   <div v-if="block">
-    <nav
+    <nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
-      class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500"
-    >
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2"

client/src/components/learningPath/LearningSequence.vue

@@ -93,10 +93,7 @@ const learningSequenceBorderClass = computed(() => {
       <div>{{ humanizeDuration(learningSequence.minutes) }}</div>
     </div>
 
-    <div
+    <div class="bg-white px-4 lg:px-6 border" :class="learningSequenceBorderClass">
-      class="bg-white px-4 lg:px-6 border border-gray-500"
-      :class="learningSequenceBorderClass"
-    >
       <div
         v-for="learningUnit in learningSequence.learningUnits"
         :id="learningUnit.slug"

client/src/components/learningPath/SelfEvaluation.vue

@@ -33,9 +33,7 @@ function handleContinue() {
 
 <template>
   <div v-if="learningUnit">
-    <nav
+    <nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
-      class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500"
-    >
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2"
@@ -71,7 +69,7 @@ function handleContinue() {
         Lies die folgende Aussage und bewerte sie:
       </p>
 
-      <div class="mt-4 lg:mt-8 p-6 lg:p-12 border border-gray-500">
+      <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
         <h2 class="heading-2">
           {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
         </h2>
@@ -82,7 +80,6 @@ function handleContinue() {
             :class="{
               'border-green-500': currentQuestion.completion_status === 'success',
               'border-2': currentQuestion.completion_status === 'success',
-              'border-gray-500': currentQuestion.completion_status !== 'success',
             }"
             data-cy="success"
             @click="circleStore.markCompletion(currentQuestion, 'success')"
@@ -95,7 +92,6 @@ function handleContinue() {
             :class="{
               'border-orange-500': currentQuestion.completion_status === 'fail',
               'border-2': currentQuestion.completion_status === 'fail',
-              'border-gray-500': currentQuestion.completion_status !== 'fail',
             }"
             data-cy="fail"
             @click="circleStore.markCompletion(currentQuestion, 'fail')"

client/src/components/mediaLibrary/LinkCard.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="border-gray-500 border flex flex-col lg:flex-row p-4 items-center">
+  <div class="border flex flex-col lg:flex-row p-4 items-center">
     <img class="mr-6" :src="icon" />
     <div>
       <h4 class="mb-2 text-bold">{{ title }}</h4>

client/src/components/ui/ItDropdownSelect.vue

@@ -40,7 +40,7 @@ const dropdownSelected = computed({
   <Listbox v-model="dropdownSelected" as="div">
     <div class="mt-1 relative w-full">
       <ListboxButton
-        class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold"
+        class="bg-white relative w-full border pl-5 pr-10 py-3 text-left cursor-default font-bold"
       >
         <span class="block truncate">{{ dropdownSelected.name }}</span>
         <span

client/src/pages/LoginPage.vue

@@ -35,7 +35,7 @@ const userStore = useUserStore();
             v-model="state.username"
             type="text"
             name="username"
-            class="py-2 px-3 border border-gray-500 mt-1 block w-96 max-w-full"
+            class="py-2 px-3 border mt-1 block w-96 max-w-full"
           />
         </div>
         <div class="mb-4">
@@ -45,7 +45,7 @@ const userStore = useUserStore();
             v-model="state.password"
             type="password"
             name="password"
-            class="py-2 px-3 border border-gray-500 mt-1 block w-96 max-w-full"
+            class="py-2 px-3 border mt-1 block w-96 max-w-full"
           />
         </div>
 

client/src/pages/competence/CompetenceIndexPage.vue

@@ -62,12 +62,12 @@ const countStatus = computed(() => {
     </div>
     <div class="bg-white p-8 mb-8">
       <div>
-        <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
+        <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
         <ul>
           <li
             v-for="competence in lastUpdatedCompetences"
             :key="competence.id"
-            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8"
+            class="py-4 flex flex-col lg:flex-row lg:items-center border-b last:mb-8"
           >
             <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
               {{ competence.competence_id }} {{ competence.title }}
@@ -95,14 +95,14 @@ const countStatus = computed(() => {
       <ul
         class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
       >
-        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
+        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg: flex-1">
           <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
             <p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p>
           </div>
         </li>
-        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg:border-gray-500 flex-1">
+        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg: flex-1">
           <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
@@ -130,7 +130,7 @@ const countStatus = computed(() => {
       </router-link>
     </div>
     <div class="bg-white p-8">
-      <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
+      <div class="border-b flex flex-row items-center pb-4 mb-4">
         <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
         <h3>«Das muss ich nochmals anschauen»</h3>
       </div>
@@ -138,7 +138,7 @@ const countStatus = computed(() => {
         <li
           v-for="criteria in failedCriteria"
           :key="criteria.id"
-          class="mb-4 pb-4 border-b border-gray-500"
+          class="mb-4 pb-4 border-b"
         >
           <PerformanceCriteriaRow :criteria="criteria"></PerformanceCriteriaRow>
         </li>

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -39,9 +39,7 @@ const shownCriteria = computed(() => {
       ></ItDropdownSelect>
     </div>
     <div class="bg-white p-8">
-      <div
+      <div class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4">
-        class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4"
-      >
         <button
           :class="{ 'bg-gray-200': activeState === 'fail' }"
           class="flex flex-row items-center py-4 px-2 mr-6"
@@ -71,7 +69,7 @@ const shownCriteria = computed(() => {
         <li
           v-for="criteria in shownCriteria"
           :key="criteria.id"
-          class="mb-4 pb-4 border-b border-gray-500"
+          class="mb-4 pb-4 border-b"
         >
           <PerformanceCriteriaRow
             :criteria="criteria"

client/src/pages/learningPath/CirclePage.vue

@@ -102,7 +102,7 @@ onMounted(async () => {
                   <CircleDiagram></CircleDiagram>
                 </div>
 
-                <div class="border-t-2 border-gray-500 mt-4 lg:hidden">
+                <div class="border-t-2 mt-4 lg:hidden">
                   <div
                     class="mt-4 inline-flex items-center"
                     @click="circleStore.page = 'OVERVIEW'"
@@ -117,7 +117,7 @@ onMounted(async () => {
                 </div>
 
                 <div class="hidden lg:block">
-                  <div class="block border border-gray-500 mt-8 p-6">
+                  <div class="block border mt-8 p-6">
                     <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
                     <div class="leading-relaxed mt-4">
                       {{ circleStore.circle?.description }}
@@ -131,7 +131,7 @@ onMounted(async () => {
                     </button>
                   </div>
 
-                  <div class="expert border border-gray-500 mt-8 p-6">
+                  <div class="expert border mt-8 p-6">
                     <h3 class="text-blue-dark">Hast du Fragen?</h3>
                     <div class="leading-relaxed mt-4">
                       Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -116,9 +116,6 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
                 content_collection.value.contents[0].type
               ),
               'border-t': !displayAsCard(content_collection.value.contents[0].type),
-              'border-gray-500': !displayAsCard(
-                content_collection.value.contents[0].type
-              ),
               'mb-6': hasMoreItemsForType(
                 content_collection.value.contents[0].type,
                 content_collection.value.contents
@@ -141,10 +138,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
                 :link-text="mediaItem.value.link_display_text"
                 :open-window="mediaItem.value.open_window"
               />
-              <div
+              <div v-else class="flex items-center justify-between border-b py-4">
-                v-else
-                class="flex items-center justify-between border-b border-gray-500 py-4"
-              >
                 <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
                 <media-link
                   :blank="mediaItem.value.open_window"
@@ -175,12 +169,4 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-.it-icon-hf {
-  color: blue;
-}
-
-.it-icon-hf > * {
-  @apply m-auto;
-}
-</style>

client/src/pages/mediaLibrary/MLCategoryIndexPage.vue

@@ -43,8 +43,4 @@ watch(dropdownSelected, (newValue) =>
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-.it-icon-hf > * {
-  @apply m-auto;
-}
-</style>

client/src/pages/mediaLibrary/MLMediaListPage.vue

@@ -86,12 +86,4 @@ const mediaList = computed(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-.it-icon-hf {
-  color: blue;
-}
-
-.it-icon-hf > * {
-  @apply m-auto;
-}
-</style>

client/src/pages/mediaLibrary/MLParentPage.vue

@@ -24,7 +24,7 @@ onMounted(async () => {
 
 <template>
   <div class="bg-gray-200">
-    <nav class="px-6 py-4 border-b border-gray-500 bg-white">
+    <nav class="px-6 py-4 border-b bg-white">
       <ul v-if="mediaLibraryStore.mediaLibraryPage" class="flex flex-col lg:flex-row">
         <li>
           <router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url">

client/tailwind.config.js

@@ -24,6 +24,9 @@ module.exports = {
           "url('/static/icons/icon-handlungsfelder-overview.svg')",
         "lernmedien-overview": "url('/static/icons/icon-lernmedien-overview.svg')",
       },
+      borderColor: (theme) => ({
+        DEFAULT: theme("colors.gray.500"),
+      }),
     },
     colors: colors,
   },