From 8fb5c3695f47f5a462092c6b963e57d2c290589c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Mon, 29 Jan 2024 15:11:31 +0100
Subject: [PATCH] Adjust report dark theme styles

---
 .../compose/src/components/Admin/EditorToolbar.vue |  2 +-
 .../Admin/Module/DalFieldStoreEncoding.vue         |  2 ++
 .../src/components/Admin/Module/DalSettings.vue    |  1 +
 .../src/components/Common/RecordToolbar.vue        |  2 +-
 .../Namespaces/Importer/ImportConfiguration.vue    |  2 +-
 .../src/components/Namespaces/Reminders/Edit.vue   |  5 ++---
 .../src/components/PageBlocks/RecordListBase.vue   |  4 ++--
 .../compose/src/components/PageBlocks/TabsBase.vue |  2 +-
 .../src/components/Common/EditorToolbar.vue        |  4 ++--
 .../web/reporter/src/components/EditorToolbar.vue  |  3 +--
 .../src/components/Report/Blocks/Wrap/Card.vue     |  2 +-
 .../src/components/Report/Blocks/index.vue         |  3 +--
 client/web/reporter/src/views/Layout.vue           |  1 +
 client/web/reporter/src/views/Report/Builder.vue   | 14 +++++++-------
 client/web/reporter/src/views/Report/Edit.vue      |  4 ++--
 client/web/reporter/src/views/Report/List.vue      | 10 ++--------
 client/web/reporter/src/views/Report/View.vue      |  6 +++---
 .../src/reporter/types/display-elements/metric.ts  |  2 +-
 lib/vue/src/components/input/CInputSelect.vue      |  3 ++-
 lib/vue/src/components/navigation/CTopbar.vue      |  6 +++---
 .../src/components/reminders/CReminderSidebar.vue  |  4 ++--
 .../components/reporter/Viewers/CReportMetric.vue  |  2 +-
 .../components/reporter/Viewers/CReportTable.vue   |  4 ++--
 .../src/components/resourceList/CResourceList.vue  |  2 +-
 locale/en/corteza-webapp-reporter/builder.yaml     |  1 +
 locale/en/corteza-webapp-reporter/general.yaml     |  2 +-
 .../scss/variables/18182031_webapp_variable.scss   | 10 ++++++----
 27 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/client/web/compose/src/components/Admin/EditorToolbar.vue b/client/web/compose/src/components/Admin/EditorToolbar.vue
index 6a064e57e..d5f2d2eb0 100644
--- a/client/web/compose/src/components/Admin/EditorToolbar.vue
+++ b/client/web/compose/src/components/Admin/EditorToolbar.vue
@@ -8,7 +8,7 @@
         data-test-id="button-back-without-save"
         variant="link"
         :disabled="processing"
-        class="text-dark back text-left text-nowrap p-1"
+        class="d-flex align-items-center text-dark back gap-1 text-decoration-none"
         @click="$emit('back')"
       >
         <font-awesome-icon
diff --git a/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue b/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue
index 665b4422e..7fb1721b1 100644
--- a/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue
+++ b/client/web/compose/src/components/Admin/Module/DalFieldStoreEncoding.vue
@@ -40,6 +40,8 @@
         :disabled="!use"
         label="text"
         :reduce="strategy => strategy.value"
+        :clearable="false"
+        size="sm"
       />
     </b-col>
 
diff --git a/client/web/compose/src/components/Admin/Module/DalSettings.vue b/client/web/compose/src/components/Admin/Module/DalSettings.vue
index 560e82468..9563985fa 100644
--- a/client/web/compose/src/components/Admin/Module/DalSettings.vue
+++ b/client/web/compose/src/components/Admin/Module/DalSettings.vue
@@ -16,6 +16,7 @@
         :reduce="s => s.connectionID"
         :placeholder="$t('connection.placeholder')"
         :get-option-label="getConnectionLabel"
+        size="sm"
       />
     </b-form-group>
 
diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index be49ab1de..7f4245c21 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -6,7 +6,7 @@
         data-test-id="button-back"
         variant="link"
         :disabled="processing"
