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>
 );

locales/en.yml

@@ -154,9 +154,6 @@ en:
     sign_out: "Sign Out"
     stories: Stories
     stream_settings: "Stream Settings"
-    save_dialog_copy: "There are unsaved changes, Are you sure you want to continue?"
-    save_settings: "Save Settings"
-    discard_changes: "Discard changes"
     access_message: "You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!"
     suspect_word_title: "Suspect words list"
     suspect_word_text: "Comments which contain these words or phrases (not case-sensitive) will be highlighted in the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list."
@@ -164,6 +161,12 @@ en:
     title: "Configure Comment Stream"
     weeks: Weeks
     wordlist: "Banned Words"
+    save_changes_dialog:
+      unsaved_changes: "Unsaved changes"
+      copy: "You have made one or more changes without saving. Would you like to save or discard your changes?"
+      save_settings: "Save Settings"
+      discard: "Discard"
+      cancel: "Cancel"
   continue: "Continue"
   createdisplay:
     check_the_form: "Invalid Form. Please check the fields"

locales/es.yml

@@ -153,9 +153,6 @@ es:
     sign_out: "Desconectar"
     stories: Artículos
     stream_settings: "Configuración de Comentarios"
-    save_dialog_copy: "Hay cambios no guardados. Está seguro que desea continuar?"
-    save_settings: "Guardar configuración"
-    discard_changes: "Descartar Cambios"
     access_message: "Usted debe ser un administrador para acceder a esta página. Encuentre a otro admin y actualice los permisos de su cuenta!"
     suspect_word_title: "Lista de palabras sospechosas"
     suspect_word_text: "Comentarios que contengan estas palabras o frases, considerando mayusculas y minúsculas, serán automáticamente  destacadas en los comentarios publicados. Escribir una palabra y apretar Enter o Tabulador para agregarla. O pegar una lista de palabras separadas por coma."
@@ -163,6 +160,12 @@ es:
     title: "Configurar los comentarios"
     weeks: Semanas
     wordlist: "Palabras Suspendidas"
+    save_changes_dialog:
+      unsaved_changes: "Cambios no guardados"
+      copy: Has hecho uno o más cambios sin guardar. Deseas guardar o descartar tus cambios?"
+      save_settings: "Guardar configuración"
+      discard: "Descartar"
+      cancel: "Cancelar"
   continue: "Continuar"
   createdisplay:
     check_the_form: "Formulario Inválido. Por favor verifica los campos"