From 0ee01fc8fd1778d1d85dc001551dfe22e605fbe5 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Wed, 8 Jan 2020 19:16:01 +1100
Subject: [PATCH] Search UI and caret

---
 stylesheets/_session.scss                     |  6 +++++
 .../_session_theme_dark_left_pane.scss        | 26 +++++++++++++++++--
 .../session/LeftPaneSettingSection.tsx        |  9 +++++--
 ts/components/session/SessionButton.tsx       |  4 +--
 ts/components/session/icon/Icons.tsx          |  6 +++++
 5 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 29d8922e1..ef02cc2db 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -82,6 +82,9 @@ $session-margin-sm: 10px;
 $session-margin-md: 15px;
 $session-margin-lg: 20px;
 
+$session-search-input-height: 34px;
+
+
 div.spacer-sm {
   height: $session-margin-sm;
 }
@@ -194,6 +197,9 @@ $session_message-container-border-radius: 5px;
   margin-right: 5px;
 }
 
+
+
+
 .session-button {
   @mixin transparent-background($textAndBorderColor) {
     background-color: Transparent;
diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss
index c74f53288..140cbeb29 100644
--- a/stylesheets/_session_theme_dark_left_pane.scss
+++ b/stylesheets/_session_theme_dark_left_pane.scss
@@ -102,7 +102,7 @@ $session-compose-margin: 20px;
   &__header {
     display: flex;
     flex-direction: row;
-    margin: 28px 7px 28px 0px;
+    padding: 28px 7px 28px 0px;
 
     background-color: $session-shade-3;
 
@@ -212,7 +212,7 @@ $session-compose-margin: 20px;
 }
 
 .session-search-input {
-  height: 34px;
+  height: $session-search-input-height;
   width: 100%;
   margin-right: 1px;
   margin-bottom: 10px;
@@ -393,6 +393,28 @@ $session-compose-margin: 20px;
   &-input-group {
     display: inline-flex;
   }
+
+  &-input-button .session-button.square{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    height: $session-search-input-height;
+    width: $session-search-input-height;
+
+    padding: 0px;
+    margin: 0px;
+    
+    svg {
+      transition: $session-transition-duration;
+    }
+
+    &:hover{
+      svg {
+        fill: $session-color-green;
+      }
+    }
+  }
 }
 
 .panel-text-divider {
diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx
index ae07f9504..1e9efc888 100644
--- a/ts/components/session/LeftPaneSettingSection.tsx
+++ b/ts/components/session/LeftPaneSettingSection.tsx
@@ -125,8 +125,13 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
             <SessionButton
               buttonType={SessionButtonType.Square}
               buttonColor={SessionButtonColor.Green}
-              text={'>'}
-            />
+            >
+              <SessionIcon 
+                iconType={SessionIconType.Caret}
+                iconSize={SessionIconSize.Large}
+
+              />
+            </SessionButton>
           </div>
         </div>
         {this.renderCategories()}
diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx
index 8631f8b57..ad432305a 100644
--- a/ts/components/session/SessionButton.tsx
+++ b/ts/components/session/SessionButton.tsx
@@ -23,7 +23,7 @@ export enum SessionButtonColor {
 }
 
 interface Props {
-  text: string;
+  text?: string;
   buttonType: SessionButtonType;
   buttonColor: SessionButtonColor;
   onClick: any;
@@ -57,7 +57,7 @@ export class SessionButton extends React.PureComponent<Props> {
         role="button"
         onClick={this.clickHandler}
       >
-        {text}
+        {this.props.children || text}
       </div>
     );
   }
diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx
index 05d098e4f..b38b387ac 100644
--- a/ts/components/session/icon/Icons.tsx
+++ b/ts/components/session/icon/Icons.tsx
@@ -1,6 +1,7 @@
 export enum SessionIconType {
   AddUser = 'addUser',
   Arrow = 'arrow',
+  Caret = 'caret',
   ChatBubble = 'chatBubble',
   Check = 'check',
   Chevron = 'chevron',
@@ -47,6 +48,11 @@ export const icons = {
       'M33.187,12.438 L6.097,12.438 L16.113,2.608 C16.704,2.027 16.713,1.078 16.133,0.486 C15.551,-0.105 14.602,-0.113 14.011,0.466 L1.407,12.836 C1.121,13.117 0.959,13.5 0.957981241,13.9 C0.956,14.3 1.114,14.685 1.397,14.968 L14.022,27.593 C14.315,27.886 14.699,28.032 15.083,28.032 C15.466,28.032 15.85,27.886 16.143,27.593 C16.729,27.007 16.729,26.057 16.143,25.472 L6.109,15.438 L33.187,15.438 C34.015,15.438 34.687,14.766 34.687,13.938 C34.687,13.109 34.015,12.438 33.187,12.438',
     viewBox: '0 -4 37 37',
   },
+  [SessionIconType.Caret]: {
+    path:
+      'M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z',
+    viewBox: '-200 -200 640 640',
+  },
   [SessionIconType.ChatBubble]: {
     path:
       'M6.29289322,16.2928932 C6.4804296,16.1053568 6.73478351,16 7,16 L19,16 C19.5522847,16 20,15.5522847 20,15 L20,5 C20,4.44771525 19.5522847,4 19,4 L5,4 C4.44771525,4 4,4.44771525 4,5 L4,18.5857864 L6.29289322,16.2928932 Z M7.41421356,18 L3.70710678,21.7071068 C3.07714192,22.3370716 2,21.8909049 2,21 L2,5 C2,3.34314575 3.34314575,2 5,2 L19,2 C20.6568542,2 22,3.34314575 22,5 L22,15 C22,16.6568542 20.6568542,18 19,18 L7.41421356,18 Z',