diff --git a/images/session/icon-attachment.svg b/images/session/icon-attachment.svg
new file mode 100644
index 000000000..4bad555ff
--- /dev/null
+++ b/images/session/icon-attachment.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-back.svg b/images/session/icon-back.svg
new file mode 100644
index 000000000..7a9bdeeab
--- /dev/null
+++ b/images/session/icon-back.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-exit.svg b/images/session/icon-exit.svg
new file mode 100644
index 000000000..183e31b3f
--- /dev/null
+++ b/images/session/icon-exit.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-favorite.svg b/images/session/icon-favorite.svg
new file mode 100644
index 000000000..13b82fbb5
--- /dev/null
+++ b/images/session/icon-favorite.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-group.svg b/images/session/icon-group.svg
new file mode 100644
index 000000000..98452d2cf
--- /dev/null
+++ b/images/session/icon-group.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-menu.svg b/images/session/icon-menu.svg
new file mode 100644
index 000000000..96c42f086
--- /dev/null
+++ b/images/session/icon-menu.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-message.svg b/images/session/icon-message.svg
new file mode 100644
index 000000000..1ced1a524
--- /dev/null
+++ b/images/session/icon-message.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-microphone.svg b/images/session/icon-microphone.svg
new file mode 100644
index 000000000..1018297e3
--- /dev/null
+++ b/images/session/icon-microphone.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-network.svg b/images/session/icon-network.svg
new file mode 100644
index 000000000..62d545075
--- /dev/null
+++ b/images/session/icon-network.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-options.svg b/images/session/icon-options.svg
new file mode 100644
index 000000000..d007b5530
--- /dev/null
+++ b/images/session/icon-options.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-search.svg b/images/session/icon-search.svg
new file mode 100644
index 000000000..408a25ce3
--- /dev/null
+++ b/images/session/icon-search.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/images/session/icon-theme.svg b/images/session/icon-theme.svg
new file mode 100644
index 000000000..95f578573
--- /dev/null
+++ b/images/session/icon-theme.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/js/views/user_details_dialog_view.js b/js/views/user_details_dialog_view.js
index 7638639e4..1b9109ccd 100644
--- a/js/views/user_details_dialog_view.js
+++ b/js/views/user_details_dialog_view.js
@@ -1,3 +1,4 @@
+
/* global i18n, Whisper */
// eslint-disable-next-line func-names
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 9ad4bfc25..a55311bce 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -5,6 +5,18 @@ $session-color-black: #000;
$session-font-family: Waza;
+$session-transition-duration: 0.25s;
+
+
+$session-icon-size-sm: 16px;
+$session-icon-size-md: 20px;
+$session-icon-size-lg: 28px;
+
+
+.content{
+ background-color: $session-color-black !important;
+}
+
.session-button {
min-width: 165px;
width: auto;
@@ -41,4 +53,55 @@ $session-font-family: Waza;
@include transparent-background($session-color-white);
}
}
-
\ No newline at end of file
+
+
+.session-icon-button {
+ fill: $session-color-white;
+ opacity: 0.4;
+ cursor: pointer;
+ display: inline-block;
+ transition: opacity $session-transition-duration;
+
+ &.small {
+ line-height: $session-icon-size-sm;
+ height: $session-icon-size-sm;
+ width: $session-icon-size-sm;
+
+ margin: $session-icon-size-sm / 3;
+
+ img {
+ height: $session-icon-size-sm;
+ width: $session-icon-size-sm;
+ }
+ }
+
+ &.medium {
+ line-height: $session-icon-size-md;
+ height: $session-icon-size-md;
+ width: $session-icon-size-md;
+
+ margin: $session-icon-size-md / 3;
+
+ img {
+ height: $session-icon-size-md;
+ width: $session-icon-size-md;
+ }
+ }
+
+ &.large {
+ line-height: $session-icon-size-lg;
+ height: $session-icon-size-lg;
+ width: $session-icon-size-lg;
+
+ margin: $session-icon-size-lg / 3;
+
+ img {
+ height: $session-icon-size-lg;
+ width: $session-icon-size-lg;
+ }
+ }
+
+ &:hover{
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/ts/components/session/SessionIconButton.tsx b/ts/components/session/SessionIconButton.tsx
new file mode 100644
index 000000000..876b020dc
--- /dev/null
+++ b/ts/components/session/SessionIconButton.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import classNames from 'classnames';
+
+
+export enum SessionIconButtonTypes {
+ 'exit' = 'exit',
+ 'search' = 'search',
+ 'back' = 'back',
+ 'attachment' = 'attachment',
+ 'emoji' = 'emoji',
+ 'favorite' = 'favorite',
+ 'group' = 'group',
+ 'menu' = 'menu',
+ 'message' = 'message',
+ 'microphone' = 'microphone',
+ 'network' = 'network',
+ 'options' = 'options',
+ 'theme' = 'theme',
+}
+
+export enum SessionIconButtonSizes {
+ 'small' = 'small',
+ 'medium' = 'medium',
+ 'large' = 'large',
+}
+
+
+interface Props {
+ iconType: SessionIconButtonTypes;
+ iconSize: SessionIconButtonSizes;
+}
+
+
+export class SessionIconButton extends React.PureComponent {
+ constructor(props: any){
+ super(props);
+ this.clickHandler = this.clickHandler.bind(this);
+ }
+
+ public render() {
+ const {
+ iconType,
+ iconSize,
+ } = this.props;
+
+ let iconPath = `./images/session/icon-${iconType}.svg`;
+
+ return (
+
+
+