From 2734f7e7b80a656e4ecba767a7f74fd474d5a956 Mon Sep 17 00:00:00 2001
From: antoniofelices <antonio@studiomoare.com>
Date: Tue, 7 Jun 2022 20:17:59 +0200
Subject: [PATCH] add icons

---
 package.json                                  |   1 +
 src/components/dataDisplay.vue                |  17 +--
 src/components/eternalScroll.vue              |  26 ++--
 src/components/itemsRenderer.vue              |   2 +-
 src/components/itemsRenderer/card.vue         | 117 ++++++------------
 src/components/itemsRenderer/cards.vue        |   8 +-
 src/components/itemsRenderer/expanded.vue     |   6 +-
 src/components/itemsRenderer/fieldEditor.vue  |  39 +++---
 src/components/itemsRenderer/fieldRender.vue  |  21 +---
 src/components/itemsRenderer/grid.vue         |  14 ++-
 src/components/itemsRenderer/gridRow.vue      |  11 --
 .../itemsRenderer/numericTotals.vue           |   8 --
 src/components/itemsRenderer/rowControls.vue  |  34 ++---
 src/components/panel/exports.vue              |  23 ++--
 src/components/panel/filters.vue              |   8 +-
 src/components/panel/modes.vue                |   8 +-
 src/components/panel/panel.vue                |  15 +--
 src/components/pdfBuilder.vue                 |  49 +++-----
 18 files changed, 152 insertions(+), 255 deletions(-)

diff --git a/package.json b/package.json
index 3c50a59..e207ed5 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "moment": "^2.29.1",
     "underscore": "^1.13.1",
     "vue": "^2.6.14",
+    "vue-feather-icons": "^5.1.0",
     "vue-loader": "^15.9.8",
     "vue-mq": "^1.0.1",
     "vue-slide-up-down": "^2.0.1",
diff --git a/src/components/dataDisplay.vue b/src/components/dataDisplay.vue
index cf4a0e4..b69e93c 100644
--- a/src/components/dataDisplay.vue
+++ b/src/components/dataDisplay.vue
@@ -13,16 +13,14 @@ This file is part of LiberaForms.
               v-on:click="togglePanel"
               :aria-label="$t('Mark for reference')">
         <span>{{ $t("Filters") }}</span>
-        <i v-if="show_panel == false"
+        <ChevronDownIcon v-if="show_panel == false"
            class="expand_panel_icon"
-           data-feather="arrow-down"
-           aria-hidden="true">
-        </i>
-        <i v-else
+           aria-hidden="true"
+        />
+        <ChevronUpIcon v-else
            class="expand_panel_icon"
-           data-feather="arrow-up"
-           aria-hidden="true">
-        </i>
+           aria-hidden="true"
+        />
       </a>
     </div>
     <slide-up-down v-if="$mq == 'sm'"
@@ -56,11 +54,14 @@ import axios from 'axios';
 import { bus } from '../loaders/dataDisplayLoader'
 import SlideUpDown from 'vue-slide-up-down'
 import Panel from './panel/panel.vue';
