From 3deff7dc75382acb28c2c50f0c255901015d838b Mon Sep 17 00:00:00 2001 From: Trung Vo Date: Sat, 27 May 2023 11:22:00 +0800 Subject: [PATCH] refactor(wdc-2023): color variables: highlight, primary --- .../src/custom/ant/_button.scss | 17 +----- .../src/custom/ant/_variables.scss | 2 - .../angular-spotify/src/custom/ant/index.scss | 1 - .../src/custom/tailwind/_components.scss | 8 +-- apps/angular-spotify/src/styles.scss | 8 ++- libs/web/container-queries/project.json | 2 +- libs/web/playlist/feature/detail/project.json | 2 +- .../ui/media/src/lib/media.component.scss | 7 +-- .../src/lib/tracks-loading.component.html | 8 +-- .../shell/feature/src/lib/web-shell.routes.ts | 4 ++ .../src/lib/nav-link/nav-link.component.scss | 2 +- .../src/lib/nav-links.component.html | 2 +- .../src/lib/nav-links.component.scss | 7 --- .../ui/top-bar/src/lib/top-bar.component.scss | 2 +- .../src/lib/user-dropdown.component.html | 17 ++++-- .../src/lib/user-dropdown.component.scss | 59 +++++++------------ .../src/lib/user-dropdown.component.ts | 5 -- .../src/lib/user-dropdown.module.ts | 3 +- .../src/lib/web-visualizer-ui.component.scss | 10 +--- tailwind.config.js | 2 +- 20 files changed, 64 insertions(+), 104 deletions(-) delete mode 100644 apps/angular-spotify/src/custom/ant/_variables.scss 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 @@
- - - + + +
- +
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 @@ -
+