small ui fixes

Author: Vincenius

components/Generator/Controls.js

@@ -82,7 +82,10 @@ const Controls = props => {
                 }
                 { value === 1 &&
                     <div>
-                        <FileCopy onClick={() => copyToClipboard(htmlTextArea, 'html')} />
+                        <S.CopyContainer onClick={() => copyToClipboard(htmlTextArea, 'html')} >
+                            <FileCopy />
+                            Copy
+                        </S.CopyContainer>
                         <S.Copied visible={copiedCode === 'html'}>copied</S.Copied>
                         <S.CodeArea
                             value={htmlCode}
@@ -94,7 +97,10 @@ const Controls = props => {
                 }
                 { value === 2 &&
                     <div>
-                        <FileCopy onClick={() => copyToClipboard(cssTextArea, 'css')} />
+                        <S.CopyContainer onClick={() => copyToClipboard(cssTextArea, 'css')} >
+                            <FileCopy />
+                            Copy
+                        </S.CopyContainer>
                         <S.Copied visible={copiedCode === 'css'}>copied</S.Copied>
                         <S.CodeArea
                             value={cssCode}

components/Generator/index.js

@@ -58,7 +58,11 @@ const Generator = props => {
                 <S.Bottom>
                     <S.Row>
                         { Object.entries(SEPARATORS).map(([key, val]) =>
-                            <Card key={`${val}-card`} onClick={() => { useSeparator(val) }}>
+                            <Card
+                                className={active === val ? 'active' : ''}
+                                key={`${val}-card`}
+                                onClick={() => { useSeparator(val) }}
+                            >
                                 <img src={`/${val}.png`} alt={`${val} preview`} />
                             </Card>
                         )}

components/Generator/styled.js

@@ -101,9 +101,10 @@ export const Row = styled.div`
       margin: 5px;
     }
 
+    &.active,
     &:hover {
       cursor: pointer;
-      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     }
   }
 
@@ -160,6 +161,17 @@ export const CodeArea = styled(TextareaAutosize)`
     margin-bottom: ${props => props.marginBottom ? '20px' : '0'};
 `
 
+export const CopyContainer = styled.div`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  svg {
+    color: ${darkGrey};
+    margin-right: 4px;
+  }
+`
+
 export const Copied = styled.span`
     display: inline-block;
     padding: 4px;