item.id}
+ showsHorizontalScrollIndicator={false}
+ onScrollToIndexFailed={this.onScrollToIndexFailed}
+ renderItem={({ item }) => this.renderItem(item)}
+ contentContainerStyle={styles.menu}
+ />
+ )
+ }
+
+ render() {
+ return (
+
+ {this.renderMenu()}
+
+ )
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ width: width,
+ backgroundColor: theme.COLORS.WHITE,
+ zIndex: 2,
+ },
+ shadow: {
+ shadowColor: theme.COLORS.BLACK,
+ shadowOffset: { width: 0, height: 2 },
+ shadowRadius: 8,
+ shadowOpacity: 0.2,
+ elevation: 4,
+ },
+ menu: {
+ paddingHorizontal: theme.SIZES.BASE * 2.5,
+ paddingTop: 8,
+ paddingBottom: 16,
+ },
+ titleContainer: {
+ alignItems: 'center',
+ backgroundColor: argonTheme.COLORS.ACTIVE,
+ borderRadius: 4,
+ marginRight: 9
+ },
+ containerShadow: {
+ shadowColor: 'black',
+ shadowOffset: { width: 0, height: 2 },
+ shadowRadius: 4,
+ shadowOpacity: 0.1,
+ elevation: 1,
+ },
+ menuTitle: {
+ fontWeight: '600',
+ fontSize: 14,
+ // lineHeight: 28,
+ paddingVertical: 10,
+ paddingHorizontal: 16,
+ color: argonTheme.COLORS.MUTED
+ },
+});
diff --git a/mobile-ui/components/index.js b/mobile-ui/components/index.js
new file mode 100644
index 00000000..d9410658
--- /dev/null
+++ b/mobile-ui/components/index.js
@@ -0,0 +1,19 @@
+import Button from './Button';
+import Card from './Card';
+import DrawerItem from './DrawerItem';
+import Icon from './Icon';
+import Header from './Header';
+import Input from './Input';
+import Switch from './Switch';
+import Select from './Select';
+
+export {
+ Button,
+ Card,
+ DrawerItem,
+ Icon,
+ Input,
+ Header,
+ Switch,
+ Select
+};
\ No newline at end of file
diff --git a/mobile-ui/constants/Images.js b/mobile-ui/constants/Images.js
new file mode 100644
index 00000000..0e9b5121
--- /dev/null
+++ b/mobile-ui/constants/Images.js
@@ -0,0 +1,41 @@
+// local imgs
+const Onboarding = require("../assets/imgs/bg.png");
+const Logo = require("../assets/imgs/argon-logo.png");
+const LogoOnboarding = require("../assets/imgs/argon-logo-onboarding.png");
+const ProfileBackground = require("../assets/imgs/profile-screen-bg.png");
+const RegisterBackground = require("../assets/imgs/register-bg.png");
+const Pro = require("../assets/imgs/getPro-bg.png");
+const ArgonLogo = require("../assets/imgs/argonlogo.png");
+const iOSLogo = require("../assets/imgs/ios.png");
+const androidLogo = require("../assets/imgs/android.png");
+// internet imgs
+
+const ProfilePicture = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?fit=crop&w=1650&q=80';
+
+const Viewed = [
+ 'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?fit=crop&w=240&q=80',
+ 'https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=240&q=80',
+ 'https://images.unsplash.com/photo-1551798507-629020c81463?fit=crop&w=240&q=80',
+ 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=240&q=80',
+ 'https://images.unsplash.com/photo-1503642551022-c011aafb3c88?fit=crop&w=240&q=80',
+ 'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=240&q=80',
+];
+
+const Products = {
+ 'View article': 'https://images.unsplash.com/photo-1501601983405-7c7cabaa1581?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=840&q=840',
+};
+
+export default {
+ Onboarding,
+ Logo,
+ LogoOnboarding,
+ ProfileBackground,
+ ProfilePicture,
+ RegisterBackground,
+ Viewed,
+ Products,
+ Pro,
+ ArgonLogo,
+ iOSLogo,
+ androidLogo
+};
\ No newline at end of file
diff --git a/mobile-ui/constants/Theme.js b/mobile-ui/constants/Theme.js
new file mode 100644
index 00000000..d22100d9
--- /dev/null
+++ b/mobile-ui/constants/Theme.js
@@ -0,0 +1,32 @@
+export default {
+ COLORS: {
+ DEFAULT: '#172B4D',
+ PRIMARY: '#5E72E4',
+ SECONDARY: '#F7FAFC',
+ LABEL: '#FE2472',
+ INFO: '#11CDEF',
+ ERROR: '#F5365C',
+ SUCCESS: '#2DCE89',
+ WARNING: '#FB6340',
+ /*not yet changed */
+ MUTED: '#ADB5BD',
+ INPUT: '#DCDCDC',
+ INPUT_SUCCESS: '#7BDEB2',
+ INPUT_ERROR: '#FCB3A4',
+ ACTIVE: '#5E72E4', //same as primary
+ BUTTON_COLOR: '#9C26B0', //wtf
+ PLACEHOLDER: '#9FA5AA',
+ SWITCH_ON: '#5E72E4',
+ SWITCH_OFF: '#D4D9DD',
+ GRADIENT_START: '#6B24AA',
+ GRADIENT_END: '#AC2688',
+ PRICE_COLOR: '#EAD5FB',
+ BORDER_COLOR: '#E7E7E7',
+ BLOCK: '#E7E7E7',
+ ICON: '#172B4D',
+ HEADER: '#525F7F',
+ BORDER: '#CAD1D7',
+ WHITE: '#FFFFFF',
+ BLACK: '#000000'
+ }
+};
\ No newline at end of file
diff --git a/mobile-ui/constants/articles.js b/mobile-ui/constants/articles.js
new file mode 100644
index 00000000..91861946
--- /dev/null
+++ b/mobile-ui/constants/articles.js
@@ -0,0 +1,29 @@
+export default [
+ {
+ title: 'Ice cream is made with carrageenan …',
+ image: 'https://images.unsplash.com/photo-1516559828984-fb3b99548b21?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
+ cta: 'View article',
+ horizontal: true
+ },
+ {
+ title: 'Is makeup one of your daily esse …',
+ image: 'https://images.unsplash.com/photo-1519368358672-25b03afee3bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2004&q=80',
+ cta: 'View article'
+ },
+ {
+ title: 'Coffee is more than just a drink: It’s …',
+ image: 'https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80',
+ cta: 'View article'
+ },
+ {
+ title: 'Fashion is a popular style, especially in …',
+ image: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1326&q=80',
+ cta: 'View article'
+ },
+ {
+ title: 'Argon is a great free UI packag …',
+ image: 'https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?fit=crop&w=1947&q=80',
+ cta: 'View article',
+ horizontal: true
+ },
+];
\ No newline at end of file
diff --git a/mobile-ui/constants/index.js b/mobile-ui/constants/index.js
new file mode 100644
index 00000000..1a834fc8
--- /dev/null
+++ b/mobile-ui/constants/index.js
@@ -0,0 +1,11 @@
+import argonTheme from './Theme';
+import articles from './articles';
+import Images from './Images';
+import tabs from './tabs';
+
+export {
+ articles,
+ argonTheme,
+ Images,
+ tabs
+};
\ No newline at end of file
diff --git a/mobile-ui/constants/tabs.js b/mobile-ui/constants/tabs.js
new file mode 100644
index 00000000..149657f4
--- /dev/null
+++ b/mobile-ui/constants/tabs.js
@@ -0,0 +1,8 @@
+export default tabs = {
+ categories: [
+ { id: 'popular', title: 'Popular' },
+ { id: 'beauty', title: 'Beauty' },
+ { id: 'fashion', title: 'Fashion' },
+ { id: 'car_motorcycle', title: 'Car & Motorcycle' },
+ ],
+}
\ No newline at end of file
diff --git a/mobile-ui/constants/utils.js b/mobile-ui/constants/utils.js
new file mode 100644
index 00000000..561e5cfc
--- /dev/null
+++ b/mobile-ui/constants/utils.js
@@ -0,0 +1,6 @@
+import { Platform, StatusBar } from 'react-native';
+import { theme } from 'galio-framework';
+
+export const StatusHeight = StatusBar.currentHeight;
+export const HeaderHeight = (theme.SIZES.BASE * 3.5 + (StatusHeight || 0));
+export const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812);
\ No newline at end of file
diff --git a/mobile-ui/navigation/Menu.js b/mobile-ui/navigation/Menu.js
new file mode 100644
index 00000000..fda94f77
--- /dev/null
+++ b/mobile-ui/navigation/Menu.js
@@ -0,0 +1,71 @@
+import { Block, Text, theme } from "galio-framework";
+import { Image, ScrollView, StyleSheet } from "react-native";
+
+import { DrawerItem as DrawerCustomItem } from "../components";
+import Images from "../constants/Images";
+import React from "react";
+
+function CustomDrawerContent({
+ drawerPosition,
+ navigation,
+ profile,
+ focused,
+ state,
+ ...rest
+}) {
+ const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
+ return (
+
+
+
+
+
+
+ {screens.map((item, index) => {
+ return (
+
+ );
+ })}
+
+
+
+ DOCUMENTATION
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ header: {
+ paddingHorizontal: 28,
+ paddingBottom: theme.SIZES.BASE,
+ paddingTop: theme.SIZES.BASE * 3,
+ justifyContent: "center",
+ },
+});
+
+export default CustomDrawerContent;
diff --git a/mobile-ui/navigation/Screens.js b/mobile-ui/navigation/Screens.js
new file mode 100644
index 00000000..804a0ba7
--- /dev/null
+++ b/mobile-ui/navigation/Screens.js
@@ -0,0 +1,256 @@
+import { Animated, Dimensions, Easing } from "react-native";
+// header for screens
+import { Header, Icon } from "../components";
+import { argonTheme, tabs } from "../constants";
+
+import Articles from "../screens/Articles";
+import { Block } from "galio-framework";
+// drawer
+import CustomDrawerContent from "./Menu";
+import Elements from "../screens/Elements";
+// screens
+import Home from "../screens/Home";
+import Onboarding from "../screens/Onboarding";
+import Pro from "../screens/Pro";
+import Profile from "../screens/Profile";
+import React from "react";
+import Register from "../screens/Register";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import { createStackNavigator } from "@react-navigation/stack";
+
+const { width } = Dimensions.get("screen");
+
+const Stack = createStackNavigator();
+const Drawer = createDrawerNavigator();
+const Tab = createBottomTabNavigator();
+
+function ElementsStack(props) {
+ return (
+
+ (
+
+ ),
+ cardStyle: { backgroundColor: "#F8F9FE" },
+ }}
+ />
+ (
+
+ ),
+ headerTransparent: true,
+ }}
+ />
+
+ );
+}
+
+function ArticlesStack(props) {
+ return (
+
+ (
+
+ ),
+ cardStyle: { backgroundColor: "#F8F9FE" },
+ }}
+ />
+ (
+
+ ),
+ headerTransparent: true,
+ }}
+ />
+
+ );
+}
+
+function ProfileStack(props) {
+ return (
+
+ (
+
+ ),
+ cardStyle: { backgroundColor: "#FFFFFF" },
+ headerTransparent: true,
+ }}
+ />
+ (
+
+ ),
+ headerTransparent: true,
+ }}
+ />
+
+ );
+}
+
+function HomeStack(props) {
+ return (
+
+ (
+
+ ),
+ cardStyle: { backgroundColor: "#F8F9FE" },
+ }}
+ />
+ (
+
+ ),
+ headerTransparent: true,
+ }}
+ />
+
+ );
+}
+
+export default function OnboardingStack(props) {
+ return (
+
+
+
+
+ );
+}
+
+function AppStack(props) {
+ return (
+ }
+ drawerStyle={{
+ backgroundColor: "white",
+ width: width * 0.8,
+ }}
+ drawerContentOptions={{
+ activeTintcolor: "white",
+ inactiveTintColor: "#000",
+ activeBackgroundColor: "transparent",
+ itemStyle: {
+ width: width * 0.75,
+ backgroundColor: "transparent",
+ paddingVertical: 16,
+ paddingHorizonal: 12,
+ justifyContent: "center",
+ alignContent: "center",
+ alignItems: "center",
+ overflow: "hidden",
+ },
+ labelStyle: {
+ fontSize: 18,
+ marginLeft: 12,
+ fontWeight: "normal",
+ },
+ }}
+ initialRouteName="Home"
+ >
+
+
+
+
+
+
+ );
+}
diff --git a/mobile-ui/screens/Articles.js b/mobile-ui/screens/Articles.js
new file mode 100644
index 00000000..ecb6d417
--- /dev/null
+++ b/mobile-ui/screens/Articles.js
@@ -0,0 +1,252 @@
+//galio
+import { Block, Text, theme } from "galio-framework";
+import {
+ Dimensions,
+ Image,
+ ImageBackground,
+ ScrollView,
+ StyleSheet,
+ TouchableWithoutFeedback,
+} from "react-native";
+//argon
+import { Images, argonTheme, articles } from "../constants/";
+
+import { Card } from "../components/";
+import React from "react";
+
+const { width } = Dimensions.get("screen");
+
+const thumbMeasure = (width - 48 - 32) / 3;
+const cardWidth = width - theme.SIZES.BASE * 2;
+const categories = [
+ {
+ title: "Music Album",
+ description:
+ "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
+ image:
+ "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
+ price: "$125",
+ },
+ {
+ title: "Events",
+ description:
+ "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
+ image:
+ "https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
+ price: "$35",
+ },
+];
+
+class Articles extends React.Component {
+ renderProduct = (item, index) => {
+ const { navigation } = this.props;
+
+ return (
+ navigation.navigate("Pro", { product: item })}
+ >
+
+
+
+
+ {item.price}
+
+
+ {item.title}
+
+
+ {item.description}
+
+
+
+
+ );
+ };
+
+ renderCards = () => {
+ return (
+
+
+ Cards
+
+
+
+
+
+
+
+
+
+
+
+
+
+ View article
+
+
+
+
+
+
+
+ {categories &&
+ categories.map((item, index) =>
+ this.renderProduct(item, index)
+ )}
+
+
+
+
+ );
+ };
+
+ renderAlbum = () => {
+ const { navigation } = this.props;
+
+ return (
+
+
+ Album
+
+
+
+ navigation.navigate("Home")}
+ >
+ View All
+
+
+
+ {Images.Viewed.map((img, index) => (
+
+
+
+ ))}
+
+
+
+ );
+ };
+
+ render() {
+ return (
+
+
+ {this.renderCards()}
+ {this.renderAlbum()}
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ title: {
+ paddingBottom: theme.SIZES.BASE,
+ paddingHorizontal: theme.SIZES.BASE * 2,
+ marginTop: 22,
+ color: argonTheme.COLORS.HEADER,
+ },
+ group: {
+ paddingTop: theme.SIZES.BASE,
+ },
+ albumThumb: {
+ borderRadius: 4,
+ marginVertical: 4,
+ alignSelf: "center",
+ width: thumbMeasure,
+ height: thumbMeasure,
+ },
+ category: {
+ backgroundColor: theme.COLORS.WHITE,
+ marginVertical: theme.SIZES.BASE / 2,
+ borderWidth: 0,
+ },
+ categoryTitle: {
+ height: "100%",
+ paddingHorizontal: theme.SIZES.BASE,
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ imageBlock: {
+ overflow: "hidden",
+ borderRadius: 4,
+ },
+ productItem: {
+ width: cardWidth - theme.SIZES.BASE * 2,
+ marginHorizontal: theme.SIZES.BASE,
+ shadowColor: "black",
+ shadowOffset: { width: 0, height: 7 },
+ shadowRadius: 10,
+ shadowOpacity: 0.2,
+ },
+ productImage: {
+ width: cardWidth - theme.SIZES.BASE,
+ height: cardWidth - theme.SIZES.BASE,
+ borderRadius: 3,
+ },
+ productPrice: {
+ paddingTop: theme.SIZES.BASE,
+ paddingBottom: theme.SIZES.BASE / 2,
+ },
+ productDescription: {
+ paddingTop: theme.SIZES.BASE,
+ // paddingBottom: theme.SIZES.BASE * 2,
+ },
+});
+
+export default Articles;
diff --git a/mobile-ui/screens/Elements.js b/mobile-ui/screens/Elements.js
new file mode 100644
index 00000000..7a73d80e
--- /dev/null
+++ b/mobile-ui/screens/Elements.js
@@ -0,0 +1,487 @@
+// Galio components
+import { Block, Button as GaButton, Text, theme } from "galio-framework";
+import { Button, Header, Icon, Input, Select, Switch } from "../components/";
+import {
+ Dimensions,
+ ScrollView,
+ StyleSheet,
+ TouchableOpacity,
+} from "react-native";
+// Argon themed components
+import { argonTheme, tabs } from "../constants/";
+
+import React from "react";
+
+const { width } = Dimensions.get("screen");
+
+class Elements extends React.Component {
+ state = {
+ "switch-1": true,
+ "switch-2": false,
+ };
+
+ toggleSwitch = (switchId) =>
+ this.setState({ [switchId]: !this.state[switchId] });
+
+ renderButtons = () => {
+ return (
+
+
+ Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ renderText = () => {
+ return (
+
+
+ Typography
+
+
+
+ Heading 1
+
+
+ Heading 2
+
+
+ Heading 3
+
+
+ Heading 4
+
+
+ Heading 5
+
+
+ Paragraph
+
+ This is a muted paragraph.
+
+
+ );
+ };
+
+ renderInputs = () => {
+ return (
+
+
+ Inputs
+
+
+ } />
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ />
+
+
+ );
+ };
+
+ renderSwitches = () => {
+ return (
+
+
+ Switches
+
+
+
+ Switch is ON
+ this.toggleSwitch("switch-1")}
+ />
+
+
+ Switch is OFF
+ this.toggleSwitch("switch-2")}
+ />
+
+
+
+ );
+ };
+
+ renderTableCell = () => {
+ const { navigation } = this.props;
+ return (
+
+
+ Table Cell
+
+
+
+ navigation.navigate("Pro")}>
+
+ Manage Options
+
+
+
+
+
+
+ );
+ };
+
+ renderSocial = () => {
+ return (
+
+
+ Social
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ renderNavigation = () => {
+ return (
+
+
+ Navigation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ render() {
+ return (
+
+
+ {this.renderButtons()}
+ {this.renderText()}
+ {this.renderInputs()}
+ {this.renderSocial()}
+ {this.renderSwitches()}
+ {this.renderNavigation()}
+ {this.renderTableCell()}
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ title: {
+ paddingBottom: theme.SIZES.BASE,
+ paddingHorizontal: theme.SIZES.BASE * 2,
+ marginTop: 44,
+ color: argonTheme.COLORS.HEADER,
+ },
+ group: {
+ paddingTop: theme.SIZES.BASE * 2,
+ },
+ shadow: {
+ shadowColor: "black",
+ shadowOffset: { width: 0, height: 2 },
+ shadowRadius: 4,
+ shadowOpacity: 0.2,
+ elevation: 2,
+ },
+ button: {
+ marginBottom: theme.SIZES.BASE,
+ width: width - theme.SIZES.BASE * 2,
+ },
+ optionsButton: {
+ width: "auto",
+ height: 34,
+ paddingHorizontal: theme.SIZES.BASE,
+ paddingVertical: 10,
+ },
+ input: {
+ borderBottomWidth: 1,
+ },
+ inputDefault: {
+ borderBottomColor: argonTheme.COLORS.PLACEHOLDER,
+ },
+ inputTheme: {
+ borderBottomColor: argonTheme.COLORS.PRIMARY,
+ },
+ inputInfo: {
+ borderBottomColor: argonTheme.COLORS.INFO,
+ },
+ inputSuccess: {
+ borderBottomColor: argonTheme.COLORS.SUCCESS,
+ },
+ inputWarning: {
+ borderBottomColor: argonTheme.COLORS.WARNING,
+ },
+ inputDanger: {
+ borderBottomColor: argonTheme.COLORS.ERROR,
+ },
+ social: {
+ width: theme.SIZES.BASE * 3.5,
+ height: theme.SIZES.BASE * 3.5,
+ borderRadius: theme.SIZES.BASE * 1.75,
+ justifyContent: "center",
+ },
+});
+
+export default Elements;
diff --git a/mobile-ui/screens/Home.js b/mobile-ui/screens/Home.js
new file mode 100644
index 00000000..36a699e0
--- /dev/null
+++ b/mobile-ui/screens/Home.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Dimensions, ScrollView } from 'react-native';
+import { Block, theme } from 'galio-framework';
+
+import { Card } from '../components';
+import articles from '../constants/articles';
+const { width } = Dimensions.get('screen');
+
+class Home extends React.Component {
+ renderArticles = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ render() {
+ return (
+
+ {this.renderArticles()}
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ home: {
+ width: width,
+ },
+ articles: {
+ width: width - theme.SIZES.BASE * 2,
+ paddingVertical: theme.SIZES.BASE,
+ },
+});
+
+export default Home;
diff --git a/mobile-ui/screens/Onboarding.js b/mobile-ui/screens/Onboarding.js
new file mode 100644
index 00000000..983d550b
--- /dev/null
+++ b/mobile-ui/screens/Onboarding.js
@@ -0,0 +1,99 @@
+import React from "react";
+import {
+ ImageBackground,
+ Image,
+ StyleSheet,
+ StatusBar,
+ Dimensions
+} from "react-native";
+import { Block, Button, Text, theme } from "galio-framework";
+
+const { height, width } = Dimensions.get("screen");
+
+import argonTheme from "../constants/Theme";
+import Images from "../constants/Images";
+
+class Onboarding extends React.Component {
+ render() {
+ const { navigation } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Design
+
+
+
+
+ System
+
+
+
+
+ Fully coded React Native components.
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ backgroundColor: theme.COLORS.BLACK
+ },
+ padded: {
+ paddingHorizontal: theme.SIZES.BASE * 2,
+ position: "relative",
+ bottom: theme.SIZES.BASE,
+ zIndex: 2,
+ },
+ button: {
+ width: width - theme.SIZES.BASE * 4,
+ height: theme.SIZES.BASE * 3,
+ shadowRadius: 0,
+ shadowOpacity: 0
+ },
+ logo: {
+ width: 200,
+ height: 60,
+ zIndex: 2,
+ position: 'relative',
+ marginTop: '-50%'
+ },
+ title: {
+ marginTop:'-5%'
+ },
+ subTitle: {
+ marginTop: 20
+ }
+});
+
+export default Onboarding;
diff --git a/mobile-ui/screens/Pro.js b/mobile-ui/screens/Pro.js
new file mode 100644
index 00000000..ef914e7c
--- /dev/null
+++ b/mobile-ui/screens/Pro.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import { ImageBackground, Image, StyleSheet, StatusBar, Dimensions, Platform, Linking } from 'react-native';
+import { Block, Button, Text, theme } from 'galio-framework';
+
+const { height, width } = Dimensions.get('screen');
+import { Images, argonTheme } from '../constants/';
+import { HeaderHeight } from "../constants/utils";
+
+export default class Pro extends React.Component {
+ render() {
+ const { navigation } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Argon
+
+
+ Design
+
+
+ System
+
+ PRO
+
+
+
+
+ Take advantage of all the features and screens made upon Galio Design System, coded on React Native for both.
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ backgroundColor: theme.COLORS.BLACK,
+ marginTop: Platform.OS === 'android' ? -HeaderHeight : 0,
+ },
+ padded: {
+ paddingHorizontal: theme.SIZES.BASE * 2,
+ zIndex: 3,
+ position: 'absolute',
+ bottom: Platform.OS === 'android' ? theme.SIZES.BASE * 2 : theme.SIZES.BASE * 3,
+ },
+ button: {
+ width: width - theme.SIZES.BASE * 4,
+ height: theme.SIZES.BASE * 3,
+ shadowRadius: 0,
+ shadowOpacity: 0,
+ },
+ pro: {
+ backgroundColor: argonTheme.COLORS.INFO,
+ paddingHorizontal: 8,
+ marginLeft: 3,
+ borderRadius: 4,
+ height: 22,
+ marginTop: 15
+ },
+ gradient: {
+ zIndex: 1,
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ height: 66,
+ },
+});
diff --git a/mobile-ui/screens/Profile.js b/mobile-ui/screens/Profile.js
new file mode 100644
index 00000000..e70150fa
--- /dev/null
+++ b/mobile-ui/screens/Profile.js
@@ -0,0 +1,342 @@
+import React from "react";
+import {
+ StyleSheet,
+ Dimensions,
+ ScrollView,
+ Image,
+ ImageBackground,
+ Platform
+} from "react-native";
+import { Block, Text, theme } from "galio-framework";
+
+import { Button } from "../components";
+import { Images, argonTheme } from "../constants";
+import { HeaderHeight } from "../constants/utils";
+
+const { width, height } = Dimensions.get("screen");
+
+const thumbMeasure = (width - 48 - 32) / 3;
+
+class Profile extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2K
+
+ Orders
+
+
+
+ 10
+
+ Photos
+
+
+
+ 89
+
+ Comments
+
+
+
+
+
+
+ Jessica Jones, 27
+
+
+ San Francisco, USA
+
+
+
+
+
+
+
+ An artist of considerable range, Jessica name taken by
+ Melbourne …
+
+
+
+
+
+ Album
+
+
+
+
+
+ {Images.Viewed.map((img, imgIndex) => (
+
+ ))}
+
+
+
+
+
+
+
+ {/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2K
+
+ Orders
+
+
+
+ 10
+
+ Photos
+
+
+
+ 89
+
+ Comments
+
+
+
+
+
+
+ Jessica Jones, 27
+
+
+ San Francisco, USA
+
+
+
+
+
+
+
+ An artist of considerable range, Jessica name taken by
+ Melbourne …
+
+
+
+
+
+ Album
+
+
+
+
+
+
+
+ {Images.Viewed.map((img, imgIndex) => (
+
+ ))}
+
+
+
+
+ */}
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ profile: {
+ marginTop: Platform.OS === "android" ? -HeaderHeight : 0,
+ // marginBottom: -HeaderHeight * 2,
+ flex: 1
+ },
+ profileContainer: {
+ width: width,
+ height: height,
+ padding: 0,
+ zIndex: 1
+ },
+ profileBackground: {
+ width: width,
+ height: height / 2
+ },
+ profileCard: {
+ // position: "relative",
+ padding: theme.SIZES.BASE,
+ marginHorizontal: theme.SIZES.BASE,
+ marginTop: 65,
+ borderTopLeftRadius: 6,
+ borderTopRightRadius: 6,
+ backgroundColor: theme.COLORS.WHITE,
+ shadowColor: "black",
+ shadowOffset: { width: 0, height: 0 },
+ shadowRadius: 8,
+ shadowOpacity: 0.2,
+ zIndex: 2
+ },
+ info: {
+ paddingHorizontal: 40
+ },
+ avatarContainer: {
+ position: "relative",
+ marginTop: -80
+ },
+ avatar: {
+ width: 124,
+ height: 124,
+ borderRadius: 62,
+ borderWidth: 0
+ },
+ nameInfo: {
+ marginTop: 35
+ },
+ divider: {
+ width: "90%",
+ borderWidth: 1,
+ borderColor: "#E9ECEF"
+ },
+ thumb: {
+ borderRadius: 4,
+ marginVertical: 4,
+ alignSelf: "center",
+ width: thumbMeasure,
+ height: thumbMeasure
+ }
+});
+
+export default Profile;
diff --git a/mobile-ui/screens/Register.js b/mobile-ui/screens/Register.js
new file mode 100644
index 00000000..c6e8f7ed
--- /dev/null
+++ b/mobile-ui/screens/Register.js
@@ -0,0 +1,215 @@
+import React from "react";
+import {
+ StyleSheet,
+ ImageBackground,
+ Dimensions,
+ StatusBar,
+ KeyboardAvoidingView
+} from "react-native";
+import { Block, Checkbox, Text, theme } from "galio-framework";
+
+import { Button, Icon, Input } from "../components";
+import { Images, argonTheme } from "../constants";
+
+const { width, height } = Dimensions.get("screen");
+
+class Register extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+ Sign up with
+
+
+
+
+
+
+
+
+
+ Or sign up the classic way
+
+
+
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+ password strength:
+
+
+ {" "}
+ strong
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ registerContainer: {
+ width: width * 0.9,
+ height: height * 0.875,
+ backgroundColor: "#F4F5F7",
+ borderRadius: 4,
+ shadowColor: argonTheme.COLORS.BLACK,
+ shadowOffset: {
+ width: 0,
+ height: 4
+ },
+ shadowRadius: 8,
+ shadowOpacity: 0.1,
+ elevation: 1,
+ overflow: "hidden"
+ },
+ socialConnect: {
+ backgroundColor: argonTheme.COLORS.WHITE,
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ borderColor: "#8898AA"
+ },
+ socialButtons: {
+ width: 120,
+ height: 40,
+ backgroundColor: "#fff",
+ shadowColor: argonTheme.COLORS.BLACK,
+ shadowOffset: {
+ width: 0,
+ height: 4
+ },
+ shadowRadius: 8,
+ shadowOpacity: 0.1,
+ elevation: 1
+ },
+ socialTextButtons: {
+ color: argonTheme.COLORS.PRIMARY,
+ fontWeight: "800",
+ fontSize: 14
+ },
+ inputIcons: {
+ marginRight: 12
+ },
+ passwordCheck: {
+ paddingLeft: 15,
+ paddingTop: 13,
+ paddingBottom: 30
+ },
+ createButton: {
+ width: width * 0.5,
+ marginTop: 25
+ }
+});
+
+export default Register;
diff --git a/web-ui/.DS_Store b/web-ui/.DS_Store
index 9cb9d1f0..d3460a56 100644
Binary files a/web-ui/.DS_Store and b/web-ui/.DS_Store differ
diff --git a/web-ui/web-react/src/components/LogIn.js b/web-ui/web-react/src/components/LogIn.js
index 7416381b..2afab231 100644
--- a/web-ui/web-react/src/components/LogIn.js
+++ b/web-ui/web-react/src/components/LogIn.js
@@ -1,15 +1,19 @@
import React from 'react';
+import { InputText } from 'primereact/inputtext';
const LogIn = () => {
return(
- {/*
- setFloatValue(e.target.value)} />
+
+
+
- */}
+
)
+
+ //value={floatValue} onChange={(e) => setFloatValue(e.target.value)}
}
export default LogIn
\ No newline at end of file