fix: missing info about common notification messages/styles prod mode

packages/core/docs/guide/theme.md

@@ -150,26 +150,26 @@ Below you can find a list of the most important Nuxt Modules and libraries that
 
 ## In-app Notifications
 
-In Vue Storefront we're providing Notifications system based on composable `useUiNotification`.
+In Vue Storefront we're providing Notifications system based on composable `useUiNotification`. Also, we have prepared [common notification messages](/guide/theme.html#example-of-use-common-notification-messages). You can find them inside the assets directory (`/assets/notifications`).
 
 There are three types of notifications: `danger`, `success` and `info`.
 
 ### How to send notification?
 
 To send a new notification you need to only import `useUiNotification` from composables and pass `type` and `message` to `send` function. Rest parameters are optional.
 
-Also, we have prepared repetitive notification messages. You can find them inside the assets directory.
-
 ```js
 import { useUiNotification } from '~/composables';
 
-setup() {
-  const { send } = useUiNotification();
-
-  send({
-    type: 'success',
-    message: 'Successfully added product to the cart'
-  })
+export default {
+  setup() {
+    const { send } = useUiNotification();
+
+    send({
+      type: 'success',
+      message: 'Successfully added product to the cart'
+    })
+  } 
 }
 ```
 
@@ -184,4 +184,21 @@ type SendUiNotificationParams = {
 }
 ```
 
-Also we have prepared 
+### Example of use common notification messages
+
+```js
+import { useCart } from '<%= options.generate.replace.composables %>';
+import sendNotification from '~/assets/notifications';
+
+export default {
+  setup() {
+    const { addItem: addItemToCart, isInCart, error } = useCart();
+    const { cart: sendCartNotification } = sendNotification();
+
+    sendCartNotification.addItem({
+      productName: PRODUCT_NAME,
+      error: error.value.addItem ? error.value.addItem.message : false
+    });
+  } 
+}
+```

packages/core/nuxt-theme-module/theme/components/Notification.vue

@@ -7,7 +7,7 @@
       :action="notification.action && notification.action.text"
       :type="notification.type"
       @click:close="notification.dismiss"
-      @click:action="notification.action && notification.action.onClick()"
+      @click:action="notification.action && notification.action.onClick(); notification.dismiss()"
       visible
     >
       <template #icon v-if="notification.icon">
@@ -64,7 +64,7 @@ export default {
     margin: 0 var(--spacer-base) var(--spacer-2xs) 0;
   }
   @include for-mobile {
-    background: var(--c-link);
+    --notification-background: var(--c-link) !important;
     --notification-border-radius: 0;
     --notification-max-width: 100%;
     --notification-font-family: var(--font-family--primary);
@@ -75,6 +75,9 @@ export default {
     margin: 0 0 var(--spacer-xs) 0;
     --notification-close-top: var(--spacer-sm);
   }
+  &__action {
+    display: var(--notification-action-display,block) !important;
+  }
 }
 .slide-fade-enter-active,
 .slide-fade-leave-active {