diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index d88627f65a..bb2d657ea4 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -7,6 +7,8 @@ import {usePalette} from 'lib/hooks/usePalette' import {CenteredView} from '../util/Views' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {Logo} from '#/view/icons/Logo' +import {Logotype} from '#/view/icons/Logotype' export const SplashScreen = ({ onPressSignin, @@ -22,11 +24,14 @@ export const SplashScreen = ({ - - Bluesky - - - See what's next + + + + + + + + What's next? @@ -65,6 +70,7 @@ const styles = StyleSheet.create({ hero: { flex: 2, justifyContent: 'center', + alignItems: 'center', }, btns: { paddingBottom: 40, diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx index 7f4574c487..b7a281d3d1 100644 --- a/src/view/icons/Logo.tsx +++ b/src/view/icons/Logo.tsx @@ -1,18 +1,32 @@ import React from 'react' -import Svg, {Path, SvgProps, PathProps} from 'react-native-svg' +import Svg, { + Path, + Defs, + LinearGradient, + Stop, + SvgProps, + PathProps, +} from 'react-native-svg' import {colors} from '#/lib/styles' export function Logo({fill, ...rest}: {fill?: PathProps['fill']} & SvgProps) { + const gradient = fill === 'sky' + const _fill = gradient ? 'url(#sky)' : fill || colors.blue3 + const size = rest.width || 32 return ( - + + {gradient && ( + + + + + + + )} + diff --git a/src/view/icons/Logotype.tsx b/src/view/icons/Logotype.tsx new file mode 100644 index 0000000000..847607a3e4 --- /dev/null +++ b/src/view/icons/Logotype.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import Svg, {Path, SvgProps, PathProps} from 'react-native-svg' + +import {colors} from '#/lib/styles' + +const ratio = 17 / 64 + +export function Logotype({ + fill, + ...rest +}: {fill?: PathProps['fill']} & SvgProps) { + // @ts-ignore it's fiiiiine + const size = parseInt(rest.width || 32) + + return ( + + + + ) +}