-        class="text-dark back text-left text-nowrap p-1"
+        class="d-flex align-items-center text-dark back gap-1 text-decoration-none"
         @click.prevent="$emit('back')"
       >
         <font-awesome-icon
diff --git a/client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue b/client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue
index d37a52914..fe9911f35 100644
--- a/client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue
+++ b/client/web/compose/src/components/Namespaces/Importer/ImportConfiguration.vue
@@ -32,7 +32,7 @@
       <b-button
         data-test-id="button-back"
         variant="link"
-        class="text-dark back text-left text-nowrap p-1 text-decoration-none"
+        class="d-flex align-items-center text-dark back gap-1 text-decoration-none"
         @click="$emit('back')"
       >
         <font-awesome-icon
diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
index 89d14f921..7cf1ddba3 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -4,7 +4,7 @@
   >
     <b-form
       v-if="reminder"
-      class="flex-fill overflow-auto p-2 text-primary"
+      class="flex-fill overflow-auto text-primary"
       @submit.prevent
     >
       <b-form-group
@@ -12,7 +12,6 @@
       >
         <b-form-checkbox
           :checked="!!reminder.dismissedAt"
-          class="mt-2"
           @change="$emit('dismiss', reminder, $event)"
         >
           {{ $t('reminder.dismissed') }}
@@ -125,7 +124,7 @@
       <b-button
         data-test-id="button-back"
         variant="outline-light"
-        class="text-primary border-0"
+        class="d-flex align-items-center back text-primary border-0 gap-1"
         @click="$emit('back')"
       >
         <font-awesome-icon
diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index d7e1226fa..95a2061ee 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -163,7 +163,7 @@
 
         <div
           v-if="options.selectable && selected.length"
-          class="d-flex align-items-center flex-wrap align-items-center mt-2"
+          class="d-flex align-items-center flex-wrap align-items-center"
         >
           <div class="mr-1">
             {{ selectedRecordsDisplayText }}
@@ -610,7 +610,7 @@
       #footer
     >
       <div class="record-list-footer d-flex align-items-center flex-wrap justify-content-between px-3 py-2 gap-1">
-        <div class="d-flex align-items-center flex-wrap gap-1 gap-col-3">
+        <div class="d-flex align-items-center flex-wrap gap-3 gap-col-3">
           <div
             v-if="options.showTotalCount"
             class="text-nowrap text-truncate"
diff --git a/client/web/compose/src/components/PageBlocks/TabsBase.vue b/client/web/compose/src/components/PageBlocks/TabsBase.vue
index 4aa541cdb..646a37e6c 100644
--- a/client/web/compose/src/components/PageBlocks/TabsBase.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsBase.vue
@@ -3,7 +3,7 @@
     v-bind="$props"
     :scrollable-body="false"
     card-class="tabs-base-block-container"
-    header-class="border-0"
+    header-class="border-0 border-white"
     v-on="$listeners"
   >
     <div
diff --git a/client/web/privacy/src/components/Common/EditorToolbar.vue b/client/web/privacy/src/components/Common/EditorToolbar.vue
index aa64760cd..214f9ea1f 100644
--- a/client/web/privacy/src/components/Common/EditorToolbar.vue
+++ b/client/web/privacy/src/components/Common/EditorToolbar.vue
@@ -14,11 +14,11 @@
           variant="link"
           size="lg"
           :to="backLink"
-          class="d-flex align-items-center text-dark back"
+          class="d-flex align-items-center text-dark back text-decoration-none gap-1"
         >
           <font-awesome-icon
             :icon="['fas', 'chevron-left']"
-            class="back-icon mr-1"
+            class="back-icon"
           />
           {{ $t('general:label.back') }}
         </b-button>
diff --git a/client/web/reporter/src/components/EditorToolbar.vue b/client/web/reporter/src/components/EditorToolbar.vue
index e1d108692..b5c51bd88 100644
--- a/client/web/reporter/src/components/EditorToolbar.vue
+++ b/client/web/reporter/src/components/EditorToolbar.vue
@@ -7,9 +7,8 @@
         v-if="backLink"
         data-test-id="button-back"
         variant="link"
