fix(visual regresion): notification font size (TouK#1941)

ui/client/bootstrap.tsx

@@ -15,7 +15,6 @@ import {NkThemeProvider} from "./containers/theme"
 import history from "./history"
 import "./i18n"
 import configureStore from "./store/configureStore"
-import "./stylesheets/notifications.styl"
 
 const {store, persistor} = configureStore()
 const rootContainer = document.createElement(`div`)

ui/client/components/notifications/Notification.tsx

@@ -0,0 +1,29 @@
+import {isEmpty} from "lodash"
+import React from "react"
+import Dotdotdot from "react-dotdotdot"
+import InlinedSvgs from "../../assets/icons/InlinedSvgs"
+import HeaderIcon from "../tips/HeaderIcon"
+import classnames from "./notifications.styl"
+
+interface Props {
+  icon: string,
+  message?: string,
+  details?: string,
+}
+
+export default function Notification({icon, message, details}: Props): JSX.Element {
+  return (
+    <div className={classnames.notification}>
+      <div className="icon" dangerouslySetInnerHTML={{__html: icon}}/>
+      <div className={classnames.notificationDetails}>
+        {!isEmpty(message) && <span className={classnames.notificationText}>{message}</span>}
+        {!isEmpty(details) && (
+          <Dotdotdot clamp={`380px`}>
+            <span className={classnames.notificationText}>{details}</span>
+          </Dotdotdot>
+        )}
+      </div>
+      <HeaderIcon className={classnames.dismissIcon} icon={InlinedSvgs.tipsClose}/>
+    </div>
+  )
+}

ui/client/stylesheets/notifications.styl → ui/client/components/notifications/notifications.styl

@@ -1,4 +1,4 @@
-@import "./_variables.styl"
+@import "../../stylesheets/_variables.styl"
 
 .notifications-wrapper
   position absolute
@@ -11,7 +11,7 @@
     width: 300px
     max-height 400px
     font-family "Open Sans"
-    font-size: 16
+    font-size: 16px
     display flex
     border 1px solid #3a3a3a
     color #333333