CHANGELOG.md

@@ -67,6 +67,7 @@
 - Changed deleting wall posts to the API #798 !2253 @alex.simm
 - Rebuild profile infos to vue !2276 !2287 @chriswalg
 - Rebuild join region to vue !2294 @sefn
+- Rebuild profile menu to vue !2281 @chriswalg
 
 ## Dev/Test/CI stuff
 - bump node to version 16 !2135 @peter.toennies

client/package.json

@@ -15,16 +15,12 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@sentry/vue": "~5.30.0",
-    "@sum.cumo/vue-datepicker": "^3.1.0",
     "autosize": "^4.0.2",
     "bootstrap-vue": "^2.20.1",
     "copy-webpack-plugin": "^6.4.1",
     "core-js": "^3.20.2",
     "corejs-typeahead": "^1.3.1",
     "cropperjs": "^1.5.11",
-    "date-fns": "^2.20.1",
-    "install": "^0.13.0",
-    "javascript-time-ago": "^2.5.4",
     "jquery": "^3.4.1",
     "jquery-contextmenu": "^2.9.2",
     "jquery-jcrop": "^0.9.13",
@@ -35,27 +31,19 @@
     "leaflet": "^1.7.1",
     "leaflet.awesome-markers": "^2.0.5",
     "leaflet.markercluster": "^1.5.0",
-    "lodash.pickby": "^4.6.0",
-    "mapbox-gl": "<2.0.0",
-    "mapbox-gl-leaflet": "^0.0.14",
+    "libphonenumber-js": "^1.10.7",
     "markdown-it": "^12.3.2",
     "node-sass": "~6.0.1",
-    "object-path": "^0.11.8",
-    "popper.js": "^1.16.1",
     "serviceworker-webpack-plugin": "^1.0.1",
     "socket.io-client": "^2.3.1",
-    "tinysort": "~3.2.7",
-    "twemoji": "^13.0.2",
     "typeahead-address-photon": "^1.1.0",
     "typeahead-addresspicker": "^1.0.1",
-    "typeface-alfa-slab-one": "^1.1.13",
-    "underscore": "^1.13.0",
     "vue": "~2.6.14",
     "vue-croppie": "^2.0.1",
     "vue-infinite-loading": "^2.4.5",
     "vue-simple-suggest": "^1.11.1",
     "vue-slider-component": "~3.2.11",
-    "vue-tel-input": "^4.4.2",
+    "vue-tel-input": "^5.11.0",
     "vue2-leaflet": "^2.7.1",
     "vuelidate": "^0.7.6",
     "whatwg-fetch": "^3.6.2"

client/src/addressPicker.js

@@ -3,10 +3,10 @@ import 'corejs-typeahead'
 import 'typeahead-address-photon'
 import L from 'leaflet'
 import 'leaflet.awesome-markers'
-import 'mapbox-gl-leaflet'
-import 'mapbox-gl/dist/mapbox-gl.css'
+// import 'mapbox-gl-leaflet'
+// import 'mapbox-gl/dist/mapbox-gl.css'
 import { initMap } from '@/mapUtils'