-        size="lg"
         :to="backLink"
-        class="text-dark back text-left text-nowrap p-1"
+        class="d-flex align-items-center text-dark back text-nowrap gap-1 text-decoration-none"
       >
         <font-awesome-icon
           :icon="['fas', 'chevron-left']"
diff --git a/client/web/reporter/src/components/Report/Blocks/Wrap/Card.vue b/client/web/reporter/src/components/Report/Blocks/Wrap/Card.vue
index d7b4f4e06..892004fb3 100644
--- a/client/web/reporter/src/components/Report/Blocks/Wrap/Card.vue
+++ b/client/web/reporter/src/components/Report/Blocks/Wrap/Card.vue
@@ -4,7 +4,7 @@
       no-body
       class="h-100 border-0 shadow-sm overflow-hidden"
     >
-      <b-card-header class="sticky-top border-0 border-bottom p-0">
+      <b-card-header class="sticky-top border-0 p-0">
         <slot
           name="header"
         />
diff --git a/client/web/reporter/src/components/Report/Blocks/index.vue b/client/web/reporter/src/components/Report/Blocks/index.vue
index 79501662b..5290104f5 100644
--- a/client/web/reporter/src/components/Report/Blocks/index.vue
+++ b/client/web/reporter/src/components/Report/Blocks/index.vue
@@ -9,8 +9,7 @@
     >
       <div
         v-if="block.title || block.description"
-        class="px-3"
-        style="padding-top: 0.75rem; padding-bottom: 0.75rem;"
+        class="p-3 border-bottom"
       >
         <h5
           v-if="block.title"
diff --git a/client/web/reporter/src/views/Layout.vue b/client/web/reporter/src/views/Layout.vue
index e7f8d0fe5..e52067c77 100644
--- a/client/web/reporter/src/views/Layout.vue
+++ b/client/web/reporter/src/views/Layout.vue
@@ -26,6 +26,7 @@
         <template #tools>
           <portal-target
             name="topbar-tools"
+            class="gap-1"
           />
         </template>
       </c-topbar>
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index fa8605561..51aecf43d 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex overflow-auto px-2 w-100"
+    class="d-flex overflow-auto p-2 w-100"
   >
     <portal to="topbar-title">
       {{ pageTitle }}
@@ -13,14 +13,16 @@
           :options="scenarioOptions"
           :get-option-key="getOptionKey"
           :placeholder="$t('builder:pick-scenario')"
+          size="sm"
           @input="refreshReport()"
         />
 
         <b-input-group-append>
           <b-button
             v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.configure-scenarios'), container: '#body' }"
-            variant="light"
+            variant="extra-light"
             :disabled="!canUpdate"
+            size="sm"
             @click="openScenarioConfigurator"
           >
             <font-awesome-icon
@@ -33,9 +35,8 @@
 
       <b-button
         :disabled="!canUpdate"
-        variant="info"
+        variant="extra-light"
         size="sm"
-        class="mr-1 ml-2"
         @click="openDatasourceConfigurator"
       >
         {{ $t('builder:datasources.label') }}
@@ -43,7 +44,6 @@
 
       <b-button-group
         size="sm"
-        class="mr-1"
       >
         <b-button
           variant="primary"
@@ -89,7 +89,7 @@
           >
             <div
               v-if="unsavedBlocks.has(index)"
-              v-b-tooltip.noninteractive.hover="{ title: $t('tooltip.unsavedChanges'), container: '#body' }"
+              v-b-tooltip.noninteractive.hover="{ title: $t('builder:tooltip.unsavedChanges'), container: '#body' }"
               class="btn border-0"
             >
               <font-awesome-icon
@@ -152,7 +152,7 @@
       scrollable
       size="xl"
       body-class="p-0 border-top-0"
-      header-class="pb-0 px-3 pt-3 border-bottom-0"
+      header-class="border-bottom-0"
       no-fade
       @ok="updateBlock()"
     >
