refactor(wdc-2023): color variables: highlight, primary

trungvose · May 27, 2023 · 3deff7d · 3deff7d
1 parent b10ed9f
commit 3deff7d
Show file tree

Hide file tree

Showing 20 changed files with 64 additions and 104 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,43 +26,37 @@ $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;
-      }
     }
   }
 }
 
 .btn-upgrade {
   border: 1px solid #ffffffb3;
   border-radius: 100vh;
-  color: #fff;
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.5px;
   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
@@ -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
@@ -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
@@ -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
@@ -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>)',