diff --git a/libs/openchallenges/assets/src/assets/images/discord-icon.svg b/libs/openchallenges/assets/src/assets/images/discord-icon.svg new file mode 100644 index 0000000000..dba775b381 --- /dev/null +++ b/libs/openchallenges/assets/src/assets/images/discord-icon.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss b/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss new file mode 100644 index 0000000000..ed50c1a960 --- /dev/null +++ b/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); + } +} diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html new file mode 100644 index 0000000000..b068149e54 --- /dev/null +++ b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html @@ -0,0 +1,15 @@ + + + {{ label }} + diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.scss b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.scss new file mode 100644 index 0000000000..693987fdc3 --- /dev/null +++ b/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; +} diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.ts b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.ts new file mode 100644 index 0000000000..c8148a23e5 --- /dev/null +++ b/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'; +} diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.html b/libs/openchallenges/ui/src/lib/navbar/navbar.component.html index d939631b7f..34f6bdb87e 100644 --- a/libs/openchallenges/ui/src/lib/navbar/navbar.component.html +++ b/libs/openchallenges/ui/src/lib/navbar/navbar.component.html @@ -14,6 +14,8 @@
+ + diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts b/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts index d8c2ee1a8f..0a706f1a19 100644 --- a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts +++ b/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'], diff --git a/libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts b/libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts index 17a16365fe..47d32e909b 100644 --- a/libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts +++ b/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, - // }); - // }); });