diff --git a/client/web/reporter/src/views/Report/Edit.vue b/client/web/reporter/src/views/Report/Edit.vue
index 359b5e48c..c3406ae41 100644
--- a/client/web/reporter/src/views/Report/Edit.vue
+++ b/client/web/reporter/src/views/Report/Edit.vue
@@ -51,7 +51,6 @@
             <b-card-header
               v-if="!isNew"
               header-bg-variant="white border-bottom"
-              class="py-3"
             >
               <b-row
                 no-gutters
@@ -83,7 +82,7 @@
 
             <b-container
               fluid
-              class="px-4 pt-3"
+              class="py-3"
             >
               <b-row>
                 <b-col
@@ -135,6 +134,7 @@
               <b-form-group
                 :label="$t('description')"
                 label-class="text-primary"
+                class="mb-0"
               >
                 <b-form-textarea
                   v-model="report.meta.description"
diff --git a/client/web/reporter/src/views/Report/List.vue b/client/web/reporter/src/views/Report/List.vue
index 94b924c48..efe56d2b1 100644
--- a/client/web/reporter/src/views/Report/List.vue
+++ b/client/web/reporter/src/views/Report/List.vue
@@ -90,9 +90,7 @@
             />
           </b-button>
         </b-button-group>
-      </template>
 
-      <template #moreActions="{ item: r }">
         <b-dropdown
           v-if="r.canUpdateReport || r.canGrant || r.canDeleteReport"
           variant="outline-extra-light"
@@ -100,6 +98,7 @@
           no-caret
           lazy
           menu-class="m-0"
+          class="ml-2"
         >
           <template #button-content>
             <font-awesome-icon
@@ -216,12 +215,7 @@ export default {
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap',
-        },
-        {
-          key: 'moreActions',
-          label: '',
-          tdClass: 'text-right text-nowrap actions',
+          tdClass: 'text-right text-nowrap actions gap-1',
         },
       ]
     },
diff --git a/client/web/reporter/src/views/Report/View.vue b/client/web/reporter/src/views/Report/View.vue
index 89f327da8..ce64b8ae1 100644
--- a/client/web/reporter/src/views/Report/View.vue
+++ b/client/web/reporter/src/views/Report/View.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex overflow-auto px-2 w-100"
+    class="d-flex overflow-auto p-2 w-100"
   >
     <portal to="topbar-title">
       {{ pageTitle }}
@@ -13,14 +13,14 @@
         :options="scenarioOptions"
         :get-option-key="getOptionKey"
         :placeholder="$t('pick-scenario')"
-        style="max-width: 300px;"
+        size="sm"
+        style="max-width: 300px; min-width: 150px;"
         @input="refreshReport()"
       />
 
       <b-button-group
         v-if="canUpdate"
         size="sm"
-        class="mr-1"
       >
         <b-button
           variant="primary"
