add setting alert messages

src/component/alert/index.css

@@ -0,0 +1,29 @@
+:root {
+  --alert-space: 6;
+}
+
+:root {
+  --alert-background: var(--theme-primary-020);
+  --alert-text: var(--theme-primary-text-020);
+  --alert-border: var(--theme-primary-030);
+}
+
+.alert {
+  background-color: hsl(var(--alert-background));
+  padding: calc((var(--alert-space) / 4) * 0.5em) calc((var(--alert-space) / 4) * 1em);
+  border: 0;
+  border-left-width: calc(var(--layout-line-width) * 2);
+  border-left-style: solid;
+  border-left-color: hsl(var(--alert-border));
+  border-top-right-radius: calc(var(--theme-radius) * 0.01em);
+  border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
+  width: 100%;
+  transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast);
+}
+
+.alert-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc((var(--alert-space) / 4) * 1em);
+}

src/component/alert/index.js

@@ -0,0 +1,59 @@
+import { icon } from '../icon';
+
+import * as form from '../form';
+
+import { node } from '../../utility/node';
+
+import './index.css';
+
+export const Alert = function({
+  message = [],
+  iconName = false
+} = {}) {
+
+  this.element = {
+    alert: node('div|class:alert'),
+    icon: node('div|class:alert-icon'),
+    body: node('div|class:alert-body'),
+    message: node('div|class:alert-message')
+  };
+
+  this.assemble = () => {
+
+    if (iconName) {
+
+      this.element.icon.appendChild(icon.render(iconName));
+
+      this.element.body.appendChild(this.element.icon);
+
+    };
+
+    if (message.length > 0) {
+      message.forEach((item, i) => {
+
+        this.element.message.appendChild(node('p:' + item));
+
+      });
+    };
+
+    this.element.body.appendChild(this.element.message);
+
+    this.element.alert.appendChild(this.element.body);
+
+  };
+
+  this.alert = () => {
+    return this.element.alert;
+  };
+
+  this.wrap = () => {
+    return form.wrap({
+      children: [
+        this.element.alert
+      ]
+    });
+  };
+
+  this.assemble();
+
+};

src/component/button/index.js

@@ -147,7 +147,7 @@ export const Button = function({
       children: [
         this.button
       ]
-    })
+    });
   };
 
 };

src/component/form/feedback/index.css

@@ -1,3 +1,7 @@
+:root {
+  --form-feedback-space: 6;
+}
+
 :root {
   --form-feedback-background: var(--theme-primary-020);
   --form-feedback-background-disabled: var(--theme-primary-010);
@@ -9,8 +13,8 @@
 }
 
 .form-feedback {
-  padding: 0.75em 1.25em;
   background-color: hsl(var(--form-feedback-background));
+  padding: calc((var(--form-feedback-space) / 4) * 0.5em) calc((var(--form-feedback-space) / 4) * 1em);
   border: 0;
   border-left-width: calc(var(--layout-line-width) * 2);
   border-left-style: solid;

src/component/icon/index.js

@@ -120,6 +120,10 @@ icon.all = {
   addGroup: {
     name: 'add-group',
     path: 'M19 19H5V5H14V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V10H19V19Z M19 5V3H17V5H15V7H17V9H19V7H21V5H19Z'
+  },
+  info: {
+    name: 'info',
+    path: 'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'
   }
 };
 

src/component/menuContent/appSetting/index.js

@@ -17,6 +17,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/menuContent/bookmarkSetting/index.js

@@ -17,6 +17,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/menuContent/coffeeSetting/index.js

@@ -17,6 +17,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/menuContent/dataSetting/index.js

@@ -17,6 +17,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -125,12 +126,15 @@ dataSetting.clear = (parent) => {
     }
   });
 
