Style and translations

client/coral-admin/src/routes/Configure/components/SaveChangesDialog.css

@@ -1,9 +1,11 @@
 .buttonActions {
-  padding-top: 10px;
+  padding-top: 15px;
+  text-align: right;
 }
 
 .dialog {
-  padding: 20px;
+  padding: 25px;
+  min-width: 400px;
 }
 
 .close {
@@ -16,4 +18,23 @@
   font-weight: bold;
   color: #363636;
   cursor: pointer;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 800;
+  margin-bottom: 20px;
+}
+
+.cancel {
+  color: #363636;
+  margin-right: 15px;
+  display: inline-block;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.button {
+  margin-left: 5px;
 }

client/coral-admin/src/routes/Configure/components/SaveChangesDialog.js

@@ -16,22 +16,29 @@ const SaveChangesDialog = ({
     id="saveDialog"
     open={saveDialog}
     onCancel={hideSaveDialog}
-    title={t('configure.unsaved_changes')}
   >
     <span className={styles.close} onClick={hideSaveDialog}>
       ×
     </span>
-    {t('configure.save_dialog_copy')}
+    <div className={styles.title}>
+      {t('configure.save_changes_dialog.unsaved_changes')}
+    </div>
+    {t('configure.save_changes_dialog.copy')}
     <div
       className={cn(
         styles.buttonActions,
         'talk-admin-configure-save-dialog-button-actions'
       )}
     >
-      <Button onClick={saveChanges} cStyle="green">
-        {t('configure.save_settings')}
+      <a className={styles.cancel} onClick={hideSaveDialog}>
+        Cancel
+      </a>
+      <Button onClick={discardChanges} className={styles.button}>
+        {t('configure.save_changes_dialog.discard')}
+      </Button>
+      <Button onClick={saveChanges} cStyle="green" className={styles.button}>
+        {t('configure.save_changes_dialog.save_settings')}
       </Button>
-      <Button onClick={discardChanges}>{t('configure.discard_changes')}</Button>
     </div>
   </Dialog>
 );