Minor tweaks to the configuration documentation. (#2451)

build.fsx

@@ -287,7 +287,7 @@ Target.create "Benchmark" (fun _ ->
 )
 
 Target.create "Format" (fun _ ->
-    let result = DotNet.exec id "fantomas" "--recurse src docs/.style/ build.fsx"
+    let result = DotNet.exec id "fantomas" "--recurse src docs build.fsx"
 
     if not result.OK then
         printfn "Errors while formatting all files: %A" result.Messages)
@@ -309,8 +309,7 @@ Target.create "FormatChanged" (fun _ ->
         printfn "Problem when formatting changed files:\n\n%A" result.Errors)
 
 Target.create "CheckFormat" (fun _ ->
-    let result =
-        DotNet.exec id "fantomas" "--check --recurse src docs/.style/ build.fsx"
+    let result = DotNet.exec id "fantomas" "--check --recurse src docs build.fsx"
 
     if result.ExitCode = 0 then
         Trace.log "No files need formatting"

docs/.style/fsdocs-custom.sass

@@ -71,14 +71,11 @@ $headings-font-family: 'Reem Kufi', sans-serif
     font-weight: 400
   h4
     .green-recommendation, .orange-recommendation, .red-recommendation
-      vertical-align: 0
       margin-right: 0.5rem
-      font-size: 1.3rem
+      font-size: $configuration-icon-size
+      line-height: 1
     .gresearch-recommendation
-      vertical-align: -0.2rem
       margin-right: 0.5rem
-      width: 20px
-      height: 20px
   hr
     margin: 0 0 20px 0
   li
@@ -110,19 +107,24 @@ $headings-font-family: 'Reem Kufi', sans-serif
   .green-recommendation
     color: $success
     vertical-align: middle
-    font-size: 1.4rem
+    font-size: $configuration-icon-size
+    line-height: 1
   .red-recommendation
     color: $danger
     vertical-align: middle
-    font-size: 1.4rem
+    font-size: $configuration-icon-size
+    line-height: 1
   .orange-recommendation
     color: $warning
     vertical-align: middle
-    font-size: 1.4rem
+    font-size: $configuration-icon-size
+    line-height: 1
   .gresearch-recommendation
     padding: 3px
     background-color: $gresearch-color
     border-radius: 50%
+    vertical-align: middle
+    line-height: $configuration-icon-size
 
 .green-tooltip
   .tooltip-inner

docs/.style/variables.sass

@@ -15,3 +15,4 @@ $navbar-light-color: $white
 $navbar-light-active-color: $secondary
 $navbar-light-hover-color: $white
 $navbar-nav-link-padding-x: 0
+$configuration-icon-size: 1.3rem

docs/content/fantomas-setting-icon.js

@@ -1,35 +1,54 @@
-import { html } from 'https://cdn.skypack.dev/lit';
-import { component } from 'https://cdn.skypack.dev/haunted';
+import {html} from 'https://cdn.skypack.dev/lit';
+import {component} from 'https://cdn.skypack.dev/haunted';
 
 
-function FantomasSettingIcon({ tooltip, type }) {
+function FantomasSettingIcon({tooltip, type}) {
     let settingType
     switch (type) {
         case 'green':
-            settingType = {icon: "bi-check-circle-fill", color: "green-recommendation", tooltip: tooltip?tooltip:"This setting is good to use"}
+            settingType = {
+                icon: "bi-check-circle-fill",
+                color: "green-recommendation",
+                tooltip: tooltip ? tooltip : "It is ok to change the value of this setting."
+            }
             break;
         case 'orange':
-            settingType =  {icon:"bi-exclamation-circle-fill", color:"orange-recommendation", tooltip: tooltip?tooltip:"This setting is not recommended"}
+            settingType = {
+                icon: "bi-exclamation-circle-fill",
+                color: "orange-recommendation",
+                tooltip: tooltip ? tooltip : "Changing the default of this setting is not recommended."
+            }
             break;
         case 'red':
-            settingType = {icon: "bi-x-circle-fill", color:"red-recommendation", tooltip: tooltip?tooltip:"You shouldn't use this setting"}
+            settingType = {
+                icon: "bi-x-circle-fill",
+                color: "red-recommendation",
+                tooltip: tooltip ? tooltip : "You shouldn't use this setting."
+            }
             break;
+        default:
+            throw "The \"type\" can only be \"green\", \"orange\" or \"red\""
     }
-    return  html`<i class="bi ${settingType.icon} ${settingType.color} me-2"
-                    data-bs-toggle="tooltip" data-bs-custom-class="${type}-tooltip" data-bs-title="${settingType.tooltip}"></i>`;
+    return html`<i class="bi ${settingType.icon} ${settingType.color} me-2"
+                   data-bs-toggle="tooltip" data-bs-custom-class="${type}-tooltip"
+                   data-bs-title="${settingType.tooltip}"></i>`;
 }
 
-function FantomasSettingIconGResearch({ tooltip }) {
+function FantomasSettingIconGResearch({tooltip}) {
     const root = document.documentElement.dataset.root
     const safeTooltip =
         tooltip ? tooltip : "If you use one of these you should use all G-Research settings for consistency reasons";
 
-    return  html`<img class="gresearch-recommendation me-2" data-bs-toggle="tooltip" data-bs-custom-class="gresearch-tooltip"
+    return html`<img class="gresearch-recommendation me-2" data-bs-toggle="tooltip" data-bs-custom-class="gresearch-tooltip"
                    data-bs-title="${safeTooltip}" data-bs-custom-class="gresearch-tooltip" src="${root}/images/gresearch.svg" alt="G-Research logo"/>`;
 }
 
-customElements.define('fantomas-setting-icon', component(FantomasSettingIcon, { useShadowDOM: false,
-                                                                               observedAttributes: [ 'tooltip','type'] }));
+customElements.define('fantomas-setting-icon', component(FantomasSettingIcon, {
+    useShadowDOM: false,
+    observedAttributes: ['tooltip', 'type']
+}));
 
-customElements.define('fantomas-setting-icon-gresearch', component(FantomasSettingIconGResearch, { useShadowDOM: false,
-                                                                               observedAttributes: [ 'tooltip'] }));
+customElements.define('fantomas-setting-icon-gresearch', component(FantomasSettingIconGResearch, {
+    useShadowDOM: false,
+    observedAttributes: ['tooltip']
+}));