-import { locale } from '@/i18n'
+import { locale } from '@/helper/i18n'
 
 const fsIcon = L.AwesomeMarkers.icon({
   icon: 'smile',

client/src/api/pickups.js

 import { get, patch, post, remove } from './base'
-import dateFnsParseISO from 'date-fns/parseISO'
-import _ from 'underscore'
 
 export async function listPickups (storeId) {
   const res = await get(`/stores/${storeId}/pickups`)
 
   return res.pickups.map(c => ({
     ...c,
-    date: dateFnsParseISO(c.date),
+    date: new Date(Date.parse(c.date)),
   }))
 }
 
@@ -48,27 +46,37 @@ export async function listPickupHistory (storeId, fromDate, toDate) {
   const from = fromDate.toISOString()
   const to = toDate.toISOString()
   const res = await get(`/stores/${storeId}/history/${from}/${to}`)
-  const slots = res.pickups[0].occupiedSlots
-
-  return _.groupBy(slots.map(s => ({
+  let slots = res.pickups[0].occupiedSlots
+  slots = slots.map(s => ({
     ...s,
     storeId,
     isConfirmed: !!s.confirmed,
-    date: dateFnsParseISO(s.date),
-  })), 'date_ts')
+    date: new Date(Date.parse(s.date)),
+  }))
+
+  // https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_groupby
+  return slots.reduce((r, v, i, a, k = v.date_ts) => {
+    (r[k] || (r[k] = [])).push(v)
+    return r
+  }, {})
 }
 
 export async function listPastPickupsForUser (fsId, fromDate, toDate) {
   const from = fromDate.toISOString()
   const to = toDate.toISOString()
   const res = await get(`/foodsaver/${fsId}/pickups/${from}/${to}`)
-  const slots = res.pickups[0].occupiedSlots
-
-  return _.groupBy(slots.map(s => ({
+  let slots = res.pickups[0].occupiedSlots
+  slots = slots.map(s => ({
     ...s,
     isConfirmed: true,
-    date: dateFnsParseISO(s.date),
-  })), (s) => { return s.storeId + '-' + s.date_ts })
+    date: new Date(Date.parse(s.date)),
+  }))
+
+  // https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_groupby
+  return slots.reduce((r, v, i, a, k = v.storeId + '-' + v.date_ts) => {
+    (r[k] || (r[k] = [])).push(v)
+    return r
+  }, {})
 }
 
 export async function listSameDayPickupsForUser (fsId, onDate) {
@@ -77,7 +85,7 @@ export async function listSameDayPickupsForUser (fsId, onDate) {
 
   return res.map(p => ({
     ...p,
-    date: dateFnsParseISO(p.date),
+    date: new Date(Date.parse(p.date)),
   }))
 }
 

client/src/api/stores.js

 import { get, patch, post, remove } from './base'
-import dateFnsParseISO from 'date-fns/parseISO'
 
 function normalizeStoreWallPost (post) {
-  post.createdAt = dateFnsParseISO(post.createdAt)
+  post.createdAt = new Date(Date.parse(post.createdAt))
   post.body = post.text
   delete post.text
   return post

client/src/api/voting.js

 import { get, patch, post, put, remove } from './base'
-import { formatISO } from 'date-fns'
+
+/**
+ *
+ * Wrong Time sending?
+ *
+ * @param {*} date
+ * @returns
+ */
+function toISOStringWithTimezone (date) {
+  const tzOffset = -date.getTimezoneOffset()
+  const diff = tzOffset >= 0 ? '+' : '-'
+  const pad = n => `${Math.floor(Math.abs(n))}`.padStart(2, '0')
+  return date.getFullYear() +
+    '-' + pad(date.getMonth() + 1) +
+    '-' + pad(date.getDate()) +
+    'T' + pad(date.getHours()) +
+    ':' + pad(date.getMinutes()) +
+    ':' + pad(date.getSeconds()) +
+    diff + pad(tzOffset / 60) +
+    ':' + pad(tzOffset % 60)
+}
 
 export async function getPoll (pollId) {
   return get(`/polls/${pollId}`)
@@ -14,8 +34,8 @@ export function createPoll (regionId, name, description, startDate, endDate, sco
     regionId: regionId,
     name: name,
     description: description,
-    startDate: formatISO(startDate),
-    endDate: formatISO(endDate),
+    startDate: toISOStringWithTimezone(startDate),
+    endDate: toISOStringWithTimezone(endDate),
     scope: scope,
     type: type,
     options: options,

client/src/components/Banners/Intro/IntroField.vue

@@ -16,7 +16,7 @@
       />
     </a>
     <div class="ml-3 d-flex flex-column">
-      <h1
+      <h3
         class="testing-intro-field"
         v-html="viewIsMD ? $i18n('dashboard.greeting', {name: user.firstname}) : $i18n('dashboard.greeting_short', {name: user.firstname})"
       />

client/src/components/CalendarDate.vue

@@ -8,7 +8,7 @@
       v-if="!isEventToday && !isEventTomorrow"
       class="px-1 day"
     >
-      {{ displayedWeekday }} {{ displayedDay }}
+      {{ displayedDay }}
     </div>
     <div
       v-else-if="isEventToday"
@@ -28,10 +28,6 @@
 </template>
 
 <script>
-import formatDate from 'date-fns/format'
-import isToday from 'date-fns/isToday'
-import isTomorrow from 'date-fns/isTomorrow'
-
 export default {
   props: {
     dateObject: { type: Date, required: true },
@@ -39,19 +35,21 @@ export default {
   },
   computed: {
     displayedDay () {
-      return formatDate(this.dateObject, 'dd')
-    },
-    displayedWeekday () {
-      return this.$i18n('date_short.' + formatDate(this.dateObject, 'EEEE'))
+      return this.$dateFormatter.format(this.dateObject, {
+        day: 'numeric',
+        weekday: 'short',
+      })
     },
     displayedMonth () {
-      return this.$i18n('month.' + formatDate(this.dateObject, 'M'))
+      return this.$dateFormatter.format(this.dateObject, {
+        month: 'long',
+      })
     },
     isEventToday () {
-      return isToday(this.dateObject)
+      return this.$dateFormatter.isToday(this.dateObject)
     },
     isEventTomorrow () {
-      return isTomorrow(this.dateObject)
+      return this.$dateFormatter.isTomorrow(this.dateObject)
     },
     today () {
       return this.$i18n('date.Today')
@@ -93,7 +91,7 @@ export default {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     color: var(--calendar-highlight-text);
-    font-family: 'Alfa Slab One', serif;
+    font-family: var(--fs-font-family-headline);
     font-size: calc(1.57 * var(--calendar-font-size));
     line-height: var(--calendar-line-height);
 

client/src/components/Container/activity/ActivityPost.vue

@@ -166,7 +166,7 @@
     <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mt-2">
       <small class="text-muted order-2 order-sm-1">
         <i class="far fa-fw fa-clock" />
-        <span v-b-tooltip="dateFormat(time, 'full-short')"> {{ dateDistanceInWords(time) }} </span>
+        <span v-b-tooltip="$dateFormatter.dateTimeTooltip(time)"> {{ $dateFormatter.base(time) }} </span>
       </small>
       <small
         v-if="source"
@@ -179,15 +179,12 @@
 </template>
 
 <script>
-import DateFormatterMixin from '@/mixins/DateFormatterMixin'
-import TruncateMixin from '@/mixins/TruncateMixin'
 import StateTogglerMixin from '@/mixins/StateTogglerMixin'
 import MediaQueryMixin from '@/mixins/MediaQueryMixin'
 import AutoResizeTextareaMixin from '@/mixins/AutoResizeTextareaMixin'
 
 import { sendQuickreply } from '@/api/dashboard'
 import { pulseInfo } from '@/script'
-import { url } from '@/urls'
 import { createPost } from '@/api/forum'
 
 import Markdown from '@/components/Markdown/Markdown'
@@ -195,7 +192,7 @@ import Avatar from '@/components/Avatar'
 
 export default {
   components: { Markdown, Avatar },
-  mixins: [DateFormatterMixin, TruncateMixin, StateTogglerMixin, MediaQueryMixin, AutoResizeTextareaMixin],
+  mixins: [StateTogglerMixin, MediaQueryMixin, AutoResizeTextareaMixin],
   /* eslint-disable vue/prop-name-casing */
   props: {
     // Shared properties
@@ -236,17 +233,17 @@ export default {
     dashboardContentLink () {
       switch (this.type) {
         case 'event':
-          return url('event', this.entity_id)
+          return this.$url('event', this.entity_id)
         case 'foodsharepoint':
-          return url('foodsharepoint', this.entity_id)
+          return this.$url('foodsharepoint', this.entity_id)
         case 'friendWall':
-          return url('profile', this.fs_id)
+          return this.$url('profile', this.fs_id)
         case 'forum':
-          return url('forum', this.region_id, (this.forum_type === 'botforum'), this.entity_id, this.forum_post)
+          return this.$url('forum', this.region_id, (this.forum_type === 'botforum'), this.entity_id, this.forum_post)
         case 'mailbox':
-          return url('mailbox', this.entity_id)
+          return this.$url('mailbox', this.entity_id)
         case 'store':
-          return url('store', this.entity_id)
+          return this.$url('store', this.entity_id)
         default:
           return '#'
       }
@@ -269,6 +266,12 @@ export default {
     },
   },
   methods: {
+    truncate (str, maxLength = 30) {
+      if (str.length > maxLength) {
+        return str.substring(0, maxLength) + '...'
+      }
+      return str
+    },
     newLine () {
       this.quickreplyValue += '\n'
     },

client/src/components/Container/activity/ActivityThread.vue

@@ -36,7 +36,6 @@
 <script>
 import DataUpdates from '@/stores/updates'
 import ActivityPost from './ActivityPost'
-import { parseISO, compareDesc } from 'date-fns'
 
 export default {
   components: { ActivityPost },
@@ -74,10 +73,10 @@ export default {
         this.loading = true
         const updates = await DataUpdates.mutations.fetch(this.page)
         updates.forEach(update => {
-          update.time = parseISO(update.time)
+          update.time = new Date(Date.parse(update.time))
         })
         updates.sort((a, b) => {
-          return compareDesc(a.time, b.time)
+          return b.time > a.time ? 1 : -1
         })
 
         if (updates.length > 0) {

client/src/components/Container/basket/BasketField.vue

@@ -27,7 +27,7 @@
           class="field-subline field-subline--muted"
           v-html="
             $i18n('basket.expires', {
-              date: dateFormat(new Date(entry.until * 1000), 'full-short'),
+              date: $dateFormatter.dateTime(new Date(entry.until * 1000)),
             })
           "
         />
@@ -49,11 +49,8 @@
 <script>
 // Stores
 import { getters } from '@/stores/user'
-// Mixins
-import DateFormatterMixin from '@/mixins/DateFormatterMixin'
 
 export default {
-  mixins: [DateFormatterMixin],
   props: {
     entry: { type: Object, default: () => {} },
   },

client/src/components/Container/event/EventField.vue

@@ -5,32 +5,32 @@
   >
     <div class="d-flex">
       <div
-        v-b-tooltip.hover="getDistanceTooltip(startDate)"
+        v-b-tooltip.hover="dateTooltip"
         class="event-item-date flex-column mr-2 text-center rounded default"
         :class="{'accept': status === 1, 'maybe': status === 2}"
       >
         <span
           class="font-weight-bold"
-          v-html="dateFormat(startDate, 'month-long')"
+          v-html="displayedMonth"
         />
         <div class="event-item-date-container d-flex flex-column bg-white justify-content-center text-dark">
           <span
-            v-if="isToday(startDate)"
+            v-if="isEventToday"
             v-html="$i18n('date.Today')"
           />
           <span
-            v-else-if="isTomorrow(startDate)"
+            v-else-if="isEventTomorrow"
             class="small"
             v-html="$i18n('date.-- Tomorrow')"
           />
           <span
-            v-else-if="getDayDifferenceToNow(startDate) < 3"
-            v-html="dateFormat(startDate, 'weekday-short')"
+            v-else-if="$dateFormatter.getDifferenceToNowInDays(startDate) < 3"
+            v-html="displayedDay"
           />
           <span
             v-else
             class="small"
-            v-html="dateFormat(startDate, 'day-weekday-short')"
+            v-html="displayedBothDay"
           />
         </div>
       </div>
@@ -51,8 +51,7 @@
           <div class="text-muted mt-auto">
             <i class="fas fa-clock" />
             <span
-              v-b-tooltip.hover="$i18n('events.duration', getDurationToolTip(startDate, endDate))"
-              v-html="$i18n('events.span', getTimeSpanToolTip(startDate, endDate))"
+              v-html="$i18n('events.span', { from: displayedStart, until: displayedEnd })"
             />
           </div>
           <a
@@ -101,10 +100,8 @@
 
 <script>
 import { acceptInvitation, declineInvitation, maybeInvitation } from '@/api/events'
-import DateFormatterMixin from '@/mixins/DateFormatterMixin'
 
 export default {
-  mixins: [DateFormatterMixin],
   props: {
     entry: { type: Object, default: () => {} },
     options: { type: Boolean, default: false },
@@ -116,6 +113,54 @@ export default {
       status: this.entry.status,
     }
   },
+  computed: {
+    displayedDay () {
+      return this.$dateFormatter.format(this.startDate, {
+        weekday: 'short',
+      })
+    },
+    displayedBothDay () {
+      return this.$dateFormatter.format(this.startDate, {
+        day: 'numeric',
+        weekday: 'short',
+      })
+    },
+    displayedMonth () {
+      return this.$dateFormatter.format(this.startDate, {
+        month: 'long',
+      })
+    },
+    isEventToday () {
+      return this.$dateFormatter.isToday(this.startDate)
+    },
+    isEventTomorrow () {
+      return this.$dateFormatter.isTomorrow(this.startDate)
+    },
+    dateTooltip () {
+      return `${this.$dateFormatter.dateTime(this.startDate)} (${this.$dateFormatter.relativeTime(this.startDate)}`
+    },
+    displayedStart () {
+      return this.$dateFormatter.format(this.startDate, {
+        hour: 'numeric',
+        minute: 'numeric',
+      })
+    },
+    displayedEnd () {
+      if (this.$dateFormatter.isSame(this.endDate, this.startDate)) {
+        return this.$dateFormatter.format(this.endDate, {
+          hour: 'numeric',
+          minute: 'numeric',
+        })
+      } else {
+        return this.$dateFormatter.format(this.endDate, {
+          day: 'numeric',
+          month: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+        })
+      }
+    },
+  },
   methods: {
     acceptInvitation,
     maybeInvitation,
@@ -129,7 +174,7 @@ export default {
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   min-height: 3rem;
   font-size: 1.15rem;
-  font-family: 'Alfa Slab One', serif;
+  font-family: var(--fs-font-family-headline);
 }
 
 .event-item-date {

client/src/components/Container/pickup/PickupField.vue

@@ -68,19 +68,22 @@
     <h6
       class="field-headline field-headline--big"
       :class="{
-        'text-danger': getHourDifferenceToNow(date) < 4
+        'text-danger': isSoon
       }"
     >
       <i class="fas fa-clock mr-2" />
       <span
-        v-if="getHourDifferenceToNow(date) < 4"
-        v-b-tooltip="dateFormat(date)"
-        v-html="dateDistanceInWords(date)"
-      />
+        v-b-tooltip="$dateFormatter.dateTimeTooltip(date, { isShown: isSoon })"
+      >
+        {{ $dateFormatter.base(date, { isRelativeTime: isSoon }) }}
+
+      </span>
       <span
-        v-else
-        v-html="dateFormat(date, 'full-short')"
-      />
+        v-if="isSoon"
+        class="pickup-status-time"
+      >
+        ({{ $dateFormatter.time(date) }})
+      </span>
     </h6>
   </a>
 </template>
@@ -89,17 +92,18 @@
 // Components
 import Avatar from '@/components/Avatar'
 // Mixin
-import DateFormatterMixin from '@/mixins/DateFormatterMixin'
 
 export default {
   components: {
     Avatar,
   },
-  mixins: [DateFormatterMixin],
   props: {
     entry: { type: Object, default: () => {} },
   },
   computed: {
+    isSoon () {
+      return this.$dateFormatter.getDifferenceToNowInHours(this.date) < 4
+    },
     team () {
       const freeSlots = this.entry.slots.max - this.entry.slots.occupied.length
       return [...this.entry.slots.occupied, ...new Array(freeSlots).fill(null)].reverse()
@@ -117,6 +121,11 @@ export default {
 .pickup-status {
   font-size: 1rem;
 }
+
+.pickup-status-time {
+  font-size: 0.9rem;
+}
+
 .slots {
   margin: 0 0.25rem;
   display: inline-flex;

client/src/components/Navigation/Baskets/NavBaskets.vue

@@ -56,7 +56,6 @@ import Dropdown from '../_NavItems/NavDropdown'
 import BasketsEntry from './NavBasketsEntry'
 // Others
 import { ajreq } from '@/script'
-import dateFnsCompareDesc from 'date-fns/compareDesc'
 
 export default {
   components: { BasketsEntry, Dropdown },
@@ -65,7 +64,12 @@ export default {
       return getters.getOwn()
     },
     basketsSorted () {
-      return this.baskets.slice().sort((a, b) => dateFnsCompareDesc(a.updatedAt, b.updatedAt))
+      return this.baskets.slice().sort((a, b) => {
+        const aD = new Date(a.updatedAt)
+        const bD = new Date(b.updatedAt)
+        if (aD.getTime() === bD.getTime()) return 0
+        return bD > aD ? 1 : -1
+      })
     },
     basketsRequestCount () {
       return getters.getRequestdCount()

client/src/components/Navigation/Baskets/NavBasketsEntry.vue

@@ -27,7 +27,7 @@
             v-html="basket.description"
           />
           <small class="time-ago text-right nowrap">
-            {{ relativeTime(basket.createdAt) }}
+            {{ $dateFormatter.relativeTime(basket.createdAt) }}
           </small>
         </span>
         <small
@@ -56,11 +56,9 @@
           :is-sleeping="entry.user.sleepStatus"
           :auto-scale="false"
         />
-        <small
-          v-b-tooltip="entry.user.name.length > 15 ? entry.user.name : null"
-        >
-          {{ truncate(entry.user.name, 15) }}
-          {{ $dateDistanceInWords(entry.time) }}
+        <small>
+          {{ entry.user.name }}
+          {{ $dateFormatter.relativeTime(entry.time) }}
         </small>
       </div>
       <button
@@ -79,13 +77,9 @@
 // Others
 import Avatar from '@/components/Avatar'
 import conv from '@/conv'
-// Mixins
-import TruncateMixin from '@/mixins/TruncateMixin'
-import DateFormatterMixin from '@/mixins/DateFormatterMixin'
 
 export default {
   components: { Avatar },
-  mixins: [TruncateMixin, DateFormatterMixin],
   props: {
     basket: {
       type: Object,

client/src/components/Navigation/Conversations/NavConversationsEntry.vue

@@ -28,7 +28,7 @@
           v-html="title"
         />
         <small class="text-muted text-right nowrap">
-          {{ relativeTime(conversation.lastMessage.sentAt) }}
+          {{ $dateFormatter.relativeTime(conversation.lastMessage.sentAt) }}
         </small>
       </span>
       <small
@@ -44,15 +44,11 @@ import conv from '@/conv'
 import profileStore from '@/stores/profiles'
 
 import Avatar from '@/components/Avatar'
-import DateFormatterMixin from '@/mixins/DateFormatterMixin'
 
 export default {
   components: {
     Avatar,
   },
-  mixins: [
-    DateFormatterMixin,
-  ],
   props: {
     conversation: {
       type: Object,

client/src/components/Navigation/Groups/NavGroups.vue

@@ -4,7 +4,7 @@
     :title="$i18n('menu.entry.groups')"
     icon="fa-users"
     is-fixed-size
-    is-scollable
+    is-scrollable
   >
     <template
       v-if="groups.length > 0"
@@ -56,7 +56,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../../../scss/icon-sizes.scss';
-</style>

client/src/components/Navigation/Login/NavLoginEntry.vue

@@ -18,7 +18,6 @@
           class="testing-login-input-email form-control"
           autocomplete="email"
           autofocus
-          @keydown.enter="submit"
           @focus="focusLogin=true"
         >
       </label>
@@ -35,7 +34,6 @@
           name="login-password"
           class="testing-login-input-password form-control"
           autocomplete="current-password"
-          @keydown.enter="submit"
         >
       </label>
       <label class="d-flex align-items-center mt-3 mb-3">
@@ -44,7 +42,6 @@
           class="testing-login-input-remember mr-2"
           type="checkbox"
           name="login-remember"
-          @keydown.enter="submit"
         >
         {{ $i18n('login.steady_login') }}
       </label>
@@ -58,6 +55,7 @@
           variant="primary"
           class="testing-login-click-submit btn btn-block"
           @click="submit"
+          @keydown.enter="submit"
         >
           <span>
             {{ $i18n('login.submit_btn') }}
@@ -70,7 +68,7 @@
 </template>
 
 <script>
-import { isDev } from '@/scripts/server-data'
+import { isDev } from '@/helper/server-data'
 import { login } from '@/api/user'
 
 import { pulseError } from '@/script'

client/src/components/Navigation/Logo.vue

@@ -44,12 +44,12 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-::v-deep a {
-  all: unset;
+::v-deep.foodsharing a {
+  font-weight: unset;
   cursor: pointer;
 }
 ::v-deep.foodsharing {
-  font-family: "Alfa Slab One", serif;
+  font-family: var(--fs-font-family-headline);
   color: var(--fs-color-primary-500);
   font-size: 1.1rem;
   font-weight: normal;

client/src/components/Navigation/Notifications/NavNotificationsEntry.vue

@@ -44,7 +44,7 @@
           v-html="$i18n(`bell.${bell.title}`, bell.payload)"
         />
         <small class="text-muted text-right nowrap">
-          {{ relativeTime(new Date(bell.createdAt)) }}
+          {{ $dateFormatter.relativeTime(new Date(bell.createdAt)) }}
         </small>
       </span>
       <small
@@ -60,13 +60,12 @@ import Avatar from '@/components/Avatar'
 
 import StateTogglerMixin from '@/mixins/StateTogglerMixin'
 import MediaQueryMixin from '@/mixins/MediaQueryMixin'
-import DateFormatterMixin from '@/mixins/DateFormatterMixin'
 
 export default {
   components: {
     Avatar,
   },
-  mixins: [StateTogglerMixin, MediaQueryMixin, DateFormatterMixin],
+  mixins: [StateTogglerMixin, MediaQueryMixin],
   props: {
     bell: {
       type: Object,