diff --git a/apps/angular-spotify/src/custom/ant/_button.scss b/apps/angular-spotify/src/custom/ant/_button.scss
index 910df448..0bd9a375 100644
--- a/apps/angular-spotify/src/custom/ant/_button.scss
+++ b/apps/angular-spotify/src/custom/ant/_button.scss
@@ -1,26 +1,13 @@
.ant-btn {
- @apply bg-sliderRail;
&.btn-with-icon {
- @apply text-white text-opacity-70;
+ @apply text-white text-opacity-70 bg-highlight bg-opacity-70 hover:text-white hover:bg-opacity-100 focus-visible:text-white focus-visible:bg-opacity-100;
padding: 4px 15px !important;
border: none;
display: flex;
align-items: center;
}
-
- &:hover,
- &:focus {
- border-color: #d9d9d9;
- @apply bg-sliderTrack bg-opacity-70 text-white;
- }
}
.ant-btn-primary {
- background: $primary;
- border: lighten($primary, 3%);
-
- &:hover {
- background: lighten($primary, 3%);
- border: lighten($primary, 3%);
- }
+ @apply bg-primary border-primary border-opacity-80 hover:bg-opacity-90 hover:border-opacity-90;
}
diff --git a/apps/angular-spotify/src/custom/ant/_variables.scss b/apps/angular-spotify/src/custom/ant/_variables.scss
deleted file mode 100644
index 21140579..00000000
--- a/apps/angular-spotify/src/custom/ant/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$primary: #1db954;
-$faded: rgba(0, 0, 0, 0.7);
diff --git a/apps/angular-spotify/src/custom/ant/index.scss b/apps/angular-spotify/src/custom/ant/index.scss
index 77936bba..007df6c1 100644
--- a/apps/angular-spotify/src/custom/ant/index.scss
+++ b/apps/angular-spotify/src/custom/ant/index.scss
@@ -1,4 +1,3 @@
-@import './variables';
@import './base';
@import './slider';
@import './switch';
diff --git a/apps/angular-spotify/src/custom/tailwind/_components.scss b/apps/angular-spotify/src/custom/tailwind/_components.scss
index ba55151c..3fa50688 100644
--- a/apps/angular-spotify/src/custom/tailwind/_components.scss
+++ b/apps/angular-spotify/src/custom/tailwind/_components.scss
@@ -6,14 +6,14 @@
.text-heading {
@apply text-2xl text-white;
}
-
+
.text-description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
user-select: none;
- @apply overflow-hidden whitespace-normal text-sm text-white text-opacity-50;
+ @apply overflow-hidden whitespace-normal text-sm text-white text-opacity-70;
}
.ellipsis-one-line {
@@ -59,12 +59,12 @@
.track-order {
display: none;
}
-
+
.track-play-button {
display: block;
}
}
- }
+ }
.common-grid {
gap: 24px;
diff --git a/apps/angular-spotify/src/styles.scss b/apps/angular-spotify/src/styles.scss
index e48f7ca6..cdcb57b5 100644
--- a/apps/angular-spotify/src/styles.scss
+++ b/apps/angular-spotify/src/styles.scss
@@ -13,15 +13,17 @@
@use './custom/ant';
:root {
- --background-base: 18 18 18;
- --text-base: 255 255 255;
+ --background-baseline: 18 18 18;
+ --background-highlight: 68 68 68;
+ --text-baseline: 255 255 255;
+ --text-primary: 29 185 84;
}
body {
min-width: 600px;
line-height: 20px;
letter-spacing: 0.015em;
- @apply h-full w-full absolute overflow-hidden flex flex-col bg-black text-white/70;
+ @apply h-full w-full absolute overflow-hidden flex flex-col bg-black text-white/70 text-base;
}
a, button {
diff --git a/libs/web/container-queries/project.json b/libs/web/container-queries/project.json
index e208568d..ccc8eec2 100644
--- a/libs/web/container-queries/project.json
+++ b/libs/web/container-queries/project.json
@@ -3,7 +3,7 @@
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/web/container-queries/src",
"prefix": "angular-spotify",
- "tags": [],
+ "tags": ["scope:web", "type:feature"],
"projectType": "library",
"targets": {
"test": {
diff --git a/libs/web/playlist/feature/detail/project.json b/libs/web/playlist/feature/detail/project.json
index 4faacdb6..89364177 100644
--- a/libs/web/playlist/feature/detail/project.json
+++ b/libs/web/playlist/feature/detail/project.json
@@ -14,6 +14,6 @@
}
}
},
- "tags": ["type:feature", "scope: web"],
+ "tags": ["type:feature", "scope:web"],
"name": "web-playlist-feature-detail"
}
diff --git a/libs/web/shared/ui/media/src/lib/media.component.scss b/libs/web/shared/ui/media/src/lib/media.component.scss
index cc739d4c..203d9b85 100644
--- a/libs/web/shared/ui/media/src/lib/media.component.scss
+++ b/libs/web/shared/ui/media/src/lib/media.component.scss
@@ -1,13 +1,10 @@
-$bg: #282828;
-
:host {
border-radius: 4px;
transition: background-color 0.3s ease;
- background-color: $bg;
- @apply flex flex-col p-4;
+ @apply flex flex-col p-4 bg-highlight bg-opacity-70;
&:hover {
- background-color: lighten($bg, 10%);
+ @apply bg-highlight;
.play-button-overlay {
opacity: 1;
diff --git a/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.html b/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.html
index 0ac7bdfa..57e7cba3 100644
--- a/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.html
+++ b/libs/web/shared/ui/tracks-loading/src/lib/tracks-loading.component.html
@@ -1,12 +1,12 @@
<div *ngIf="avatar" class="flex gap-8">
<as-skeleton class="w-32 h-32 flex-shrink-0"></as-skeleton>
<div class="flex flex-col flex-1 gap-4">
- <as-skeleton class="w-full h-6"></as-skeleton>
- <as-skeleton class="w-full h-10"></as-skeleton>
- <as-skeleton class="w-full h-6"></as-skeleton>
+ <as-skeleton class="w-full h-8"></as-skeleton>
+ <as-skeleton class="w-full h-12"></as-skeleton>
+ <as-skeleton class="w-full h-8"></as-skeleton>
</div>
</div>
<div *ngIf="!avatar" class="flex flex-col gap-4">
- <as-skeleton class="w-full h-6" *ngFor="let row of skeletonRows"></as-skeleton>
+ <as-skeleton class="w-full h-8" *ngFor="let row of skeletonRows"></as-skeleton>
</div>
diff --git a/libs/web/shell/feature/src/lib/web-shell.routes.ts b/libs/web/shell/feature/src/lib/web-shell.routes.ts
index 103ac0a7..80dbb6fe 100644
--- a/libs/web/shell/feature/src/lib/web-shell.routes.ts
+++ b/libs/web/shell/feature/src/lib/web-shell.routes.ts
@@ -43,6 +43,10 @@ export const webShellRoutes: Route[] = [
path: `artist`,
loadChildren: async () => (await import('@angular-spotify/web/artist/feature')).ArtistModule
},
+ {
+ path: 'container-queries',
+ loadComponent: async () => (await import('@angular-spotify/web/container-queries')).ContainerQueriesComponent
+ },
{
path: RouterUtil.Configuration.Visualizer,
loadChildren: async () =>
diff --git a/libs/web/shell/ui/nav-links/src/lib/nav-link/nav-link.component.scss b/libs/web/shell/ui/nav-links/src/lib/nav-link/nav-link.component.scss
index aaf1aa50..18661b15 100644
--- a/libs/web/shell/ui/nav-links/src/lib/nav-link/nav-link.component.scss
+++ b/libs/web/shell/ui/nav-links/src/lib/nav-link/nav-link.component.scss
@@ -1,5 +1,5 @@
.nav-link {
- @apply relative px-6 py-2 text-sm grid grid-cols-[40px_1fr] gap-4 items-center hover:bg-highlight transition-all;
+ @apply relative px-6 py-2 grid grid-cols-[40px_1fr] gap-4 items-center hover:bg-highlight transition-all;
&.active {
@apply text-white bg-highlight;
diff --git a/libs/web/shell/ui/nav-links/src/lib/nav-links.component.html b/libs/web/shell/ui/nav-links/src/lib/nav-links.component.html
index 17813497..f35c483b 100644
--- a/libs/web/shell/ui/nav-links/src/lib/nav-links.component.html
+++ b/libs/web/shell/ui/nav-links/src/lib/nav-links.component.html
@@ -1,4 +1,4 @@
-<div class="mx-6 separator"></div>
+<div class="mx-6 bg-highlight border-none h-[1px] min-h-[1px]"></div>
<ul class="pt-2 pb-1 px-0 overflow-auto" *ngIf="playlists$ | async as playlists">
<li *ngFor="let playlist of playlists.items">
<as-nav-link [playlist]="playlist" />
diff --git a/libs/web/shell/ui/nav-links/src/lib/nav-links.component.scss b/libs/web/shell/ui/nav-links/src/lib/nav-links.component.scss
index 30ac0c3a..346c375b 100644
--- a/libs/web/shell/ui/nav-links/src/lib/nav-links.component.scss
+++ b/libs/web/shell/ui/nav-links/src/lib/nav-links.component.scss
@@ -1,10 +1,3 @@
:host {
@apply pt-4 flex flex-col min-h-0;
}
-
-.separator {
- background-color: #282828;
- border: none;
- height: 1px;
- min-height: 1px;
-}
diff --git a/libs/web/shell/ui/top-bar/src/lib/top-bar.component.scss b/libs/web/shell/ui/top-bar/src/lib/top-bar.component.scss
index 3e15104e..a6da4013 100644
--- a/libs/web/shell/ui/top-bar/src/lib/top-bar.component.scss
+++ b/libs/web/shell/ui/top-bar/src/lib/top-bar.component.scss
@@ -17,6 +17,6 @@ $size: 32px;
position: relative;
cursor: pointer;
- @apply bg-sliderRail hover:bg-sliderTrack text-white/70;
+ @apply bg-highlight bg-opacity-70 hover:bg-highlight text-white/70;
transition: all 0.3s;
}
diff --git a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.html b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.html
index 00adb076..096b8410 100644
--- a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.html
+++ b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.html
@@ -1,12 +1,14 @@
<div class="user-info">
<ng-container *ngIf="userProduct$ | async as userProduct">
- <button type="button"
- class="btn-upgrade"
- (click)="openLocation()"
- aria-roledescription="upgrade-button"
- *ngIf="userProduct !== 'premium'">
+ <a
+ class="btn-upgrade"
+ href="https://www.spotify.com/us/premium/"
+ target="_blank"
+ aria-roledescription="upgrade-button"
+ *ngIf="userProduct !== 'premium'"
+ >
Upgrade
- </button>
+ </a>
</ng-container>
<div class="user-dropdown" nz-dropdown [nzDropdownMenu]="menu" [nzPlacement]="'bottomRight'">
@@ -19,6 +21,9 @@
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu class="dropdown-container">
+ <li nz-menu-item class="dropdown-item">
+ <a class="text-description" routerLink="/container-queries"> ⭐️ WDC 2023 </a>
+ </li>
<li nz-menu-item class="dropdown-item">
<a class="text-description" href="https://www.spotify.com/account/" target="_blank">
Profile
diff --git a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.scss b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.scss
index 5d442198..33e11ddb 100644
--- a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.scss
+++ b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.scss
@@ -1,34 +1,23 @@
-$black: rgba(0, 0, 0);
-$size: 32px;
-
-.user {
- &-info {
- display: flex;
- gap: 0.5rem;
- align-items: center;
- justify-content: center;
- }
- &-dropdown {
- background-color: rgba($black, 0.4);
- border-radius: 23px;
- height: $size;
- min-width: $size;
- border: 0;
- cursor: pointer;
- color: #fff;
- padding: 2px;
- @apply flex items-center justify-center;
+.user-info {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ justify-content: center;
+}
- &:hover {
- background-color: rgba($black, 0.8);
- }
+.user-dropdown {
+ border-radius: 23px;
+ border: 0;
+ cursor: pointer;
+ padding: 2px;
+ @apply bg-highlight text-white bg-opacity-70 hover:bg-opacity-100 flex items-center justify-center h-8 min-w-[32px];
- figure {
- margin: 0;
- }
+ figure {
+ margin: 0;
}
}
+
.rounded-img {
border-radius: 50%;
width: 100%;
@@ -37,22 +26,17 @@ $size: 32px;
}
.dropdown-container {
- background-color: #5a5a5a;
- font-size: '1.1rem';
+ @apply bg-highlight bg-opacity-70 text-lg;
.dropdown-item {
- @apply py-3;
+ @apply py-3 hover:bg-highlight hover:bg-opacity-90;
a {
- color: rgba(white, 0.8);
+ @apply text-white text-opacity-80 group-hover:text-red-700;
}
&:hover {
- background-color: hsla(0, 0%, 100%, 0.1);
text-decoration: none;
- a {
- @apply text-white;
- }
}
}
}
@@ -60,7 +44,6 @@ $size: 32px;
.btn-upgrade {
border: 1px solid #ffffffb3;
border-radius: 100vh;
- color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: 600;
@@ -68,12 +51,12 @@ $size: 32px;
padding: 5px 32px;
text-align: center;
text-transform: uppercase;
- -webkit-transition: all 33ms cubic-bezier(.3,0,0,1);
+ -webkit-transition: all 33ms cubic-bezier(.3, 0, 0, 1);
transition: all 33ms ease;
white-space: nowrap;
- background-color: #000;
+ @apply text-white bg-black;
&:hover {
- transform: scale(1.05);
+ transform: scale(1.05);
}
}
diff --git a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.ts b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.ts
index 4e50efc6..b7da8fc7 100644
--- a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.ts
+++ b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.component.ts
@@ -13,9 +13,4 @@ export class UserDropdownComponent {
userProduct$ = this.store.userProduct$;
constructor(private store: AuthStore) { }
-
- openLocation() {
- const url = 'https://www.spotify.com/us/premium/';
- window.open(url, '_blank');
- }
}
diff --git a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.module.ts b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.module.ts
index 2d572233..13513a1b 100644
--- a/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.module.ts
+++ b/libs/web/shell/ui/user-dropdown/src/lib/user-dropdown.module.ts
@@ -3,8 +3,9 @@ import { CommonModule } from '@angular/common';
import { UserDropdownComponent } from './user-dropdown.component';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { SvgIconsModule } from '@ngneat/svg-icon';
+import { RouterModule } from '@angular/router';
@NgModule({
- imports: [CommonModule, NzDropDownModule, SvgIconsModule],
+ imports: [CommonModule, NzDropDownModule, SvgIconsModule, RouterModule],
declarations: [UserDropdownComponent],
exports: [UserDropdownComponent]
})
diff --git a/libs/web/visualizer/ui/src/lib/web-visualizer-ui.component.scss b/libs/web/visualizer/ui/src/lib/web-visualizer-ui.component.scss
index 22a9da99..f72cfcad 100644
--- a/libs/web/visualizer/ui/src/lib/web-visualizer-ui.component.scss
+++ b/libs/web/visualizer/ui/src/lib/web-visualizer-ui.component.scss
@@ -1,6 +1,3 @@
-$size: 32px;
-$black: #000;
-
:host {
overflow: hidden;
}
@@ -17,18 +14,17 @@ $black: #000;
.action-btn {
@apply ml-2;
border: none;
- height: $size;
- width: $size;
border-radius: 50%;
- background-color: rgba($black, 0.7);
+ @apply bg-black bg-opacity-70 w-8 h-8;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
+
&:hover {
- background-color: rgba($black, 0.4);
+ @apply bg-opacity-40;
}
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
index d143b6fc..36617009 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,7 +15,7 @@ module.exports = {
nowPlayingBar: '72px'
},
colors: {
- primary: '#1db954',
+ primary: 'rgb(var(--text-primary) / <alpha-value>)',
sliderRail: '#535353',
sliderTrack: '#b3b3b3',
baseline: 'rgb(var(--background-baseline) / <alpha-value>)',