SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add images, add initial flat list with horizontal scroll

Browse Source
This commit is contained in:
Pablo Velez Vidal
2022-10-25 13:18:17 +02:00
parent b7e8c3b739
commit 1d134d705b
9 changed files with 532 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/screens/onboarding/header.tsx
View File

@@ -1,91 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {View} from 'react-native';
import FormattedText from '@components/formatted_text';
import {useIsTablet} from '@hooks/device';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
type Props = {
additionalServer: boolean;
theme: Theme;
};
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
textContainer: {
marginBottom: 32,
maxWidth: 600,
width: '100%',
paddingHorizontal: 20,
},
welcome: {
marginTop: 12,
color: changeOpacity(theme.centerChannelColor, 0.64),
...typography('Heading', 400, 'SemiBold'),
},
connect: {
width: 270,
letterSpacing: -1,
color: theme.centerChannelColor,
marginVertical: 12,
...typography('Heading', 1000, 'SemiBold'),
},
connectTablet: {
width: undefined,
},
description: {
color: changeOpacity(theme.centerChannelColor, 0.64),
...typography('Body', 200, 'Regular'),
},
}));
const ServerHeader = ({additionalServer, theme}: Props) => {
const isTablet = useIsTablet();
const styles = getStyleSheet(theme);
let title;
if (additionalServer) {
title = (
<FormattedText
defaultMessage='Add a server'
id='servers.create_button'
style={[styles.connect, isTablet ? styles.connectTablet : undefined]}
testID='server_header.title.add_server'
/>
);
} else {
title = (
<FormattedText
defaultMessage='Let’s Connect to a Server'
id='mobile.components.select_server_view.msg_connect'
style={[styles.connect, isTablet ? styles.connectTablet : undefined]}
testID='server_header.title.connect_to_server'
/>
);
}
return (
<View style={styles.textContainer}>
{!additionalServer &&
<FormattedText
defaultMessage='Welcome'
id='mobile.components.select_server_view.msg_welcome'
testID='server_header.welcome'
style={styles.welcome}
/>
}
{title}
<FormattedText
defaultMessage="A Server is your team's communication hub which is accessed through a unique URL"
id='mobile.components.select_server_view.msg_description'
style={styles.description}
testID='server_header.description'
/>
</View>
);
};
export default ServerHeader;

64
app/screens/onboarding/illustrations/calls.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

210
app/screens/onboarding/illustrations/chat.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

73
app/screens/onboarding/illustrations/integrations.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

72
app/screens/onboarding/illustrations/team_communication.svg Normal file
View File

