[sc-7470]: add book a demo button in header (#1055)

Also update left and right spaces on the layout to match the latest designs.
nuclia · Oct 9, 2023 · e6dca90 · e6dca90
1 parent cc4691c
commit e6dca90
Show file tree

Hide file tree

Showing 29 changed files with 84 additions and 28 deletions.
diff --git a/apps/dashboard/src/app/account/account-home/account-home.component.scss b/apps/dashboard/src/app/account/account-home/account-home.component.scss
@@ -1,8 +1,8 @@
 @import 'variables';
 
 .account-home {
-  max-width: calc(rhythm(90) * 2);
-  padding: 4.5vw var(--app-layout-margin-right);
+  max-width: calc(#{rhythm(90)} * 2);
+  padding: 4.5vw var(--app-layout-margin-right) 4.5vw var(--app-layout-margin-left);
 
   .container-row {
     display: flex;

diff --git a/apps/dashboard/src/app/account/account-kbs/account-kbs.component.scss b/apps/dashboard/src/app/account/account-kbs/account-kbs.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .account-kbs {
-  padding: 70px var(--app-layout-margin-right) 60px 5%;
+  padding: 70px var(--app-layout-margin-right) 60px var(--app-layout-margin-left);
   h2 {
     margin: 0 0 rhythm(1) 0;
   }

diff --git a/apps/dashboard/src/app/account/account-manage/account-manage.component.scss b/apps/dashboard/src/app/account/account-manage/account-manage.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .container {
-  padding: rhythm(9) var(--app-layout-margin-right) rhythm(8) 5%;
+  padding: rhythm(9) var(--app-layout-margin-right) rhythm(8) var(--app-layout-margin-left);
 }
 h1 {
   margin-bottom: rhythm(4);

diff --git a/apps/dashboard/src/app/account/account-nua/account-nua.component.scss b/apps/dashboard/src/app/account/account-nua/account-nua.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .account-nua {
-  padding: 70px var(--app-layout-margin-right) 60px 5%;
+  padding: 70px var(--app-layout-margin-right) 60px var(--app-layout-margin-left);
 }
 
 h2 {

diff --git a/apps/dashboard/src/app/account/account-nua/nua-activity/nua-activity.component.scss b/apps/dashboard/src/app/account/account-nua/nua-activity/nua-activity.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .nua-activity {
-  padding: 50px var(--app-layout-margin-right) 60px 5%;
+  padding: 50px var(--app-layout-margin-right) 60px var(--app-layout-margin-left);
   position: relative;
   min-height: 200px;
 }

diff --git a/apps/dashboard/src/app/account/account-users/account-users.component.scss b/apps/dashboard/src/app/account/account-users/account-users.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .account-users {
-  padding: 70px var(--app-layout-margin-right) 60px 5%;
+  padding: 70px var(--app-layout-margin-right) 60px var(--app-layout-margin-left);
   h2 {
     margin: 0 0 36px 0;
     font-weight: var(--stf-font-weight-bold);

diff --git a/apps/dashboard/src/app/activity/activity.component.scss b/apps/dashboard/src/app/activity/activity.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .activity {
-  padding: rhythm(6) var(--app-layout-margin-right) rhythm(7) 5%;
+  padding: rhythm(6) var(--app-layout-margin-right) rhythm(7) var(--app-layout-margin-left);
   position: relative;
   min-height: 200px;
 }

diff --git a/apps/dashboard/src/app/knowledge-box/knowledge-box-home/knowledge-box-home.component.scss b/apps/dashboard/src/app/knowledge-box/knowledge-box-home/knowledge-box-home.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .knowledge-box-home {
-  padding: rhythm(6) var(--app-layout-margin-right);
+  padding: rhythm(6) var(--app-layout-margin-right) rhythm(6) var(--app-layout-margin-left);
 
   $flex-gap: rhythm(3);
   $width-right-column: rhythm(40) + rhythm(1);

diff --git a/apps/dashboard/src/app/knowledge-box/knowledge-box-keys/knowledge-box-keys.component.scss b/apps/dashboard/src/app/knowledge-box/knowledge-box-keys/knowledge-box-keys.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .knowledge-box-keys {
-  padding: 70px var(--app-layout-margin-right);
+  padding: 70px var(--app-layout-margin-right) 70px var(--app-layout-margin-left);
 
   h2 {
     margin: 0 0 rhythm(0.25) 0;

diff --git a/libs/common/common.babel b/libs/common/common.babel
@@ -14194,6 +14194,37 @@
 							</concept_node>
 						</children>
 					</folder_node>
+					<concept_node>
+						<name>need-help-book-demo</name>
+						<description/>
+						<comment/>
+						<translations>
+							<translation>
+								<language>ca-ES</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>de-DE</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>en-US</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>es-ES</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>fr-FR</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>pt-PT</language>
+								<approved>false</approved>
+							</translation>
+						</translations>
+					</concept_node>
 					<folder_node>
 						<name>ner-add-entity-dialog</name>
 						<children>

diff --git a/libs/common/src/assets/i18n/ca.json b/libs/common/src/assets/i18n/ca.json
@@ -448,6 +448,7 @@
 	"modal.upload.queue_length": "Mida de la cua",
 	"modal.upload.title": "Puja els teus fitxers",
 	"modal.upload_folder": "Afegeix una carpeta",
+	"need-help-book-demo": "Necessitar ajuda? Reserva una demo!",
 	"ner-add-entity-dialog.title": "Afegeix NER",
 	"ner-family-dialog.family-color": "Color de la família NER",
 	"ner-family-dialog.family-color-placeholder": "Color hexadecimal (#ffdd1a)",

diff --git a/libs/common/src/assets/i18n/de.json b/libs/common/src/assets/i18n/de.json
@@ -449,6 +449,7 @@
 	"modal.upload.queue_length": "Warteschlangenlänge",
 	"modal.upload.title": "Laden Sie Ihre Dateien hoch",
 	"modal.upload_folder": "Fügen Sie einen Ordner hinzu",
+	"need-help-book-demo": "Brauchen Sie Hilfe? Buchen Sie eine Demo!",
 	"ner-add-entity-dialog.title": "NER hinzufügen",
 	"ner-family-dialog.family-color": "Farbe der NER-Familie",
 	"ner-family-dialog.family-color-placeholder": "Hexadezimale Farbe (#ffdd1a)",

diff --git a/libs/common/src/assets/i18n/en.json b/libs/common/src/assets/i18n/en.json
@@ -449,6 +449,7 @@
 	"modal.upload.queue_length": "Queue length",
 	"modal.upload.title": "Upload your files",
 	"modal.upload_folder": "Add a folder",
+	"need-help-book-demo": "Need help? Book a demo!",
 	"ner-add-entity-dialog.title": "Add NER",
 	"ner-family-dialog.family-color": "NER family color",
 	"ner-family-dialog.family-color-placeholder": "Hexadecimal color (#ffdd1a)",

diff --git a/libs/common/src/assets/i18n/es.json b/libs/common/src/assets/i18n/es.json
@@ -448,6 +448,7 @@
 	"modal.upload.queue_length": "Tamaño de la cola",
 	"modal.upload.title": "Sube tus ficheros",
 	"modal.upload_folder": "Añade una carpeta",
+	"need-help-book-demo": "¿Necesitas ayuda? ¡Reserve una demo!",
 	"ner-add-entity-dialog.title": "Añadir NER",
 	"ner-family-dialog.family-color": "Color de la familia NER",
 	"ner-family-dialog.family-color-placeholder": "Color hexadecimal (#ffdd1a)",

diff --git a/libs/common/src/assets/i18n/fr.json b/libs/common/src/assets/i18n/fr.json
@@ -449,6 +449,7 @@
 	"modal.upload.queue_length": "Longueur de la file d'attente",
 	"modal.upload.title": "Téléchargez vos fichiers",
 	"modal.upload_folder": "Ajouter un dossier",
+	"need-help-book-demo": "Besoin d'aide? Réservez une démo !",
 	"ner-add-entity-dialog.title": "Ajouter NER",
 	"ner-family-dialog.family-color": "Couleur de la famille NER",
 	"ner-family-dialog.family-color-placeholder": "Couleur hexadécimale (#ffdd1a)",

diff --git a/libs/common/src/assets/i18n/pt.json b/libs/common/src/assets/i18n/pt.json
@@ -449,6 +449,7 @@
 	"modal.upload.queue_length": "Comprimento da fila",
 	"modal.upload.title": "Carregue seus arquivos",
 	"modal.upload_folder": "Adicionar uma pasta",
+	"need-help-book-demo": "Preciso de ajuda? Agende uma demo!",
 	"ner-add-entity-dialog.title": "Adicionar NER",
 	"ner-family-dialog.family-color": "Cor da família NER",
 	"ner-family-dialog.family-color-placeholder": "Cor hexadecimal (#ffdd1a)",

diff --git a/libs/common/src/lib/base/base.module.ts b/libs/common/src/lib/base/base.module.ts
@@ -5,10 +5,11 @@ import { TopbarModule } from '../topbar';
 import { DashboardLayoutComponent } from './dashboard-layout/dashboard-layout.component';
 import { STFSidebarModule } from '../sidebar';
 import { NavbarModule } from '../navbar';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [BaseComponent, DashboardLayoutComponent],
   exports: [BaseComponent, DashboardLayoutComponent],
-  imports: [RouterModule, TopbarModule, STFSidebarModule, NavbarModule],
+  imports: [CommonModule, NavbarModule, RouterModule, STFSidebarModule, TopbarModule],
 })
 export class BaseModule {}
diff --git a/libs/common/src/lib/base/css-variables.scss b/libs/common/src/lib/base/css-variables.scss
@@ -2,7 +2,8 @@
   --app-min-width: 1024px;
   --app-background-color: var(--stf-gray-background);
   --app-topbar-height: 70px;
-  --app-layout-margin-right: 7.3vw;
+  --app-layout-margin-left: 6rem;
+  --app-layout-margin-right: 2rem;
 
   // z-index
   --app-zindex-topbar: 1000;

diff --git a/libs/common/src/lib/base/dashboard-layout/dashboard-layout.component.scss b/libs/common/src/lib/base/dashboard-layout/dashboard-layout.component.scss
@@ -1,7 +1,4 @@
-:host > ::ng-deep app-account-kbs {
-  margin: 22px;
-  display: block;
-}
+@import 'apps/dashboard/src/variables';
 
 stf-sidebar {
   top: var(--app-topbar-height) !important;

diff --git a/libs/common/src/lib/entities/entities.component.scss b/libs/common/src/lib/entities/entities.component.scss
@@ -2,7 +2,7 @@
 
 $page-padding-top: rhythm(5);
 $page-padding-bottom: rhythm(8);
-$page-padding-left: 5%;
+$page-padding-left: var(--app-layout-margin-left);
 $header-height: rhythm(12);
 $header-margin-bottom: rhythm(5);
 $navbar-width: rhythm(7);
@@ -95,7 +95,8 @@ $gap-family-selection: rhythm(7);
             transition: opacity $transition-hint;
           }
         }
-        &.selected-family, &:hover {
+        &.selected-family,
+        &:hover {
           .family-actions pa-button {
             opacity: 1;
           }

diff --git a/libs/common/src/lib/resources/resource-list/resource-list.component.scss b/libs/common/src/lib/resources/resource-list/resource-list.component.scss
@@ -3,7 +3,7 @@
 $table-breakpoint: 1400px;
 
 .resource-list {
-  padding: rhythm(5) var(--app-layout-margin-right) rhythm(8) 5%;
+  padding: rhythm(5) var(--app-layout-margin-right) rhythm(8) var(--app-layout-margin-left);
   position: relative;
   min-height: rhythm(24);
 }

diff --git a/libs/common/src/lib/search/search.component.scss b/libs/common/src/lib/search/search.component.scss
@@ -1,7 +1,7 @@
 @import 'variables';
 
 .search-page {
-  padding: rhythm(5) var(--app-layout-margin-right) rhythm(8) 5%;
+  padding: rhythm(5) var(--app-layout-margin-right) rhythm(8) var(--app-layout-margin-left);
 
   .search-bar-section {
     display: flex;

diff --git a/libs/common/src/lib/topbar/topbar.component.html b/libs/common/src/lib/topbar/topbar.component.html
@@ -17,6 +17,20 @@
       [alt]="!standalone ? 'Nuclia' : 'NucliaDB'" />
   </button>
 
+  <pa-button
+    *ngIf="showDemo"
+    kind="primary"
+    aspect="basic"
+    paFocusable
+    (click)="bookDemo()"
+    (keyup.enter)="bookDemo()">
+    <a
+      href="https://calendly.com/nuclia/30min?back=1&month=2023-10"
+      target="_blank">
+      {{ 'need-help-book-demo' | translate }}
+    </a>
+  </pa-button>
+
   <div class="topbar-actions">
     <pa-button
       *ngIf="!standalone && (accountType | async) && (isAccountManager | async)"

diff --git a/libs/common/src/lib/topbar/topbar.component.ts b/libs/common/src/lib/topbar/topbar.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { SDKService, STFTrackingService, UserService } from '@flaps/core';
+import { SDKService, UserService } from '@flaps/core';
 import { map, take } from 'rxjs';
 import { NavigationService } from '../services';
 import { StandaloneService } from '../services/standalone.service';
@@ -25,12 +25,13 @@ export class TopbarComponent {
   hasValidKey = this.standaloneService.hasValidKey;
   errorMessage = this.standaloneService.errorMessage;
 
+  showDemo = !this.standalone;
+
   constructor(
     private router: Router,
     private userService: UserService,
     private navigationService: NavigationService,
     private sdk: SDKService,
-    private tracking: STFTrackingService,
     private standaloneService: StandaloneService,
   ) {}
 
@@ -39,4 +40,8 @@ export class TopbarComponent {
       this.router.navigate([url]);
     });
   }
+
+  bookDemo() {
+    window.open('https://calendly.com/nuclia/30min?back=1&month=2023-10', 'blank', 'noreferrer');
+  }
 }
diff --git a/libs/common/src/lib/topbar/topbar.module.ts b/libs/common/src/lib/topbar/topbar.module.ts
@@ -11,6 +11,7 @@ import { KbSwitchComponent } from './kb-switch/kb-switch.component';
 import {
   PaButtonModule,
   PaDropdownModule,
+  PaFocusableModule,
   PaIconModule,
   PaPopupModule,
   PaTooltipModule,
@@ -31,6 +32,7 @@ import { DropdownButtonComponent } from '@nuclia/sistema';
     PaTooltipModule,
     DropdownButtonComponent,
     RouterModule,
+    PaFocusableModule,
   ],
   exports: [TopbarComponent],
   declarations: [TopbarComponent, KbSwitchComponent],

diff --git a/libs/common/src/lib/upload/upload-data/upload-data.component.scss b/libs/common/src/lib/upload/upload-data/upload-data.component.scss
@@ -1,7 +1,7 @@
 @import 'apps/dashboard/src/variables';
 
 .upload-data-page {
-  padding: rhythm(6) var(--app-layout-margin-right);
+  padding: rhythm(6) var(--app-layout-margin-right) rhythm(6) var(--app-layout-margin-left);
 
   .upload-options-container {
     display: flex;

diff --git a/libs/search-widget/public/icons/glyphs-sprite.svg b/libs/search-widget/public/icons/glyphs-sprite.svg
diff --git a/libs/sistema/assets/glyphs-sprite.svg b/libs/sistema/assets/glyphs-sprite.svg
diff --git a/libs/sistema/glyphs/help.svg b/libs/sistema/glyphs/help.svg