Update Settings Page UI (#1425)

* Settings Page: NoticeBar positioning and aside button styles

* Settings Page: Account Settings section updated

* Settings Page: Update Preferences section UI

* Settings Page: Connected Applications section UI

* Override link button text colour

* Settings Page: Adjustments to Delete Appointment data components

* Use rems instead of pixels on calendar-color

* Settings Page: Update Booking Page Link input label and capitalization of Start of the Week

* Update frontend/src/locales/de.json

Co-authored-by: Andreas <mail@devmount.de>

---------

Co-authored-by: Andreas <mail@devmount.de>

Author: davinotdavid

frontend/src/components/ConfirmationModal.vue

@@ -33,17 +33,16 @@ const emit = defineEmits(['close', 'confirm', 'error']);
     class="position-center fixed z-50 flex w-full max-w-lg flex-col items-center gap-6 rounded-xl bg-white p-12 dark:bg-gray-700"
   >
     <div class="btn-close absolute right-8 top-8 cursor-pointer" @click="emit('close')" :title="t('label.close')">
-      <ph-x class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-400" />
+      <ph-x class="size-6" />
     </div>
-    <div class="text-2xl font-semibold text-teal-500">
+    <div class="text-2xl font-semibold title-color">
       {{ title }}
     </div>
     <div class="max-w-sm text-center">
       {{ message }}
     </div>
     <div class="flex gap-4">
       <primary-button
-        class="btn-close"
         variant="outline"
         @click="emit('close')"
         :title="cancelLabel"
@@ -69,3 +68,17 @@ const emit = defineEmits(['close', 'confirm', 'error']);
     </div>
   </div>
 </template>
+
+<style scoped>
+  .title-color {
+    color: var(--colour-ti-highlight);
+  }
+
+  .btn-close {
+    color: var(--colour-ti-muted);
+
+    &:hover {
+      color: var(--colour-ti-secondary);
+    }
+  }
+</style>

frontend/src/components/RadioGroupPill.vue

@@ -102,13 +102,13 @@
     "calendarSettings": "Kalender-Einstellungen",
     "calendarsConnected": "Verbundene Kalender",
     "calendarsUnconnected": "Verfügbare Kalender",
-    "cancelAppointmentService": "Termin-Service abbrechen?",
     "connectedAccounts": "Verbundene Konten",
     "connectedAccountsSettings": "Verbundene Konten Einstellungen",
     "connectedApplications": "Verbundene Anwendungen",
     "contactRequest": "Kontaktanfrage",
     "createNewAppointment": "Neuen Termin erstellen",
     "dateAndTimeFormatting": "Datums- und Zeitformat",
+    "deleteAppointmentData": "Termin-Daten löschen",
     "discoverCaldavcalendars": "CalDAV-Kalender abfragen",
     "displayInformation": "Anzeige-Informationen",
     "eventBooked": "Event gebucht!",
@@ -155,10 +155,8 @@
     "bookingSuccessfullyDenied": "Buchung erfolgreich abgelehnt!",
     "bookingSuccessfullyRequested": "Buchung erfolgreich angefragt!",
     "bookingWillBeCanceled": "Booking will be canceled. An update will be sent to the booker.",
-    "cancelServiceInfo": "Um deinen Appointment Service abzubrechen, klicke hier:\n Hinweis: Dies hat keinen Einfluss auf dein TB Pro Konto oder Abonnement.",
     "connectionEstablished": "Verbindung hergestellt",
     "copiedToClipboard": "In Zwischenablage kopiert",
-    "downloadAccountData": "Um alle Daten herunterzuladen, die vom Appointment Service verwendet werden, klicken Sie hier:",
     "eventWasCreated": "Das Event wurde in deinem Kalender erstellt.",
     "invitationGenerated": "Die Einladungscodes wurden erfolgreich generiert.",
     "invitationWasSent": "Eine Einladung wurde an deine E-Mail-Adresse gesendet.",
@@ -170,8 +168,8 @@
     "slotIsAvailableAgain": "Das Zeitfenster ist jetzt wieder buchbar."
   },
   "label": {
-    "12hAmPm": "12-hour AM/PM",
-    "24h": "24-hour",
+    "12hAmPm": "12:00 Uhr (12-Stunden-Format)",
+    "24h": "24:00 (24-Stunden-Format)",
     "DDMMYYYY": "TT/MM/YYYY",
     "MMDDYYYY": "MM/TT/YYYY",
     "accepted": "Akzeptiert",
@@ -227,8 +225,7 @@
     "bookingDetails": "Buchungsdetails",
     "bookingLink": "Buchungslink",
     "bookingSlot": "Gebuchtes Zeitfenster",
-    "bookingPageURL": "Buchungsseite URL",
-    "bookingPageSettings": "Buchungsseite Einstellungen",
+    "bookingPageLinkLabel": "Buchungsseite Link",
     "bookings": "Buchungen",
     "bookingPageLink": "Dein Buchungsseiten-Link",
     "bookingPageDetails": "Buchungsseite Details",
@@ -243,7 +240,6 @@
     "cancelled": "Storniert",
     "cancelBooking": "Buchung absagen",
     "cancelReason": "Grund für die Absage",
-    "cancelService": "Service abbrechen",
     "changeMyAvailability": "Verfügbarkeit ändern",
     "changesNotSaved": "Änderungen wurden nicht gespeichert",
     "checkAvailableSlots": "Verfügbare Zeiten anzeigen",
@@ -260,7 +256,7 @@
     "connect": "Verbinden",
     "connectCalendar": "Kalender verbinden",
     "connectGoogleCalendar": "Google Kalender verbinden",
-    "connectedAs": "Verbunden als {name}",
+    "connectedAs": "Verbunden als",
     "contact": "Kontakt",
     "continue": "Weiter",
     "contributeToThisSite": "Dieser Seite beitragen",
@@ -288,6 +284,8 @@
     "defaultTimeZone": "Standard Zeitzone",
     "delete": "Löschen",
     "deleteBooking": "Buchung löschen",
+    "deleteAllAppointmentData": "Alle Appointment-Daten löschen",
+    "deleteAllAppointmentDataInfo": "Dein TB Pro-Abonnement bleibt davon unberührt.",
     "deny": "Ablehnen",
     "denyBooking": "Buchung ablehnen",
     "disable": "Deaktivieren",
@@ -299,7 +297,7 @@
     "downloadICS": "Download ICS",
     "downloadInvitation": "Termineinladung herunterladen",
     "downloadTheIcsFile": "ICS-Datei herunterladen",
-    "downloadMyData": "Meine Daten herunterladen",
+    "downloadMyData": "Alle deine Daten von Appointment herunterladen",
     "earliestBooking": "Früheste Buchung",
     "edit": "Bearbeiten",
     "editCalendar": "Kalender bearbeiten",
@@ -345,6 +343,7 @@
     "logIn": "Anmelden",
     "logOut": "Abmelden",
     "loginToContinue": "Anmelden, um fortzufahren",
+    "manageBookingLink": "Buchungsseite verwalten",
     "meetingDuration": "Meeting-Dauer",
     "meetingTitle": "Meeting Titel",
     "meetingDate": "Meeting-Datum",
@@ -436,7 +435,7 @@
     "sortBy": "Sortieren nach",
     "start": "Start",
     "startDate": "Startdatum",
-    "startOfWeek": "Wochenbeginn",
+    "startOfWeek": "Wochentag als Wochenbeginn",
     "startTime": "Startzeit",
     "startUsingTba": "Starte mit TBA",
     "status": "Status",
@@ -540,7 +539,6 @@
     "zoomCom": "zoom.com …"
   },
   "text": {
-    "accountCancelWarning": "Du wirst keinen Zugriff mehr auf Thunderbird Appointment haben. Alle Buchungs-Kalender werden auf \"Inaktiv\" gesetzt und alle zukünftigen Buchungen werden storniert.\nAndere Termin-Daten werden 30 Tage lang beibehalten, entsprechend der TB Pro Datenschutzrichtlinie.",
     "admin": {
       "completelyRemoveUser": "Hier wird ein Benutzer vollständig aus Thunderbird Appointment entfernt, einschließlich aller Benutzerdaten. Diese Funktion bitte nicht ausführen, wenn es keine Aufforderung dafür gab.",
       "disableAccountFirst": "Das Konto muss zunächst deaktiviert sein."
@@ -550,6 +548,7 @@
     "chooseDateAndTime": "Wähle Tag und Zeit für ein Treffen.",
     "connectZoom": "Du kannst dein Zoom-Konto verbinden, um Besprechungen direkt mit einer Zoom-Einladung zu erstellen.",
     "contactRequestForm": "Bitte verwende das nachstehende Kontaktformular, um Feedback, Fragen oder Anliegen an unser Support-Team zu senden. Wir werden ggf. versuchen, so schnell wie möglich zu antworten.",
+    "deleteAppointmentDataWarning": "Du wirst keinen Zugriff mehr auf Thunderbird Appointment haben. Alle Buchungs-Kalender werden auf \"Inaktiv\" gesetzt und alle zukünftigen Buchungen werden storniert.\nAndere Termin-Daten werden 30 Tage lang beibehalten, entsprechend der TB Pro Datenschutzrichtlinie.",
     "defineDaysAndTimeSlots": "Definiere Tage und Zeitfenster, damit Teilnehmer die Zeit des Events auswählen können …",
     "denialSentToAddress": "Die Informationen über die Ablehnung der Anfrage wurde per E-Mail an {address} geschickt.",
     "disclaimerGABooking": "Bitte beachten: Der Eigentümer muss die Buchung bestätigen.",

frontend/src/locales/de.json

@@ -105,13 +105,13 @@
     "calendarSettings": "Calendar Settings",
     "calendarsConnected": "Connected Calendars",
     "calendarsUnconnected": "Available Calendars",
-    "cancelAppointmentService": "Cancel Appointment Service?",
     "connectedAccounts": "Connected Accounts",
     "connectedAccountsSettings": "Connected Accounts Settings",
     "connectedApplications": "Connected Applications",
     "contactRequest": "Contact Request",
     "createNewAppointment": "Create new appointment",
     "dateAndTimeFormatting": "Date and Time Format",
+    "deleteAppointmentData": "Delete Appointment Data",
     "discoverCaldavcalendars": "Discover CalDAV Calendars",
     "displayInformation": "Display information",
     "eventBooked": "Event booked!",
@@ -158,10 +158,8 @@
     "bookingSuccessfullyDenied": "Booking rejected. Reach out to the booker to recommend an alternative.",
     "bookingSuccessfullyRequested": "Booking request sent",
     "bookingWillBeCanceled": "Booking will be canceled. An update will be sent to the booker.",
-    "cancelServiceInfo": "To cancel your Appointment service, click here:\n Note: This will not affect your TB Pro account or subscription.",
     "connectionEstablished": "Connection established",
     "copiedToClipboard": "Copied to clipboard",
-    "downloadAccountData": "To download all the data being used by the Appointment service, click here:",
     "eventWasCreated": "Event created in your calendar.",
     "invitationGenerated": "The invite codes were generated successfully.",
     "invitationWasSent": "An invitation was sent to your email.",
@@ -173,8 +171,8 @@
     "slotIsAvailableAgain": "Time slot now available for bookings."
   },
   "label": {
-    "12hAmPm": "12-hour AM/PM",
-    "24h": "24-hour",
+    "12hAmPm": "12:00 AM/PM (12-hour)",
+    "24h": "24:00 (24-hour)",
     "DDMMYYYY": "DD/MM/YYYY",
     "MMDDYYYY": "MM/DD/YYYY",
     "accepted": "Accepted",
@@ -229,8 +227,7 @@
     "bookingDetails": "Booking Details",
     "bookingLink": "Booking Link",
     "bookingSlot": "Booking slot",
-    "bookingPageURL": "Booking Page URL",
-    "bookingPageSettings": "Booking Page Settings",
+    "bookingPageLinkLabel": "Booking Page Link",
     "bookings": "Bookings",
     "bookingPageLink": "Your Booking Page Link",
     "bookingPageDetails": "Booking Page Details",
@@ -245,7 +242,6 @@
     "cancelled": "Cancelled",
     "cancelBooking": "Cancel booking",
     "cancelReason": "Reason for cancelling",
-    "cancelService": "Cancel Service",
     "changeMyAvailability": "Change my availability",
     "changesNotSaved": "Changes have not been saved",
     "checkAvailableSlots": "Check available slots",
@@ -263,7 +259,7 @@
     "connecting": "Connecting",
     "connectCalendar": "Connect calendar",
     "connectGoogleCalendar": "Connect Google Calendar",
-    "connectedAs": "Connected as {name}",
+    "connectedAs": "Connected as",
     "contact": "Contact",
     "continue": "Continue",
     "contributeToThisSite": "Contribute to this site",
@@ -291,6 +287,8 @@
     "defaultTimeZone": "Default Time Zone",
     "delete": "Delete",
     "deleteBooking": "Delete booking",
+    "deleteAllAppointmentData": "Delete all Appointment data",
+    "deleteAllAppointmentDataInfo": "Your TB Pro subscription will not be affected.",
     "deny": "Deny",
     "denyBooking": "Deny booking",
     "disable": "Disable",
@@ -302,7 +300,7 @@
     "downloadICS": "Download ICS",
     "downloadInvitation": "Download invitation",
     "downloadTheIcsFile": "Add to your calendar",
-    "downloadMyData": "Download My Data",
+    "downloadMyData": "Download all your data from Appointment",
     "earlier": "Earlier",
     "earliestBooking": "Earliest Booking",
     "edit": "Edit",
@@ -349,6 +347,7 @@
     "logIn": "Log in",
     "logOut": "Log out",
     "loginToContinue": "Log in to continue",
+    "manageBookingLink": "Manage booking link",
     "meetingDuration": "Meeting duration",
     "meetingTitle": "Meeting title",
     "meetingDate": "Meeting date",
@@ -439,7 +438,7 @@
     "sortBy": "Sort by",
     "start": "Start",
     "startDate": "Start date",
-    "startOfWeek": "Start of Week",
+    "startOfWeek": "Start of the Week",
     "startTime": "Start time",
     "startUsingTba": "Try Appointment",
     "status": "Status",
@@ -543,7 +542,6 @@
     "zoomCom": "zoom.com…"
   },
   "text": {
-    "accountCancelWarning": "You will no longer have access to TB Appointment. All booking calendars will be set to \"Inactive\" and all upcoming bookings will be cancelled.\nOther appointment data will be retained for 30 days, in accordance with the TB Pro Privacy Policy.",
     "admin": {
       "completelyRemoveUser": "This will completely remove a user from Thunderbird Appointment, including all of their user data. Don't do this unless you're told to.",
       "disableAccountFirst": "You must disable the account first."
@@ -553,6 +551,7 @@
     "chooseDateAndTime": "Choose when to meet.",
     "connectZoom": "Connect your Zoom account to generate instant meeting invites for each booking.",
     "contactRequestForm": "Please use the contact form below to send any feedback, questions, or concerns to our support team. If needed we will try and contact you for further information as soon as possible.",
+    "deleteAppointmentDataWarning": "You will no longer have access to TB Appointment. All booking calendars will be set to \"Inactive\" and all upcoming bookings will be cancelled.\nOther appointment data will be retained for 30 days, in accordance with the TB Pro Privacy Policy.",
     "defineDaysAndTimeSlots": "Choose the days and time this event can be booked.",
     "denialSentToAddress": "We've let the booker ({address}) know you can't make this event.",
     "disclaimerGABooking": "Your booking will be confirmed by the calendar owner.",

frontend/src/locales/en.json

@@ -234,6 +234,11 @@ export default {
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
+:deep(.base.link.filled) {
+  font-size: 0.75rem;
+  color: var(--colour-ti-secondary);
+}
+
 .page-title {
   margin-block-end: 2rem;
   font-family: metropolis;