Removed log styled - moved to styled components

src/js/components/Log/index.js

@@ -1,23 +1,70 @@
 /* @flow */
-
-
 import React from 'react';
+import styled from 'styled-components';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import colors from 'config/colors';
 import { H2 } from 'components/Heading';
+import Icon from 'components/Icon';
+import P from 'components/P';
 
 import * as LogActions from 'actions/LogActions';
-import type { State, Dispatch } from 'flowtype';
+import icons from 'config/icons';
+import { State, Dispatch } from 'flowtype';
+
+const Wrapper = styled.div`
+    position: relative;
+    color: ${colors.INFO_PRIMARY};
+    background: ${colors.INFO_SECONDARY};
+    padding: 24px 48px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+`;
+
+const Click = styled.div`
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    right: 0;
+    padding: 12px;
+    color: inherit;
+    transition: opacity 0.3s;
+
+    &:active,
+    &:hover {
+        opacity: 0.6;
+        color: inherit;
+    }
+`;
+
+const Textarea = styled.textarea`
+    width: 100%;
+    height: 200px;
+    min-height: 200px;
+    resize: vertical;
+    font-size: 10px;
+
+    &:focus {
+        box-shadow: none;
+    }
+`;
+
+const StyledP = styled(P)`
+    margin: 10px 0;
+`;
 
 const Log = (props: Props): ?React$Element<string> => {
     if (!props.log.opened) return null;
     return (
-        <div className="log">
+        <Wrapper>
-            <button className="log-close transparent" onClick={props.toggle} />
+            <Click onClick={props.toggle}>
+                <Icon size={25} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
+            </Click>
             <H2>Log</H2>
-            <p>Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.</p>
+            <StyledP>Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.</StyledP>
-            <textarea value={JSON.stringify(props.log.entries)} readOnly />
+            <Textarea value={JSON.stringify(props.log.entries)} readOnly />
-        </div>
+        </Wrapper>
     );
 };
 

src/js/config/icons.js

@@ -1,4 +1,5 @@
 export default {
+    CLOSE: 'M754.816 689.92c17.6 17.6 17.6 46.72 0 64.64-8.96 8.64-20.48 13.44-32.64 13.44s-23.68-4.8-32.32-13.44l-177.888-177.92-177.888 177.92c-16.32 16.96-47.040 17.6-64.64 0-17.92-17.92-17.92-47.040 0-64.64l178.208-177.92-178.208-177.92c-17.92-17.92-17.92-46.72 0-64.64 17.28-17.28 47.36-17.28 64.64 0l177.888 177.92 177.888-177.92c17.92-17.92 47.040-17.92 64.96 0 17.6 17.92 17.6 46.72 0 64.64l-178.24 177.92 178.24 177.92z',
     PLUS: 'M768 512c0 22.080-17.92 40-40 40h-176v176c0 22.080-17.92 40-40 40s-40-17.92-40-40v-176h-176c-22.080 0-40-17.92-40-40s17.92-40 40-40h176v-176c0-22.080 17.92-40 40-40s40 17.92 40 40v176h176c22.080 0 40 17.92 40 40z',
     ARROW_LEFT: 'M603.072 757.216l-237.44-219.616c-8.576-8.128-13.632-19.296-13.632-31.040 0.288-11.744 5.056-23.2 13.664-31.040l227.040-208.768c16.928-15.36 43.040-14.176 58.176 3.008 15.424 16.864 13.952 43.392-2.656 59.040l-193.504 177.76 203.904 188.608c8 7.52 12.768 18.080 13.344 29.216 0.608 11.456-3.264 21.696-10.688 30.112-15.456 16.896-41.568 18.080-58.208 2.72z',
     ARROW_DOWN: 'M757.216 420.928l-219.616 237.44c-8.128 8.576-19.296 13.632-31.040 13.632-11.744-0.288-23.2-5.056-31.040-13.664l-208.768-227.040c-15.36-16.928-14.176-43.040 3.008-58.176 16.864-15.424 43.392-13.952 59.040 2.656l177.76 193.504 188.608-203.904c7.52-8 18.080-12.768 29.216-13.344 11.456-0.608 21.696 3.264 30.112 10.688 16.896 15.456 18.080 41.568 2.72 58.208z',

src/styles/index.less

@@ -17,4 +17,3 @@
 
 @import './inputs.less';
 @import './loader.less';
-@import './log.less';

src/styles/log.less

@@ -1,51 +0,0 @@
-.log {
-    position: relative;
-    color: @color_info_primary;
-    background: @color_info_secondary;
-    padding: 24px 48px;
-    display: flex;
-    flex-direction: column;
-    text-align: left;
-
-    .log-close {
-        position: absolute;
-        top: 8px;
-        right: 0;
-        padding: 12px;
-        color: inherit;
-        transition: opacity 0.3s;
-
-        &:after {
-            .icomoon-close;
-        }
-        &:active,
-        &:hover {
-            opacity: 0.6;
-            color: inherit;
-        }
-    }
-
-    h2 {
-        font-size: 14px;
-        font-weight: bold;
-        padding: 0px;
-    }
-
-    p {
-        padding: 0px;
-        margin: 2px 0px;
-        font-size: 12px;
-        color: inherit;
-    }
-
-    textarea {
-        width: 100%;
-        height: 200px;
-        min-height: 200px;
-        resize: vertical;
-        font-size: 10px;
-        &:focus {
-            box-shadow: none;
-        }
-    }
-}