+import { ChevronDownIcon, ChevronUpIcon } from 'vue-feather-icons'
 
 export default {
   components: {
     'Panel': Panel,
     'SlideUpDown': SlideUpDown,
+    'ChevronDownIcon': ChevronDownIcon,
+    'ChevronUpIcon': ChevronUpIcon
   },
   data() {
     return {
diff --git a/src/components/eternalScroll.vue b/src/components/eternalScroll.vue
index fbbe46d..73adc68 100644
--- a/src/components/eternalScroll.vue
+++ b/src/components/eternalScroll.vue
@@ -13,18 +13,16 @@ This file is part of LiberaForms.
       </span>
       <div v-if="item_count < total_items"
             style="margin-top: 1em;">
-        <i v-if="downloading == false"
-           v-on:click.once="download_more"
-           id="download_more"
-           class=""
-           data-feather="loader"
-           aria-label="Download more">
-        </i>
-        <i v-else
-           id="download_more"
-           class=""
-           data-feather="loader">
-        </i>
+        <LoaderIcon v-if="downloading == false"
+          v-on:click.once="download_more"
+          id="download_more"
+          class=""
+          aria-label="Download more"
+        />
+        <LoaderIcon v-else
+          id="download_more"
+          class=""
+        />
       </div>
     </div>
   </div>
@@ -34,9 +32,13 @@ This file is part of LiberaForms.
 import { mapMutations, mapActions } from 'vuex'
 import axios from 'axios';
 import { bus } from '../loaders/dataTableLoader'
+import { LoaderIcon } from 'vue-feather-icons'
 
 export default {
   name: "EternalScroll",
+  components: {
+    'LoaderIcon': LoaderIcon
+  },
   props: ['item_count', 'total_items'],
   data() {
     return {
diff --git a/src/components/itemsRenderer.vue b/src/components/itemsRenderer.vue
index ebca79c..68e7657 100644
--- a/src/components/itemsRenderer.vue
+++ b/src/components/itemsRenderer.vue
@@ -18,7 +18,7 @@ This file is part of LiberaForms.
       </FieldEditor>
 
       <h2 v-if="displayed_items.length == 0"
-           class="no-data text-center">
+           class="no-data mt-5">
         {{ $t('No data') }}
       </h2>
       <template v-if="displayed_items.length > 0">
diff --git a/src/components/itemsRenderer/card.vue b/src/components/itemsRenderer/card.vue
index 95cf984..fc5f4d4 100644
--- a/src/components/itemsRenderer/card.vue
+++ b/src/components/itemsRenderer/card.vue
@@ -7,24 +7,7 @@ This file is part of LiberaForms.
 
 <template>
   <div class="card my-4">
-      <div class="card_header">
-        <button v-if="my_expanded == false"
-                class="expand_card btn btn-primary"
-                v-on:click="toggle_my_expanded()"
-                v-bind:aria-label="$t('Expand')">
-         <i data-feather="arrow-down"
-            aria-hidden="true">
-         </i>
-        </button>
-        <button v-else
-                class="expand_card btn btn-primary"
-                v-on:click="toggle_my_expanded()"
-                v-bind:aria-label="$t('Collapse')">
-         <i class="fa fa-arrow-up"
-            aria-hidden="true">
-         </i>
-        </button>
-
+      <div class="card-header d-flex justify-content-between">
         <RowControls v-if="(can_edit && item.marked !== undefined) || edit_mode"
                      v-bind:item_id="item.id"
                      v-bind:marked="item.marked"
@@ -35,27 +18,45 @@ This file is part of LiberaForms.
                      v-bind:item_id="item.id"
                      v-bind:edit_mode="edit_mode">
         </FieldRender>
+        <button v-if="my_expanded == false"
+                class="expand_card"
+                v-on:click="toggle_my_expanded()"
+                v-bind:aria-label="$t('Expand')">
+         <ChevronDownIcon aria-hidden="true" />
+        </button>
+        <button v-else
+                class="expand_card"
+                v-on:click="toggle_my_expanded()"
+                v-bind:aria-label="$t('Collapse')">
+          <ChevronUpIcon aria-hidden="true" />
+        </button>
       </div>
 
       <div v-if="my_expanded == true"
-           :class="{'card-data-flex-container': expand_all == true}">
-
-        <template v-for="(field, index) in fields">
-          <div v-if="field.name != 'marked'"
-               :class="{'card-data-flex': expand_all == true}">
-            <div class="field_label"
-                 :class="{deletedFieldLabel: is_deleted_field(field.name)}">
-              {{ field.label }}
-            </div>
-            <FieldRender v-bind:field_name="field.name"
-                         v-bind:field_value="field.name == 'created' ? item.created :
-                                             item.data[field.name]"
-                         v-bind:item_id="item.id"
-                         v-bind:edit_mode="field.name == 'created' ? false : edit_mode">
-            </FieldRender>
-          </div>
-        </template>
-
+           :class="{'card-data-flex-container': expand_all == true}"
+           class="card-body"
+      >
+        <ul class="list-group list-group-flush">
+          <template v-for="(field, index) in fields">
+            <li v-if="field.name != 'marked'"
+                :class="{'card-data-flex': expand_all == true}"
+                class="list-group-item"
+            >
+              <span class="field_label"
+                  :class="{deletedFieldLabel: is_deleted_field(field.name)}">
+                {{ field.label }}:
+              </span>
+              <strong>
+                <FieldRender v-bind:field_name="field.name"
+                            v-bind:field_value="field.name == 'created' ? item.created :
+                                                item.data[field.name]"
+                            v-bind:item_id="item.id"
+                            v-bind:edit_mode="field.name == 'created' ? false : edit_mode">
+                </FieldRender>
+              </strong>
+            </li>
+          </template>
+        </ul>
       </div>
 
   </div>
@@ -65,12 +66,15 @@ This file is part of LiberaForms.
 import { mapGetters } from 'vuex';
 import RowControls from './rowControls.vue'
 import FieldRender from './fieldRender.vue'
+import { ChevronDownIcon, ChevronUpIcon } from 'vue-feather-icons'
 
 export default {
   name: "Card",
   components: {
     'RowControls' : RowControls,
     'FieldRender' : FieldRender,
+    'ChevronDownIcon': ChevronDownIcon,
+    'ChevronUpIcon': ChevronUpIcon
   },
   props: [
     'fields',
@@ -113,44 +117,3 @@ export default {
   },
 };
 </script>
-
-<style>
-/* .rowControls {
-  display: inline;
-}
-.card {
-  border: 0;
-  border-radius: 0;
-  border-top: 1px solid lightgray;
-  padding-top: 1em;
-  margin-bottom: 1em;
-}
-.card_header {
-  max-width: 100%;
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-	text-overflow: ellipsis;
-}
-.expand_card {
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-  margin-right: 0.3em;
-}
-.field_label {
-  margin-top: 1em;
-  font-weight: bold;
-}
-.card-data-flex-container {
-  margin: 1em 0 0.4em 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.card-data-flex {
-  flex: 1 1 auto;
-  border-left: #ddd 1px solid;
-  padding: 0 0.5em 0.75em 0.5em;
-} */
-</style>
diff --git a/src/components/itemsRenderer/cards.vue b/src/components/itemsRenderer/cards.vue
index 64dbbe0..5fd1fd4 100644
--- a/src/components/itemsRenderer/cards.vue
+++ b/src/components/itemsRenderer/cards.vue
@@ -21,7 +21,7 @@ This file is part of LiberaForms.
             :size="40"
             :bottom="40"
             :right="40"
-            bg-color="#7C5774">
+            bg-color="var(--bs-body-color)">
     </go-top>
   </div>
 </template>
@@ -64,9 +64,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-/* .panel_visible {
-
-} */
-</style>
diff --git a/src/components/itemsRenderer/expanded.vue b/src/components/itemsRenderer/expanded.vue
index 684c7e9..a291614 100644
--- a/src/components/itemsRenderer/expanded.vue
+++ b/src/components/itemsRenderer/expanded.vue
@@ -18,7 +18,7 @@ This file is part of LiberaForms.
             :size="40"
             :bottom="40"
             :right="40"
-            bg-color="#7C5774">
+            bg-color="var(--bs-body-color)">
     </go-top>
   </div>
 </template>
@@ -70,7 +70,3 @@ export default {
   },
 };
 </script>
-
-<style>
-
-</style>
diff --git a/src/components/itemsRenderer/fieldEditor.vue b/src/components/itemsRenderer/fieldEditor.vue
index e6b68d4..c65d050 100644
--- a/src/components/itemsRenderer/fieldEditor.vue
+++ b/src/components/itemsRenderer/fieldEditor.vue
@@ -24,13 +24,12 @@ This file is part of LiberaForms.
                     data-dismiss="modal"
                     aria-label="Close"
                     v-on:click="toggleModal">
-              <span aria-hidden="true">&times;</span>
+              <XIcon aria-hidden="true" />
             </button>
           </div>
           <div class="modal-body">
             <template v-if="my_edit_mode">
               <div class="form-group">
-
                 <input v-if="field_type == 'text' ||
                              field_type == 'date' ||
                              field_type == 'number'"
@@ -71,7 +70,6 @@ This file is part of LiberaForms.
                           class="form-control"
                           v-model="field_value">
                 </textarea>
-
               </div>
             </template>
             <div v-else-if="field_name.startsWith('checkbox')"
@@ -81,25 +79,25 @@ This file is part of LiberaForms.
               {{formatted_field_value()}}
             </div>
           </div>
-          <div class="modal-footer">
-            <button v-if="can_edit && !my_edit_mode"
+          <div v-if="can_edit && !my_edit_mode"
+               class="modal-footer"
+          >
+            <button
                     type="button"
-                    class="btn btn-outline-secondary"
+                    class="btn btn-outline-primary"
                     data-dismiss="modal"
                     v-on:click="activate_edition">
               {{ $t("Edit") }}
             </button>
-            <button type="button"
-                    class="btn btn-primary"
-                    data-dismiss="modal"
-                    v-on:click="toggleModal">
-              {{ close_button_text}}
-            </button>
+          </div>
+          <div v-if="my_edit_mode"
+               class="modal-footer"
+          >
             <button v-if="my_edit_mode"
-                    type="button"
-                    class="btn btn-success"
-                    v-on:click="save_field">
-              {{ $t("Save") }}
+                      type="button"
+                      class="btn btn-primary"
+                      v-on:click="save_field">
+                {{ $t("Save") }}
             </button>
           </div>
         </div>
@@ -112,9 +110,13 @@ This file is part of LiberaForms.
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 import { bus } from '../../loaders/dataDisplayLoader'
+import { XIcon } from 'vue-feather-icons'
 
 export default {
   name: "FieldEditor",
+  components: {
+    'XIcon': XIcon
+  },
   props: [
     "can_edit", "edit_mode",
   ],
@@ -266,8 +268,3 @@ export default {
 };
 </script>
 
-<style scoped>
-/* label {
-  font-size: 1em !important;
-} */
-</style>
diff --git a/src/components/itemsRenderer/fieldRender.vue b/src/components/itemsRenderer/fieldRender.vue
index ff723e6..eeb14c1 100644
--- a/src/components/itemsRenderer/fieldRender.vue
+++ b/src/components/itemsRenderer/fieldRender.vue
@@ -72,8 +72,8 @@ export default {
     },
     bool_badge: function() {
       var text = this.field_value ? this.$t("True") : this.$t("False")
-      var color = this.field_value ? "badge-success" : "badge-secondary"
-      return '<span class="badge '+color+'">'+text+'</span>'
+      // var color = this.field_value ? "" : ""
+      return text
     },
     ...mapGetters([
       'getFormattedValue'
@@ -81,20 +81,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-/* span > a {
-  padding: 0 0.5em 0 1em;
-  padding-right: 1em;
-}
-span.editMode {
-  text-decoration: underline wavy #BA1C1C;
-}
-span.emptyField {
-  color: gray;
-  font-style: italic;
-}
-.field-value {
-  cursor: pointer;
-} */
-</style>
diff --git a/src/components/itemsRenderer/grid.vue b/src/components/itemsRenderer/grid.vue
index 216c161..b9861c7 100644
--- a/src/components/itemsRenderer/grid.vue
+++ b/src/components/itemsRenderer/grid.vue
@@ -16,9 +16,8 @@ This file is part of LiberaForms.
                 v-on:click="setOrder(field.name)"
                 class="stickyColumn first_sticky_col">
               <div class="nonEditMode"
-                   style="margin-left:0.7rem"
                    :aria-label="$t('Marked')">
-                <i data-feather="edit-2" aria-hidden="true"></i>
+                <EditIcon size="1x" aria-hidden="true" />
               </div>
             </th>
             <th v-else
@@ -27,7 +26,7 @@ This file is part of LiberaForms.
                    v-on:click="setOrder(field.name)"
                    :class="{deletedFieldLabel: is_deleted_field(field.name)}">
                 {{ $t(field.label) }}
-                <i data-feather="arrow-down" aria-hidden="true"></i>
+                <ArrowDownIcon size="1x" aria-hidden="true" />
               </div>
             </th>
           </template>
@@ -52,12 +51,15 @@ This file is part of LiberaForms.
 import { mapGetters, mapActions } from 'vuex'
 import GridRow from './gridRow.vue'
 import NumericTotals from './numericTotals.vue'
+import { ArrowDownIcon, EditIcon } from 'vue-feather-icons'
 
 export default {
   name: "Grid",
   components: {
     'GridRow': GridRow,
-    'NumericTotals': NumericTotals
+    'NumericTotals': NumericTotals,
+    'ArrowDownIcon': ArrowDownIcon,
+    'EditIcon': EditIcon
   },
   props: [
     'can_edit',
@@ -217,11 +219,11 @@ td > div.editMode {
   left: 0px;
 }
 .sticky_data_col_with_controls {
-  left: 42px;
+  left: 35px;
 }
 @-moz-document url-prefix()  {
   .sticky_data_col_with_controls {
-    left: 42px;
+    left: 35px;
   }
 }
 .sticky_data_col_with_controls_expanded {
diff --git a/src/components/itemsRenderer/gridRow.vue b/src/components/itemsRenderer/gridRow.vue
index e3e2c79..100d5e4 100644
--- a/src/components/itemsRenderer/gridRow.vue
+++ b/src/components/itemsRenderer/gridRow.vue
@@ -92,14 +92,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-/*
-tr:hover:not(.highlighted) {
-  background-color: #dcdcdc !important;
-}
-.highlighted {
-  background-color: #ede0aa;
-}
-*/
-</style>
diff --git a/src/components/itemsRenderer/numericTotals.vue b/src/components/itemsRenderer/numericTotals.vue
index 9f6435f..028eb56 100644
--- a/src/components/itemsRenderer/numericTotals.vue
+++ b/src/components/itemsRenderer/numericTotals.vue
@@ -40,11 +40,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-/* ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-} */
-</style>
diff --git a/src/components/itemsRenderer/rowControls.vue b/src/components/itemsRenderer/rowControls.vue
index 86e5249..dd87cc3 100644
--- a/src/components/itemsRenderer/rowControls.vue
+++ b/src/components/itemsRenderer/rowControls.vue
@@ -8,13 +8,11 @@ This file is part of LiberaForms.
 <template>
   <div class="rowControls"
        :class="edit_mode ? 'editMode' : 'nonEditMode'">
-    <button class="btn"
+    <button class=""
            v-on:click="toggle_marked"
-           :aria-label="$t('Mark for reference')"
-           :class="marked ? 'btn-primary' : 'btn-outline-primary'">
-     <i class=""
-        aria-hidden="true">
-     </i>
+           :aria-label="$t('Mark for reference')">
+      <CheckIcon v-if="marked" size="1x" />
+      <CheckSquareIcon v-else size="1x" />
     </button>
 
     <button v-if="edit_mode==true"
@@ -22,9 +20,7 @@ This file is part of LiberaForms.
             :class="delete_btn_class"
             :aria-label="$t('Delete answer')"
             v-on:click="delete_item">
-      <i class=""
-         aria-hidden="true">
-      </i>
+      <DeleteIcon size="1x" aria-hidden="true" />
     </button>
 
   </div>
@@ -34,9 +30,15 @@ This file is part of LiberaForms.
 import { mapMutations, mapGetters } from 'vuex'
 import axios from 'axios';
 import { bus } from '../../loaders/dataDisplayLoader'
+import { CheckIcon, DeleteIcon, CheckSquareIcon } from 'vue-feather-icons'
 
 export default {
   name: "RowControls",
+  components: {
+    'CheckIcon': CheckIcon,
+    'DeleteIcon': DeleteIcon,
+    'CheckSquareIcon': CheckSquareIcon
+  },
   props: ['item_id', 'marked', 'edit_mode'],
   data() {
     return {
@@ -91,17 +93,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-/*
-.rowControls {
-
-}
-.rowControls > .btn:not(:first-child) {
-  margin-left: 0.25em;
-}
-.btn {
-  margin-right: 3px;
-}
-*/
-</style>
diff --git a/src/components/panel/exports.vue b/src/components/panel/exports.vue
index 6a974c7..cb10431 100644
--- a/src/components/panel/exports.vue
+++ b/src/components/panel/exports.vue
@@ -11,32 +11,40 @@ This file is part of LiberaForms.
     <a class="btn btn-primary"
        role="button"
        :href="csv_endpoint"> <!--?with_deleted_columns=true">-->
-       CSV <i class="fa fa-download" aria-hidden="true"></i>
+       <DownloadIcon aria-hidden="true" size="1x" />
+       CSV
     </a>
     <button class="btn btn-primary"
             v-on:click="generateJSON">
-      JSON <i class="fa fa-download" aria-hidden="true"></i>
+      <DownloadIcon aria-hidden="true" size="1x" />
+      JSON
     </button>
     <button class="btn btn-primary"
             v-on:click="displayPdfBuilder">
-      PDF <i class="fa fa-sliders" aria-hidden="true"></i>
+      <FileTextIcon aria-hidden="true" size="1x" />
+      PDF
     </button>
     <a class="btn btn-primary"
        role="button"
        :href="stats_endpoint">
-      {{ $t("Graphs") }}
-      <i class="fa fa-bar-chart" aria-hidden="true"></i>
+       <BarChart2Icon aria-hidden="true" size="1x" />
+       {{ $t("Graphs") }}
     </a>
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import { saveAs } from 'file-saver';
+import { saveAs } from 'file-saver'
+import { DownloadIcon, FileTextIcon, BarChart2Icon } from 'vue-feather-icons'
+
 export default {
   name: "Exports",
   components: {
     'saveAs': saveAs,
+    'DownloadIcon': DownloadIcon,
+    'FileTextIcon': FileTextIcon,
+    'BarChart2Icon': BarChart2Icon
   },
   props: [
     'enable_downloads', 'endpoint'
@@ -117,6 +125,3 @@ export default {
 };
 </script>
 
-<style>
-
-</style>
diff --git a/src/components/panel/filters.vue b/src/components/panel/filters.vue
index 5a8a154..eea76e2 100644
--- a/src/components/panel/filters.vue
+++ b/src/components/panel/filters.vue
@@ -21,12 +21,12 @@ This file is part of LiberaForms.
                aria-describedby="button-to-clear-filter">
         <!-- <button v-on:click="clear_filter"
                 :disabled="filter_text == ''"
-                class="btn btn-outline-secondary appended-button"
+                class="appended-button"
                 alt_text="Clear filter"
                 id="button-to-clear-filter"
                 aria-label="clear-filter"
                 type="button">
-          <i data-feather="rotate-ccw" aria-hidden="true"></i>
+          <XIcon aria-hidden="true" size="1x" />
         </button> -->
       </div>
     </div>
@@ -89,9 +89,13 @@ This file is part of LiberaForms.
 
 <script>
 import { mapMutations, mapGetters, mapActions } from 'vuex'
+import { XIcon } from 'vue-feather-icons'
 
 export default {
   name: "Filters",
+  components: {
+    'XIcon': XIcon
+  },
   props: [
     'field_index'
   ],
diff --git a/src/components/panel/modes.vue b/src/components/panel/modes.vue
index cf2be00..5fcfa71 100644
--- a/src/components/panel/modes.vue
+++ b/src/components/panel/modes.vue
@@ -13,12 +13,12 @@ This file is part of LiberaForms.
          v-if="mq != 'sm'"
          v-on:click="toggleItemsRenderMode">
       <button class="btn"
-             :class="items_as_table==true ? 'btn-primary' : 'btn-outline-secondary'"
+             :class="items_as_table==true ? 'btn-primary' : 'btn-outline-primary'"
              :disabled="getDisplayMode() == 'pdfMode'">
         {{ $t("Table") }}
       </button>
       <button class="btn"
-              :class="items_as_table==false ? 'btn-primary' : 'btn-outline-secondary'"
+              :class="items_as_table==false ? 'btn-primary' : 'btn-outline-primary'"
               :disabled="getDisplayMode() == 'pdfMode'">
         {{ $t("Cards") }}
       </button>
@@ -27,7 +27,7 @@ This file is part of LiberaForms.
     <!-- edit mode -->
     <button v-if="can_edit == true && getDisplayMode() == 'itemsMode'"
             class="btn"
-            :class="edit_mode==true ? 'btn-primary' : 'btn-outline-secondary'"
+            :class="edit_mode==true ? 'btn-primary' : 'btn-outline-primary'"
             v-on:click="toggle_edit_mode">
       {{ $t("Edit") }}
     </button>
@@ -35,7 +35,7 @@ This file is part of LiberaForms.
     <!-- show deleted fields -->
     <button v-if="can_edit == true && has_deleted_fields == true"
             class="btn"
-            :class="show_deleted==false ? 'btn-outline-secondary' : 'btn-primary'"
+            :class="show_deleted==false ? 'btn-outline-primary' : 'btn-primary'"
             v-on:click="toggle_deleted_fields">
       {{ $t("Deleted fields") }}
     </button>
diff --git a/src/components/panel/panel.vue b/src/components/panel/panel.vue
index 2fc9a0f..102f00a 100644
--- a/src/components/panel/panel.vue
+++ b/src/components/panel/panel.vue
@@ -11,17 +11,14 @@ This file is part of LiberaForms.
     <!-- transition start -->
       <!-- first row -->
       <div>
-        <div v-if="getExportsEnabled() == true"
-             class="">
+        <div v-if="getExportsEnabled() == true">
           <Modes v-bind:mq="mq"
                  v-bind:edit_mode="edit_mode"
                  v-bind:can_edit="can_edit">
           </Modes>
         </div>
-        <div class="">
-          <Exports v-bind:endpoint="endpoint">
-          </Exports>
-        </div>
+        <Exports v-bind:endpoint="endpoint">
+        </Exports>
       </div>
       <!-- second row -->
       <Filters v-bind:mq="mq"
@@ -90,9 +87,3 @@ export default {
   },
 };
 </script>
-
-<style>
-/* .panel {
-
-} */
-</style>
diff --git a/src/components/pdfBuilder.vue b/src/components/pdfBuilder.vue
index 8874a02..3f8764b 100644
--- a/src/components/pdfBuilder.vue
+++ b/src/components/pdfBuilder.vue
@@ -7,28 +7,20 @@ This file is part of LiberaForms.
 
 <template>
   <div v-if="getDisplayMode() == 'pdfMode'">
-    <div class="row">
-      <div class="col">
-        <div class=" mb-3" style="font-size: 1.25em">
-          <i class="fa fa-sliders" aria-hidden="true"></i>
-          {{$t("PDF settings")}}
-        </div>
+
+    <div class="grid">
+      <div class="g-col-12">
+        <h2>{{$t("PDF settings")}}</h2>
       </div>
     </div>
-    <div class="row">
 
-      <div class="col-auto">
-        <div class="input-group mb-3">
+    <div class="grid mt-4">
+      <div class="g-col-12 g-col-lg-3">
+        <div class="input-group">
           <div class="input-group-prepend">
             <span id="inputGroup-sizing-sm"
                   class="input-group-text">
               {{ $t("Only export marked") }}
-              <span class="badge badge-pill badge-success"
-                    style="padding: 0.5em 0.7em 0.5em 0.7em; margin-left: 0.5em">
-                <i class="fa fa-thumb-tack"
-                   aria-hidden="true">
-                </i>
-              </span>
             </span>
           </div>
           <div class="input-group-append btn-toggle-group"
@@ -46,8 +38,8 @@ This file is part of LiberaForms.
         </div>
       </div>
 
-      <div class="col-auto">
-        <div class="input-group mb-3">
+      <div class="g-col-12 g-col-lg-3">
+        <div class="input-group">
           <div class="input-group-prepend">
             <span id="inputGroup-sizing-sm"
                   class="input-group-text">
@@ -68,8 +60,8 @@ This file is part of LiberaForms.
         </div>
       </div>
 
-      <div class="col-auto">
-        <div class="input-group mb-3">
+      <div class="g-col-12 g-col-lg-3">
+        <div class="input-group">
           <div class="input-group-prepend">
             <span id="inputGroup-sizing-sm"
                   class="input-group-text">
@@ -90,8 +82,8 @@ This file is part of LiberaForms.
         </div>
       </div>
 
-      <div class="col-auto">
-        <div class="btn-group btn-toggle-group mb-3"
+      <div class="g-col-12 g-col-lg-3">
+        <div class="btn-group btn-toggle-group"
              v-on:click="toggleOrientation">
           <button class="btn"
                  :class="portrait==true ? 'btn-primary' : 'btn-outline-secondary'">
@@ -103,14 +95,11 @@ This file is part of LiberaForms.
           </button>
         </div>
       </div>
-
     </div>
-    <div class="row">
-      <div class="col">
-        <div style="font-size: 1.25em">
-          {{ $t('Select the fields to include in the PDF') }}
-        </div>
-        <hr />
+
+    <div class="grid mt-4">
+      <div class="g-col-12">
+        <h3>{{ $t('Select the fields to include in the PDF') }}</h3>
         <template v-for="(field, index) in fields">
           <input :id="index"
                  :key="field.name"
@@ -124,12 +113,12 @@ This file is part of LiberaForms.
           <br>
         </template>
         <hr />
-        <button class="btn btn-success"
+        <button class="btn btn-primary"
                 :disabled="selected_fields.length == 0"
                 v-on:click="generatePDF">
           {{ $t('Download PDF') }}
         </button>
-        <button class="btn btn-primary"
+        <button class="btn btn-outline-primary"
                 v-on:click="togglePdfBuilderMode">
           {{ $t('Cancel') }}
         </button>