diff --git a/mobile/src/components/speaker-card/SpeakerCard.vue b/mobile/src/components/speaker-card/SpeakerCard.vue index 67a4c52f..5ac61abb 100644 --- a/mobile/src/components/speaker-card/SpeakerCard.vue +++ b/mobile/src/components/speaker-card/SpeakerCard.vue @@ -163,11 +163,11 @@ &._has-liked { &:before { width: 40%; - height: 70%; + height: 50%; right: 0; bottom: 0; transform: scale(1); - background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6) 30%, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6) 80%); + background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 30%, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.4) 80%); opacity: 1; filter: blur(32px); animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; @@ -183,7 +183,7 @@ background-position: right; background-size: cover; transform: scale(1); - opacity: 0.5; + opacity: 1; mix-blend-mode: overlay; animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; diff --git a/mobile/src/components/speaker-card/SpeakerCompactCard.vue b/mobile/src/components/speaker-card/SpeakerCompactCard.vue index fdacec7f..e7e4f8f4 100644 --- a/mobile/src/components/speaker-card/SpeakerCompactCard.vue +++ b/mobile/src/components/speaker-card/SpeakerCompactCard.vue @@ -257,6 +257,12 @@ border: 1px solid var(--app-primary); background-color: var(--app-background); + @media (prefers-color-scheme: dark) { + color: var(--app-white); + border: 1px solid var(--app-white); + background-color: transparent; + } + &-nb { display: flex; align-items: center; @@ -267,6 +273,11 @@ border-radius: 22px; background-color: var(--app-primary-shade); color: var(--app-white); + + @media (prefers-color-scheme: dark) { + border-right: 1px solid var(--app-white); + background-color: var(--app-medium--contrast); + } } } diff --git a/mobile/src/i18n/i18n-types.ts b/mobile/src/i18n/i18n-types.ts index 76a96f6a..0f0065b7 100644 --- a/mobile/src/i18n/i18n-types.ts +++ b/mobile/src/i18n/i18n-types.ts @@ -203,14 +203,6 @@ type RootTranslation = { * S​p​e​a​k​e​r​s */ Speakers: string - /** - * L​i​k​e​ ​s​p​e​a​k​e​r - */ - Like_Speaker: string - /** - * S​e​e​ ​t​h​e​ ​s​p​e​a​k​e​r​'​s​ ​p​a​g​e - */ - View_Profil_Speaker: string /** * W​e​l​c​o​m​e​ ​t​o */ @@ -778,14 +770,6 @@ export type TranslationFunctions = { * Speakers */ Speakers: () => LocalizedString - /** - * Like speaker - */ - Like_Speaker: () => LocalizedString - /** - * See the speaker's page - */ - View_Profil_Speaker: () => LocalizedString /** * Welcome to */ diff --git a/mobile/src/styles/components/_listModeSwitch.scss b/mobile/src/styles/components/_listModeSwitch.scss new file mode 100644 index 00000000..7a498623 --- /dev/null +++ b/mobile/src/styles/components/_listModeSwitch.scss @@ -0,0 +1,32 @@ +.listModesSwitch { + background-color: var(--app-background); + border-radius: 44px; + border: 1px solid var(--app-beige-line); + + &-button { + height: 38px; + width: 38px; + margin: 0; + --background: transparent; + --color: var(--app-primary); + --padding-start: 0; + --padding-end: 0; + + @media (prefers-color-scheme: dark) { + &.button-solid { + --background: transparent; + --color: var(--app-white); + } + } + + &._active { + --background: var(--app-primary); + --color: var(--app-white); + + @media (prefers-color-scheme: dark) { + --background: var(--app-white); + --color: var(--app-primary); + } + } + } +} diff --git a/mobile/src/styles/main.scss b/mobile/src/styles/main.scss index b9304320..c8594bc0 100644 --- a/mobile/src/styles/main.scss +++ b/mobile/src/styles/main.scss @@ -9,6 +9,7 @@ /* ~ COMPONENTS*/ @import "@/styles/components/avatar.scss"; @import "@/styles/components/listCardsButtons.scss"; +@import "@/styles/components/listModeSwitch.scss"; @import "@/styles/components/tabsSelection.scss"; /* ~ BASE */ diff --git a/mobile/src/styles/utils/_animations.scss b/mobile/src/styles/utils/_animations.scss index bb3930dc..cc9c8c70 100644 --- a/mobile/src/styles/utils/_animations.scss +++ b/mobile/src/styles/utils/_animations.scss @@ -5,7 +5,7 @@ } 100% { transform: scale(1); - opacity: 1; + opacity: 0.7; } } diff --git a/mobile/src/styles/utils/_variables.scss b/mobile/src/styles/utils/_variables.scss index b262bcd0..ff88e24d 100644 --- a/mobile/src/styles/utils/_variables.scss +++ b/mobile/src/styles/utils/_variables.scss @@ -26,6 +26,8 @@ --app-white-90: rgba(255, 255, 255, 0.9); --app-white-80: rgba(255, 255, 255, 0.8); --app-white-70: rgba(255, 255, 255, 0.7); + --app-white-60: rgba(255, 255, 255, 0.6); + --app-white-50: rgba(255, 255, 255, 0.5); --app-primary: #0F0F0F; --app-primary-rgb: 15, 15, 15; diff --git a/mobile/src/styles/vendors/ionic/customs/_custom-ion-list.scss b/mobile/src/styles/vendors/ionic/customs/_custom-ion-list.scss index 5085648a..fdaff9e5 100644 --- a/mobile/src/styles/vendors/ionic/customs/_custom-ion-list.scss +++ b/mobile/src/styles/vendors/ionic/customs/_custom-ion-list.scss @@ -31,7 +31,7 @@ } ion-toggle { - --track-background-checked: var(--voxxrin-event-theme-colors-primary-hex); + --track-background-checked: var(--voxxrin-event-theme-colors-secondary-hex); } } -} \ No newline at end of file +} diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue index 8b34b71d..d0453978 100644 --- a/mobile/src/views/event/SpeakersDirectoryPage.vue +++ b/mobile/src/views/event/SpeakersDirectoryPage.vue @@ -5,6 +5,14 @@ {{ LL.Speakers() }} +
+ + + + + + +
@@ -26,6 +34,7 @@ import PoweredVoxxrin from "@/components/ui/PoweredVoxxrin.vue"; import SpeakerCard from "@/components/speaker-card/SpeakerCard.vue"; import SpeakerCompactCard from "@/components/speaker-card/SpeakerCompactCard.vue"; + import {albums, list} from "ionicons/icons"; const { LL } = typesafeI18n()