style: update pills

ph1p · Apr 28, 2020 · 52a6073 · 52a6073
1 parent 7381435
commit 52a6073
Showing 1 changed file with 25 additions and 7 deletions.
diff --git a/src/views/Chat.tsx b/src/views/Chat.tsx
@@ -164,9 +164,7 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
             <Online onClick={() => history.push('/user-list')}>
               {state.online.length}
             </Online>
-            <SharedIcon onClick={state.toggleMinimizeChat}>
-              <div className="icon icon--minus icon--white" />
-            </SharedIcon>
+            <Minimize onClick={state.toggleMinimizeChat} />
           </FloatingButtonRight>
         )}
 
@@ -305,7 +303,8 @@ const MoreButton = styled.div`
   color: #fff;
   transition: transform 0.2s;
   transform: translateX(${({ isSettings }) => (isSettings ? -150 : 0)}px);
-  padding: 10px 15px;
+  padding: 5px 15px;
+  line-height: 14px;
   cursor: pointer;
   &:hover {
     background-color: rgba(0, 0, 0, 18);
@@ -356,15 +355,15 @@ const Messages = styled.div`
 
 const Online = styled.div`
   position: relative;
-  padding: 8px 0 8px 24px;
+  padding: 4px 5px 5px 20px;
   align-self: center;
   cursor: pointer;
   font-weight: bold;
   color: #fff;
   &::after {
     content: '';
-    left: 10px;
-    top: 13px;
+    left: 8px;
+    top: 10px;
     position: absolute;
     width: 5px;
     height: 5px;
@@ -373,4 +372,23 @@ const Online = styled.div`
   }
 `;
 
+const Minimize = styled.div`
+  position: relative;
+  padding: 10px 0;
+  width: 24px;
+  align-self: center;
+  cursor: pointer;
+  font-weight: bold;
+  color: #fff;
+  &::after {
+    content: '';
+    left: 6px;
+    top: 9px;
+    position: absolute;
+    width: 11px;
+    height: 1px;
+    background-color: #fff;
+  }
+`;
+
 export default withSocketContext(view(ChatView));