c1: Update favicon | zero state font weight | font | logo (#481)

* Update favicon and zero state font weight

* Update font

* update logo

angular.json

@@ -24,7 +24,6 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
@@ -89,7 +88,6 @@
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
@@ -124,7 +122,6 @@
               "node_modules/primeng/resources/primeng.min.css"
             ],
             "assets": [
-              "src/favicon.ico",
               "src/assets"
             ],
             "compodocArgs": [
@@ -146,7 +143,6 @@
               "node_modules/primeng/resources/primeng.min.css"
             ],
             "assets": [
-              "src/favicon.ico",
               "src/assets"
             ],
             "configDir": ".storybook",

src/app/branding/branding-config.ts

@@ -4,7 +4,7 @@ import { FeatureConfiguration } from '../core/models/branding/feature-configurat
 import { KbArticle } from '../core/models/branding/kb-article.model';
 import config from './config.json';
 
-export const brandingConfig: BrandingConfiguration = config;
+export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
 
 const featureConfigs: FeatureConfiguration = {
     fyle: {

src/app/core/models/branding/branding-configuration.model.ts

@@ -1,6 +1,6 @@
 export type BrandingConfiguration = {
     brandName: string;
     webpageTitle: string;
-    brandId: string;
+    brandId: 'fyle' | 'co';
     supportEmail: string;
 };

src/app/core/services/common/branding.service.ts

@@ -3,6 +3,11 @@ import { Inject, Injectable } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { brandingConfig } from 'src/app/branding/branding-config';
 
+const faviconMap = {
+  'fyle': 'favicon.ico',
+  'co': 'favicon.png'
+};
+
 @Injectable({
   providedIn: 'root'
 })
@@ -15,7 +20,7 @@ export class BrandingService {
 
   private setupBrandingConfig(): void {
     this.title.setTitle(brandingConfig.webpageTitle);
-    this.document.getElementById('appFavicon')?.setAttribute('href', `assets/${brandingConfig.brandId}/favicon.ico`);
+    this.document.getElementById('appFavicon')?.setAttribute('href', `assets/${brandingConfig.brandId}/${faviconMap[brandingConfig.brandId]}`);
     this.document.documentElement.setAttribute('data-theme', brandingConfig.brandId);
   }
 

src/app/integrations/landing/landing.component.html

@@ -62,7 +62,7 @@
                 </div>
                 <div>
                     <div class="landing--accounting-app tw-mr-20-px" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
-                        <img src="assets/logos/quickbooks-logo.png" width="110px" height="60px" />
+                        <img src="assets/logos/quickbooks-logo.png" width="180px"  />
                         <span class="landing--accounting-app-name">
                             QuickBooks Online
                             <svg-icon-sprite *ngIf="!exposeOnlyQBOApp" src="open-in-new-tab" width="16px" height="16px" class="landing--accounting-app-open"></svg-icon-sprite>

src/app/integrations/qbd/main/dashboard/dashboard.component.html

@@ -33,7 +33,7 @@ <h5 class="tw-text-14-px tw-font-400 tw-text-slightly-normal-text-color tw-pt-2-
                     </div>
                     <div>
                         <h3 class="tw-text-20-px tw-font-400 tw-text-normal-text-color">You are all caught up!</h3>
-                        <h5 class="tw-text-14-px tw-font-600 tw-text-faded-text-color tw-pt-4-px"> There are no expense in {{ brandingConfig.brandName }} as per the configuration setup to export.</h5>
+                        <h5 class="tw-text-14-px tw-font-400 tw-text-faded-text-color tw-pt-4-px"> There are no expense in {{ brandingConfig.brandName }} as per the configuration setup to export.</h5>
                     </div>
                 </div>
                 <div>

src/app/integrations/si/main/dashboard/dashboard.component.html

@@ -68,7 +68,7 @@ <h5>{{ exportableExpenseGroupIds.length }} new expense{{(exportableExpenseGroupI
         <div class="tw-text-center">
             <img *ngIf="illustrationsAllowed" class="tw-pr-4" src="assets/illustrations/dashboard-illustration.svg" alt="">
             <p class="tw-pt-8 tw-font-400 tw-text-14-px">Looks like you have</p>
-            <p class="tw-pt-4-px tw-font-600 tw-text-14-px">0 expenses to export right now</p>
+            <p class="tw-pt-4-px tw-font-400 tw-text-14-px">0 expenses to export right now</p>
         </div>
     </div>
     <div *ngIf="lastExport || exportableExpenseGroupIds.length" class="tw-mt-24-px tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator">

src/app/integrations/si/main/export-log/completed-export-log/completed-export-log.component.html

@@ -96,7 +96,7 @@ <h5 class="tw-font-400 !tw-text-12-px tw-text-placeholder">
                 <img *ngIf="illustrationsAllowed" src="assets/illustrations/search-result-empty.svg" width="200px" hight="200px" class="tw-inline-block">
                 <div class="tw-pt-12-px">
                     <h4 class="tw-font-400 tw-text-14-px tw-text-slightly-normal-text-color">Sorry, no results found!</h4>
-                    <p class="tw-font-600 tw-text-14-px tw-text-faded-text-color tw-pt-4-px">We could not find what you were looking for.<br>Kindly check the keywords again.</p>
+                    <p class="tw-font-400 tw-text-14-px tw-text-faded-text-color tw-pt-4-px">We could not find what you were looking for.<br>Kindly check the keywords again.</p>
                 </div>
             </div>
         </div>
@@ -108,7 +108,7 @@ <h4 class="tw-font-400 tw-text-14-px tw-text-slightly-normal-text-color">Sorry,
                 <img *ngIf="illustrationsAllowed" src="assets/illustrations/integrations-zero-state.svg" width="200px" hight="200px" class="tw-inline-block">
                 <div class="tw-pt-20-px">
                     <h4 class="tw-font-400 !tw-text-14-px tw-text-slightly-normal-text-color">No records to show yet!</h4>
-                    <p class="tw-pt-4-px tw-font-600 !tw-text-14-px tw-text-faded-text-color">All your successful exports and their details<br>
+                    <p class="tw-pt-4-px tw-font-400 !tw-text-14-px tw-text-faded-text-color">All your successful exports and their details<br>
                         will be stored here.</p>
                 </div>
             </div>

src/app/integrations/si/main/export-log/skip-export-log/skip-export-log.component.html

@@ -82,7 +82,7 @@ <h5 *ngIf="false" class="tw-font-400 !tw-text-12-px tw-text-placeholder">
                 <img *ngIf="illustrationsAllowed" src="assets/illustrations/search-result-empty.svg" width="200px" hight="200px" class="tw-inline-block">
                 <div class="tw-pt-12-px">
                     <h4 class="tw-font-400 tw-text-14-px tw-text-slightly-normal-text-color">Sorry, no results found!</h4>
-                    <p class="tw-font-600 tw-text-14-px tw-text-faded-text-color tw-pt-4-px">We could not find what you were looking for.<br>Kindly check the keywords again.</p>
+                    <p class="tw-font-400 tw-text-14-px tw-text-faded-text-color tw-pt-4-px">We could not find what you were looking for.<br>Kindly check the keywords again.</p>
                 </div>
             </div>
         </div>
@@ -93,7 +93,7 @@ <h4 class="tw-font-400 tw-text-14-px tw-text-slightly-normal-text-color">Sorry,
                 <img *ngIf="illustrationsAllowed" src="assets/illustrations/integrations-zero-state.svg" width="200px" hight="200px" class="tw-inline-block">
                 <div class="tw-pt-20-px">
                     <h4 class="tw-font-400 !tw-text-14-px tw-text-slightly-normal-text-color">No records to show yet!</h4>
-                    <p class="tw-pt-4-px tw-font-600 !tw-text-14-px tw-text-faded-text-color">All your expenses that were skipped from exporting<br>
+                    <p class="tw-pt-4-px tw-font-400 !tw-text-14-px tw-text-faded-text-color">All your expenses that were skipped from exporting<br>
                         will be stored here.</p>
                 </div>
             </div>

src/app/shared/components/helper/zero-state/zero-state.component.html

@@ -2,6 +2,6 @@
     <div class="tw-text-center">
         <img *ngIf="illustrationsAllowed" class="tw-pr-4" [src]="zeroStateImageURL" alt="Zero State">
         <p class="tw-pt-8 tw-font-400 tw-text-14-px">{{headerText}}</p>
-        <p class="tw-pt-4-px tw-font-600 !tw-text-14-px tw-text-faded-text-color tw-max-w-sm tw-text-pretty">{{subHeaderText}}</p>
+        <p class="tw-pt-4-px tw-font-400 !tw-text-14-px tw-text-faded-text-color tw-max-w-sm tw-text-pretty">{{subHeaderText}}</p>
     </div>
 </div>

src/app/shared/components/qbd/core/zero-state-with-illustration/zero-state-with-illustration.component.html

@@ -3,7 +3,7 @@
         <img *ngIf="illustrationsAllowed" src="assets/illustrations/zero-state.svg" width="200px" hight="200px" class="tw-inline-block">
         <div class="tw-pt-20-px">
             <h4 class="tw-font-400 !tw-text-14-px tw-text-slightly-normal-text-color">{{mainText}}</h4>
-            <p class="tw-pt-4-px tw-font-600 !tw-text-14-px tw-text-faded-text-color tw-max-w-sm tw-break-words">{{subText}}</p>
+            <p class="tw-pt-4-px tw-font-400 !tw-text-14-px tw-text-faded-text-color tw-max-w-sm tw-break-words">{{subText}}</p>
         </div>
     </div>
 </div>

src/styles.scss

@@ -3,9 +3,15 @@
 @tailwind utilities;
 
 // Import all the themes here
-@import 'assets/themes/fyle.scss';
+@import 'assets/themes/theme.scss';
 
 
+
+@font-face {
+    font-family: "Optimist";
+    src: url('./assets/fonts/Optimist.woff2') format('woff2');
+}
+
 html,
 body {
     @apply tw-h-[100%] tw-leading-19;