feat(openchallenges): add link to our Discord server to the OC navbar (…

…#2283)

* Add Discord button to the navbar

* Cleanup

* Add target property to link

libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  $config: mat.get-color-config($theme);
+  $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+
+  // add color-related scss here
+}
+
+@mixin typography($theme) {}
+
+@mixin theme($theme) {
+  $color-config: mat.get-color-config($theme);
+  @if $color-config != null {
+    @include color($theme);
+  }
+
+  $typography-config: mat.get-typography-config($theme);
+  @if $typography-config != null {
+    @include typography($theme);
+  }
+}

libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html

@@ -0,0 +1,15 @@
+<a
+  mat-button
+  class="docs-button"
+  [href]="href"
+  aria-label="OpenChallenges Discord server"
+  target="_blank"
+  rel="noreferrer"
+>
+  <img
+    alt="OpenChallenges Discord server"
+    class="discord-logo"
+    src="/openchallenges-assets/images/discord-icon.svg"
+  />
+  {{ label }}
+</a>

libs/openchallenges/ui/src/lib/discord-button/discord-button.component.scss

@@ -0,0 +1,5 @@
+.discord-logo {
+  height: 21px;
+  margin: 0 7px 2px 0;
+  vertical-align: middle;
+}

libs/openchallenges/ui/src/lib/discord-button/discord-button.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+
+@Component({
+  selector: 'openchallenges-discord-button',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule],
+  templateUrl: './discord-button.component.html',
+  styleUrls: ['./discord-button.component.scss'],
+})
+export class DiscordButtonComponent {
+  @Input({ required: false }) label = 'Discord';
+  @Input({ required: false }) href = 'https://discord.gg/6PGt7nkcwG';
+}

libs/openchallenges/ui/src/lib/navbar/navbar.component.html

@@ -14,6 +14,8 @@
 
   <div class="flex-spacer"></div>
 
+  <openchallenges-discord-button />
+
   <!-- <a mat-button class="navbar-item" *ngIf="!isLoggedIn" routerLink="/login" aria-label="Log In">
     Log In
   </a> -->

libs/openchallenges/ui/src/lib/navbar/navbar.component.ts

@@ -1,13 +1,13 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { Avatar } from '../avatar/avatar';
 import { EMPTY_AVATAR } from '../avatar/mock-avatars';
 import { MenuItem } from '../user-button/menu-item';
-import { NavbarSection } from './navbar-section';
-import { ButtonGithubComponent } from '../button-github/button-github.component';
-import { CommonModule } from '@angular/common';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { RouterModule } from '@angular/router';
 import { UserButtonComponent } from '../user-button/user-button.component';
+import { DiscordButtonComponent } from '../discord-button/discord-button.component';
+import { NavbarSection } from './navbar-section';
 
 @Component({
   selector: 'openchallenges-navbar',
@@ -16,8 +16,8 @@ import { UserButtonComponent } from '../user-button/user-button.component';
     CommonModule,
     RouterModule,
     MatButtonModule,
-    ButtonGithubComponent,
     UserButtonComponent,
+    DiscordButtonComponent,
   ],
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],

libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts

@@ -54,14 +54,4 @@ describe('OrganizationCardComponent', () => {
       size: 160,
     });
   });
-
-  // it('login property of org should be used for orgAvatar name', () => {
-  //   component.organization.name = '';
-  //   fixture.detectChanges();
-  //   expect(component.organizationAvatar).toEqual({
-  //     name: MOCK_ORGANIZATIONS[0].login.replace(/-/g, ' '),
-  //     src: '',
-  //     size: 160,
-  //   });
-  // });
 });