From 214f5d655a19724cea3ea80e0aa77734492b1ddc Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 12 Aug 2020 10:55:54 -0300
Subject: [PATCH] :sparkles: make unsaved changes dot on project name

---
 client/components/mobile/Header.jsx        |  6 ++++++
 client/modules/IDE/pages/MobileIDEView.jsx | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx
index cb6702ed..96e82177 100644
--- a/client/components/mobile/Header.jsx
+++ b/client/components/mobile/Header.jsx
@@ -35,6 +35,12 @@ const HeaderDiv = styled.div`
   }
 
   & svg path { fill: ${textColor} !important; }
+
+  .editor__unsaved-changes svg {
+    width: ${remSize(16)};
+    padding: 0px;
+    vertical-align: top
+  }
 `;
 
 const IconContainer = styled.div`
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index c33c6cda..fa08ef60 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -21,6 +21,7 @@ import { getHTMLFile } from '../reducers/files';
 // Local Imports
 import Editor from '../components/Editor';
 import { PlayIcon, MoreIcon } from '../../../common/icons';
+import UnsavedChangesDotIcon from '../../../images/unsaved-changes-dot.svg';
 
 import IconButton from '../../../components/mobile/IconButton';
 import Header from '../../../components/mobile/Header';
@@ -38,6 +39,16 @@ import Dropdown from '../../../components/Dropdown';
 const isUserOwner = ({ project, user }) =>
   project.owner && project.owner.id === user.id;
 
+const getTitle = (title, unsavedChanges = false) => (
+  <span>
+    {title}
+    <span className="editor__unsaved-changes">
+      {unsavedChanges &&
+      <UnsavedChangesDotIcon role="img" aria-label="Sketch has unsaved changes" focusable="false" />}
+    </span>
+  </span>
+);
+
 const Expander = styled.div`
   height: ${props => (props.expanded ? remSize(160) : remSize(27))};
 `;
@@ -65,7 +76,7 @@ const MobileIDEView = (props) => {
   const {
     preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
     selectedFile, updateFileContent, files, user, params,
-    closeEditorOptions, showEditorOptions,
+    closeEditorOptions, showEditorOptions, unsavedChanges,
     startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
     showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState
   } = props;
@@ -99,7 +110,7 @@ const MobileIDEView = (props) => {
   return (
     <Screen fullscreen>
       <Header
-        title={project.name}
+        title={getTitle(project.name, unsavedChanges)}
         subtitle={selectedFile.name}
       >
         <NavItem>
@@ -273,6 +284,8 @@ MobileIDEView.propTypes = {
     project_id: PropTypes.string,
     username: PropTypes.string
   }).isRequired,
+
+  unsavedChanges: PropTypes.bool.isRequired
 };
 
 function mapStateToProps(state) {