+  dataSetting.control.clear.alert = new Alert({ iconName: 'info', message: ['You will lose Bookmarks by clearing all data.', 'Have you <a href="#menu-content-item-backup">backed up your data?</a>'] });
+
   dataSetting.control.clear.helper = new Control_helperText({
     text: ['Wipe all data and restore ' + appName + ' to the default state.', 'Alternatively it is possible to wipe all settings but keep the current Bookmarks and Groups.']
   });
 
   parent.appendChild(
     node('div', [
+      dataSetting.control.clear.alert.wrap(),
       form.wrap({
         children: [
           form.inline({

src/component/menuContent/debugSetting/index.js

@@ -18,6 +18,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/menuContent/firefoxSetting/index.js

@@ -17,6 +17,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -53,11 +54,11 @@ firefoxSetting.firefox = (parent) => {
         children: [
           node('ol', [
             node('li:Open a new Firefox window'),
-            node('li:Open Firefox <code>Preferences</code> and open a new tab (nightTab)'),
+            node('li:Open Firefox <code>Preferences</code> and open a new tab (' + appName + ')'),
             node('li:In Firefox preferences under <code>Home</code>, change <code>Homepage and new windows</code> to <code>Custom URLs...</code>'),
             node('li:Then click <code>Use Current Page</code>'),
           ]),
-          node('p:nightTab will now appear as the homepage.'),
+          node('p:' + appName + ' will now appear as the homepage.'),
         ]
       })
     ])

src/component/menuContent/formSetting/index.js

@@ -16,6 +16,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/menuContent/groupSetting/index.js

@@ -18,6 +18,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/menuContent/headerSetting/index.js

@@ -11,12 +11,14 @@ import { link } from '../../link';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 import { searchEnginePreset } from '../../searchEnginePreset';
+import { appName } from '../../appName';
 
 import * as form from '../../form';
 
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -1655,7 +1657,7 @@ headerSetting.search = (parent) => {
         }
       }),
       urlHelper: new Control_helperText({
-        text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', 'nightTab will add the search term entered into the Search box at the end of the above URL.']
+        text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', appName + ' will add the search term entered into the Search box at the end of the above URL.']
       }),
       queryName: new Control_text({
         object: state.get.current(),

src/component/menuContent/layoutSetting/index.js

@@ -16,6 +16,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/menuContent/themeSetting/index.js

@@ -23,6 +23,7 @@ import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
 import { PresetThemeTile } from '../../presetThemeTile';
 import { AccentPresetButton } from '../../accentPresetButton';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';
@@ -605,6 +606,8 @@ themeSetting.accent = (parent) => {
 
   themeSetting.control.accent.cycle = {};
 
+  themeSetting.control.accent.cycle.alert = new Alert({ iconName: 'info', message: ['Take care as a fast changing Accent hue may cause performance issues.'] });
+
   themeSetting.control.accent.cycle.active = new Control_checkbox({
     object: state.get.current(),
     path: 'theme.accent.cycle.active',
@@ -649,13 +652,11 @@ themeSetting.accent = (parent) => {
   });
 
   themeSetting.control.accent.cycle.stepHelper = new Control_helperText({
-    text: [
-      'Take care as a small delay in Accent hue change may cause performance issues.',
-      'Auto change Accent hue will not work when the Accent colour is a grey or black.'
-    ]
+    text: ['Auto change Accent hue will not work when the Accent colour is a grey or black.']
   });
 
   themeSetting.control.accent.cycle.area = node('div', [
+    themeSetting.control.accent.cycle.alert.wrap(),
     themeSetting.control.accent.cycle.speed.wrap(),
     themeSetting.control.accent.cycle.step.wrap(),
     themeSetting.control.accent.cycle.stepHelper.wrap()
@@ -1308,6 +1309,7 @@ themeSetting.background = (parent) => {
       })
     },
     image: {
+      alert: new Alert({ iconName: 'info', message: ['Uploading Background images is no longer supported.', '<a href="#" target="_blank">Why has this changed?</a>'] }),
       url: new Control_textarea({
         object: state.get.current(),
         path: 'theme.background.image.url',
@@ -1470,6 +1472,7 @@ themeSetting.background = (parent) => {
       }
     },
     video: {
+      alert: new Alert({ iconName: 'info', message: ['YouTube page URLs <strong>can not</strong> be used.', '<a href="#" target="_blank">How to link to a video file.</a>'] }),
       url: new Control_textarea({
         object: state.get.current(),
         path: 'theme.background.video.url',
@@ -1485,7 +1488,7 @@ themeSetting.background = (parent) => {
       }),
       urlHelper: new Control_helperText({
         text: [
-          'Background video only supports a direct URL to a video file. Supports MP4 and WebM format.', 'YouTube page URLs can not be used.',
+          'Background video only supports a direct URL to a video file. Supports MP4 and WebM format.',
           'Add more than one URL separated by spaces or on new lines for a random background video on load.'
         ]
       }),
@@ -1643,6 +1646,7 @@ themeSetting.background = (parent) => {
   ]);
 
   const themeBackgroundImageArea = node('div', [
+    themeSetting.control.background.image.alert.wrap(),
     themeSetting.control.background.image.url.wrap(),
     themeSetting.control.background.image.urlHelper.wrap(),
     themeSetting.control.background.image.blur.wrap(),
@@ -1664,6 +1668,7 @@ themeSetting.background = (parent) => {
   ]);
 
   const themeBackgroundVideoArea = node('div', [
+    themeSetting.control.background.video.alert.wrap(),
     themeSetting.control.background.video.url.wrap(),
     themeSetting.control.background.video.urlHelper.wrap(),
     themeSetting.control.background.video.blur.wrap(),

src/component/menuContent/toolbarSetting/index.js

@@ -16,6 +16,7 @@ import * as form from '../../form';
 import { Button } from '../../button';
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
+import { Alert } from '../../alert';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_inputButton } from '../../control/inputButton';

src/component/state/index.js

@@ -147,7 +147,7 @@ state.minMax = {
     accent: {
       hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
       rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
-      cycle: { speed: { min: 100, max: 10000 }, step: { min: 1, max: 100 } }
+      cycle: { speed: { min: 100, max: 1000 }, step: { min: 1, max: 100 } }
     },
     font: {
       display: { weight: { min: 100, max: 900 } },

src/component/themePreset/nighttab/index.js

@@ -1,7 +1,8 @@
 import { state } from '../../state';
+import { appName } from '../../appName';
 
 export const nighttab = {
-  name: 'nightTab (default)',
+  name: appName + ' (default)',
   color: state.get.default().theme.color,
   accent: { hsl: state.get.default().theme.accent.hsl, rgb: state.get.default().theme.accent.rgb },
   font: state.get.default().theme.font,