-
+
+
+
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
@@ -52,7 +54,7 @@
color-scheme="secondary"
data-testid="create-new-contact"
icon="filter"
- @click="onToggleFilter"
+ @click="toggleFilter"
>
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
@@ -73,7 +75,7 @@
color-scheme="success"
icon="person-add"
data-testid="create-new-contact"
- @click="onToggleCreate"
+ @click="toggleCreate"
>
{{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
@@ -83,7 +85,7 @@
color-scheme="info"
icon="upload"
class="clear"
- @click="onToggleImport"
+ @click="toggleImport"
>
{{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
@@ -91,9 +93,9 @@
{{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
@@ -121,30 +123,6 @@ export default {
type: [String, Number],
default: 0,
},
- onInputSearch: {
- type: Function,
- default: () => {},
- },
- onSearchSubmit: {
- type: Function,
- default: () => {},
- },
- onToggleCreate: {
- type: Function,
- default: () => {},
- },
- onToggleImport: {
- type: Function,
- default: () => {},
- },
- onExportSubmit: {
- type: Function,
- default: () => {},
- },
- onToggleFilter: {
- type: Function,
- default: () => {},
- },
},
data() {
return {
@@ -176,6 +154,24 @@ export default {
onToggleDeleteSegmentsModal() {
this.$emit('on-toggle-delete-filter');
},
+ toggleCreate() {
+ this.$emit('on-toggle-create');
+ },
+ toggleFilter() {
+ this.$emit('on-toggle-filter');
+ },
+ toggleImport() {
+ this.$emit('on-toggle-import');
+ },
+ submitExport() {
+ this.$emit('on-export-submit');
+ },
+ submitSearch() {
+ this.$emit('on-search-submit');
+ },
+ inputSearch(event) {
+ this.$emit('on-input-search', event);
+ },
},
};
@@ -220,20 +216,26 @@ export default {
margin-right: var(--space-small);
margin-left: var(--space-small);
- .search-icon {
+ .search-icon-container {
+ display: flex;
+ align-items: center;
position: absolute;
- top: 1px;
+ height: 100%;
left: var(--space-one);
- height: 3.8rem;
- line-height: 3.6rem;
- font-size: var(--font-size-medium);
- color: var(--b-700);
+
+ .search-icon {
+ height: var(--font-size-medium);
+ line-height: 3.6rem;
+ font-size: var(--font-size-small);
+ color: var(--b-700);
+ }
}
.contact-search {
margin: 0;
height: 3.8rem;
width: 100%;
- padding-left: var(--space-large);
+ font-size: var(--font-size-small);
+ padding-left: calc(var(--space-large) + var(--space-smaller));
padding-right: 6rem;
border-color: var(--s-100);
}
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 992be124f..c77b287fa 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -169,6 +169,7 @@
"subtract-outline": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
"tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
"upload-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z",
+ "download-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Zm-6-3a.5.5 0 0 1 1 0v4.793l1.646-1.647a.5.5 0 0 1 .708.708l-2.5 2.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 .708-.708L16 18.293V13.5Z",
"video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
"video-add-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-1.063c.154-.478.255-.98.294-1.5h.769a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6h-8.5A1.75 1.75 0 0 0 3.5 7.75v3.982A6.517 6.517 0 0 0 2 12.81V7.75A3.25 3.25 0 0 1 5.25 4.5h8.5Zm6.75 3.073L17 9.674v4.651l3.5 2.1V7.573ZM12 17.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0ZM7 18l.001 2.503a.5.5 0 1 1-1 0V18H3.496a.5.5 0 0 1 0-1H6v-2.5a.5.5 0 1 1 1 0V17h2.497a.5.5 0 0 1 0 1H7Z",
"warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",