From 24e24681a6af8aef74e5a53a16250e2b0ba0a0e4 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 5 Dec 2019 11:04:48 +1100
Subject: [PATCH] add a custom session button

---
 stylesheets/_session.scss               | 44 +++++++++++++++++++++++++
 stylesheets/manifest.scss               |  2 ++
 ts/components/session/SessionButton.tsx | 41 +++++++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 stylesheets/_session.scss
 create mode 100644 ts/components/session/SessionButton.tsx

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
new file mode 100644
index 000000000..9ad4bfc25
--- /dev/null
+++ b/stylesheets/_session.scss
@@ -0,0 +1,44 @@
+$session-color-green: #00F782;
+$session-color-white: #fff;
+$session-color-black: #000;
+
+
+$session-font-family: Waza;
+
+.session-button {
+    min-width: 165px;
+    width: auto;
+    height: 45px;
+    line-height: 45px;
+    padding: 0 35px 0 35px;
+    font-size: 15px;
+    font-family: $session-font-family;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    border-radius: 500px;
+
+    @mixin transparent-background($textAndBorderColor) {
+        background-color: Transparent;
+        background-repeat:no-repeat;
+        overflow: hidden;
+        outline:none;
+        color: $textAndBorderColor;
+        border: 2px solid $textAndBorderColor;
+    }
+  
+    &.full-green {
+        background-color: $session-color-green;
+        color: $session-color-white;
+    }
+  
+    &.green {
+        @include transparent-background($session-color-green);
+    }
+      
+    &.white {
+        @include transparent-background($session-color-white);
+      }
+  }
+  
\ No newline at end of file
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index cff591322..430d34384 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -24,6 +24,8 @@
 
 // New CSS
 @import 'modules';
+@import 'session';
+
 
 // Installer
 @import 'options';
diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx
new file mode 100644
index 000000000..dba3a9731
--- /dev/null
+++ b/ts/components/session/SessionButton.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+
+//import { LocalizerType } from '../../types/Util';
+
+export enum SessionButtonTypes {
+  fullGreen = 'fullGreen',
+  white = 'white',
+  green = 'green',
+}
+
+interface Props {
+  //i18n: LocalizerType;
+  text: string;
+  buttonType: SessionButtonTypes;
+}
+
+
+export class SessionButton extends React.PureComponent<Props> {
+
+  public render() {
+    const {
+      buttonType,
+      text
+    } = this.props;
+
+    return (
+        <div  
+          className={classNames(
+            'session-button',
+            buttonType === SessionButtonTypes.green? 'green' : '',
+            buttonType === SessionButtonTypes.fullGreen? 'full-green' : '',
+            buttonType === SessionButtonTypes.white? 'white' : '',
+            )}
+            role='button'
+        >
+          {text}
+        </div>
+    );
+  }
+}