feat(tabs): added explanations for all tab settings

src/App.vue

@@ -29,3 +29,9 @@ export default {
   ],
 };
 </script>
+
+<style lang="postcss">
+a {
+  @apply underline;
+}
+</style>

src/components/AppButton.vue

@@ -36,7 +36,7 @@ export default {
 .button {
   @apply
     px-4 py-2 w-full
-    font-medium leading-tight uppercase
+    font-medium leading-tight uppercase no-underline
     border rounded;
 }
 

src/components/AppFormElement.vue

@@ -6,6 +6,12 @@
     >
       {{ label }}
     </div>
+    <div
+      v-if="descr"
+      :class="$style.descr"
+    >
+      {{ descr }}
+    </div>
     <slot />
   </label>
 </template>
@@ -14,6 +20,10 @@
 export default {
   inheritAttrs: false,
   props: {
+    descr: {
+      type: String,
+      default: undefined,
+    },
     label: {
       type: String,
       default: undefined,
@@ -34,4 +44,12 @@ export default {
 .label {
   @apply mb-1 font-medium;
 }
+
+.label + .descr {
+  @apply -mt-1;
+}
+
+.descr {
+  @apply mb-1 text-gray-500;
+}
 </style>

src/components/UpdateChecker.vue

@@ -16,16 +16,12 @@
         <a
           href="https://getpigment.app/download/"
           target="_blank"
-        >
-          Go to download page
-        </a>
+        >Go to download page</a>
         &middot;
         <a
           :href="latestRelease.html_url"
           target="_blank"
-        >
-          Show release on GitHub
-        </a>
+        >Show release on GitHub</a>
       </div>
     </div>
   </app-content-section>

src/views/Changelog.vue

@@ -88,10 +88,6 @@ export default {
   @apply p-6 text-gray-600 bg-gray-900 rounded shadow-lg leading-relaxed;
 }
 
-.item a {
-  @apply underline;
-}
-
 .item h1 {
   @apply
     pb-6 border-b border-gray-800

src/views/TabCreate.vue

@@ -14,17 +14,17 @@
       >
         <app-form-input
           v-model="tab.label"
-          label="Name"
-          placeholder="Insert tab title"
           required
+          label="Name"
+          descr="The tab label displayed in the sidebar."
         />
 
         <app-form-input
           v-model="tab.url"
-          label="URL"
-          placeholder="Insert tab title"
           type="url"
           required
+          label="URL"
+          descr="Homepage of the tab. For example: https://google.com"
         />
 
         <div :class="$style.actions">

src/views/TabEdit.vue

@@ -14,17 +14,17 @@
         >
           <app-form-input
             v-model="tab.label"
-            label="Name"
-            placeholder="Insert tab title"
             required
+            label="Name"
+            descr="The tab label displayed in the sidebar."
           />
 
           <app-form-input
             v-model="tab.url"
-            label="URL"
-            placeholder="Insert tab title"
             type="url"
             required
+            label="URL"
+            descr="Homepage of the tab. For example: https://google.com"
           />
         </div>
 
@@ -37,6 +37,15 @@
             :datalist="scopes"
             :disabled="useTabIdAsScope"
             label="Session scope"
+            descr="
+              Define a name to encapsulate single or multiple tabs to an individual session scope.
+              This is useful if you want to use multiple accounts of the same service
+              at the same time. For example, use 'work' as the name for work-related Gmail
+              and Google Calendar tabs, and 'private' as the name for private Gmail
+              and Goolge Calendar tabs. If you enable 'Use a tab unique scope' the tab
+              will remain private and will not share the session with other tabs.
+              If the field is left blank, the default session will be used.
+            "
           >
             <app-form-checkbox v-model="useTabIdAsScope">
               Use a tab unique scope
@@ -46,25 +55,36 @@
           <app-form-text-editor
             v-model="tab.userAgent"
             label="User Agent"
+            descr="Set a custom user agent for the tab if you need to."
           />
 
           <app-form-text-editor
             v-model="tab.customCss"
-            label="Style Sheets"
             language="css"
+            label="Style Sheets"
+            descr="Manipulate the styles inside the tab with custom CSS."
           />
 
           <app-form-text-editor
             v-model="tab.customJs"
-            label="JavaScript"
             language="js"
+            label="JavaScript"
+            descr="Execute custom JavaScript inside the tab."
           />
         </div>
 
         <div
           slot="Settings"
           :class="$style.tabContent"
         >
+          <app-heading>
+            <template slot="sub">
+              By default, the tab 'inherits' the
+              <router-link :to="{ name: 'settings' }">global settings</router-link>.
+              Override some of them only for this tab.
+            </template>
+          </app-heading>
+
           <settings-item>
             <template slot="label">
               Dimmer