Fix notification subscription button on My Account (Mobile) #1783

README.md

@@ -100,7 +100,9 @@ Watch releases of this repository to be notified about future updates:
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-77-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

public/locales/bg/beneficiary.json

@@ -37,7 +37,7 @@
       "company-select": "Изберете ЮЛНЦ или",
       "create-new": "създайте нов",
       "person-label": "Потребител",
-      "company-label": "ЮЛНЦ",
+      "company-label": "ЮЛНЦ"
     }
   },
   "actions": "Действия",

public/locales/bg/validation.json

@@ -24,4 +24,4 @@
   "payment-reference": "Невалиден формат на кода за плащане",
   "eik-invalid": "Невалидно ЕИК",
   "help-us-improve": "Съгласявам се да се свържете с мен за подобрение на платформата."
-}
+}

public/locales/en/bank-transactions.json

@@ -1,27 +1,26 @@
 {
-    "all": "All bank transactions",
-    "bank-transactions": "Bank transactions",
-    "transaction-date": "Transaction date",
-    "amount": "Amount",
-    "currency": "Currency",
-    "donation-status": "Donation status",
-    "id": "Trnsaction ID",
-    "bank-name": "Bank name",
+  "all": "All bank transactions",
+  "bank-transactions": "Bank transactions",
+  "transaction-date": "Transaction date",
+  "amount": "Amount",
+  "currency": "Currency",
+  "donation-status": "Donation status",
+  "id": "Trnsaction ID",
+  "bank-name": "Bank name",
+  "type": "Type",
+  "description": "Description",
+  "cta": {
+    "download": "Download",
+    "status": "Donation status",
     "type": "Type",
-    "description": "Description",
-    "cta": {
-      "download": "Download",
-      "status": "Donation status",
-      "type": "Type",
-      "from": "From",
-      "to": "To",
-      "apply-ref-heading": "Apply ref heading",
-      "apply-ref": "Apply ref",
-      "edit": "Edit",
-      "start-sync": "Start sync"
-    },
-    "matched-ref": "Matched ref",
-    "payment-ref": "Payment ref",
-    "rerun-dates": "Repeat bank sync"
-  }
-
+    "from": "From",
+    "to": "To",
+    "apply-ref-heading": "Apply ref heading",
+    "apply-ref": "Apply ref",
+    "edit": "Edit",
+    "start-sync": "Start sync"
+  },
+  "matched-ref": "Matched ref",
+  "payment-ref": "Payment ref",
+  "rerun-dates": "Repeat bank sync"
+}

public/locales/en/validation.json

@@ -24,4 +24,4 @@
   "payment-reference": "Invalid payment code format",
   "eik-invalid": "Invalid EIK",
   "help-us-improve": "I agree to be contacted to help improve the platform."
-}
+}

src/components/client/auth/profile/MyNotificationsTab.tsx

@@ -17,6 +17,7 @@ const classes = {
   smallText: `${PREFIX}-smallText`,
   boxTitle: `${PREFIX}-boxTitle`,
   statusBoxRow: `${PREFIX}-statusBoxRow`,
+  statusBoxBtnStatus: `${PREFIX}-statusBoxBtnStatus`,
   notificationsBox: `${PREFIX}-notificationBox`,
   statusBtn: `${PREFIX}-statusBtn`,
   statusActive: `${PREFIX}-statusActive`,
@@ -61,9 +62,17 @@ const Root = styled('div')(({ theme }) => ({
   [`& .${classes.statusBoxRow}`]: {
     display: 'flex',
     justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    gap: 20,
     alignItems: 'center',
     padding: theme.spacing(0, 2),
   },
+  [`& .${classes.statusBoxBtnStatus}`]: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 20,
+    flexWrap: 'wrap',
+  },
   [`& .${classes.statusActive}`]: {
     color: 'green',
   },
@@ -112,23 +121,25 @@ export default function MyNotificationsTab() {
           <Typography fontWeight="medium" variant="h6">
             {t('profile:myNotifications.status-msg')}
           </Typography>
-          <Typography
-            fontWeight="bold"
-            ml={1}
-            variant="h5"
-            className={user?.user.newsletter ? classes.statusActive : classes.statusInactive}>
-            {user?.user.newsletter
-              ? t('profile:myNotifications.status.active')
-              : t('profile:myNotifications.status.inactive')}
-          </Typography>
-          <Button
-            className={classes.statusBtn}
-            style={{ opacity: user?.user.newsletter ? '80%' : '100%' }}
-            onClick={() => setShowConfirmModal(true)}>
-            {user?.user.newsletter
-              ? t('profile:myNotifications.cta.deactivate')
-              : t('profile:myNotifications.cta.activate')}
-          </Button>
+          <Box className={classes.statusBoxBtnStatus}>
+            <Typography
+              fontWeight="bold"
+              ml={1}
+              variant="h5"
+              className={user?.user.newsletter ? classes.statusActive : classes.statusInactive}>
+              {user?.user.newsletter
+                ? t('profile:myNotifications.status.active')
+                : t('profile:myNotifications.status.inactive')}
+            </Typography>
+            <Button
+              className={classes.statusBtn}
+              style={{ opacity: user?.user.newsletter ? '80%' : '100%' }}
+              onClick={() => setShowConfirmModal(true)}>
+              {user?.user.newsletter
+                ? t('profile:myNotifications.cta.deactivate')
+                : t('profile:myNotifications.cta.activate')}
+            </Button>
+          </Box>
         </Box>
       </Card>
       {user?.user.newsletter && (

src/components/client/irregularity/steps/Greeting.tsx

@@ -4,8 +4,6 @@ import { useTranslation } from 'next-i18next'
 import { Grid, Typography } from '@mui/material'
 
 import Subtitle from '../helpers/Subtitle'
-import Link from 'components/common/Link'
-import { routes } from 'common/routes'
 
 const greetingStyles = {
   fontWeight: 'bold',