@@ -0,0 +1,72 @@
<svg width="253" height="208" viewBox="0 0 253 208" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="67.493" cy="90.6649" rx="66.4115" ry="66.2887" fill="white"/>
<path d="M67.493 157.454C104.446 157.454 134.404 127.552 134.404 90.6649C134.404 53.7777 104.446 23.8762 67.493 23.8762C30.5397 23.8762 0.581543 53.7777 0.581543 90.6649C0.581543 127.552 30.5397 157.454 67.493 157.454Z" stroke="#3F4350" stroke-opacity="0.16"/>
<ellipse cx="67.493" cy="90.6649" rx="66.4115" ry="66.2887" fill="#3F4350" fill-opacity="0.16"/>
<mask id="mask0_418_7357" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="24" width="133" height="133">
<ellipse cx="67.493" cy="90.6649" rx="66.4115" ry="66.2887" fill="white"/>
</mask>
<g mask="url(#mask0_418_7357)">
<path d="M39.2556 77.0274H57.6857L58.3319 66.7581C59.3944 66.4428 61.7996 64.3645 62.4817 64.085C65.3463 62.9384 68.4049 47.0291 67.4931 44.7216C66.33 42.1417 58.2242 46.076 54.1677 44.7861C50.4343 43.5964 45.5378 48.5484 45.3152 54.1883L39.2556 77.0274Z" fill="#FFBC1F"/>
<ellipse cx="63.9032" cy="51.2501" rx="1.07694" ry="1.07495" fill="#6F370B"/>
<path d="M87.9549 155.09C80.2799 157.885 71.9946 159.405 63.3504 159.405C58.3964 159.405 53.5574 158.903 48.8834 157.95C33.519 154.811 19.9352 146.792 9.83348 135.584C9.65399 130.202 9.63963 123.895 9.8622 116.521C11.2048 72.7706 13.9833 74.9062 52.3512 74.6195C95.7304 74.297 89.8001 92.5569 90.3601 107.929C90.7191 117.718 89.4411 140.192 87.9549 155.09Z" fill="white"/>
<path d="M45.7602 84.8531C48.4813 85.8635 55.7399 85.3906 57.2405 83.2192C58.2743 81.7142 59.2579 80.1663 60.2703 78.647C61.0816 77.4216 61.8785 76.1961 62.6539 74.9492C59.5738 74.7055 56.1563 74.5909 52.3511 74.6195C47.268 74.6554 42.8238 74.6554 38.9109 74.7199C42.6586 78.862 40.555 82.9253 45.7602 84.8531Z" fill="#FFBC1F"/>
<path d="M90.3529 98.3043C89.0104 98.3974 87.6893 98.6053 86.4472 98.8131C80.0574 99.8952 83.5467 101.966 83.7836 125.515C83.9057 137.418 85.9877 144.205 84.7313 156.094C84.7313 156.122 84.7169 156.144 84.7169 156.173C85.8082 155.836 86.8924 155.477 87.9621 155.083C89.4483 140.184 90.7263 117.711 90.3673 107.922C90.2524 104.775 90.4104 101.508 90.3673 98.2971L90.3529 98.3043Z" fill="#FFBC1F"/>
<path d="M73.5023 147.351C73.2367 154.725 72.5187 153.514 66.4161 149.551C61.7134 146.498 53.7943 154.015 42.2351 156.251C32.6144 153.306 23.8553 148.404 16.4172 142.005C11.4417 129.879 10.415 113.146 10.415 103.643C10.415 102.69 32.9806 104.869 32.9806 104.869C32.8513 122.118 34.5816 142.248 48.8834 139.704C63.1852 137.167 73.7752 139.977 73.5023 147.351Z" fill="#FFBC1F"/>
<path d="M131.722 109.985C122.302 138.679 95.2494 159.405 63.3504 159.405C58.3964 159.405 53.5574 158.903 48.8834 157.95V151.608H71.0756C71.0756 151.608 81.8522 110.702 81.7517 109.985H131.722Z" fill="#484D5B"/>
<path d="M105.129 109.985H81.7518C81.7948 110.308 79.5979 118.936 77.1783 128.252C86.519 122.204 95.8238 116.098 105.129 109.985Z" fill="#6C7389"/>
<path d="M92.7509 127.199C99.069 123.272 105.401 119.366 111.763 115.511C114.627 113.776 117.399 111.849 120.206 109.985H110.355C98.9613 117.474 87.5672 124.956 76.1157 132.359C75.5629 134.494 75.0101 136.608 74.486 138.615C80.5743 134.81 86.6554 130.99 92.7509 127.199Z" fill="#6C7389"/>
<path d="M70.4079 38.9813C68.9146 37.0105 66.6386 38.4653 64.2622 39.1461C59.2436 41.2745 52.8609 37.6412 48.2229 40.5006C44.669 42.6863 44.0516 47.4949 43.8003 51.6585C43.6926 53.486 43.9941 55.8939 45.7962 56.2593C46.4136 56.3812 47.067 56.202 47.6773 56.3453C49.4004 56.7395 49.6086 59.0614 49.5942 60.8243C49.5727 63.87 50.1111 67.0375 51.9132 69.4956C53.7081 71.9536 56.9964 73.5016 59.9042 72.5771C63.3575 71.4807 64.9945 67.6252 66.0714 64.1782C66.7032 62.1357 68.3187 58.6744 66.4232 57.6783C64.3914 56.6033 58.9852 59.2405 56.3933 57.4848C54.6343 56.288 54.7348 53.7081 55.0292 51.6012C55.2302 50.1536 55.4815 48.6057 56.501 47.5594C58.138 45.8681 60.8662 46.2336 63.2211 46.3125C65.3678 46.3913 67.6581 46.0688 69.3238 44.7072C70.9895 43.3456 71.7146 40.694 70.4151 38.9885L70.4079 38.9813Z" fill="#6F370B"/>
<path d="M66.2581 48.7777C68.0315 53.8801 69.1444 57.5278 69.1444 57.5278C68.8643 59.1546 63.6807 57.4848 63.6807 57.4848L66.2581 48.7777Z" fill="#FFBC1F"/>
<path d="M52.5378 48.7777C52.5378 48.7777 48.7685 47.7099 48.8906 51.2572C49.0127 54.8046 53.1409 54.0306 53.1409 54.0306L52.545 48.7777H52.5378Z" fill="#FFBC1F"/>
</g>
<path d="M148.526 18.3192H98.4798C97.5626 18.3161 96.6539 18.4943 95.8053 18.8437C94.9568 19.1932 94.1852 19.7069 93.5344 20.3557C92.8837 21.0045 92.3667 21.7756 92.0128 22.6249C91.659 23.4743 91.4753 24.3853 91.4722 25.3059V57.2327C91.4753 58.1533 91.659 59.0643 92.0128 59.9137C92.3667 60.763 92.8837 61.5341 93.5344 62.1829C94.1852 62.8317 94.9568 63.3454 95.8053 63.6949C96.6539 64.0443 97.5626 64.2226 98.4798 64.2194H105.866V76.1705L116.944 64.2194H148.508C149.425 64.2226 150.334 64.0443 151.183 63.6949C152.031 63.3454 152.803 62.8317 153.454 62.1829C154.104 61.5341 154.621 60.763 154.975 59.9137C155.329 59.0643 155.513 58.1533 155.516 57.2327V25.3059C155.51 23.4497 154.77 21.6718 153.46 20.362C152.149 19.0523 150.375 18.3176 148.526 18.3192Z" fill="#FFBC1F"/>
<path d="M116.944 64.2194H148.508C149.425 64.2225 150.334 64.0443 151.183 63.6948C152.031 63.3454 152.803 62.8316 153.454 62.1829C154.104 61.5341 154.621 60.763 154.975 59.9136C155.329 59.0643 155.513 58.1533 155.516 57.2326V37.85C155.516 37.85 153.312 55.7736 152.916 57.3513C152.52 58.9289 151.734 61.2895 148.012 61.6809C144.289 62.0724 116.944 64.2194 116.944 64.2194Z" fill="#CC8F00"/>
<path d="M106.409 36.7053C107.301 36.7053 108.172 36.9707 108.914 37.4679C109.655 37.9652 110.233 38.6719 110.574 39.4988C110.915 40.3258 111.005 41.2357 110.831 42.1135C110.657 42.9913 110.227 43.7977 109.597 44.4306C108.966 45.0635 108.163 45.4945 107.289 45.6691C106.414 45.8437 105.508 45.7541 104.684 45.4115C103.86 45.069 103.156 44.489 102.661 43.7448C102.165 43.0006 101.901 42.1257 101.901 41.2306C101.9 40.6361 102.016 40.0473 102.242 39.4979C102.469 38.9485 102.801 38.4493 103.219 38.029C103.638 37.6086 104.136 37.2753 104.683 37.0481C105.23 36.821 105.817 36.7045 106.409 36.7053Z" fill="white"/>
<path d="M123.503 36.7053C124.395 36.7053 125.267 36.9707 126.008 37.4679C126.749 37.9652 127.327 38.6719 127.668 39.4988C128.01 40.3258 128.099 41.2357 127.925 42.1135C127.751 42.9913 127.322 43.7977 126.691 44.4306C126.061 45.0635 125.257 45.4945 124.383 45.6691C123.508 45.8437 122.602 45.7541 121.778 45.4115C120.954 45.069 120.25 44.489 119.755 43.7448C119.259 43.0006 118.995 42.1257 118.995 41.2306C118.994 40.6361 119.11 40.0473 119.337 39.4979C119.563 38.9485 119.895 38.4493 120.314 38.029C120.733 37.6086 121.23 37.2753 121.777 37.0481C122.324 36.821 122.911 36.7045 123.503 36.7053Z" fill="white"/>
<path d="M140.579 36.7053C141.471 36.7041 142.343 36.9685 143.085 37.465C143.827 37.9616 144.406 38.6679 144.748 39.4947C145.09 40.3215 145.18 41.2316 145.007 42.1099C144.834 42.9881 144.405 43.795 143.775 44.4285C143.144 45.0619 142.341 45.4935 141.466 45.6686C140.592 45.8437 139.685 45.7545 138.861 45.4121C138.037 45.0698 137.332 44.4897 136.836 43.7454C136.341 43.0011 136.076 42.1259 136.076 41.2306C136.076 40.6366 136.191 40.0483 136.417 39.4993C136.643 38.9503 136.975 38.4514 137.393 38.0311C137.811 37.6108 138.308 37.2773 138.854 37.0499C139.401 36.8224 139.987 36.7053 140.579 36.7053Z" fill="white"/>
<path d="M96.666 31.6878C97.1745 29.8811 98.0341 28.1932 99.1952 26.7213C100.356 25.2494 101.796 24.0226 103.431 23.1116C103.528 23.0624 103.606 22.9824 103.653 22.884C103.7 22.7857 103.712 22.6745 103.689 22.5681C103.666 22.4616 103.609 22.3657 103.526 22.2956C103.443 22.2254 103.339 22.1849 103.231 22.1804C100.075 21.9906 93.7058 22.6667 95.7029 31.6404C95.724 31.7499 95.7811 31.8492 95.865 31.9223C95.949 31.9954 96.0549 32.0381 96.1659 32.0436C96.2769 32.049 96.3865 32.017 96.4772 31.9525C96.5679 31.888 96.6344 31.7948 96.666 31.6878Z" fill="#FFD470"/>
<ellipse cx="198.383" cy="150.952" rx="53.6174" ry="53.5182" fill="white"/>
<path d="M198.383 204.97C228.27 204.97 252.5 180.786 252.5 150.952C252.5 121.117 228.27 96.9333 198.383 96.9333C168.495 96.9333 144.265 121.117 144.265 150.952C144.265 180.786 168.495 204.97 198.383 204.97Z" stroke="#3F4350" stroke-opacity="0.16"/>
<ellipse cx="198.383" cy="150.952" rx="53.6174" ry="53.5182" fill="#3F4350" fill-opacity="0.16"/>
<mask id="mask1_418_7357" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="144" y="97" width="109" height="108">
<ellipse cx="198.383" cy="150.952" rx="53.6174" ry="53.5182" fill="white"/>
</mask>
<g mask="url(#mask1_418_7357)">
<path d="M210.875 125.784C207.801 125.784 205.118 125.905 202.784 126.17C185.144 128.153 191.937 136.198 189.516 158.935C186.778 184.686 181.089 200.354 208.279 203.022C235.469 205.69 239.444 189.852 241.717 160.52C243.99 131.194 237.742 125.784 210.875 125.784Z" fill="white"/>
<path d="M197.734 185.922C197.734 185.922 197.748 192.867 195.667 199.979C195.168 201.694 194.549 203.415 193.767 205.048H167.507C170.113 191.932 171.123 178.56 170.51 165.162C170.477 164.301 169.123 164.301 169.163 165.162C169.776 178.567 168.759 191.939 166.133 205.048H143.926C144.458 204.551 144.054 160.792 157.222 144.973C158.266 143.709 159.471 142.573 160.845 141.605C170.019 135.124 176.586 137.665 182.169 146.022C183.361 147.803 184.506 149.847 185.624 152.133C188.049 157.094 190.339 163.158 192.649 170.009C193.707 173.162 194.778 176.483 195.869 179.939C196.138 180.806 196.414 181.68 196.691 182.567C197.034 183.677 197.384 184.793 197.734 185.922Z" fill="#82889C"/>
<path d="M177.555 205.048H166.132C168.759 191.939 169.776 178.567 169.163 165.162C169.123 164.301 170.201 164.355 170.51 165.162C175.367 177.828 180.162 191.932 177.555 205.048Z" fill="#3F4350"/>
<path d="M238.752 185.102C239.076 192.537 239.52 199.979 238.658 205.048H168.16C171.245 198.561 177.077 194.702 185.173 189.747C188.615 187.65 192.467 185.344 196.69 182.567C197.034 182.332 197.384 182.103 197.734 181.868C197.734 181.868 198.011 181.74 198.516 181.512C204.355 178.876 241.089 163.017 239.15 181.855V181.868C239.035 182.991 238.705 184.06 238.752 185.102Z" fill="#A4A9B7"/>
<path d="M238.746 204.463C239.48 199.415 239.062 192.261 238.746 185.102C238.699 184.06 239.029 182.991 239.143 181.868V181.855C241.076 163.078 204.591 178.775 198.57 181.485C208.572 194.272 222.689 203.092 238.739 204.463H238.746Z" fill="#3F4350"/>
<path d="M202.936 126.362C191.759 127.304 163.139 124.912 158.844 137.943C154.932 149.794 167.502 148.161 170.915 156.74C174.322 165.319 174.517 172.4 177.735 164.763C180.954 157.126 177.143 147.402 175.541 143.208C173.945 139.013 188.023 151.787 196.802 147.213C205.581 142.639 202.936 126.362 202.936 126.362Z" fill="white"/>
<path d="M160.343 135.237C159.704 136.094 159.186 137.025 158.843 138.071C154.936 149.872 167.491 148.246 170.901 156.788C174.304 165.33 174.499 172.381 177.713 164.777C180.928 157.173 177.121 147.49 175.521 143.314C173.476 136.04 164.27 134.407 160.343 135.237Z" fill="#A37200"/>
<path d="M228.89 144.895C228.79 144.05 227.914 144.123 227.974 144.982C229.613 167.129 219.54 173.805 219.54 173.805C229.414 168.22 230.243 156.072 228.89 144.895Z" fill="#3F4350" fill-opacity="0.64"/>
<path d="M190.175 137.256C189.728 139.657 188.645 142.835 188.842 145.352C188.914 146.259 189.446 147.084 189.531 148.018C189.682 149.58 189.886 153.051 189.807 154.634C189.768 155.506 191.133 148.891 190.214 146.143C189.341 143.531 190.601 140.387 191.12 137.624C191.277 136.772 190.332 136.411 190.175 137.263V137.256Z" fill="#3F4350" fill-opacity="0.64"/>
<path d="M189.745 173.227H183.261C182.457 173.227 181.729 172.754 181.434 172.028L176.791 160.807C176.269 159.555 177.223 158.184 178.618 158.184H185.102C185.905 158.184 186.634 158.657 186.929 159.382L191.572 170.603C192.094 171.855 191.139 173.227 189.745 173.227Z" fill="#3F4350"/>
<path d="M222.202 126.369C242.258 127.867 247.363 133.879 247.363 156.409C247.363 191.44 226.574 194.59 210.897 187.517C195.22 180.45 186.562 174.102 183.607 168.56C181.223 164.093 186.509 168.56 192.587 169.776C194.112 170.078 195.496 170.911 196.906 171.294C228.845 179.973 233.07 166.989 231.243 151.68C229.416 136.371 222.208 126.362 222.208 126.362L222.202 126.369Z" fill="#A37200"/>
<path d="M222.249 126.362C222.249 126.362 227.669 134.683 229.5 150C230.754 160.527 224.5 172 219.432 173.677C219.298 179.112 218.051 184.506 215.482 189.222C230.323 193.716 247.363 188.147 247.363 156.405C247.363 133.873 242.266 127.86 222.242 126.362H222.249Z" fill="white"/>
<path d="M154.275 202.801H120.907C120.383 202.749 119.893 202.515 119.521 202.138C119.148 201.761 118.917 201.265 118.866 200.734V156.851C118.913 156.314 119.146 155.81 119.524 155.43C119.901 155.049 120.397 154.813 120.928 154.764H145.673L156.388 165.491V200.713C156.394 200.977 156.347 201.24 156.25 201.486C156.153 201.731 156.007 201.953 155.821 202.139C155.403 202.543 154.853 202.779 154.275 202.801Z" fill="black" fill-opacity="0.2"/>
</g>
<path d="M202.252 119.598L208.065 129.834C212.461 129.375 215.584 127.148 220 127C217.54 123.946 210.866 113.105 210.191 112.249C208.931 110.644 210.369 106.356 209.564 104.98C206.675 99.9437 199.009 102.863 197.257 103.288C195.561 103.693 192.296 105.702 192.296 105.702C193.468 109.458 195.983 115.438 199.377 119.814C199.949 120.556 201.067 120.165 202.252 119.598Z" fill="#A37200"/>
<path d="M194.845 109.005C193.969 112.704 193.456 115.347 193.456 115.347C193.805 116.563 197.513 115.557 197.513 115.557L194.845 109.005Z" fill="#A37200"/>
<path d="M202.5 119.5C203.374 119.019 203.889 118.569 204.569 117.807C204.874 117.459 205.138 117.911 205.02 118.362C204.93 118.709 204.451 119.235 203.819 119.545C203.417 119.745 201.91 119.826 202.5 119.5Z" fill="#6F370B"/>
<path d="M215.661 106.608C214.769 105.826 213.618 105.205 213.189 104.11C212.808 103.128 213.114 102.026 212.91 100.998C212.556 99.2277 210.663 98.0389 208.824 98.0122C206.985 97.9855 201.952 99.8956 199.998 99.949C198.043 99.9957 196.075 99.8288 194.148 100.156C192.22 100.483 190.279 101.398 189.319 103.068C188.359 104.738 188.788 107.215 190.538 108.057C192.009 108.765 193.78 108.157 195.169 107.309C196.559 106.461 197.839 105.352 199.426 104.958C201.012 104.564 203.056 105.265 203.355 106.841C203.525 107.743 203.09 108.638 202.953 109.546C202.817 110.454 203.205 111.623 204.132 111.71C205.187 111.81 206.018 110.434 207.04 110.702C207.945 110.942 208.007 112.137 208.191 113.032C208.62 115.15 210.881 116.692 213.073 116.512C215.266 116.332 217.173 114.569 217.664 112.458C218.154 110.348 217.296 108.043 215.655 106.601L215.661 106.608Z" fill="#4A2407"/>
<path d="M238.359 120.558C239.103 119.042 239.083 117.513 239.083 115.855C239.083 115.334 239.184 114.887 239.353 114.488C239.285 114.048 239.238 113.601 239.218 113.155C239.13 111.307 239.637 109.284 241.104 108.16C241.747 107.666 242.531 107.368 243.085 106.786C244.174 105.629 243.991 103.775 243.478 102.273C242.463 99.2949 240.394 96.6691 237.696 95.0516C234.999 93.4342 231.679 92.8522 228.609 93.5357C226.925 93.9079 225.343 94.6388 223.673 95.0719C222.003 95.5051 220.143 95.6066 218.636 94.7674C217.02 93.8741 212.077 92.3446 210.231 92.2634C193.699 91.5461 190.392 101.4 189.446 102.719C188.377 104.059 205.626 99.5047 207.479 100.52C208.54 98.97 207.695 112.532 209.21 114.799C210.285 116.41 214.166 121.675 221.218 124.24C225.39 124.707 229.61 124.944 233.612 123.8C234.985 123.407 236.371 122.731 237.649 121.858C237.899 121.438 238.143 121.005 238.366 120.558H238.359Z" fill="#4A2407"/>
<path d="M211.404 133.302C216.174 133.202 219.836 130.238 221.858 126.24C218.64 125.911 214.978 125.783 210.813 125.783C207.736 125.783 205.068 125.911 202.73 126.173C204.262 130.111 206.405 133.41 211.397 133.302H211.404Z" fill="#A37200"/>
<path d="M183.147 140.425C182.619 144.992 182.223 149.567 181.948 154.141C181.886 155.221 183.739 155.071 183.802 154.007C184.069 149.576 184.457 145.154 184.968 140.739C185.086 139.672 183.274 139.349 183.147 140.425Z" fill="#FFBC1F"/>
<path d="M198.094 147.776C195.796 150.901 193.267 153.805 190.517 156.513C189.752 157.263 190.861 158.523 191.626 157.772C194.476 154.964 197.088 151.943 199.477 148.702C200.118 147.833 198.727 146.908 198.094 147.776Z" fill="#FFBC1F"/>
<path d="M207.294 164.374C203.388 164.227 199.473 164.071 195.567 163.923C194.668 163.892 194.798 165.575 195.69 165.616C199.596 165.764 203.511 165.92 207.417 166.067C208.316 166.099 208.186 164.415 207.294 164.374Z" fill="#FFBC1F"/>
<path d="M198.4 118.479C199.104 118.289 199.772 117.974 200.369 117.546C200.613 117.367 200.357 116.972 200.109 117.15C199.504 117.59 198.819 117.902 198.095 118.073L198.4 118.479Z" fill="#4A2407"/>
<ellipse cx="197.351" cy="110.709" rx="1.00127" ry="0.666278" transform="rotate(-13.8713 197.351 110.709)" fill="#4A2407"/>
<g clip-path="url(#clip0_418_7357)">
<path d="M149.275 195.801H115.907C115.383 195.749 114.893 195.515 114.521 195.138C114.148 194.761 113.917 194.264 113.866 193.734V149.851C113.913 149.313 114.146 148.81 114.524 148.43C114.901 148.049 115.397 147.813 115.928 147.763H140.673L151.388 158.491V193.713C151.394 193.977 151.347 194.24 151.25 194.485C151.153 194.731 151.007 194.953 150.821 195.139C150.403 195.543 149.853 195.778 149.275 195.801Z" fill="#E8E9ED"/>
<path d="M136.061 155.075H118.53C118.433 155.069 118.339 155.043 118.253 154.998C118.167 154.954 118.091 154.892 118.03 154.816C117.969 154.741 117.924 154.653 117.897 154.559C117.871 154.465 117.864 154.366 117.877 154.269C117.877 153.794 118.096 153.556 118.53 153.556H136.061C136.5 153.556 136.719 153.794 136.719 154.269C136.732 154.367 136.725 154.466 136.698 154.56C136.671 154.654 136.625 154.742 136.564 154.818C136.502 154.894 136.425 154.956 136.339 155C136.252 155.044 136.158 155.07 136.061 155.075ZM133.341 160.202C133.54 160.202 133.731 160.122 133.872 159.979C134.012 159.837 134.091 159.643 134.091 159.442C134.091 159.241 134.012 159.047 133.872 158.905C133.731 158.762 133.54 158.682 133.341 158.682H118.545C118.361 158.704 118.192 158.794 118.069 158.934C117.945 159.074 117.878 159.255 117.878 159.442C117.878 159.629 117.945 159.81 118.069 159.95C118.192 160.09 118.361 160.18 118.545 160.202H133.341ZM144.964 165.421C145.067 165.429 145.171 165.416 145.269 165.382C145.368 165.348 145.458 165.294 145.534 165.223C145.61 165.151 145.671 165.065 145.713 164.969C145.754 164.873 145.776 164.769 145.776 164.664C145.776 164.559 145.754 164.455 145.713 164.359C145.671 164.262 145.61 164.176 145.534 164.105C145.458 164.034 145.368 163.979 145.269 163.945C145.171 163.911 145.067 163.898 144.964 163.907H118.53C118.35 163.933 118.185 164.024 118.066 164.163C117.947 164.302 117.882 164.48 117.882 164.664C117.882 164.848 117.947 165.026 118.066 165.165C118.185 165.304 118.35 165.395 118.53 165.421H144.964ZM143.28 170.552C143.712 170.552 143.962 170.299 144.03 169.793C144.016 169.596 143.933 169.411 143.795 169.271C143.657 169.132 143.475 169.047 143.28 169.033H118.53C118.433 169.039 118.339 169.065 118.253 169.11C118.167 169.155 118.091 169.217 118.03 169.292C117.969 169.368 117.924 169.455 117.897 169.549C117.871 169.644 117.864 169.742 117.877 169.839C117.877 170.314 118.096 170.552 118.53 170.552H143.28ZM133.341 175.771C133.54 175.771 133.731 175.691 133.872 175.549C134.012 175.406 134.091 175.213 134.091 175.012C134.091 174.81 134.012 174.617 133.872 174.475C133.731 174.332 133.54 174.252 133.341 174.252H118.545C118.361 174.274 118.192 174.363 118.069 174.503C117.945 174.643 117.878 174.824 117.878 175.012C117.878 175.199 117.945 175.38 118.069 175.52C118.192 175.66 118.361 175.75 118.545 175.771H133.341ZM144.964 180.898C145.403 180.898 145.653 180.644 145.714 180.138C145.701 179.941 145.618 179.755 145.48 179.616C145.342 179.476 145.159 179.392 144.964 179.378H118.53C118.433 179.384 118.339 179.411 118.253 179.455C118.167 179.5 118.091 179.562 118.03 179.638C117.969 179.713 117.924 179.801 117.897 179.895C117.871 179.989 117.864 180.087 117.877 180.184C117.877 180.66 118.096 180.898 118.53 180.898H144.964ZM144.964 186.122C145.158 186.107 145.341 186.023 145.479 185.883C145.616 185.744 145.7 185.559 145.714 185.362C145.702 185.165 145.619 184.979 145.481 184.839C145.343 184.699 145.159 184.615 144.964 184.603H118.53C118.346 184.624 118.176 184.714 118.053 184.854C117.93 184.994 117.862 185.175 117.862 185.362C117.862 185.55 117.93 185.731 118.053 185.871C118.176 186.011 118.346 186.1 118.53 186.122H144.964ZM144.964 191.248C145.403 191.248 145.653 190.995 145.714 190.488C145.711 190.394 145.689 190.301 145.649 190.215C145.609 190.129 145.552 190.053 145.482 189.99C145.411 189.928 145.329 189.881 145.24 189.852C145.151 189.823 145.057 189.813 144.964 189.822H118.53C118.096 189.822 117.877 190.06 117.877 190.535C117.877 191.01 118.096 191.248 118.53 191.248H144.964Z" fill="#989DAE"/>
<path d="M140.653 147.763L151.24 158.491H142.898C142.308 158.507 141.736 158.286 141.306 157.876C141.085 157.663 140.912 157.404 140.798 157.117C140.685 156.83 140.633 156.521 140.647 156.212L140.653 147.763Z" fill="#BABEC9"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M161.915 54.4315C161.987 53.6063 162.715 52.9962 163.541 53.0689C168.295 53.4875 175.784 56.2696 183.095 60.5589C189.421 64.2702 195.802 69.2183 200.298 74.991L202.478 65.1147C202.657 64.3058 203.458 63.7948 204.267 63.9734C205.076 64.152 205.587 64.9525 205.408 65.7615L202.498 78.944C202.319 79.753 201.518 80.264 200.709 80.0854L187.527 77.175C186.718 76.9964 186.207 76.1958 186.386 75.3869C186.564 74.5779 187.365 74.0669 188.174 74.2455L197.513 76.3075C193.358 71.1627 187.52 66.633 181.577 63.1465C174.436 58.9571 167.395 56.4199 163.277 56.0573C162.452 55.9846 161.842 55.2568 161.915 54.4315Z" fill="#3F4350" fill-opacity="0.32"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M102.839 185.763C102.872 186.591 102.228 187.289 101.4 187.322C97.3141 187.484 90.6903 185.941 84.0756 183.121C78.4984 180.744 72.7381 177.38 68.3534 173.15L67.4444 183.257C67.3702 184.082 66.6412 184.691 65.8161 184.617C64.991 184.543 64.3823 183.814 64.4565 182.989L65.6656 169.543C65.7398 168.718 66.4688 168.109 67.2939 168.183L80.7396 169.392C81.5647 169.467 82.1735 170.196 82.0993 171.021C82.0251 171.846 81.2961 172.454 80.471 172.38L71.0083 171.529C74.9651 175.17 80.1138 178.171 85.252 180.362C91.685 183.104 97.833 184.461 101.281 184.324C102.108 184.291 102.806 184.936 102.839 185.763Z" fill="#3F4350" fill-opacity="0.32"/>
<defs>
<clipPath id="clip0_418_7357">
<rect width="37.4959" height="48.0372" fill="white" transform="translate(113.846 147.763)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

