change some words and icons on empty state

src/component/bookmarkEmpty/index.css

@@ -1,17 +1,25 @@
 .bookmark-empty {
   background-color: hsla(var(--theme-primary-040), 0.2);
-  padding: 2em 3em;
   border-radius: calc(var(--theme-radius) * 0.01em);
+  padding: 2em 1em;
   height: inherit;
   text-align: center;
   display: flex;
   flex-direction: column;
+  gap: 1em;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
-  gap: 1em;
 }
 
-.bookmark-empty-string:not(:last-child) {
+.bookmark-empty-headline:not(:last-child) {
   margin-bottom: 0;
 }
+
+.bookmark-empty-control {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 1em;
+  flex-wrap: wrap;
+}

src/component/bookmarkEmpty/index.js

@@ -1,5 +1,6 @@
 import { state } from '../state';
 import { bookmark } from '../bookmark';
+import { group } from '../group';
 
 import { Button } from '../button';
 
@@ -11,26 +12,40 @@ export const BookmarkEmpty = function() {
 
   this.element = {
     empty: node('div|class:bookmark-empty'),
-    description: node('p:No Groups or Bookmarks|class:bookmark-empty-headline small muted')
+    control: node('div|class:bookmark-empty-control'),
+    headline: node('p:No Groups or Bookmarks|class:bookmark-empty-headline small muted')
   };
 
   this.control = {};
 
   this.control.button = {
-    add: new Button({
-      text: 'Add a Bookmark',
+    bookmark: new Button({
+      text: 'Add a new Bookmark',
+      iconName: 'addBookmark',
       size: 'small',
       func: () => {
         bookmark.add.render();
       }
+    }),
+    group: new Button({
+      text: 'Add a new Group',
+      iconName: 'addGroup',
+      size: 'small',
+      func: () => {
+        group.add.render();
+      }
     })
   };
 
   this.assemble = () => {
 
-    this.element.empty.appendChild(this.element.description);
+    this.element.empty.appendChild(this.element.headline);
 
-    this.element.empty.appendChild(this.control.button.add.button);
+    this.element.control.appendChild(this.control.button.group.button);
+
+    this.element.control.appendChild(this.control.button.bookmark.button);
+
+    this.element.empty.appendChild(this.element.control);
 
   };
 

src/component/form/inline/index.css

@@ -8,10 +8,21 @@
 .form-inline {
   position: relative;
   display: inline-flex;
-  justify-content: flex-start;
   align-items: center;
 }
 
+.form-inline-justify-left {
+  justify-content: flex-start;
+}
+
+.form-inline-justify-center {
+  justify-content: center;
+}
+
+.form-inline-justify-right {
+  justify-content: flex-end;
+}
+
 .form-inline-horizontal {
   flex-direction: row;
 }

src/component/form/inline/index.js

@@ -7,6 +7,7 @@ export const inline = function({
   reverse = false,
   block = false,
   wrap = false,
+  justify = 'left',
   gap = 'medium',
   equalGap = false,
   children = false
@@ -44,6 +45,22 @@ export const inline = function({
     inline.classList.add('form-inline-gap-equal');
   };
 
+  switch (justify) {
+
+    case 'left':
+      inline.classList.add('form-inline-justify-left');
+      break;
+
+    case 'center':
+      inline.classList.add('form-inline-justify-center');
+      break;
+
+    case 'right':
+      inline.classList.add('form-inline-justify-right');
+      break;
+
+  };
+
   if (reverse) {
     inline.classList.add('form-inline-reverse');
   };

src/component/groupEmpty/index.css

@@ -1,12 +1,12 @@
 .group-empty {
   background-color: hsla(var(--theme-primary-040), 0.2);
-  padding: 0.5em 1em;
   border-radius: calc(var(--theme-radius) * 0.01em);
+  padding: 0.5em 1em;
   height: inherit;
   text-align: center;
-  display: flex;
   grid-column-start: 1;
   grid-column-end: -1;
+  display: flex;
   gap: 1em;
   justify-content: center;
   align-items: center;
@@ -24,3 +24,11 @@
 .group-empty-headline:not(:last-child) {
   margin-bottom: 0;
 }
+
+.group-empty-control {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 1em;
+  flex-wrap: wrap;
+}

src/component/groupEmpty/index.js

@@ -14,16 +14,16 @@ export const GroupEmpty = function({
   this.element = {
     empty: node('div|class:group-empty'),
     control: node('div|class:group-empty-control'),
-    headline: node('p:Empty Group|class:group-empty-headline small muted')
+    headline: node('p:No Bookmarks in this Group|class:group-empty-headline small muted')
   };
 
   this.control = {};
 
   this.control.button = {
-    remove: new Button({
-      text: 'Add a Bookmark',
-      size: 'small',
+    bookmark: new Button({
+      text: 'Add a new Bookmark',
       iconName: 'addBookmark',
+      size: 'small',
       func: () => {
         bookmark.add.render({
           groupIndex: groupIndex
@@ -34,10 +34,10 @@ export const GroupEmpty = function({
 
   this.assemble = () => {
 
-    this.element.control.appendChild(this.control.button.remove.button);
-
     this.element.empty.appendChild(this.element.headline);
 
+    this.element.control.appendChild(this.control.button.bookmark.button);
+
     this.element.empty.appendChild(this.element.control);
 
   };

src/component/icon/index.js

@@ -111,15 +111,15 @@ icon.all = {
   },
   addBookmark: {
     name: 'add-bookmark',
-    path: 'M17,11v6.97l-5-2.14l-5,2.14V5h6V3H7C5.9,3,5,3.9,5,5v16l7-3l7,3V11H17z M21,7h-2v2h-2V7h-2V5h2V3h2v2h2V7z'
+    path: 'M17 11v6.97l-5-2.14l-5 2.14V5h6V3H7C5.9 3 5 3.9 5 5v16l7-3l7 3V11H17z M21 7h-2v2h-2V7h-2V5h2V3h2v2h2V7z'
   },
-  folder: {
-    name: 'folder',
-    path: 'M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'
+  group: {
+    name: 'group',
+    path: 'M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z'
   },
-  addFolder: {
-    name: 'add-folder',
-    path: 'M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm0 12H4V6h5.17l2 2H20v10zm-8-4h2v2h2v-2h2v-2h-2v-2h-2v2h-2z'
+  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'
   }
 };
 

src/component/menuContent/bookmarkSetting/index.js

@@ -350,6 +350,8 @@ bookmarkSetting.sort = (parent) => {
         children: [
           form.inline({
             gap: 'small',
+            wrap: true,
+            equalGap: true,
             children: [
               bookmarkSetting.control.sort.letter.wrap(),
               bookmarkSetting.control.sort.icon.wrap(),

src/component/menuContent/groupSetting/index.js

@@ -256,6 +256,9 @@ groupSetting.name = (parent) => {
     node('div', [
       groupSetting.control.name.size.wrap(),
       form.inline({
+        gap: 'small',
+        wrap: true,
+        equalGap: true,
         children: [
           groupSetting.control.name.hide.wrap(),
           groupSetting.control.name.show.wrap()
@@ -399,6 +402,9 @@ groupSetting.open = (parent) => {
     node('div', [
       groupSetting.control.open.size.wrap(),
       form.inline({
+        gap: 'small',
+        wrap: true,
+        equalGap: true,
         children: [
           groupSetting.control.open.hide.wrap(),
           groupSetting.control.open.show.wrap()

src/component/menuContent/themeSetting/index.js

@@ -309,6 +309,8 @@ themeSetting.saved = (parent) => {
           children: [
             form.inline({
               gap: 'small',
+              wrap: true,
+              equalGap: true,
               children: [
                 themeSetting.control.saved.saveButton.wrap(),
                 themeSetting.control.saved.edit.wrap()
@@ -328,6 +330,8 @@ themeSetting.saved = (parent) => {
           children: [
             form.inline({
               gap: 'small',
+              wrap: true,
+              equalGap: true,
               children: [
                 themeSetting.control.saved.saveButton.wrap()
               ]

src/component/toolbarControl/index.js

@@ -60,7 +60,7 @@ export const ToolbarControl = function() {
       srOnly: true,
       iconName: 'add',
       menuItem: [
-        { text: 'New Group', iconName: 'addFolder', action: () => { group.add.render(); } },
+        { text: 'New Group', iconName: 'addGroup', action: () => { group.add.render(); } },
         { text: 'New Bookmark', iconName: 'addBookmark', action: () => { bookmark.add.render(); } }
       ]
     }),