pixelfed/resources/assets/components/DirectMessage.vue

<template>
	<div class="dm-page-component">
		<div v-if="isLoaded" class="container-fluid mt-lg-3 pb-lg-5">
			<div class="row dm-page-component-row">
				<div class="col-md-3 d-md-block">
					<sidebar :user="profile" />
				</div>

				<div class="col-md-6 p-0">
					<div v-if="loaded && page == 'read'" class="messages-page">
						<div class="card shadow-none">
							<div class="h4 card-header font-weight-bold text-dark d-flex justify-content-between align-items-center" style="letter-spacing: -0.3px;">
								<button class="btn btn-light rounded-pill text-dark" @click="goBack()">
									<i class="far fa-chevron-left fa-lg"></i>
								</button>

								<div>Direct Message</div>

								<button class="btn btn-light rounded-pill text-dark" @click="showOptions()">
									<i class="far fa-cog fa-lg"></i>
								</button>
							</div>
							<ul class="list-group list-group-flush" style="position:relative;">
								<li class="list-group-item border-bottom sticky-top">
									<p class="text-center small text-muted mb-0">
										Conversation with <span class="font-weight-bold">{{thread.username}}</span>
									</p>
								</li>
							</ul>

							<transition name="fade">
							<ul v-if="showDMPrivacyWarning && showPrivacyWarning" class="list-group list-group-flush dm-privacy-warning" style="position:absolute;top:105px;width:100%;">
								<li class="list-group-item border-bottom sticky-top bg-warning">
									<div class="d-flex align-items-center justify-content-between">
										<div class="d-none d-lg-block">
											<i class="fas fa-exclamation-triangle text-danger fa-lg mr-3"></i>
										</div>
										<div>
											<p class="small warning-text mb-0 font-weight-bold"><span class="d-inline d-lg-none">DMs</span><span class="d-none d-lg-inline">Direct messages on Pixelfed</span> are not end-to-end encrypted.
											</p>
											<p class="small warning-text mb-0 font-weight-bold">
												Use caution when sharing sensitive data.
											</p>
										</div>
										<button class="btn btn-link text-decoration-none" @click="togglePrivacyWarning">
											<i class="far fa-times-circle fa-lg"></i>
											<span class="d-none d-lg-block">Close</span>
										</button>
									</div>
								</li>
							</ul>
							</transition>

							<ul class="list-group list-group-flush dm-wrapper" style="overflow-y: scroll;position:relative;flex-direction: column-reverse;">
								<li v-for="(convo, index) in thread.messages" class="list-group-item border-0 chat-msg mb-n2">
									<message
										:convo="convo"
										:thread="thread"
										:hideAvatars="hideAvatars"
										:hideTimestamps="hideTimestamps"
										:largerText="largerText"
										v-on:confirm-delete="deleteMessage(index)" />
								</li>

								<li v-if="showLoadMore && thread.messages && thread.messages.length > 5" class="list-group-item border-0">
									<p class="text-center small text-muted">
										<button v-if="!loadingMessages" class="btn btn-primary font-weight-bold rounded-pill btn-sm px-3" @click="loadOlderMessages()">Load Older Messages</button>
										<button v-else class="btn btn-primary font-weight-bold rounded-pill btn-sm px-3" disabled>Loading...</button>
									</p>
								</li>
							</ul>

							<div class="card-footer bg-white p-0">
								<!-- <form class="border-0 rounded-0 align-middle" method="post" action="#">
									<textarea class="form-control border-0 rounded-0 no-focus" name="comment" placeholder="Reply ..." autocomplete="off" autocorrect="off" style="height:86px;line-height: 18px;max-height:80px;resize: none; padding-right:115.22px;" v-model="replyText" :disabled="blocked"></textarea>
									<input type="button" value="Send" :class="[replyText.length ? 'd-inline-block btn btn-sm btn-primary rounded-pill font-weight-bold reply-btn text-decoration-none text-uppercase' : 'd-inline-block btn btn-sm btn-primary rounded-pill font-weight-bold reply-btn text-decoration-none text-uppercase disabled']" :disabled="replyText.length == 0" @click.prevent="sendMessage"/>
								</form> -->
								<div class="dm-reply-form">
									<div class="dm-reply-form-input-group">
										<input
											class="form-control form-control-lg"
											placeholder="Type a message..."
											:disabled="uploading"
											v-model="replyText">

										<button
											class="upload-media-btn btn btn-link"
											:disabled="uploading"
											@click="uploadMedia">
											<i class="far fa-image fa-2x"></i>
										</button>
									</div>

									<button
										class="dm-reply-form-submit-btn btn btn-primary"
										:disabled="!replyText || !replyText.length || showReplyTooLong"
										@click="sendMessage">
										<i class="far fa-paper-plane fa-lg"></i>
									</button>
								</div>
							</div>

							<div v-if="uploading" class="card-footer dm-status-bar">
								<p>Uploading ({{uploadProgress}}%) ...</p>
							</div>

							<div v-if="showReplyLong" class="card-footer dm-status-bar">
								<p class="text-warning">{{ replyText.length }}/500</p>
							</div>

							<div v-if="showReplyTooLong" class="card-footer dm-status-bar">
								<p class="text-danger">{{ replyText.length }}/500 - Your message exceeds the limit of 500 characters</p>
							</div>

							<div class="d-none card-footer p-0">
								<p class="d-flex justify-content-between align-items-center mb-0 px-3 py-1 small">
									<!-- <span class="font-weight-bold" style="color: #D69E2E">
									<i class="fas fa-circle mr-1"></i>
									Typing ...
									</span> -->
									<span>
										<!-- <span class="btn btn-primary btn-sm font-weight-bold py-0 px-3 rounded-pill" @click="uploadMedia">
										<i class="fas fa-share mr-1"></i>
										Share
										</span> -->
										<span class="btn btn-primary btn-sm font-weight-bold py-0 px-3 rounded-pill" @click="uploadMedia">
											<i class="fas fa-upload mr-1"></i>
											Add Photo/Video
										</span>
									</span>
									<input type="file" id="uploadMedia" class="d-none" name="uploadMedia" accept="image/jpeg,image/png,image/gif,video/mp4" >
									<span class="text-muted font-weight-bold">{{replyText.length}}/500</span>
								</p>
							</div>
						</div>
					</div>

					<div v-if="loaded && page == 'options'" class="messages-page">
						<div class="card shadow-none">
							<div class="h4 card-header font-weight-bold text-dark d-flex justify-content-between align-items-center" style="letter-spacing: -0.3px;">
								<button class="btn btn-light rounded-pill text-dark" @click.prevent="goBack('read')">
									<i class="far fa-chevron-left fa-lg"></i>
								</button>

								<div>Direct Message Settings</div>

								<div class="btn btn-light rounded-pill text-dark">
									<i class="far fa-smile fa-lg"></i>
								</div>
							</div>

							<ul class="list-group list-group-flush" style="height: 698px;">
								<div class="list-group-item media border-bottom">
									<div class="d-inline-block custom-control custom-switch ml-3">
										<input type="checkbox" class="custom-control-input" id="customSwitch0" v-model="hideAvatars">
										<label class="custom-control-label" for="customSwitch0"></label>
									</div>
									<div class="d-inline-block ml-3 font-weight-bold">
										Hide Avatars
									</div>
								</div>
								<div class="list-group-item media border-bottom">
									<div class="d-inline-block custom-control custom-switch ml-3">
										<input type="checkbox" class="custom-control-input" id="customSwitch1" v-model="hideTimestamps">
										<label class="custom-control-label" for="customSwitch1"></label>
									</div>
									<div class="d-inline-block ml-3 font-weight-bold">
										Hide Timestamps
									</div>
								</div>
								<div class="list-group-item media border-bottom">
									<div class="d-inline-block custom-control custom-switch ml-3">
										<input type="checkbox" class="custom-control-input" id="customSwitch2" v-model="largerText">
										<label class="custom-control-label" for="customSwitch2"></label>
									</div>
									<div class="d-inline-block ml-3 font-weight-bold">
										Larger Text
									</div>
								</div>
								<!-- <div class="list-group-item media border-bottom">
								<div class="d-inline-block custom-control custom-switch ml-3">
								<input type="checkbox" class="custom-control-input" id="customSwitch3" v-model="autoRefresh">
								<label class="custom-control-label" for="customSwitch3"></label>
								</div>
								<div class="d-inline-block ml-3 font-weight-bold">
								Auto Refresh
								</div>
								</div> -->
								<div class="list-group-item media border-bottom d-flex align-items-center">
									<div class="d-inline-block custom-control custom-switch ml-3">
										<input type="checkbox" class="custom-control-input" id="customSwitch4" v-model="mutedNotifications">
										<label class="custom-control-label" for="customSwitch4"></label>
									</div>
									<div class="d-inline-block ml-3 font-weight-bold">
										Mute Notifications
										<p class="small mb-0">You will not receive any direct message notifications from <strong>{{thread.username}}</strong>.</p>
									</div>
								</div>
								<div class="list-group-item media border-bottom d-flex align-items-center">
									<div class="d-inline-block custom-control custom-switch ml-3">
										<input type="checkbox" class="custom-control-input" id="customSwitch5" v-model="showDMPrivacyWarning">
										<label class="custom-control-label" for="customSwitch5"></label>
									</div>
									<div class="d-inline-block ml-3 font-weight-bold">
										Show Privacy Warning
										<p class="small mb-0">Show privacy warning indicating that direct messages are not end-to-end encrypted and that caution is advised when sending sensitive/confidential information.</p>
									</div>
								</div>
							</ul>
						</div>
					</div>
				</div>

				<div v-if="conversationProfile" class="col-md-3 d-none d-md-block">
					<div class="card shadow-sm mb-3" style="border-radius: 15px;">
						<div class="small card-header font-weight-bold text-uppercase text-lighter" style="letter-spacing: -0.3px;">
							Conversation
						</div>
						<div class="card-body p-2">
							<div class="media user-card user-select-none">
								<div>
									<img :src="conversationProfile.avatar" class="avatar shadow cursor-pointer" draggable="false" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
								</div>
								<div class="media-body">
									<p
										class="display-name"
										v-html="conversationProfile.display_name"
										@click="gotoProfile(conversationProfile)"
										>
										</p>

									<p
										class="username primary"
										@click="gotoProfile(conversationProfile)">
										&commat;{{ conversationProfile.acct }}
									</p>
									<p class="stats">
										<span class="stats-following">
											<span class="following-count">{{ formatCount(conversationProfile.following_count) }}</span> Following
										</span>
										<span class="stats-followers">
											<span class="followers-count">{{ formatCount(conversationProfile.followers_count) }}</span> Followers
										</span>
									</p>
								</div>
							</div>
						</div>
					</div>

					<!-- <div class="card shadow-sm mb-3" style="border-radius: 15px;">
						<div class="small card-header font-weight-bold text-uppercase text-lighter" style="border-top-left-radius: 15px;letter-spacing: -0.3px;">
							History
						</div>
					</div> -->
					<!-- <div class="list-group shadow-sm">
						<div class="list-group-item border-0 border-bottom" style="border-width: 1px;">
							<p class="mb-0"><i class="far fa-user-plus mr-2"></i> You both follow each other</p>
						</div>
						<div class="list-group-item border-0">
							<p class="mb-0"><i class="far fa-users mr-2"></i> You both follow <a class="font-weight-bold">&commat;pixelfed</a>,<a class="font-weight-bold">&commat;pixeldev</a> and <a class="font-weight-bold">&commat;pixel</a></p>
						</div>
					</div> -->
				</div>
			</div>

		</div>
		<div v-else class="d-flex justify-content-center align-items-center" style="height:calc(100vh - 58px);">
			<b-spinner />
		</div>
	</div>
