style(icon): add shared icon style

ph1p · Jan 25, 2020 · bde5be4 · bde5be4
1 parent a98f3a8
commit bde5be4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 66 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { SharedIcon } from '../shared/style';
 
 interface Props {
   title: any;
@@ -13,11 +14,11 @@ const Header: FunctionComponent<Props> = props => (
   <Head>
     <div className="inner">
       {props.backButton && (
-        <BackButtonIcon>
+        <SharedIcon>
           <Link to="/">
             <div className="icon icon--return"></div>
           </Link>
-        </BackButtonIcon>
+        </SharedIcon>
       )}
       {props.left && <div className="left">{props.left}</div>}
       <div className="title">{props.title}</div>
@@ -26,21 +27,6 @@ const Header: FunctionComponent<Props> = props => (
   </Head>
 );
 
-const BackButtonIcon = styled.div`
-  .icon {
-    margin: 5px;
-    height: 22px;
-    width: 24px;
-    background-position: -4px -5px;
-    border-radius: 5px;
-  }
-  &:hover {
-    .icon {
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-  }
-`;
-
 const Head = styled.div`
   border-bottom: 1px solid #e9e9e9;
   .inner {

diff --git a/src/shared/style.ts b/src/shared/style.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const SharedIcon = styled.div`
+  .icon {
+    margin: 5px;
+    height: 22px;
+    width: 24px;
+    background-position: -4px -5px;
+    border-radius: 5px;
+    &--white {
+      background-position: -4px -101px;
+    }
+  }
+  &:hover {
+    .icon {
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+  }
+`;
diff --git a/src/views/chat.tsx b/src/views/chat.tsx
@@ -11,6 +11,7 @@ import { IS_PROD, MAX_MESSAGES } from '../shared/constants';
 import { ConnectionEnum } from '../shared/interfaces';
 import { withSocketContext } from '../shared/socket-provider';
 import { state, view } from '../shared/state';
+import { SharedIcon } from '../shared/style';
 
 interface ChatProps {
   socket: SocketIOClient.Socket;
@@ -152,20 +153,20 @@ const ChatView: FunctionComponent<ChatProps> = props => {
         }
         right={
           <HeaderRight>
-            <Minimize onClick={state.toggleMinimizeChat}>
+            <SharedIcon onClick={state.toggleMinimizeChat}>
               <div className="icon icon--minus" />
-            </Minimize>
+            </SharedIcon>
             <Online onClick={() => history.push('/user-list')}>
               {state.online.length}
             </Online>
           </HeaderRight>
         }
         left={
-          <SettingsIcon>
+          <SharedIcon>
             <Link to="/settings">
               <div className="icon icon--adjust"></div>
             </Link>
-          </SettingsIcon>
+          </SharedIcon>
         }
       />
       <Chat hasSelection={state.selection.length > 0}>
@@ -251,36 +252,6 @@ const HeaderRight = styled.div`
   display: flex;
 `;
 
-const Minimize = styled.div`
-  .icon {
-    margin: 5px;
-    height: 22px;
-    width: 24px;
-    background-position: -4px -5px;
-    border-radius: 5px;
-  }
-  &:hover {
-    .icon {
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-  }
-`;
-
-const SettingsIcon = styled.div`
-  .icon {
-    margin: 5px;
-    height: 22px;
-    width: 24px;
-    background-position: -4px -5px;
-    border-radius: 5px;
-  }
-  &:hover {
-    .icon {
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-  }
-`;
-
 const Online = styled.div`
   position: relative;
   padding: 8px 12px 8px 24px;

diff --git a/src/views/minimized.tsx b/src/views/minimized.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import Header from '../components/header';
 import { ConnectionEnum } from '../shared/interfaces';
 import { state, view } from '../shared/state';
+import { SharedIcon } from '../shared/style';
 
 const MinimizedView: FunctionComponent = () => (
   <>
@@ -18,9 +19,9 @@ const MinimizedView: FunctionComponent = () => (
         </div>
       }
       left={
-        <Maximize onClick={state.toggleMinimizeChat}>
+        <SharedIcon onClick={state.toggleMinimizeChat}>
           <div className="icon icon--plus" />
-        </Maximize>
+        </SharedIcon>
       }
     />
     <Minimized>
@@ -39,19 +40,6 @@ const MinimizedView: FunctionComponent = () => (
   </>
 );
 
-const Maximize = styled.div`
-  .icon {
-    margin: 5px;
-    height: 22px;
-    width: 24px;
-    background-position: -4px -5px;
-    border-radius: 5px;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-  }
-`;
-
 const Minimized = styled.div`
   display: grid;
   text-align: center;