diff --git a/lib/js/src/reporter/types/display-elements/metric.ts b/lib/js/src/reporter/types/display-elements/metric.ts
index 18fb9ec7d..784f94a26 100644
--- a/lib/js/src/reporter/types/display-elements/metric.ts
+++ b/lib/js/src/reporter/types/display-elements/metric.ts
@@ -29,7 +29,7 @@ const defaults: Readonly<Options> = Object.freeze({
   suffix: '',
 
   color: '#162425',
-  backgroundColor: '#FFFFFF',
+  backgroundColor: '#FFFFFF00',
 })
 
 export class DisplayElementMetric extends DisplayElement {
diff --git a/lib/vue/src/components/input/CInputSelect.vue b/lib/vue/src/components/input/CInputSelect.vue
index 7b3554f28..73ca32e9e 100644
--- a/lib/vue/src/components/input/CInputSelect.vue
+++ b/lib/vue/src/components/input/CInputSelect.vue
@@ -161,7 +161,6 @@ export default {
   flex: 1 1 auto;
   margin-bottom: 0;
   font-size: .9rem !important;
-  border-radius: 0.25rem;
   font-family: var(--font-regular);
 
   .vs__selected-options {
@@ -284,6 +283,7 @@ export default {
   .vs__dropdown-toggle {
     min-height: calc(1.5em + 0.5rem + 4px);
     padding: 0.25rem calc(0.5rem - 2px);
+    border-radius: 0.2rem;
 
     .vs__selected {
       margin-top: 0.25rem;
@@ -305,6 +305,7 @@ export default {
   .vs__dropdown-toggle {
     min-height: calc(1.5em + 1rem + 4px);
     padding: .5rem calc(1rem - 2px);
+    border-radius: 0.3rem;
 
     .vs__selected {
       margin-top: .5rem;
diff --git a/lib/vue/src/components/navigation/CTopbar.vue b/lib/vue/src/components/navigation/CTopbar.vue
index 743614e58..cc35b480c 100644
--- a/lib/vue/src/components/navigation/CTopbar.vue
+++ b/lib/vue/src/components/navigation/CTopbar.vue
@@ -19,7 +19,7 @@
       <b-button
         v-if="!hideAppSelector && !settings.hideAppSelector"
         data-test-id="app-selector"
-        variant="outline-light"
+        variant="outline-extra-light"
         :href="appSelectorURL"
         title="Apps"
         size="lg"
@@ -35,7 +35,7 @@
         v-if="!settings.hideHelp"
         data-test-id="dropdown-helper"
         size="lg"
-        variant="outline-light"
+        variant="outline-extra-light"
         toggle-class="text-decoration-none text-dark rounded-circle border-0 w-100"
         menu-class="topbar-dropdown-menu border-0 shadow-sm text-dark mt-2"
         right
@@ -107,7 +107,7 @@
         v-if="!settings.hideProfile"
         data-test-id="dropdown-profile"
         data-v-onboarding="profile"
-        :variant="avatarExists ? 'link' : 'outline-light'"
+        :variant="avatarExists ? 'link' : 'outline-extra-light'"
         :toggle-class="`nav-icon text-decoration-none text-dark rounded-circle border ${avatarExists ? 'p-0' : ''}`"
         size="lg"
         right
diff --git a/lib/vue/src/components/reminders/CReminderSidebar.vue b/lib/vue/src/components/reminders/CReminderSidebar.vue
index 6b0c0ff53..e9eca8686 100644
--- a/lib/vue/src/components/reminders/CReminderSidebar.vue
+++ b/lib/vue/src/components/reminders/CReminderSidebar.vue
@@ -2,8 +2,8 @@
   <b-sidebar
     v-model="isVisible"
     :title="title"
-    header-class="d-flex align-items-center justify-content-between reminder-sidebar-header px-2 py-3 border-bottom"
-    body-class="d-flex flex-column overflow-hidden bg-white"
+    header-class="d-flex align-items-center justify-content-between reminder-sidebar-header p-3 border-bottom"
+    body-class="d-flex flex-column overflow-hidden bg-white p-3"
     :backdrop="isMobile"
     no-footer
     right
diff --git a/lib/vue/src/components/reporter/Viewers/CReportMetric.vue b/lib/vue/src/components/reporter/Viewers/CReportMetric.vue
index d4e6c8785..fda708dc2 100644
--- a/lib/vue/src/components/reporter/Viewers/CReportMetric.vue
+++ b/lib/vue/src/components/reporter/Viewers/CReportMetric.vue
@@ -45,7 +45,7 @@ export default {
     style () {
       return {
         fill: this.options.color || '#162425',
-        backgroundColor: this.options.backgroundColor || '#FFFFFF',
+        backgroundColor: this.options.backgroundColor || '#FFFFFF00',
       }
     },
 
diff --git a/lib/vue/src/components/reporter/Viewers/CReportTable.vue b/lib/vue/src/components/reporter/Viewers/CReportTable.vue
index 223362047..6fa3df0c6 100644
--- a/lib/vue/src/components/reporter/Viewers/CReportTable.vue
+++ b/lib/vue/src/components/reporter/Viewers/CReportTable.vue
@@ -128,7 +128,7 @@
         <b-button
           :disabled="!hasPrevPage"
           variant="link"
-          class="d-flex align-items-center text-dark"
+          class="d-flex align-items-center text-dark text-decoration-none"
           @click="goToPage('prevPage')"
         >
           <font-awesome-icon
@@ -140,7 +140,7 @@
         <b-button
           :disabled="!hasNextPage"
           variant="link"
-          class="d-flex align-items-center text-dark"
+          class="d-flex align-items-center text-dark text-decoration-none"
           @click="goToPage('nextPage')"
         >
           {{ labels.next }}
diff --git a/lib/vue/src/components/resourceList/CResourceList.vue b/lib/vue/src/components/resourceList/CResourceList.vue
index fbe41f2fa..1e96525f4 100644
--- a/lib/vue/src/components/resourceList/CResourceList.vue
+++ b/lib/vue/src/components/resourceList/CResourceList.vue
@@ -130,7 +130,7 @@
       #footer
     >
       <div class="resource-list-footer d-flex align-items-center flex-wrap justify-content-between px-3 py-2 gap-1">
-        <div class="d-flex align-items-center flex-wrap gap-1 gap-col-3">
+        <div class="d-flex align-items-center flex-wrap gap-3 gap-col-3">
           <div
             v-if="!hideTotal"
             class="text-nowrap text-truncate"
diff --git a/locale/en/corteza-webapp-reporter/builder.yaml b/locale/en/corteza-webapp-reporter/builder.yaml
index 82bbf75e4..7d6147ca7 100644
--- a/locale/en/corteza-webapp-reporter/builder.yaml
+++ b/locale/en/corteza-webapp-reporter/builder.yaml
@@ -64,6 +64,7 @@ tooltip:
   delete:
     block: Delete block
   configure-scenarios: Configure scenarios
+  unsavedChanges: Unsaved changes
 available-columns: Available columns
 selected-columns: Selected columns
 no-columns-found: No columns found
diff --git a/locale/en/corteza-webapp-reporter/general.yaml b/locale/en/corteza-webapp-reporter/general.yaml
index 6dce6d279..d0c3547f0 100644
--- a/locale/en/corteza-webapp-reporter/general.yaml
+++ b/locale/en/corteza-webapp-reporter/general.yaml
@@ -5,6 +5,7 @@ label:
   ascending: Ascending
   back: Back
   clear: Clear
+  cancel: Cancel
   delete: Delete
   descending: Descending
   loading: Loading
@@ -38,4 +39,3 @@ themes:
   labels:
     light: Light
     dark: Dark
-    
\ No newline at end of file
diff --git a/server/assets/src/scss/variables/18182031_webapp_variable.scss b/server/assets/src/scss/variables/18182031_webapp_variable.scss
index 38dec4a1d..908e2f0d9 100644
--- a/server/assets/src/scss/variables/18182031_webapp_variable.scss
+++ b/server/assets/src/scss/variables/18182031_webapp_variable.scss
@@ -69,9 +69,6 @@ $body-color: $black !default;
 $border-color: $extra-light !default;
 $hr-border-color: $border-color !default;
 
-// Modal
-$modal-backdrop-bg: $white !default;
-$modal-backdrop-opacity: .75 !default;
 
 // Options
 $enable-rounded:   true !default;
@@ -107,6 +104,11 @@ $btn-active-box-shadow: none !default;
 $btn-font-size-lg:  16px !default;
 $btn-font-family:   $font-medium !default;
 
+$list-group-hover-bg:               $light !default;
+$list-group-action-color: $black !default;
+$list-group-action-active-bg:       $primary !default;
+$list-group-action-active-color:    $black !default;
+
 // Tabs
 $nav-link-color:                    $black !default;
 $nav-tabs-border-color:             transparent !default;
@@ -155,7 +157,7 @@ $input-border-width:  2px !default;
 $input-focus-box-shadow:    none !default;
 $input-focus-border-color:  $primary !default;
 
-$input-placeholder-color: $extra-light !default;
+$input-placeholder-color: $secondary !default;
 
 // Corteza specific variables
 // Topbar