style: add hover styles

ph1p · Jan 25, 2020 · 0d63940 · 0d63940
1 parent 74e9b40
commit 0d63940
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 18 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -13,9 +13,11 @@ const Header: FunctionComponent<Props> = props => (
   <Head>
     <div className="inner">
       {props.backButton && (
-        <Link className="back-button" to="/">
-          <div className="icon icon--return"></div>
-        </Link>
+        <BackButtonIcon>
+          <Link to="/">
+            <div className="icon icon--return"></div>
+          </Link>
+        </BackButtonIcon>
       )}
       {props.left && <div className="left">{props.left}</div>}
       <div className="title">{props.title}</div>
@@ -24,22 +26,33 @@ 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 {
     display: grid;
     grid-template-columns: auto 1fr auto;
     width: 100%;
     .back-button,
     .left {
-      border-right: 1px solid #e9e9e9;
       cursor: pointer;
     }
-    .left {
-    }
     .title {
-      padding: 0 10px;
+      padding: 0 10px 0 2px;
       font-weight: bold;
       align-self: center;
     }

diff --git a/src/views/chat.tsx b/src/views/chat.tsx
@@ -161,9 +161,11 @@ const ChatView: FunctionComponent<ChatProps> = props => {
           </HeaderRight>
         }
         left={
-          <Link to="/settings">
-            <div className="icon icon--adjust"></div>
-          </Link>
+          <SettingsIcon>
+            <Link to="/settings">
+              <div className="icon icon--adjust"></div>
+            </Link>
+          </SettingsIcon>
         }
       />
       <Chat hasSelection={state.selection.length > 0}>
@@ -200,7 +202,9 @@ const ChatView: FunctionComponent<ChatProps> = props => {
           sendMessage={sendMessage}
           setTextMessage={text => (chatState.textMessage = text)}
           textMessage={chatState.textMessage}
-          setSelectionIsChecked={isChecked => (chatState.selectionIsChecked = isChecked)}
+          setSelectionIsChecked={isChecked =>
+            (chatState.selectionIsChecked = isChecked)
+          }
           selectionIsChecked={chatState.selectionIsChecked}
         />
       </Chat>
@@ -225,9 +229,9 @@ const MoreButton = styled.button`
 
 const MessageSeperator = styled.div`
   border-width: 1px 0 0 0;
-  border-color: #dcdcdc;
-  border-style: solid;
-  margin-bottom: 15px;
+  border-color: #ececec;
+  border-style: dotted;
+  margin: -5px 0 10px;
 `;
 
 const Chat = styled.div`
@@ -248,7 +252,33 @@ const HeaderRight = styled.div`
 `;
 
 const Minimize = styled.div`
-  border-right: 1px solid #e9e9e9;
+  .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`
@@ -257,6 +287,7 @@ const Online = styled.div`
   align-self: center;
   cursor: pointer;
   font-weight: bold;
+  border-left: 1px solid #e9e9e9;
   &::after {
     content: '';
     left: 10px;

diff --git a/src/views/minimized.tsx b/src/views/minimized.tsx
@@ -18,9 +18,9 @@ const MinimizedView: FunctionComponent = () => (
         </div>
       }
       left={
-        <div onClick={state.toggleMinimizeChat}>
+        <Maximize onClick={state.toggleMinimizeChat}>
           <div className="icon icon--plus" />
-        </div>
+        </Maximize>
       }
     />
     <Minimized>
@@ -39,6 +39,18 @@ 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;

diff --git a/src/views/settings.tsx b/src/views/settings.tsx
@@ -125,6 +125,16 @@ const DeleteHistory = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin: 5px;
+  height: 21px;
+  padding: 0 0 0 10px;
+  border-radius: 5px;
+  .icon {
+    width: 31px;
+  }
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.06);
+  }
 `;
 
 const Settings = styled.div`