src/App.vue

@@ -1,16 +1,16 @@
 <script lang="ts">
 import MainMenu from './components/MainMenu.vue'
-import SearchBar from './components/SearchBar.vue'
-import FilterView from './components/papers/FilterView.vue'
-import PaperList from './components/papers/PaperList.vue'
+import Search from './components/Search.vue'
+import Filter from './components/Filter.vue'
+import Papers from './components/Papers.vue'
 import FooterMenu from './components/FooterMenu.vue'
 
 export default {
   components: {
     MainMenu,
-    SearchBar,
-    FilterView,
-    PaperList,
+    Search,
+    Filter,
+    Papers,
     FooterMenu,
   },
   data() {
@@ -37,18 +37,18 @@ export default {
       <h1 class="p-2 text-xl">{{ applicationName }} {{ cityName }}</h1>
       <MainMenu />
     </div>
-    <SearchBar
+    <Search
       @searchSubmit="(type) => search.type = type"
       @searchQuery="(query) => search.value = query"
     />
   </header>
 
   <main class="flex flex-row max-w-5xl m-auto">
-    <FilterView
+    <Filter
       @paperFilter="(filter) => paperFilter = filter"
       :papers="papers"
     />
-    <PaperList
+    <Papers
       @papers="(p) => papers = p"
       :paperQuery="search"
       :paperFilter="paperFilter"

src/components/FooterMenu.vue

@@ -10,11 +10,7 @@ export default {
 
 <template>
   <ul class="flex flex-row place-content-center">
-    <li
-      v-for="{entry, i} of menuEntries"
-      :key="i"
-      class="p-2 place-content-center"
-    >
+    <li class="p-2 place-content-center" v-for="entry of menuEntries">
       <a :href="entry.uri">{{ entry.name }}</a>
     </li>
   </ul>

src/components/Paper.vue

@@ -4,5 +4,4 @@ export default {
 </script>
 
 <template>
-    <div></div>
 </template>

src/components/Papers.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-
 export type Papers = {
   body: string
   content: string
@@ -49,19 +48,13 @@ export default {
         })
       }
       return filteredPapers
-    }, 
+    }
   },
   methods: {
     async fetchData() {
       this.papers = await (await fetch(this.apiUri)).json()
     }, 
-    openPaper() {
-
-    },
-    date(paperDate: String) {
-      const date = new Date(paperDate)
-      return new Intl.DateTimeFormat('de-DE', { dateStyle: 'full' }).format(date)
-    },
+    openPaper() {}
   },
 }
 </script>
@@ -81,7 +74,7 @@ export default {
         @click.prevent="openPaper()"
       >
         <h4 class="text-xl">{{ paper.name }}</h4>
-        <p>{{ date(paper.published_at) }}: <a :href="paper.url" class="text-secondary-button-500">{{ paper.paper_type}} von {{ paper.originator }}</a></p>
+        <p>{{ paper.published_at }}: {{ paper.paper_type}} von {{ paper.originator }}</p>
       </article>
     </li>
   </ul>

tailwind.config.js

@@ -12,16 +12,16 @@ export default {
       colors: {
         'text': { // hand-choosen
           50: '#FDFDFD',
-          100: '#F6F6F6',
-          200: '#E8E8E7',
-          300: '#D9D9D9',
-          400: '#D0D0CF',
-          500: '#BBBBBB',
-          600: '#A1A1A1',
-          700: '#848484',
-          800: '#686867',
-          900: '#494949',
-          950: '#2C2C2C',
+          100: '#F3F3F6',
+          200: '#DCDCE7',
+          300: '#C0BFD9',
+          400: '#AAA8CF',
+          500: '#8A86BB',
+          600: '#6C68A1',
+          700: '#554F84',
+          800: '#403B67',
+          900: '#2C2849',
+          950: '#1A182C',
         },
         'background': { // hand-choosen
           50: '#FDFDFD',