#17: add favorite button class

src/app/features/marketplace/marketplace.component.html

@@ -5,23 +5,25 @@
         <span>Marketplace | </span>
       </div>
       <div
-        style="
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 6px;
-          margin-top: 4px;
-        "
+        style="display: flex; flex-direction: row; align-items: center"
         *ngIf="loginUserId"
       >
-        <div>
-          <button style="margin: 0px" (click)="onAllCatalogsClick()">
-            All catalogs
-          </button>
-          <button style="margin: 0px" (click)="onMyFavoriteCatalogsClick()">
-            My favorite catalogs
-          </button>
-        </div>
+        <button
+          class="favorite-button"
+          mat-raised-button
+          [color]="!isOnMyFavoriteSelected ? 'primary' : ''"
+          (click)="onAllCatalogsClick()"
+        >
+          All catalogs
+        </button>
+        <button
+          class="favorite-button"
+          mat-raised-button
+          [color]="isOnMyFavoriteSelected ? 'primary' : ''"
+          (click)="onMyFavoriteCatalogsClick()"
+        >
+          My favorite catalogs
+        </button>
       </div>
     </div>
 

src/app/features/marketplace/marketplace.component.scss

@@ -121,3 +121,12 @@ mat-sidenav-content {
 .grid-list {
   padding: 20px;
 }
+
+.favorite-button {
+  border-radius: 1px !important;
+  height: 30px;
+  font-weight: 600;
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  padding: 0 16px;
+}

src/app/features/marketplace/marketplace.component.ts

@@ -33,6 +33,7 @@ import { ListItemComponent } from 'src/app/shared/components/list-item/list-item
 import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
 import { Observable, Subscription, map } from 'rxjs';
 import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'gp-marketplace',
@@ -48,6 +49,7 @@ import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.s
     SortByComponent,
     SolutionsToggleViewComponent,
     ListItemComponent,
+    MatButtonModule,
   ],
   templateUrl: './marketplace.component.html',
   styleUrl: './marketplace.component.scss',
@@ -89,6 +91,7 @@ export class MarketplaceComponent {
   private isFirstLoad = true;
   favoriteSolutionsMap: { [key: string]: boolean } = {};
   isLoading: boolean = false;
+  isOnMyFavoriteSelected = false;
 
   constructor(
     private publicSolutionsService: PublicSolutionsService,
@@ -348,9 +351,11 @@ export class MarketplaceComponent {
   }
 
   onAllCatalogsClick() {
+    this.isOnMyFavoriteSelected = false;
     this.loadPublicSolutions();
   }
   onMyFavoriteCatalogsClick() {
+    this.isOnMyFavoriteSelected = true;
     this.isLoading = true;
     this.privateCatalogsService
       .getFavoriteSolutions(this.loginUserId)