connectivity doc link improvements

frontend/css/global.scss

@@ -162,6 +162,12 @@ fieldset {
   p {
     padding-bottom: 1rem;
   }
+  a {
+    font-size: 1.1rem;
+  }
+  .fa-external-link {
+    margin-right: 0.5rem;
+  }
 }
 
 .chip-temp-display {

frontend/devices/connectivity/connectivity.tsx

@@ -42,13 +42,6 @@ export class Connectivity
             <WiFiStrengthDisplay wifiStrength={wifi_level} />
             <VoltageDisplay throttled={throttled} />
           </div>
-          <div>
-            <i className="fa fa-question-circle" />
-            {" "}
-            <a href="https://software.farm.bot/docs/connecting-farmbot-to-the-internet">
-              Click here to learn more about error codes.
-              </a>
-          </div>
         </Col>
         <Col md={12} lg={8}>
           <ConnectivityRow from={t("from")} to={t("to")} header={true} />

frontend/devices/connectivity/diagnosis.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DiagnosticMessages } from "../../constants";
-import { Col, Row } from "../../ui/index";
+import { Col, Row, docLink } from "../../ui/index";
 import { bitArray } from "../../util";
 import { TRUTH_TABLE } from "./truth_table";
 import { t } from "../../i18next_wrapper";
@@ -41,6 +41,10 @@ export function Diagnosis(props: DiagnosisProps) {
         <p>
           {diagnose(props)}
         </p>
+        <a href={docLink("connecting-farmbot-to-the-internet")} target="_blank">
+          <i className="fa fa-external-link" />
+          {t("Click here to learn more about error codes.")}
+        </a>
       </Col>
     </Row>
   </div>;

frontend/ui/doc_link.ts

@@ -7,6 +7,7 @@ export const DOC_SLUGS = {
   "camera-calibration": "Camera Calibration",
   "the-farmbot-web-app": "Web App",
   "farmware": "Farmware",
+  "connecting-farmbot-to-the-internet": "Connecting FarmBot to the Internet"
 };
 
 export type DocSlug = keyof typeof DOC_SLUGS;