Finalized notifiction refactor

6 years ago · 5a3bb77fb0
parent a7726081f2
commit 5a3bb77fb0
2 changed files with 29 additions and 66 deletions
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@ -19,8 +19,6 @@ const Wrapper = styled.div`
    padding: 24px 48px 24px 24px;
    display: flex;
    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
    text-align: left;

    ${props => props.type === 'info' && css`
@ -45,12 +43,13 @@ const Wrapper = styled.div`
 `;

 const Body = styled.div`
-    flex: 1;
    display: flex;
    margin-right: 40px;
+    flex: 1;
 `;

 const Title = styled.div`
+    padding-bottom: 5px;
    font-weight: ${FONT_WEIGHT.BIGGER};
 `;

@ -64,20 +63,25 @@ const CloseClick = styled.div`
 `;

 const Message = styled.div`
-    padding: 5px 0 0 0;
    font-size: ${FONT_SIZE.SMALLER};
 `;

-const IconContent = styled.div`
-    padding-right: 5px;
-`;
-
 const StyledIcon = styled(Icon)`
    position: relative;
    top: -7px;
 `;

-const MessageContent = styled.div``;
+const MessageContent = styled.div`
+    height: 20px;
+    display: flex;
+`;
+
+const Texts = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const AdditionalContent = styled.div``;

 export const Notification = (props: NProps): React$Element<string> => {
    const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
@ -117,25 +121,25 @@ export const Notification = (props: NProps): React$Element<string> => {
                </CloseClick>
            )}
            <Body>
-                <IconContent>
+                <MessageContent>
                    <StyledIcon
                        color={getIconColor(props.className)}
                        icon={icons[props.className.toUpperCase()]}
                    />
-                </IconContent>
-                <MessageContent>
-                    <Title>{ props.title }</Title>
-                    { props.message && (
-                        <Message>
-                            <p dangerouslySetInnerHTML={{ __html: props.message }} />
-                        </Message>
-                    ) }
+                    <Texts>
+                        <Title>{ props.title }</Title>
+                        { props.message && (
+                            <Message>
+                                <p dangerouslySetInnerHTML={{ __html: props.message }} />
+                            </Message>
+                        ) }
+                    </Texts>
                </MessageContent>
            </Body>
-            {props.actions && props.actions.length > 0 && (
-                <ActionContent>
-                    {props.actions
-                        .map(action => (
+            <AdditionalContent>
+                {props.actions && props.actions.length > 0 && (
+                    <ActionContent>
+                        {props.actions.map(action => (
                            <NotificationButton
                                key={action.label}
                                type={props.className}
@ -143,8 +147,9 @@ export const Notification = (props: NProps): React$Element<string> => {
                                onClick={() => { close(); action.callback(); }}
                            />
                        ))}
-                </ActionContent>
-            )}
+                    </ActionContent>
+                )}
+            </AdditionalContent>
        </Wrapper>
    );
 };
--- a/src/views/Wallet/views/Dashboard/index.js
+++ b/src/views/Wallet/views/Dashboard/index.js
@ -2,8 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';

-import { Notification } from 'components/Notification';
-
 import { H2 } from 'components/Heading';
 import DashboardImg from 'images/dashboard.png';

@ -34,46 +32,6 @@ const P = styled.p`

 const Dashboard = () => (
    <Wrapper>
-        <Notification
-            title="TITLE TITLE TITLE TITLETITLE TITLE"
-            message="Config files are missing"
-            className="error"
-            actions={[{
-                label: 'Button action',
-                callback: () => false,
-            }]}
-        />
-
-        <Notification
-            title="TITLE TITLE TITLE TITLETITLE TITLE"
-            message="Config files are missing"
-            className="warning"
-            actions={[{
-                label: 'Button action',
-                callback: () => false,
-            }]}
-        />
-
-        <Notification
-            title="TITLE TITLE TITLE TITLETITLE TITLE"
-            message="Config files are missing"
-            className="success"
-            cancelable={false}
-            actions={[{
-                label: 'Button action',
-                callback: () => false,
-            }]}
-        />
-
-        <Notification
-            title="TITLE TITLE TITLE TITLETITLE TITLE"
-            message="Description hahahah aloglg lfkdlfkdlfk"
-            className="info"
-            actions={[{
-                label: 'Button action',
-                callback: () => false,
-            }]}
-        />
        <StyledH2>Dashboard</StyledH2>
        <Row>
            <H2>Please select your coin</H2>