fixed toasts styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmet-public/luma-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Luma React UI LIbrary",
   "repository": "https://github.com/PMET-public/luma-ui.git",
   "author": "Carlos A. Cabrera @fnhhipster",

src/components/App/App.story.tsx

@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react'
 import { boolean } from '@storybook/addon-knobs'
 import { toast } from '../../lib'
 import { action } from '@storybook/addon-actions'
+import styled from 'styled-components'
 
 export const AppMockData: AppProps = {
     logo: {
@@ -74,17 +75,32 @@ export const AppMockData: AppProps = {
     },
 }
 
+const Toast = styled.div`
+    display: grid;
+    grid-gap: 1rem;
+
+    & > button {
+        background-color: #fff;
+        border-radius: 2.4rem;
+        box-sizing: border-box;
+        color: #222;
+        cursor: pointer;
+        display: inline-flex;
+        font-weight: 800;
+        padding: 1rem 2.2rem;
+        place-content: center;
+    }
+`
+
 storiesOf('📦 Components/App', module).add('Default', () => {
-    toast.success('Success!')
-    toast.error('Error!')
-    toast.warn('Warning!')
     toast.info(
-        <>
-            Info!{' '}
-            <button className="button" onClick={action('onClick')}>
-                Button
-            </button>
-        </>
+        <Toast>
+            🎉 A new update (x.x.x) is available.
+            <button onClick={action('onClick')}>Reload</button>
+        </Toast>,
+        {
+            autoClose: false,
+        }
     )
     return <App loading={boolean('loading', false)} {...AppMockData} />
 })

src/theme/ToastStyles.tsx

@@ -6,23 +6,12 @@ export const ToastsStyles = createGlobalStyle<{ $colors: typeof light | typeof d
         z-index: 9999;
         transform: translate3d(0, 0, 9999px);
         position: fixed;
-        padding: 4px;
-        width: 400px;
         box-sizing: border-box;
         color: #fff;
-
-        & .button {
-            background-color: #fff;
-            border-radius: 2.4rem;
-            box-sizing: border-box;
-            color: #222;
-            cursor: pointer;
-            display: inline-flex;
-            font-weight: 800;
-            margin-left: 1rem;
-            padding: 1rem 2.2rem;
-            font-size: 0.8em;
-        }
+        padding: 4px;
+        min-width: 30rem;
+        max-width: 100%;
+        font-size: 1.4rem;
     }
     .Toastify__toast-container--top-left {
         top: 1em;