From 0964fc1f4df267ad6bbd7e82506d708fffe1ef67 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 26 Jan 2022 19:37:32 -0600
Subject: [PATCH] Add "demo" mode for taking screenshots

---
 app/images/soapbox-logo.svg                    | 1 +
 app/soapbox/containers/soapbox.js              | 7 +++++--
 app/soapbox/features/ui/components/tabs_bar.js | 7 ++++++-
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 app/images/soapbox-logo.svg

diff --git a/app/images/soapbox-logo.svg b/app/images/soapbox-logo.svg
new file mode 100644
index 000000000..270b7b810
--- /dev/null
+++ b/app/images/soapbox-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95" width="100" height="100"><path d="M94.909 19.374C94.909 8.674 86.235 0 75.534 0c-10.647 0-19.28 8.591-19.365 19.217l-15.631 2.09c-1.961-6.007-7.598-10.35-14.258-10.35-8.284 0-15.002 6.716-15.002 15.002 0 6.642 4.321 12.267 10.303 14.24l-2.205 16.056c-10.66.049-19.285 8.7-19.285 19.37C.091 86.325 8.765 95 19.466 95c10.677 0 19.332-8.638 19.37-19.304l18.093-2.501c1.979 5.972 7.598 10.285 14.234 10.285 8.284 0 15.002-6.716 15.002-15.002 0-6.891-4.652-12.682-10.983-14.441l1.365-15.339c10.229-.53 18.363-8.966 18.363-19.324zM56.194 67.8l-18.116 2.505a19.39 19.39 0 0 0-13.312-13.3l2.205-16.077a14.98 14.98 0 0 0 14.27-14.222l15.655-2.094c1.894 6.757 7.351 12.009 14.225 13.612l-1.365 15.322c-7.4.688-13.224 6.753-13.562 14.254z" fill="#0482d8"/></svg>
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 651ddb703..40b4e10b6 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -54,6 +54,9 @@ const mapStateToProps = (state) => {
   const soapboxConfig = getSoapboxConfig(state);
   const locale = settings.get('locale');
 
+  // In demo mode, force the default brand color
+  const brandColor = settings.get('demo') ? '#0482d8' : soapboxConfig.get('brandColor');
+
   return {
     showIntroduction,
     me,
@@ -63,11 +66,11 @@ const mapStateToProps = (state) => {
     dyslexicFont: settings.get('dyslexicFont'),
     demetricator: settings.get('demetricator'),
     locale: validLocale(locale) ? locale : 'en',
-    themeCss: generateThemeCss(soapboxConfig.get('brandColor')),
+    themeCss: generateThemeCss(brandColor),
     brandColor: soapboxConfig.get('brandColor'),
     themeMode: settings.get('themeMode'),
     halloween: settings.get('halloween'),
-    customCss: soapboxConfig.get('customCss'),
+    customCss: settings.get('demo') ? null : soapboxConfig.get('customCss'),
   };
 };
 
diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index b6ca8f420..8e833334a 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/app/soapbox/features/ui/components/tabs_bar.js
@@ -6,6 +6,7 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link, NavLink, withRouter } from 'react-router-dom';
 
+import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import Icon from 'soapbox/components/icon';
 import IconWithCounter from 'soapbox/components/icon_with_counter';
@@ -168,10 +169,14 @@ const mapStateToProps = state => {
   const reportsCount = state.getIn(['admin', 'openReports']).count();
   const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
   const instance = state.get('instance');
+  const settings = getSettings(state);
+
+  // In demo mode, use the Soapbox logo
+  const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : getSoapboxConfig(state).get('logo');
 
   return {
     account: state.getIn(['accounts', me]),
-    logo: getSoapboxConfig(state).get('logo'),
+    logo,
     features: getFeatures(instance),
     notificationCount: state.getIn(['notifications', 'unread']),
     chatsCount: state.getIn(['chats', 'items']).reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),