48
app/screens/onboarding/index.tsx
View File

@@ -1,16 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useRef} from 'react';
import {Platform, Text, View} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import React, {useCallback, useRef} from 'react';
import {Platform, Text, View, FlatList, ScrollView, ListRenderItemInfo} from 'react-native';
import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
import {SafeAreaView} from 'react-native-safe-area-context';
import AppVersion from '@components/app_version';
import {generateId} from '@app/utils/general';
import Background from '@screens/background';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import SlideItem from './slide';
import slidesData from './slides_data';
import type {LaunchProps} from '@typings/launch';
interface OnboardingProps extends LaunchProps {
@@ -22,7 +24,6 @@ const Onboarding = ({
theme,
}: OnboardingProps) => {
const translateX = useSharedValue(0);
const keyboardAwareRef = useRef<KeyboardAwareScrollView>(null);
const styles = getStyleSheet(theme);
const transform = useAnimatedStyle(() => {
@@ -32,32 +33,35 @@ const Onboarding = ({
};
}, []);
const renderSlide = useCallback(({item: t}: ListRenderItemInfo<any>) => {
return (
<SlideItem
item={t}
theme={theme}
/>
);
}, []);
return (
<View
style={styles.flex}
testID='server.screen'
testID='onboarding.screen'
>
<Background theme={theme}/>
<AnimatedSafeArea
key={'server_content'}
key={'onboarding_content'}
style={[styles.flex, transform]}
>
<KeyboardAwareScrollView
<FlatList
keyExtractor={(item) => item.id}
data={slidesData}
renderItem={renderSlide}
listKey={generateId()}
horizontal={true}
showsHorizontalScrollIndicator={true}
pagingEnabled={true}
bounces={false}
contentContainerStyle={styles.scrollContainer}
enableAutomaticScroll={Platform.OS === 'android'}
enableOnAndroid={false}
enableResetScrollToCoords={true}
extraScrollHeight={20}
keyboardDismissMode='on-drag'
keyboardShouldPersistTaps='handled'
ref={keyboardAwareRef}
scrollToOverflowEnabled={true}
style={styles.flex}
>
<Text>{'Hola mundo'}</Text>
</KeyboardAwareScrollView>
<AppVersion textStyle={styles.appInfo}/>
/>
</AnimatedSafeArea>
</View>
);

57
app/screens/onboarding/slide.tsx Normal file
View File

@@ -0,0 +1,57 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {Text, View, useWindowDimensions} from 'react-native';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
type Props = {
item: any;
theme: Theme;
};
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
title: {
fontWeight: '800',
fontSize: 28,
marginBottom: 10,
color: theme.centerChannelColor,
textAlign: 'center',
},
description: {
fontWeight: '300',
textAlign: 'center',
paddingHorizontal: 64,
color: changeOpacity(theme.centerChannelColor, 0.64),
...typography('Body', 200, 'Regular'),
},
image: {
flex: 0.7,
justifyContent: 'center',
},
itemContainer: {
flex: 1,
},
}));
const SlideItem = ({theme, item}: Props) => {
const {width} = useWindowDimensions();
const styles = getStyleSheet(theme);
const SvgImg = item.image;
return (
<View style={[styles.itemContainer, {width}]}>
<SvgImg
style={[styles.image, {width, resizeMode: 'contain'}]}
/>
<View style={{flex: 0.3}}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
</View>
</View>
);
};
export default SlideItem;

