More descriptive Reset Settings warning (#3147)

More descriptive Reset warning + Red button

locales/en/messages.json

@@ -6439,7 +6439,7 @@
         "message": "Confirm"
     },
     "dialogConfirmResetNote": {
-        "message": "WARNING: Are you sure you want to reset ALL settings to default?"
+        "message": "WARNING: Are you sure you want to reset <strong>ALL settings</strong> to default? This is <strong>not</strong> a \"factory reset\". It may cause unexpected issues, and it may be necessary to re-flash your firmware to be able to connect again."
     },
     "dialogConfirmResetConfirm": {
         "message": "Reset"

src/css/main.less

@@ -1567,6 +1567,35 @@ dialog {
 	color: var(--pushedButton-fontColor);
 	border-radius: 3px;
 }
+
+.danger-button {
+	-webkit-user-drag: none;
+	margin-top: 8px;
+	margin-bottom: 8px;
+	margin-right: 10px;
+	background-color: #e60000;
+	border-radius: 3px;
+	border: 1px solid #fe0000;
+	color: #fff;
+	font-weight: bold;
+	font-size: 12px;
+	text-shadow: 0 1px rgba(255, 255, 255, 0.25);
+	display: inline-block;
+	cursor: pointer;
+	transition: all ease 0.2s;
+	padding: 0 9px;
+	line-height: 28px;
+	user-select: none;
+	&:hover {
+		background-color: #f21212;
+	}
+}
+.danger-button.pushed {
+	background-color: #ff1b1b;
+	color: #fff;
+	border-radius: 3px;
+}
+
 .small {
 	width: auto;
 	position: relative;

src/tabs/setup.html

@@ -178,7 +178,7 @@
             <div i18n="dialogConfirmResetNote" style="margin-top: 10px"></div>
         </div>
         <div class="buttons">
-            <a href="#" class="dialogConfirmReset-confirmbtn regular-button" i18n="dialogConfirmResetConfirm"></a>
+            <a href="#" class="dialogConfirmReset-confirmbtn danger-button" i18n="dialogConfirmResetConfirm"></a>
             <a href="#" class="dialogConfirmReset-cancelbtn regular-button" i18n="dialogConfirmResetClose"></a>
         </div>
     </dialog>