From bde5be45e103a5304aae9772b841305cf5a1bf88 Mon Sep 17 00:00:00 2001 From: ph1p Date: Sat, 25 Jan 2020 23:10:28 +0100 Subject: [PATCH] style(icon): add shared icon style --- src/components/header.tsx | 20 +++----------------- src/shared/style.ts | 19 +++++++++++++++++++ src/views/chat.tsx | 39 +++++---------------------------------- src/views/minimized.tsx | 18 +++--------------- 4 files changed, 30 insertions(+), 66 deletions(-) create mode 100644 src/shared/style.ts diff --git a/src/components/header.tsx b/src/components/header.tsx index 89931f4..a00869f 100644 --- 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.backButton && ( - +
- + )} {props.left &&
{props.left}
}
{props.title}
@@ -26,21 +27,6 @@ const Header: FunctionComponent = props => ( ); -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 new file mode 100644 index 0000000..38ab65f --- /dev/null +++ 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 index 00424a1..a4b62b1 100644 --- 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 = props => { } right={ - +
- + history.push('/user-list')}> {state.online.length} } left={ - +
- + } /> 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 index 05b8a6e..3296525 100644 --- 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 = () => (
} left={ - +
- + } /> @@ -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;