30
app/screens/onboarding/slides_data.ts Normal file
View File

@@ -0,0 +1,30 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
// pablo - translate each text. turn svgs into react components?
export default [
{
id: '1',
title: 'Welcome',
description: 'Mattermost is an open source platform for developer collaboration. Secure, flexible, and integrated with your tools.',
image: require('./illustrations/chat.svg').default,
},
{
id: '2',
title: 'Collaborate in real-time',
description: 'Persistent channels, direct messaging, and file sharing works seamlessly so you can stay connected, wherever you are.',
image: require('./illustrations/team_communication.svg').default,
},
{
id: '3',
title: 'Start secure audio calls instantly',
description: 'When typing isn’t fast enough, switch from channel-based chat to secure audio calls with a single tap.',
image: require('./illustrations/calls.svg').default,
},
{
id: '4',
title: 'Integrate with tools you love',
description: 'Go beyond chat with tightly-integratedproduct solutions matched to common development processes.',
image: require('./illustrations/integrations.svg').default,
},
];

5
index.ts
View File

@@ -67,7 +67,6 @@ if (global.HermesInternal) {
let alreadyInitialized = false;
Navigation.events().registerAppLaunchedListener(async () => {
// See caution in the library doc https://wix.github.io/react-native-navigation/docs/app-launch#android
console.log('*** already init', alreadyInitialized);
if (!alreadyInitialized) {
alreadyInitialized = true;
GlobalEventHandler.init();
@@ -83,12 +82,8 @@ Navigation.events().registerAppLaunchedListener(async () => {
await WebsocketManager.init(serverCredentials);
PushNotifications.init();
SessionManager.init();
console.log('*** already init 2', alreadyInitialized);
}
console.log('*** already init 3', alreadyInitialized);
initialLaunch();
});