From 77cb1fb37c0da5bad39b3905f7a48cd3f176bac7 Mon Sep 17 00:00:00 2001
From: "R. Miles McCain" <github@sendmiles.email>
Date: Sat, 27 Aug 2022 14:52:02 -0700
Subject: [PATCH] Improve language

---
 GUIDE.md                                      | 12 +++++-----
 .../templates/account/password_change.html    |  5 +++--
 .../dashboard/pages/service_update.html       | 22 +++++++++----------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/GUIDE.md b/GUIDE.md
index 40e2916..be2ef7f 100644
--- a/GUIDE.md
+++ b/GUIDE.md
@@ -211,15 +211,13 @@ Fortunately, Shynet offers a simple method you can call from anywhere within you
 
 ### API
 
-All data displayed on dashboard can be obtained via API on url ```//shynet.example.com/api/dashboard/```.
-By default this url return full data from all services from last 30 days.
-Authentication header should be set to use user's parsonal API token (```'Authorization:Token <user API token>'```).
+All the information displayed on the dashboard can be obtained via API on url ```//shynet.example.com/api/dashboard/```. By default this endpoint will return the full data from all services over the last last 30 days. The `Authentication` header should be set to use user's parsonal API token (```'Authorization: Token <user API token>'```).
 
 There are 4 optional query parameters:
- * uuid - to get data only from one service
- * startDate - to set start date in format YYYY-MM-DD
- * endDate - to set end date in format YYYY-MM-DD
- * basic - to get only basic data set to '1' or 'true'
+ * `uuid` - to get data only from one service
+ * `startDate` - to set start date in format YYYY-MM-DD
+ * `endDate` - to set end date in format YYYY-MM-DD
+ * `basic` - to get only basic data set to '1' or 'true'
 
 Example in HTTPie:
 ```http get '//shynet.example.com/api/dashboard/?uuid={{service_uuid}}&startDate=2021-01-01&endDate=2050-01-01&basic=1' 'Authorization:Token {{user_api_token}}'```
diff --git a/shynet/dashboard/templates/account/password_change.html b/shynet/dashboard/templates/account/password_change.html
index 2a68a1d..6bb4a6e 100644
--- a/shynet/dashboard/templates/account/password_change.html
+++ b/shynet/dashboard/templates/account/password_change.html
@@ -13,13 +13,14 @@
 </form>
 <hr class="sep">
 <div>
-    <p class="label">Personal API token</p>
+    <p class="label mb-1">Personal API token</p>
     <div class="flex justify-between">
       <span class='chip ~info !normal'>{{request.user.api_token}}</span>
       <a class="href" href="{% url 'dashboard:api_token_refresh' %}">
-        <button type="submit" class="button ~warning !high">Refresh token</button>
+        <button type="submit" class="button ~neutral @high">Refresh token</button>
       </a>
     </div>
+    <p class="support mt-1">To learn more about the API, see our <a href="https://github.com/milesmcc/shynet/blob/master/GUIDE.md#api">API guide</a>.</p>
 </div>
 </div>
 {% endblock %}
diff --git a/shynet/dashboard/templates/dashboard/pages/service_update.html b/shynet/dashboard/templates/dashboard/pages/service_update.html
index 67ba6e5..aeb2c58 100644
--- a/shynet/dashboard/templates/dashboard/pages/service_update.html
+++ b/shynet/dashboard/templates/dashboard/pages/service_update.html
@@ -31,21 +31,19 @@
         </div>
     </form>
     <hr class="sep h-4">
-    <div>
-        <h5>API</h5>
-        <p>Service data can be accessed via API on url:</p>
-        <code>{{script_protocol}}{{request.get_host}}{% url 'api:services' %}?uuid={{object.uuid}}</code>
+    <h5>API</h5>
+    <div class="card ~neutral !low content">
+        <p>Shynet provides a simple API that you can use to pull data programmatically. You can access this data via this URL:</p>
+        <code class="text-sm">{{script_protocol}}{{request.get_host}}{% url 'api:services' %}?uuid={{object.uuid}}</code>
         <p>
-          There are 2 optional query parameters:
-          <ul>
-            <li>startDate - to set start date in format YYYY-MM-DD</li>
-            <li>endDate - to set end date in format YYYY-MM-DD</li>
-          </ul>
+        There are 2 optional query parameters:
+        <ul>
+            <li><code class="text-sm">startDate</code> &mdash; to set the start date (in format YYYY-MM-DD)</li>
+            <li><code class="text-sm">endDate</code> &mdash; to set the end date (in format YYYY-MM-DD)</li>
+        </ul>
         </p>
-        <p>Example using HTTPie:</p>
-        <code>http get '{{script_protocol}}{{request.get_host}}{% url 'api:services' %}?uuid={{object.uuid}}&startDate=2021-01-01&endDate=2050-01-01' 'Authorization:Token {{request.user.api_token}}'</code>
         <p>Example using cURL:</p>
-        <code>curl -H 'Authorization:Token {{request.user.api_token}}' '{{script_protocol}}{{request.get_host}}{% url 'api:services' %}?uuid={{object.uuid}}&startDate=2021-01-01&endDate=2050-01-01'</code>
+        <code class="text-sm">curl -H 'Authorization: Token {{request.user.api_token}}' '{{script_protocol}}{{request.get_host}}{% url 'api:services' %}?uuid={{object.uuid}}&startDate=2021-01-01&endDate=2050-01-01'</code>
     </div>
 </div>
 {% endblock %}