feat: notifications UI mock + account page redesign

cypress/e2e/changepassword.cy.ts

@@ -8,8 +8,7 @@ describe('Change Password Screen', () => {
     cy.get('[data-testid="home-title"]').should('exist');
     cy.createNewUserAndSignIn(email, currentPassword);
     cy.get('[data-cy="accountHeader"]').should('exist').click(); // assures that the user is signed in
-    cy.get('[data-cy="accountDetailsHeader"]').should('exist').click();
-    cy.get('[data-cy="changePasswordButton"]').should('exist').click();
+    cy.get('[data-cy="changePasswordButtonAccount"]').should('exist').click();
   });
 
   it('should render components', () => {
@@ -51,7 +50,8 @@ describe('Change Password Screen', () => {
     cy.location('pathname').should('eq', '/account');
 
     // logout
-    cy.get('[data-cy="signOutButton"]').click();
+    cy.get('[data-cy="mobileNavTrigger"]').click();
+    cy.get('[data-cy="mobile-signOutButton"]').click();
     cy.get('[data-cy="confirmSignOutButton"]').should('exist').should('not.be.disabled').click();
     cy.visit('/sign-in');
     cy.get('[data-cy="signInEmailInput"]').type(email);

messages/en.json

@@ -248,6 +248,10 @@
     "officialFeedTooltipShort": "Verified feed: Confirmed by the transit provider or the Mobility Database team for rider use.",
     "seeDetailPageProviders": "See detail page to view {providersCount} others",
     "openFullQualityReport": "Open Full Quality Report",
+    "subscribe": "Subscribe to get feed update notifications",
+    "unsubscribe": "Unsubscribe to stop receiving feed update notifications",
+    "subscribedToFeed": "You'll receive updates for this feed",
+    "unsubscribedFromFeed": "You've been unsubscribed and will no longer receive updates for this feed.",
     "qualityReportUpdated": "Quality report updated",
     "officialFeedUpdated": "Official verification updated",
     "serviceDateRange": "Service Date Range",
@@ -411,7 +415,7 @@
     }
   },
   "account": {
-    "title": "Your API Account",
+    "title": "Your Account",
     "userDetails": "User Details",
     "description": "The Mobility Database API uses OAuth2 authentication. To initiate a successful API request, an access token must be included as a bearer token in the HTTP header. Access tokens are valid for one hour. To obtain an access token, you'll first need a refresh token, which is long-lived and does not expire.",
     "support": "If you need a reissued refresh token or want your account removed, send us an email at",

messages/fr.json

@@ -248,6 +248,10 @@
     "officialFeedTooltipShort": "Verified feed: Confirmed by the transit provider or the Mobility Database team for rider use.",
     "seeDetailPageProviders": "See detail page to view {providersCount} others",
     "openFullQualityReport": "Open Full Quality Report",
+    "subscribe": "S'abonner",
+    "unsubscribe": "Se désabonner",
+    "subscribedToFeed": "Vous êtes abonné à ce flux",
+    "unsubscribedFromFeed": "Vous vous êtes désabonné de ce flux",
     "qualityReportUpdated": "Quality report updated",
     "officialFeedUpdated": "Official verification updated",
     "serviceDateRange": "Service Date Range",
@@ -411,7 +415,7 @@
     }
   },
   "account": {
-    "title": "Votre compte API",
+    "title": "Votre compte",
     "userDetails": "Détails de l'utilisateur",
     "description": "L'API de la base de données de mobilité utilise l'authentification OAuth2. Pour initier une demande API réussie, un jeton d'accès doit être inclus en tant que jeton porteur dans l'en-tête HTTP. Les jetons d'accès sont valides pendant une heure. Pour obtenir un jeton d'accès, vous aurez d'abord besoin d'un jeton de rafraîchissement, qui est de longue durée et n'expire pas.",
     "support": "Si vous avez besoin d'un jeton de rafraîchissement réémis ou si vous souhaitez que votre compte soit supprimé, envoyez-nous un courriel à",

src/app/Theme.ts

@@ -225,17 +225,10 @@ export const theme = createTheme({
             border: '2px solid var(--mui-palette-primary-main)',
             color: 'var(--mui-palette-primary-main)',
           },
-          '&.MuiButton-outlinedPrimary': {
-            border: '2px solid var(--mui-palette-primary-main)',
+          '&.MuiButton-outlined': {
+            borderWidth: '2px',
             padding: '6px 16px',
           },
-          '&.MuiButton-outlinedPrimary:hover': {
-            backgroundColor: 'var(--mui-palette-primary-main)',
-            color: 'var(--mui-palette-primary-contrastText)',
-            ...theme.applyStyles('dark', {
-              color: 'var(--mui-palette-background-default)',
-            }),
-          },
           '&.MuiButton-text.inline': {
             fontFamily: fontFamily.primary,
             fontSize: 'inherit',