</template>

<script type="text/javascript">
	import Drawer from './partials/drawer.vue';
	import Sidebar from './partials/sidebar.vue';
	import Placeholder from './partials/placeholders/DirectMessagePlaceholder.vue';
	import Intersect from 'vue-intersect'
	import ProfileCard from './partials/profile/ProfileHoverCard.vue';
	import Message from './partials/direct/Message.vue';

	export default {
		props: ['accountId'],

		components: {
			"drawer": Drawer,
            "sidebar": Sidebar,
            "intersect": Intersect,
            "dm-placeholder": Placeholder,
            "profile-card": ProfileCard,
            "message": Message
        },

		data() {
			return {
				isLoaded: false,
				profile: undefined,
				conversationProfile: undefined,
				isIntersecting: false,

				config: window.App.config,
				hideAvatars: true,
				hideTimestamps: false,
				largerText: false,
				autoRefresh: false,
				mutedNotifications: false,
				blocked: false,
				loaded: false,
				page: 'read',
				pages: ['browse', 'add', 'read'],
				threads: [],
				thread: false,
				threadIndex: false,

				replyText: '',
				composeUsername: '',
				uploading: false,
				uploadProgress: null,

				min_id: null,
				max_id: null,
				loadingMessages: false,
				showLoadMore: true,

				showReplyLong: false,
				showReplyTooLong: false,

				showPrivacyWarning: true,
			}
		},

		mounted() {
			this.profile = window._sharedData.user;
			this.isLoaded = true;
			let self = this;
			axios.get('/api/v1/accounts/' + this.accountId)
			.then(res => {
				this.conversationProfile = res.data;
			});

			axios.get('/api/direct/thread', {
				params: {
					pid: self.accountId
				}
			})
			.then(res => {
				self.loaded = true;
				let d = res.data;
				this.thread = d;
				this.threads = [d];
				this.threadIndex = 0;
				let mids = d.messages.map(m => m.id);
				this.max_id = Math.max(...mids);
				this.min_id = Math.min(...mids);
				this.mutedNotifications = d.muted;
				this.markAsRead();
				//this.messagePoll();
				// setTimeout(function() {
				// 	let objDiv = document.querySelector('.dm-wrapper');
				// 	objDiv.scrollTop = objDiv.scrollHeight;
				// }, 300);
			});

			let options = localStorage.getItem('px_dm_options');
			if(options) {
				options = JSON.parse(options);
				this.hideAvatars = options.hideAvatars;
				this.hideTimestamps = options.hideTimestamps;
				this.largerText = options.largerText;
			}
		},

		computed: {
			showDMPrivacyWarning: {
				get() {
					return this.$store.state.showDMPrivacyWarning;
				},

				set(val) {
					window.localStorage.removeItem('pf_m2s.dmwarncounter');
					this.$store.commit('setShowDMPrivacyWarning', val);
				}
			},
		},

		watch: {
			mutedNotifications: function(v) {
				if(v) {
					axios.post('/api/direct/mute', {
						id: this.accountId
					}).then(res => {

					});
				} else {
					axios.post('/api/direct/unmute', {
						id: this.accountId
					}).then(res => {

					});
				}
				this.mutedNotifications = v;
			},

			hideAvatars: function(v) {
				this.hideAvatars = v;
				this.updateOptions();
			},

			hideTimestamps: function(v) {
				this.hideTimestamps = v;
				this.updateOptions();
			},

			largerText: function(v) {
				this.largerText = v;
				this.updateOptions();
			},

			replyText: function(v) {
				let limit = 500;

				if(v.length < limit) {
					this.showReplyLong = false;
					this.showReplyTooLong = false;
				}

				if(v.length > limit) {
					this.showReplyLong = false;
					this.showReplyTooLong = true;
					return;
				}

				if(v.length > (limit - 50)) {
					this.showReplyTooLong = false;
					this.showReplyLong = true;
					return;
				}
			}
		},

		methods: {
			sendMessage() {
				let self = this;
				let rt = this.replyText;
				axios.post('/api/direct/create', {
					'to_id': this.threads[this.threadIndex].id,
					'message': rt,
					'type': self.isEmoji(rt) && rt.length < 10 ? 'emoji' : 'text'
				}).then(res => {
					let msg = res.data;
					self.threads[self.threadIndex].messages.unshift(msg);
					let mids = self.threads[self.threadIndex].messages.map(m => m.id);
					this.max_id = Math.max(...mids)
					this.min_id = Math.min(...mids)
					// setTimeout(function() {
					// 	var objDiv = document.querySelector('.dm-wrapper');
					// 	objDiv.scrollTop = objDiv.scrollHeight;
					// }, 300);
				}).catch(err => {
					if(err.response.status == 403) {
						self.blocked = true;
						swal('Profile Unavailable', 'You cannot message this profile at this time.', 'error');
					}
				})
				this.replyText = '';
			},

			truncate(t) {
				return _.truncate(t);
			},

			deleteMessage(index) {
				let c = window.confirm('Are you sure you want to delete this message?');
				if(c) {
					axios.delete('/api/direct/message', {
						params: {
							id: this.thread.messages[index].reportId
						}
					}).then(res => {
						this.thread.messages.splice(index ,1);
					});
				}
			},

			reportMessage() {
				this.closeCtxMenu();
				let url = '/i/report?type=post&id=' + this.ctxContext.reportId;
				window.location.href = url;
				return;
			},

			uploadMedia(event) {
				let self = this;
				$(document).on('change', '#uploadMedia', function(e) {
					self.handleUpload();
				});
				let el = $(event.target);
				el.attr('disabled', '');
				$('#uploadMedia').click();
				el.blur();
				el.removeAttr('disabled');
			},

			handleUpload() {
				let self = this;
				if(self.uploading) {
					return;
				}
				self.uploading = true;
				let io = document.querySelector('#uploadMedia');
				if(!io.files.length) {
					this.uploading = false;
				}

				Array.prototype.forEach.call(io.files, function(io, i) {
					let type = io.type;
					let acceptedMimes = self.config.uploader.media_types.split(',');
					let validated = $.inArray(type, acceptedMimes);
					if(validated == -1) {
						swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+self.config.uploader.media_types+' only.', 'error');
						self.uploading = false;
						return;
					}

					let form = new FormData();
					form.append('file', io);
					form.append('to_id', self.threads[self.threadIndex].id);

					let xhrConfig = {
						onUploadProgress: function(e) {
							let progress = Math.round( (e.loaded * 100) / e.total );
							self.uploadProgress = progress;
						}
					};

					axios.post('/api/direct/media', form, xhrConfig)
					.then(function(e) {
						self.uploadProgress = 100;
						self.uploading = false;
						let msg = {
							id: e.data.id,
							type: e.data.type,
							reportId: e.data.reportId,
							isAuthor: true,
							text: null,
							media: e.data.url,
							timeAgo: '1s',
							seen: null
						};
						self.threads[self.threadIndex].messages.unshift(msg);
						// setTimeout(function() {
						// 	var objDiv = document.querySelector('.dm-wrapper');
						// 	objDiv.scrollTop = objDiv.scrollHeight;
						// }, 300);

					}).catch(function(e) {
						if(e.hasOwnProperty('response') && e.response.hasOwnProperty('status') ) {
							switch(e.response.status) {
								case 451:
								self.uploading = false;
								io.value = null;
								swal('Banned Content', 'This content has been banned and cannot be uploaded.', 'error');
								break;

								default:
								self.uploading = false;
								io.value = null;
								swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
								break;
							}
						}
					});
					io.value = null;
					self.uploadProgress = 0;
				});
			},

			viewOriginal() {
				let url = this.ctxContext.media;
				window.location.href = url;
				return;
			},

			isEmoji(text) {
				const onlyEmojis = text.replace(new RegExp('[\u0000-\u1eeff]', 'g'), '')
				const visibleChars = text.replace(new RegExp('[\n\r\s]+|( )+', 'g'), '')
				return onlyEmojis.length === visibleChars.length
			},

			copyText() {
				window.App.util.clipboard(this.ctxContext.text);
				this.closeCtxMenu();
				return;
			},

			clickLink() {
				let url = this.ctxContext.text;
				if(this.ctxContext.meta.local != true) {
					url = '/i/redirect?url=' + encodeURI(this.ctxContext.text);
				}
				window.location.href = url;
			},

			markAsRead() {
				return;
				axios.post('/api/direct/read', {
					pid: this.accountId,
					sid: this.max_id
				}).then(res => {
				}).catch(err => {
				});
			},

			loadOlderMessages() {
				let self = this;
				this.loadingMessages = true;

				axios.get('/api/direct/thread', {
					params: {
						pid: this.accountId,
						max_id: this.min_id,
					}
				}).then(res => {
					let d = res.data;
					if(!d.messages.length) {
						this.showLoadMore = false;
						this.loadingMessages = false;
						return;
					}
					let cids = this.thread.messages.map(m => m.id);
					let m = d.messages.filter(m => {
						return cids.indexOf(m.id) == -1;
					}).reverse();
					let mids = m.map(m => m.id);
					let min_id = Math.min(...mids);
					if(min_id == this.min_id) {
						this.showLoadMore = false;
						this.loadingMessages = false;
						return;
					}
					this.min_id = min_id;
					this.thread.messages.push(...m);
					setTimeout(function() {
						self.loadingMessages = false;
					}, 500);
				}).catch(err => {
					this.loadingMessages = false;
				})
			},

			messagePoll() {
				let self = this;
				setInterval(function() {
					axios.get('/api/direct/thread', {
						params: {
							pid: self.accountId,
							min_id: self.thread.messages[self.thread.messages.length - 1].id
						}
					}).then(res => {
					});
				}, 5000);
			},

			showOptions() {
				this.page = 'options';
			},

			updateOptions() {
				let options = {
					v: 1,
					hideAvatars: this.hideAvatars,
					hideTimestamps: this.hideTimestamps,
					largerText: this.largerText
				}
				window.localStorage.setItem('px_dm_options', JSON.stringify(options));
			},

			formatCount(val) {
				return window.App.util.format.count(val);
			},

			goBack(page = false) {
				if(page) {
					this.page = page;
				} else {
					this.$router.push('/i/web/direct');
				}
			},

			gotoProfile(profile) {
				this.$router.push(`/i/web/profile/${profile.id}`);
			},

			togglePrivacyWarning() {
				console.log('clicked toggle privacy warning');
				let ls = window.localStorage;
				let key = 'pf_m2s.dmwarncounter';
				this.showPrivacyWarning = false;
				if(ls.getItem(key)) {
					let count = ls.getItem(key);
					count++;
					ls.setItem(key, count);
					if(count > 5) {
						this.showDMPrivacyWarning = false;
					}
				} else {
					ls.setItem(key, 1);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dm-page-component {
		font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

		.user-card {
			align-items: center;

			.avatar {
				width: 60px;
				height: 60px;
				border-radius: 15px;
				margin-right: 0.8rem;
				border: 1px solid var(--border-color);
			}

			.avatar-update-btn {
				position: absolute;
				right: 12px;
				bottom: 0;
				width: 20px;
				height: 20px;
				background: rgba(255,255,255,0.9);
				border: 1px solid #dee2e6 !important;
				padding: 0;
				border-radius: 50rem;

				&-icon {
					font-family: 'Font Awesome 5 Free';
					font-weight: 400;
					-webkit-font-smoothing: antialiased;
					display: inline-block;
					font-style: normal;
					font-variant: normal;
					text-rendering: auto;
					line-height: 1;

					&:before {
						content: "\F013";
					}
				}
			}

			.username {
				font-weight: 600;
				font-size: 13px;
				margin-bottom: 0;
				cursor: pointer;
			}

			.display-name {
				color: var(--body-color);
				line-height: 0.8;
				font-size: 14px;
				font-weight: 800 !important;
				user-select: all;
				font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
				margin-bottom: 0;
				cursor: pointer;
			}

			.stats {
				margin-top: 0;
				margin-bottom: 0;
				font-size: 12px;
				user-select: none;

				.stats-following {
					margin-right: 0.8rem;
				}

				.following-count,
				.followers-count {
					font-weight: 800;
				}
			}
		}

		.dm-reply-form {
			display: flex;
			justify-content: space-between;
			background-color: var(--card-bg);
			padding: 1rem;

			.btn:focus,
			.btn.focus,
			input:focus,
			input.focus {
				outline: 0;
				box-shadow: none;
			}

			:disabled {
				opacity: 20% !important;
			}

			&-input-group {
				width: 100%;
				margin-right: 10px;
				position: relative;


				input {
					position: absolute;
					padding-right: 60px;
					background-color: var(--comment-bg);
					border-radius: 25px;
					border-color: var(--comment-bg) !important;
					font-size: 15px;
					color: var(--dark);

				}

				.upload-media-btn {
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translateY(-50%);
					color: var(--text-lighter);
				}
			}

			&-submit-btn {
				width: 48px;
				height: 48px;
				border-radius: 24px;
			}
		}

		.dm-status-bar {
			font-size: 12px;
			font-weight: 600;
			color: var(--text-lighter);

			p {
				margin-bottom: 0;
			}
		}

		.dm-privacy-warning {
			p,
			.btn {
				color: #000;
			}

			.warning-text {
				text-align: left;

				@media (min-width: 992px) {
					text-align: center;
				}
			}
		}

		&-row {
			.dm-wrapper {
				padding-top: 100px;
				height: calc(100vh - 240px);

				@media (min-width: 500px) {
					min-height: 40vh;
				}

				@media (min-width: 700px) {
					height: 60vh;
				}
			}
		}
	}

</style>