Fix message box and dialog styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

src/store/LibraryTheme.ts

@@ -68,6 +68,7 @@ const actions = {
   },
   setDesignSystem ({ commit }, designSystem: DesignSystem) {
     commit(types.SET_DESIGN_SYSTEM, designSystem)
+    document.documentElement.setAttribute('design-system', designSystem)
   }
 }
 

src/stories/Intro/Theming.stories.ts

@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs'
 import Theme from '../../types/Theme'
 import DesignSystem from '../../types/DesignSystem'
 import { SButton, SDivider } from '../../components'
-import { setTheme, setDesignSystem } from '../../utils'
+import { switchTheme, setDesignSystem } from '../../utils'
 import mainStore from '../../store'
 
 export default {
@@ -18,25 +18,23 @@ export const configurable = () => ({
                <h4>This feature has Work In Progress status</h4>
                <div class="s-flex" style="align-items: center;">
                  <h4 style="margin-right: 10px;">Theme:</h4>
-                 <s-button @click="handleThemeChange(theme)">{{ theme }}</s-button>
+                 <s-button @click="handleThemeChange">{{ theme }}</s-button>
                  <s-button @click="handleDesignSystemChange(designSystem)">{{ designSystem || 'default' }}</s-button>
                </div>
                <s-divider />
                <h4>You can check all components, these theme settings are applied to the whole library</h4>
              </div>`,
   computed: {
-    theme: () => mainStore?.getters?.libraryTheme,
-    designSystem: () => mainStore?.getters?.libraryDesignSystem
+    theme: () => mainStore?.getters?.libraryTheme as Theme,
+    designSystem: () => mainStore?.getters?.libraryDesignSystem as DesignSystem
   },
   methods: {
-    handleThemeChange: (theme: Theme) => {
-      const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT
-      setTheme(newTheme)
+    handleThemeChange: () => {
+      switchTheme()
     },
     handleDesignSystemChange: (designSystem: DesignSystem) => {
       const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT
       setDesignSystem(newDesignSystem)
-      document.documentElement.setAttribute('design-system', newDesignSystem)
     }
   }
 })

src/stories/Messages.stories.ts

@@ -0,0 +1,41 @@
+import { withKnobs } from '@storybook/addon-knobs'
+
+import Vue from 'vue'
+
+import { SButton, SDivider } from '../components'
+
+export default {
+  title: 'Design System/Components/Messages & Notifications',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { SButton, SDivider },
+  template: `<div>
+               <h4>Alert messages</h4>
+               <h5 class="s-code">this.$alert('Message', { title: 'Title', type })</h5>
+               <s-divider />
+               <div class="s-flex" style="align-items: center;">
+                 <s-button v-for="type in types" :key="type + 'Alert'" @click="handleOpenAlert(type)">{{ type || 'default' }}</s-button>
+               </div>
+               <s-divider />
+               <h4>Notifications</h4>
+               <h5 class="s-code">this.$notify({ message: 'Message', title: 'Title', type })</h5>
+               <s-divider />
+               <div class="s-flex" style="align-items: center;">
+                 <s-button v-for="type in types" :key="type + 'Notification'" @click="handleOpenNotification(type)">{{ type || 'default' }}</s-button>
+               </div>
+             </div>`,
+  data: () => ({
+    types: ['error', 'warning', 'success', 'info', '']
+  }),
+  methods: {
+    handleOpenAlert: (type: string) => {
+      Vue.prototype.$alert(`Some ${type} message`, { title: 'Title', type })
+    },
+    handleOpenNotification: (type: string) => {
+      Vue.prototype.$notify({ message: `Some ${type} message`, title: 'Title', type })
+    }
+  }
+})

src/styles/common.scss

@@ -13,11 +13,11 @@ html {
   margin: 0;
 }
 
+/* Typography */
 .d1 {
   font-size: var(--s-heading0-font-size);
 }
 
-/* Typography */
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6, .h7,
 .d2,
@@ -148,6 +148,10 @@ h6,
   line-height: var(--s-line-height-big);
 }
 
+.s-code {
+  font-family: var(--s-font-family-mono);
+}
+
 .s-flex {
   display: flex;
 }
@@ -248,11 +252,30 @@ button > span {
 }
 
 .el-message-box {
+  background-color: var(--s-color-base-on-accent);
+  border-radius: var(--s-border-radius-small);
+  border: none;
+  [design-system="neumorphic"] & {
+    box-shadow: var(--s-shadow-dialog);
+  }
   & & {
     &__header {
       .el-message-box__title {
         color: var(--s-color-base-content-primary);
         font-size: var(--s-heading5-font-size);
+        font-feature-settings: var(--s-font-feature-settings-heading);
+        font-weight: 700;
+      }
+    }
+    &__content {
+      color: var(--s-color-base-content-primary);
+    }
+    &__close {
+      color: var(--s-color-base-content-secondary);
+    }
+    &__headerbtn:focus, &__headerbtn:hover {
+      .el-message-box__close {
+        color: var(--s-color-theme-accent);
       }
     }
     &__btns {
@@ -266,9 +289,9 @@ button > span {
           border-color: var(--s-color-theme-accent);
         }
         &.el-button--primary {
-          &:hover, &:active, &:focus {
-            color: var(--s-color-base-on-accent);
-          }
+          background-color: var(--s-color-theme-accent);
+          border-color: var(--s-color-theme-accent);
+          color: var(--s-color-base-on-accent);
           &:hover {
             background-color: var(--s-color-theme-accent-hover);
             border-color: var(--s-color-theme-accent-hover);

src/styles/dialog.scss

@@ -24,7 +24,7 @@
   }
   & & {
     &__header, &__title {
-      @include font-weight(700, true);
+      font-weight: 700;
     }
     &__title {
       font-size: var(--s-heading5-font-size);
@@ -34,6 +34,14 @@
     &__body {
       color: var(--s-color-base-content-primary);
     }
+    &__close {
+      color: var(--s-color-base-content-secondary);
+    }
+    &__headerbtn:focus, &__headerbtn:hover {
+      .el-dialog__close {
+        color: var(--s-color-theme-accent);
+      }
+    }
   }
   > * {
     word-break: break-word;

src/styles/neumorphism/dialog.scss

@@ -3,7 +3,7 @@
     box-shadow: var(--s-shadow-dialog);
   }
 }
-.v-modal {
+[design-system="neumorphic"] .v-modal {
   opacity: 0.75;
   backdrop-filter: blur(4px);
   // TODO: Fix FF behaviour

src/styles/neumorphism/index.scss

@@ -1,9 +1,9 @@
-@import "./button.scss";
-@import "./input.scss";
-@import "./card.scss";
-@import "./collapse.scss";
-@import "./tabs.scss";
-@import "./radio.scss";
-@import "./switch.scss";
-@import "./tooltip.scss";
-@import "./dialog.scss";
+@import "./button";
+@import "./input";
+@import "./card";
+@import "./collapse";
+@import "./tabs";
+@import "./radio";
+@import "./switch";
+@import "./tooltip";
+@import "./dialog";