1137: Adding new intro slides #3014
Conversation
bahaaTuffaha
requested review from
steffenkleinle,
ztefanie,
f1sh1918 and
LeandraH
as code owners
| @@ -42,15 +41,13 @@ type SlideContentProps = { | |||
| const SlideContent = ({ item, width }: SlideContentProps): ReactElement => ( | |||
| <ScrollView | |||
| contentContainerStyle={{ | |||
| flexGrow: 1, | |||
| height: '100%', | |||
| @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next' | |||
| import { FlatList, useWindowDimensions, ViewToken } from 'react-native' | |||
| import styled, { css } from 'styled-components/native' | |||
|
|
|||
| import welcome from 'build-configs/common/assets/welcome.svg' | |||
There was a problem hiding this comment.
🔧 Please don't import assets directly. Instead, add them to build config
| @@ -18,41 +19,49 @@ const Container = styled.View<{ width: number }>` | |||
| flex: 1; | |||
| flex-direction: column; | |||
| width: ${props => props.width}px; | |||
| justify-content: space-between; | |||
| padding-bottom: 30%; | |||
| background-color: white; | |||
There was a problem hiding this comment.
| background-color: white; | |
| background-color: ${props => props.theme.colors.backgroundColor}; |
| /* flex: 1; */ | ||
| width: 139px; | ||
| height: 40px; |
There was a problem hiding this comment.
I think we should not set a fixed width and instead approximate it with the corresponding padding, e.g.
| /* flex: 1; */ | |
| width: 139px; | |
| height: 40px; | |
| padding: 12px 32px; |
There was a problem hiding this comment.
This is StyledButton ...using padding for the button? 🤔
| Search: styled(icons.Search)` | ||
| ${ImageStyle}; | ||
| `, | ||
| Events: styled(icons.Events)` | ||
| Directions: styled(icons.directions)` |
There was a problem hiding this comment.
🔧 Please stick to our internal naming pois (same for all other occurrences)
| Directions: styled(icons.directions)` | |
| Pois: styled(icons.pois)` |
Furthermore, please only show this slide if pois is enabled in the feature flags in the build config.
| platforms: # relevant platforms, possible values: web, android and ios | ||
| - android | ||
| - ios | ||
| en: Added new intro screens. |
There was a problem hiding this comment.
| en: Added new intro screens. | |
| en: Redesigned our app intro. | |
| de: Neues Design für unsere App-Einführung. |
| directions: directionsIcon, | ||
| Language: languageIcon, | ||
| Search: searchIcon, | ||
| Offline: offlineIcon, | ||
| information: informationIcon, |
There was a problem hiding this comment.
🔧 Please keep the naming consistent here and user upper case names
| Language: integreatIntroLanguageIcon, | ||
| Search: integreatIntroSearchIcon, | ||
| }, | ||
| intro: commonIntros, |
There was a problem hiding this comment.
Very nice that we can just use this for every build config, nice implementation! 🎉 We could even think of implementing this for aschaffenburg easily 🤔 I'll get back to you in regards to that.
| border-radius: 5px; | ||
| margin: 0 4px; | ||
| margin: 0 18px; |
There was a problem hiding this comment.
💭 Perhaps we should increase the touch area that responds to press, I find it quite hard at the moment to actually press a dot and go to a specific slide
| width: 10px; | ||
| height: 10px; | ||
| width: 12px; | ||
| height: 12px; | ||
| border-radius: 5px; |
There was a problem hiding this comment.
🔧 Please adjust the radius as well, otherwise the dots are not circles as shown in the design
| border-radius: 5px; | |
| border-radius: 6px; |
| "offline": "Funktioniert auch offline", | ||
| "offlineDescription": "Du hast nicht immer Internet? Kein Problem. Du kannst Integreat auch ohne Internet benutzen.", | ||
| "information": "Aktuelle Informationen", | ||
| "informationDescription": "Was gibt es Neues in deiner Nähe? Finde es heraus in Integreat.", |
There was a problem hiding this comment.
🔧 There was a mean LSEP hidden in the translation:
| "informationDescription": "Was gibt es Neues in deiner Nähe? Finde es heraus in Integreat.", | |
| "informationDescription": "Was gibt es Neues in deiner Nähe? Finde es heraus in Integreat.", |
| "languageChange": "Sprachwechsel", | ||
| "languageChangeDescription": "Einfaches Umstellen der Sprache einzelner Seiten", | ||
| "welcome": "Willkommen bei {{appName}}", | ||
| "appDescription": "In {{appName}} findest du Antworten und Tipps in deiner Muttersprache. Zum Beispiel: Wo finde ich Hilfe? Wann darf ich arbeiten?", |
There was a problem hiding this comment.
🔧 Please adjust the naming
| "appDescription": "In {{appName}} findest du Antworten und Tipps in deiner Muttersprache. Zum Beispiel: Wo finde ich Hilfe? Wann darf ich arbeiten?", | |
| "welcomeDescription": "In {{appName}} findest du Antworten und Tipps in deiner Muttersprache. Zum Beispiel: Wo finde ich Hilfe? Wann darf ich arbeiten?", |
| "offline": "Funktioniert auch offline", | ||
| "offlineDescription": "Du hast nicht immer Internet? Kein Problem. Du kannst Integreat auch ohne Internet benutzen.", | ||
| "information": "Aktuelle Informationen", | ||
| "informationDescription": "Was gibt es Neues in deiner Nähe? Finde es heraus in Integreat.", | ||
| "skip": "Überspringen", | ||
| "next": "Weiter" | ||
| }, | ||
| "am": { | ||
| "appDescription": "{{appName}} ለጀርመን የእርስዎ የዲጂታል መሪ ነው", |
There was a problem hiding this comment.
🔧 The keys appDescription, events and eventsDescription should also be deleted as the German translation changed/they are not used anymore.
| "directions": "Angebote in deiner Nähe", | ||
| "directionsDescription": "In der Karte kannst du Orte in deiner Nähe finden, zum Beispiel Orte für Sprachkurse.", | ||
| "offline": "Funktioniert auch offline", | ||
| "offlineDescription": "Du hast nicht immer Internet? Kein Problem. Du kannst Integreat auch ohne Internet benutzen.", |
There was a problem hiding this comment.
🔧 Please replace all occurrences of Integreat with {{appName}} and use the translations accordingly.
| "search": "Αναζήτηση", | ||
| "searchDescription": "Βρείτε γρήγορα τις σωστές πληροφορίες χρησιμοποιώντας λέξεις-κλειδιά", | ||
| "languageChange": "Αλλαγή γλώσσας", | ||
| "languageChangeDescription": "Αλλάξτε εύκολα τη γλώσσα μεμονωμένων σελίδων", | ||
| "events": "Εκδηλώσεις", | ||
| "eventsDescription": "Τρέχουσες εκδηλώσεις και ημερομηνίες στην περιοχή", | ||
| "skip": "Παραλείπω", | ||
| "next": "Συνέχεια" | ||
| }, | ||
| "en": { |
There was a problem hiding this comment.
❌ Please make sure to add english translations as well.
Short description
Changing and adding new intro slides to look like this here
Proposed changes
TextButtonto let me change text styling.build-configs/common/assetscurrentColor)Note: not tested on iOS.
Side effects
Testing
Fixes: #1137