From 377506a92f4eefcb26e021eae94499b2574d11d9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 18 Sep 2020 00:28:54 -0500
Subject: [PATCH] Chats: allow toggle notification sounds from mobile

---
 app/soapbox/features/chats/index.js |  2 ++
 app/styles/components/columns.scss  | 12 ++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/app/soapbox/features/chats/index.js b/app/soapbox/features/chats/index.js
index 1420325f1..888df5a43 100644
--- a/app/soapbox/features/chats/index.js
+++ b/app/soapbox/features/chats/index.js
@@ -4,6 +4,7 @@ import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ChatList from './components/chat_list';
+import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
 
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Chats' },
@@ -33,6 +34,7 @@ class ChatIndex extends React.PureComponent {
           icon='comment'
           title={intl.formatMessage(messages.title)}
         />
+        <div className='column__switch'><AudioToggle /></div>
 
         <ChatList
           onClickChat={this.handleClickChat}
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 10e46e441..0351bd008 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -703,3 +703,15 @@
 .column-link--transparent .icon-with-badge__badge {
   border-color: var(--background-color);
 }
+
+.column__switch .audio-toggle {
+  position: absolute;
+  z-index: 4;
+  top: 12px;
+  right: 14px;
+
+  .react-toggle-track-check,
+  .react-toggle-track-x {
+    height: 16px;
+  }
+}