From a8515894dc1eaf225ecac95e44904b166c4d7059 Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Fri, 18 Aug 2017 00:13:33 +0200 Subject: [PATCH] WIP: orange everything --- README.md | 4 +- native-base-theme/components/Badge.js | 35 ++ native-base-theme/components/Body.js | 11 + native-base-theme/components/Button.js | 479 ++++++++++++++++++ native-base-theme/components/Card.js | 28 + native-base-theme/components/CardItem.js | 213 ++++++++ native-base-theme/components/CheckBox.js | 36 ++ native-base-theme/components/Container.js | 13 + native-base-theme/components/Content.js | 17 + native-base-theme/components/Fab.js | 23 + native-base-theme/components/Footer.js | 98 ++++ native-base-theme/components/FooterTab.js | 77 +++ native-base-theme/components/Form.js | 88 ++++ native-base-theme/components/H1.js | 11 + native-base-theme/components/H2.js | 11 + native-base-theme/components/H3.js | 11 + native-base-theme/components/Header.js | 312 ++++++++++++ native-base-theme/components/Icon.js | 10 + native-base-theme/components/Input.js | 18 + native-base-theme/components/InputGroup.js | 130 +++++ native-base-theme/components/Item.js | 215 ++++++++ native-base-theme/components/Label.js | 12 + native-base-theme/components/Left.js | 11 + native-base-theme/components/ListItem.js | 407 +++++++++++++++ .../components/Picker.android.js | 13 + native-base-theme/components/Picker.ios.js | 7 + native-base-theme/components/Radio.js | 26 + native-base-theme/components/Right.js | 14 + native-base-theme/components/Segment.js | 45 ++ native-base-theme/components/Separator.js | 47 ++ native-base-theme/components/Spinner.js | 9 + native-base-theme/components/Subtitle.js | 12 + native-base-theme/components/SwipeRow.js | 44 ++ native-base-theme/components/Switch.js | 9 + native-base-theme/components/Tab.js | 10 + native-base-theme/components/TabBar.js | 55 ++ native-base-theme/components/TabContainer.js | 24 + native-base-theme/components/TabHeading.js | 37 ++ native-base-theme/components/Text.js | 15 + native-base-theme/components/Textarea.js | 23 + native-base-theme/components/Thumbnail.js | 40 ++ native-base-theme/components/Title.js | 15 + native-base-theme/components/Toast.js | 38 ++ native-base-theme/components/View.js | 11 + native-base-theme/components/index.js | 240 +++++++++ native-base-theme/variables/commonColor.js | 277 ++++++++++ native-base-theme/variables/material.js | 277 ++++++++++ native-base-theme/variables/platform.js | 278 ++++++++++ src/Dusken.js | 28 +- src/modules/about/About.js | 2 +- src/modules/membership/Membership.js | 1 + src/screens/AboutScreen.js | 10 +- src/screens/EventDetailsScreen.js | 11 +- src/screens/EventListScreen.js | 11 +- src/screens/LoginScreen.js | 8 +- src/screens/MembershipScreen.js | 9 +- 56 files changed, 3907 insertions(+), 9 deletions(-) create mode 100644 native-base-theme/components/Badge.js create mode 100644 native-base-theme/components/Body.js create mode 100644 native-base-theme/components/Button.js create mode 100644 native-base-theme/components/Card.js create mode 100644 native-base-theme/components/CardItem.js create mode 100644 native-base-theme/components/CheckBox.js create mode 100644 native-base-theme/components/Container.js create mode 100644 native-base-theme/components/Content.js create mode 100644 native-base-theme/components/Fab.js create mode 100644 native-base-theme/components/Footer.js create mode 100644 native-base-theme/components/FooterTab.js create mode 100644 native-base-theme/components/Form.js create mode 100644 native-base-theme/components/H1.js create mode 100644 native-base-theme/components/H2.js create mode 100644 native-base-theme/components/H3.js create mode 100644 native-base-theme/components/Header.js create mode 100644 native-base-theme/components/Icon.js create mode 100644 native-base-theme/components/Input.js create mode 100644 native-base-theme/components/InputGroup.js create mode 100644 native-base-theme/components/Item.js create mode 100644 native-base-theme/components/Label.js create mode 100644 native-base-theme/components/Left.js create mode 100644 native-base-theme/components/ListItem.js create mode 100644 native-base-theme/components/Picker.android.js create mode 100644 native-base-theme/components/Picker.ios.js create mode 100644 native-base-theme/components/Radio.js create mode 100644 native-base-theme/components/Right.js create mode 100644 native-base-theme/components/Segment.js create mode 100644 native-base-theme/components/Separator.js create mode 100644 native-base-theme/components/Spinner.js create mode 100644 native-base-theme/components/Subtitle.js create mode 100644 native-base-theme/components/SwipeRow.js create mode 100644 native-base-theme/components/Switch.js create mode 100644 native-base-theme/components/Tab.js create mode 100644 native-base-theme/components/TabBar.js create mode 100644 native-base-theme/components/TabContainer.js create mode 100644 native-base-theme/components/TabHeading.js create mode 100644 native-base-theme/components/Text.js create mode 100644 native-base-theme/components/Textarea.js create mode 100644 native-base-theme/components/Thumbnail.js create mode 100644 native-base-theme/components/Title.js create mode 100644 native-base-theme/components/Toast.js create mode 100644 native-base-theme/components/View.js create mode 100644 native-base-theme/components/index.js create mode 100644 native-base-theme/variables/commonColor.js create mode 100644 native-base-theme/variables/material.js create mode 100644 native-base-theme/variables/platform.js diff --git a/README.md b/README.md index 9178d35..5dc30df 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ touch ~/.gradle/gradle.properties && echo -e "org.gradle.daemon=true\norg.gradle.jvmargs=-Xmx2048M" >> ~/.gradle/gradle.properties # Run android emulator (first avd) - npm run emulator + yarn emulator # Make sure you have hw.keyboard=yes in your avd config.ini (in $HOME/.android/avd/.../) for reloading when pressing R twice to work. @@ -24,7 +24,7 @@ DUSKEN_RELEASE_KEY_PASSWORD= # Build - npm run build-android + yarn build-android # Output is in android/app/build/outputs/apk diff --git a/native-base-theme/components/Badge.js b/native-base-theme/components/Badge.js new file mode 100644 index 0000000..9bc0667 --- /dev/null +++ b/native-base-theme/components/Badge.js @@ -0,0 +1,35 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const badgeTheme = { + ".primary": { + backgroundColor: variables.btnPrimaryBg + }, + ".warning": { + backgroundColor: variables.btnWarningBg + }, + ".info": { + backgroundColor: variables.btnInfoBg + }, + ".success": { + backgroundColor: variables.btnSuccessBg + }, + ".danger": { + backgroundColor: variables.btnDangerBg + }, + "NativeBase.Text": { + color: variables.badgeColor, + fontSize: variables.fontSizeBase, + lineHeight: variables.lineHeight - 1, + textAlign: "center", + paddingHorizontal: 3 + }, + backgroundColor: variables.badgeBg, + padding: variables.badgePadding, + paddingHorizontal: 6, + alignSelf: "flex-start", + borderRadius: 13.5, + height: 27 + }; + return badgeTheme; +}; diff --git a/native-base-theme/components/Body.js b/native-base-theme/components/Body.js new file mode 100644 index 0000000..3b3d0ea --- /dev/null +++ b/native-base-theme/components/Body.js @@ -0,0 +1,11 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const bodyTheme = { + flex: 1, + alignItems: 'center', + alignSelf: 'center', + }; + + return bodyTheme; +}; diff --git a/native-base-theme/components/Button.js b/native-base-theme/components/Button.js new file mode 100644 index 0000000..cb5cd46 --- /dev/null +++ b/native-base-theme/components/Button.js @@ -0,0 +1,479 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platformStyle = variables.platformStyle; + const platform = variables.platform; + + const buttonTheme = { + ".disabled": { + backgroundColor: variables.btnDisabledBg + }, + ".bordered": { + ".dark": { + "NativeBase.Text": { + color: "#000" + }, + "NativeBase.Icon": { + color: "#000" + }, + "NativeBase.IconNB": { + color: "#000" + }, + backgroundColor: "transparent", + borderColor: "#000", + borderWidth: variables.borderWidth * 2 + }, + ".light": { + "NativeBase.Text": { + color: "#f4f4f4" + }, + "NativeBase.Icon": { + color: "#f4f4f4" + }, + "NativeBase.IconNB": { + color: "#f4f4f4" + }, + backgroundColor: "transparent", + borderColor: "#f4f4f4", + borderWidth: variables.borderWidth * 2 + }, + ".primary": { + "NativeBase.Text": { + color: variables.btnPrimaryBg + }, + "NativeBase.Icon": { + color: variables.btnPrimaryBg + }, + "NativeBase.IconNB": { + color: variables.btnPrimaryBg + }, + backgroundColor: "transparent", + borderColor: variables.btnPrimaryBg, + borderWidth: variables.borderWidth * 2 + }, + ".success": { + "NativeBase.Text": { + color: variables.btnSuccessBg + }, + "NativeBase.Icon": { + color: variables.btnSuccessBg + }, + "NativeBase.IconNB": { + color: variables.btnSuccessBg + }, + backgroundColor: "transparent", + borderColor: variables.btnSuccessBg, + borderWidth: variables.borderWidth * 2 + }, + ".info": { + "NativeBase.Text": { + color: variables.btnInfoBg + }, + "NativeBase.Icon": { + color: variables.btnInfoBg + }, + "NativeBase.IconNB": { + color: variables.btnInfoBg + }, + backgroundColor: "transparent", + borderColor: variables.btnInfoBg, + borderWidth: variables.borderWidth * 2 + }, + ".warning": { + "NativeBase.Text": { + color: variables.btnWarningBg + }, + "NativeBase.Icon": { + color: variables.btnWarningBg + }, + "NativeBase.IconNB": { + color: variables.btnWarningBg + }, + backgroundColor: "transparent", + borderColor: variables.btnWarningBg, + borderWidth: variables.borderWidth * 2 + }, + ".danger": { + "NativeBase.Text": { + color: variables.btnDangerBg + }, + "NativeBase.Icon": { + color: variables.btnDangerBg + }, + "NativeBase.IconNB": { + color: variables.btnDangerBg + }, + backgroundColor: "transparent", + borderColor: variables.btnDangerBg, + borderWidth: variables.borderWidth * 2 + }, + ".disabled": { + backgroundColor: null, + borderColor: variables.btnDisabledBg, + borderWidth: variables.borderWidth * 2, + "NativeBase.Text": { + color: variables.btnDisabledBg + } + }, + "NativeBase.Text": { + color: variables.btnPrimaryBg + }, + "NativeBase.Icon": { + color: variables.btnPrimaryBg + }, + "NativeBase.IconNB": { + color: variables.btnPrimaryBg + }, + borderWidth: variables.borderWidth * 2, + elevation: null, + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + shadowRadius: null, + backgroundColor: "transparent" + }, + + ".dark": { + ".bordered": { + "NativeBase.Text": { + color: "#000" + }, + "NativeBase.Icon": { + color: "#000" + }, + "NativeBase.IconNB": { + color: "#000" + } + }, + backgroundColor: "#000" + }, + ".light": { + ".transparent": { + "NativeBase.Text": { + color: "#f4f4f4" + }, + "NativeBase.Icon": { + color: "#f4f4f4" + }, + "NativeBase.IconNB": { + color: "#f4f4f4" + }, + backgroundColor: null + }, + ".bordered": { + "NativeBase.Text": { + color: "#f4f4f4" + }, + "NativeBase.Icon": { + color: "#f4f4f4" + }, + "NativeBase.IconNB": { + color: "#f4f4f4" + } + }, + "NativeBase.Text": { + color: "#000" + }, + "NativeBase.Icon": { + color: "#000" + }, + "NativeBase.IconNB": { + color: "#000" + }, + backgroundColor: "#f4f4f4" + }, + + ".primary": { + ".bordered": { + "NativeBase.Text": { + color: variables.btnPrimaryBg + }, + "NativeBase.Icon": { + color: variables.btnPrimaryBg + }, + "NativeBase.IconNB": { + color: variables.btnPrimaryBg + } + }, + backgroundColor: variables.btnPrimaryBg + }, + + ".success": { + ".bordered": { + "NativeBase.Text": { + color: variables.btnSuccessBg + }, + "NativeBase.Icon": { + color: variables.btnSuccessBg + }, + "NativeBase.IconNB": { + color: variables.btnSuccessBg + } + }, + backgroundColor: variables.btnSuccessBg + }, + + ".info": { + ".bordered": { + "NativeBase.Text": { + color: variables.btnInfoBg + }, + "NativeBase.Icon": { + color: variables.btnInfoBg + }, + "NativeBase.IconNB": { + color: variables.btnInfoBg + } + }, + backgroundColor: variables.btnInfoBg + }, + + ".warning": { + ".bordered": { + "NativeBase.Text": { + color: variables.btnWarningBg + }, + "NativeBase.Icon": { + color: variables.btnWarningBg + }, + "NativeBase.IconNB": { + color: variables.btnWarningBg + } + }, + backgroundColor: variables.btnWarningBg + }, + + ".danger": { + ".bordered": { + "NativeBase.Text": { + color: variables.btnDangerBg + }, + "NativeBase.Icon": { + color: variables.btnDangerBg + }, + "NativeBase.IconNB": { + color: variables.btnDangerBg + } + }, + backgroundColor: variables.btnDangerBg + }, + + ".block": { + justifyContent: "center", + alignSelf: "stretch" + }, + + ".full": { + justifyContent: "center", + alignSelf: "stretch", + borderRadius: 0 + }, + + ".rounded": { + paddingHorizontal: variables.buttonPadding + 20, + borderRadius: variables.borderRadiusLarge + }, + + ".transparent": { + backgroundColor: "transparent", + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + + "NativeBase.Text": { + color: variables.btnPrimaryBg + }, + "NativeBase.Icon": { + color: variables.btnPrimaryBg + }, + "NativeBase.IconNB": { + color: variables.btnPrimaryBg + }, + ".dark": { + "NativeBase.Text": { + color: "#000" + }, + "NativeBase.IconNB": { + color: "#000" + }, + "NativeBase.Icon": { + color: "#000" + }, + backgroundColor: null + }, + ".danger": { + "NativeBase.Text": { + color: variables.btnDangerBg + }, + "NativeBase.IconNB": { + color: variables.btnDangerBg + }, + "NativeBase.Icon": { + color: variables.btnDangerBg + }, + backgroundColor: null + }, + ".warning": { + "NativeBase.Text": { + color: variables.btnWarningBg + }, + "NativeBase.IconNB": { + color: variables.btnWarningBg + }, + "NativeBase.Icon": { + color: variables.btnWarningBg + }, + backgroundColor: null + }, + ".info": { + "NativeBase.Text": { + color: variables.btnInfoBg + }, + "NativeBase.IconNB": { + color: variables.btnInfoBg + }, + "NativeBase.Icon": { + color: variables.btnInfoBg + }, + backgroundColor: null + }, + ".primary": { + "NativeBase.Text": { + color: variables.btnPrimaryBg + }, + "NativeBase.IconNB": { + color: variables.btnPrimaryBg + }, + "NativeBase.Icon": { + color: variables.btnPrimaryBg + }, + backgroundColor: null + }, + ".success": { + "NativeBase.Text": { + color: variables.btnSuccessBg + }, + "NativeBase.IconNB": { + color: variables.btnSuccessBg + }, + "NativeBase.Icon": { + color: variables.btnSuccessBg + }, + backgroundColor: null + }, + ".light": { + "NativeBase.Text": { + color: "#f4f4f4" + }, + "NativeBase.IconNB": { + color: "#f4f4f4" + }, + "NativeBase.Icon": { + color: "#f4f4f4" + }, + backgroundColor: null + } + }, + + ".small": { + height: 30, + "NativeBase.Text": { + fontSize: 14 + } + }, + + ".large": { + height: 60, + "NativeBase.Text": { + fontSize: 22, + lineHeight: 32 + } + }, + + ".capitalize": {}, + + ".vertical": { + flexDirection: "column", + height: null + }, + + "NativeBase.Text": { + fontFamily: variables.btnFontFamily, + marginLeft: 0, + marginRight: 0, + color: variables.inverseTextColor, + fontSize: variables.btnTextSize, + lineHeight: variables.btnLineHeight + // childPosition: 1 + }, + + "NativeBase.Icon": { + color: variables.inverseTextColor, + fontSize: 24, + marginHorizontal: 5, + paddingTop: platform === "ios" ? 2 : undefined + }, + "NativeBase.IconNB": { + color: variables.inverseTextColor, + fontSize: 24, + marginHorizontal: 5, + paddingTop: platform === "ios" ? 2 : undefined + }, + + ".iconLeft": { + "NativeBase.Text": { + marginLeft: variables.buttonPadding + }, + "NativeBase.IconNB": { + marginRight: 10, + marginLeft: 0 + }, + "NativeBase.Icon": { + marginRight: 10, + marginLeft: 0 + } + }, + ".iconRight": { + "NativeBase.Text": { + marginRight: variables.buttonPadding + }, + "NativeBase.IconNB": { + marginLeft: 10, + marginRight: 0 + }, + "NativeBase.Icon": { + marginLeft: 10, + marginRight: 0 + } + }, + ".picker": { + "NativeBase.Text": { + ".note": { + fontSize: 16, + lineHeight: null + } + } + }, + + paddingVertical: variables.buttonPadding, + paddingHorizontal: variables.buttonPadding + 10, + backgroundColor: variables.btnPrimaryBg, + borderRadius: variables.borderRadiusBase, + borderColor: variables.btnPrimaryBg, + borderWidth: null, + height: 45, + alignSelf: "flex-start", + flexDirection: "row", + elevation: 2, + shadowColor: platformStyle === "material" ? "#000" : undefined, + shadowOffset: + platformStyle === "material" ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === "material" ? 0.2 : undefined, + shadowRadius: platformStyle === "material" ? 1.2 : undefined, + alignItems: "center", + justifyContent: "space-between" + }; + return buttonTheme; +}; diff --git a/native-base-theme/components/Card.js b/native-base-theme/components/Card.js new file mode 100644 index 0000000..ce9bac5 --- /dev/null +++ b/native-base-theme/components/Card.js @@ -0,0 +1,28 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const cardTheme = { + ".transparent": { + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + shadowRadius: null, + elevation: null + }, + marginVertical: 5, + marginHorizontal: 2, + flex: 1, + borderWidth: variables.borderWidth, + borderRadius: 2, + borderColor: variables.cardBorderColor, + flexWrap: "wrap", + backgroundColor: variables.cardDefaultBg, + shadowColor: "#000", + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.1, + shadowRadius: 1.5, + elevation: 3 + }; + + return cardTheme; +}; diff --git a/native-base-theme/components/CardItem.js b/native-base-theme/components/CardItem.js new file mode 100644 index 0000000..5cab188 --- /dev/null +++ b/native-base-theme/components/CardItem.js @@ -0,0 +1,213 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const platform = variables.platform; + + const cardItemTheme = { + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '400', + marginRight: 20, + }, + }, + flex: 1, + marginLeft: 10, + alignItems: null, + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize, + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize, + }, + 'NativeBase.Text': { + marginLeft: 10, + alignSelf: 'center', + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 4, + color: variables.sTabBarActiveTextColor, + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + marginHorizontal: null, + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + }, + paddingVertical: null, + paddingHorizontal: null, + paddingRight: variables.listItemPadding + 5, + }, + }, + flex: 1, + flexDirection: 'row', + alignItems: 'center', + }, + + '.content': { + 'NativeBase.Text': { + color: platform === 'ios' ? '#555' : '#222', + fontSize: variables.DefaultFontSize - 3, + }, + }, + '.cardBody': { + padding: -5, + 'NativeBase.Text': { + marginTop: 5, + }, + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + marginRight: 20, + }, + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 4, + color: variables.sTabBarActiveTextColor, + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + marginHorizontal: null, + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + }, + paddingVertical: null, + paddingHorizontal: null, + paddingRight: variables.listItemPadding + 5, + alignSelf: 'stretch', + }, + }, + flex: 1, + alignSelf: 'stretch', + alignItems: 'flex-start', + }, + 'NativeBase.Right': { + 'NativeBase.Badge': { + alignSelf: null, + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 4, + color: variables.sTabBarActiveTextColor, + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + marginHorizontal: null, + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + }, + paddingVertical: null, + paddingHorizontal: null, + }, + alignSelf: null, + }, + 'NativeBase.Icon': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: variables.cardBorderColor, + }, + 'NativeBase.IconNB': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: variables.cardBorderColor, + }, + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 2, + alignSelf: null, + }, + 'NativeBase.Thumbnail': { + alignSelf: null, + }, + 'NativeBase.Image': { + alignSelf: null, + }, + 'NativeBase.Radio': { + alignSelf: null, + }, + 'NativeBase.Checkbox': { + alignSelf: null, + }, + 'NativeBase.Switch': { + alignSelf: null, + }, + flex: 0.8, + }, + '.header': { + 'NativeBase.Text': { + fontSize: 16, + fontWeight: platform === 'ios' ? '500' : undefined, + }, + '.bordered': { + 'NativeBase.Text': { + color: variables.sTabBarActiveTextColor, + fontWeight: platform === 'ios' ? '500' : undefined, + }, + borderBottomWidth: platform === 'ios' ? variables.borderWidth : null, + }, + borderBottomWidth: null, + paddingVertical: variables.listItemPadding + 5, + }, + '.footer': { + 'NativeBase.Text': { + fontSize: 16, + fontWeight: platform === 'ios' ? '500' : undefined, + }, + '.bordered': { + 'NativeBase.Text': { + color: variables.activeTab, + fontWeight: '500', + }, + borderTopWidth: platform === 'ios' ? variables.borderWidth : null, + }, + borderBottomWidth: null, + }, + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + }, + }, + + 'NativeBase.Icon': { + width: variables.iconFontSize + 5, + fontSize: variables.iconFontSize - 2, + }, + 'NativeBase.IconNB': { + width: variables.iconFontSize + 5, + fontSize: variables.iconFontSize - 2, + }, + + '.bordered': { + borderBottomWidth: variables.borderWidth, + borderColor: variables.cardBorderColor, + }, + flexDirection: 'row', + alignItems: 'center', + borderRadius: 2, + padding: variables.listItemPadding + 5, + paddingVertical: variables.listItemPadding, + backgroundColor: variables.cardDefaultBg, + }; + + return cardItemTheme; +}; diff --git a/native-base-theme/components/CheckBox.js b/native-base-theme/components/CheckBox.js new file mode 100644 index 0000000..f82bdf8 --- /dev/null +++ b/native-base-theme/components/CheckBox.js @@ -0,0 +1,36 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const checkBoxTheme = { + ".checked": { + "NativeBase.Icon": { + color: variables.checkboxTickColor + }, + "NativeBase.IconNB": { + color: variables.checkboxTickColor + } + }, + "NativeBase.Icon": { + color: "transparent", + lineHeight: variables.CheckboxIconSize, + marginTop: variables.CheckboxIconMarginTop, + fontSize: variables.CheckboxFontSize + }, + "NativeBase.IconNB": { + color: "transparent", + lineHeight: variables.CheckboxIconSize, + marginTop: variables.CheckboxIconMarginTop, + fontSize: variables.CheckboxFontSize + }, + borderRadius: variables.CheckboxRadius, + overflow: "hidden", + width: variables.checkboxSize, + height: variables.checkboxSize, + borderWidth: variables.CheckboxBorderWidth, + paddingLeft: variables.CheckboxPaddingLeft - 1, + paddingBottom: variables.CheckboxPaddingBottom, + left: 10 + }; + + return checkBoxTheme; +}; diff --git a/native-base-theme/components/Container.js b/native-base-theme/components/Container.js new file mode 100644 index 0000000..9f1fbf4 --- /dev/null +++ b/native-base-theme/components/Container.js @@ -0,0 +1,13 @@ +import { Platform, Dimensions } from "react-native"; + +import variable from "./../variables/platform"; + +const deviceHeight = Dimensions.get("window").height; +export default (variables = variable) => { + const theme = { + flex: 1, + height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20 + }; + + return theme; +}; diff --git a/native-base-theme/components/Content.js b/native-base-theme/components/Content.js new file mode 100644 index 0000000..17d66c8 --- /dev/null +++ b/native-base-theme/components/Content.js @@ -0,0 +1,17 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const contentTheme = { + ".padder": { + padding: variables.contentPadding + }, + flex: 1, + backgroundColor: "transparent", + "NativeBase.Segment": { + borderWidth: 0, + backgroundColor: "transparent" + } + }; + + return contentTheme; +}; diff --git a/native-base-theme/components/Fab.js b/native-base-theme/components/Fab.js new file mode 100644 index 0000000..b76f4fb --- /dev/null +++ b/native-base-theme/components/Fab.js @@ -0,0 +1,23 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platform = variables.platform; + + const fabTheme = { + "NativeBase.Button": { + alignItems: "center", + padding: null, + justifyContent: "center", + "NativeBase.Icon": { + alignSelf: "center" + }, + "NativeBase.IconNB": { + alignSelf: "center", + fontSize: 20, + lineHeight: platform === "ios" ? 24 : undefined + } + } + }; + + return fabTheme; +}; diff --git a/native-base-theme/components/Footer.js b/native-base-theme/components/Footer.js new file mode 100644 index 0000000..8f74e28 --- /dev/null +++ b/native-base-theme/components/Footer.js @@ -0,0 +1,98 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platformStyle = variables.platformStyle; + const platform = variables.platform; + + const footerTheme = { + "NativeBase.Left": { + "NativeBase.Button": { + ".transparent": { + backgroundColor: "transparent", + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null + }, + "NativeBase.Icon": { + color: variables.topTabBarActiveTextColor + }, + "NativeBase.IconNB": { + color: variables.topTabBarActiveTextColor + }, + alignSelf: null + }, + flex: 1, + alignSelf: "center", + alignItems: "flex-start" + }, + "NativeBase.Body": { + flex: 1, + alignItems: "center", + alignSelf: "center", + flexDirection: "row", + "NativeBase.Button": { + alignSelf: "center", + ".transparent": { + backgroundColor: "transparent", + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null + }, + ".full": { + height: variables.footerHeight, + flex: 1 + }, + "NativeBase.Icon": { + color: variables.topTabBarActiveTextColor + }, + "NativeBase.IconNB": { + color: variables.topTabBarActiveTextColor + } + } + }, + "NativeBase.Right": { + "NativeBase.Button": { + ".transparent": { + backgroundColor: "transparent", + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null + }, + "NativeBase.Icon": { + color: variables.topTabBarActiveTextColor + }, + "NativeBase.IconNB": { + color: variables.topTabBarActiveTextColor + }, + alignSelf: null + }, + flex: 1, + alignSelf: "center", + alignItems: "flex-end" + }, + backgroundColor: variables.footerDefaultBg, + flexDirection: "row", + justifyContent: "center", + borderTopWidth: platform === "ios" && platformStyle !== "material" + ? variables.borderWidth + : undefined, + borderColor: platform === "ios" && platformStyle !== "material" + ? "#cbcbcb" + : undefined, + height: variables.footerHeight, + elevation: 3, + left: 0, + right: 0 + }; + + return footerTheme; +}; diff --git a/native-base-theme/components/FooterTab.js b/native-base-theme/components/FooterTab.js new file mode 100644 index 0000000..f1e9a81 --- /dev/null +++ b/native-base-theme/components/FooterTab.js @@ -0,0 +1,77 @@ +import { Platform } from "react-native"; + +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platform = variables.platform; + + const footerTabTheme = { + "NativeBase.Button": { + ".active": { + "NativeBase.Text": { + color: variables.tabBarActiveTextColor, + fontSize: variables.tabBarTextSize, + lineHeight: 16 + }, + "NativeBase.Icon": { + color: variables.tabBarActiveTextColor + }, + "NativeBase.IconNB": { + color: variables.tabBarActiveTextColor + }, + backgroundColor: variables.tabActiveBgColor + }, + flexDirection: null, + backgroundColor: "transparent", + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + alignSelf: "center", + flex: 1, + height: variables.footerHeight, + justifyContent: "center", + ".badge": { + "NativeBase.Badge": { + "NativeBase.Text": { + fontSize: 11, + fontWeight: platform === "ios" ? "600" : undefined, + lineHeight: 14 + }, + top: -3, + alignSelf: "center", + left: 10, + zIndex: 99, + height: 18, + padding: 1.7, + paddingHorizontal: 3 + }, + "NativeBase.Icon": { + marginTop: -18 + } + }, + "NativeBase.Icon": { + color: variables.tabBarTextColor + }, + "NativeBase.IconNB": { + color: variables.tabBarTextColor + }, + "NativeBase.Text": { + color: variables.tabBarTextColor, + fontSize: variables.tabBarTextSize, + lineHeight: 16 + } + }, + backgroundColor: Platform.OS === "android" + ? variables.tabActiveBgColor + : undefined, + flexDirection: "row", + justifyContent: "space-between", + flex: 1, + alignSelf: "stretch" + }; + + return footerTabTheme; +}; diff --git a/native-base-theme/components/Form.js b/native-base-theme/components/Form.js new file mode 100644 index 0000000..d022d50 --- /dev/null +++ b/native-base-theme/components/Form.js @@ -0,0 +1,88 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platform = variables.platform; + + const theme = { + "NativeBase.Item": { + ".fixedLabel": { + "NativeBase.Label": { + paddingLeft: null + }, + marginLeft: 15 + }, + ".inlineLabel": { + "NativeBase.Label": { + paddingLeft: null + }, + marginLeft: 15 + }, + ".placeholderLabel": { + "NativeBase.Input": {} + }, + ".stackedLabel": { + "NativeBase.Label": { + top: 5, + paddingLeft: null + }, + "NativeBase.Input": { + paddingLeft: null, + marginLeft: platform === "ios" ? undefined : -5 + }, + "NativeBase.Icon": { + marginTop: 36 + }, + marginLeft: 15 + }, + ".floatingLabel": { + "NativeBase.Input": { + paddingLeft: null, + top: 10, + marginLeft: platform === "ios" ? undefined : -5 + }, + "NativeBase.Label": { + left: 0, + top: 8 + }, + "NativeBase.Icon": { + top: 6 + }, + marginTop: 15, + marginLeft: 15 + }, + ".regular": { + "NativeBase.Label": { + left: 0 + }, + marginLeft: 0 + }, + ".rounded": { + "NativeBase.Label": { + left: 0 + }, + marginLeft: 0 + }, + ".underline": { + "NativeBase.Label": { + left: 0, + top: 0, + position: "relative" + }, + "NativeBase.Input": { + left: -15 + }, + marginLeft: 15 + }, + ".last": { + marginLeft: 0, + paddingLeft: 15 + }, + "NativeBase.Label": { + paddingRight: 5 + }, + marginLeft: 15 + } + }; + + return theme; +}; diff --git a/native-base-theme/components/H1.js b/native-base-theme/components/H1.js new file mode 100644 index 0000000..7ce6b1d --- /dev/null +++ b/native-base-theme/components/H1.js @@ -0,0 +1,11 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const h1Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH1, + lineHeight: variables.lineHeightH1, + }; + + return h1Theme; +}; diff --git a/native-base-theme/components/H2.js b/native-base-theme/components/H2.js new file mode 100644 index 0000000..aaf2b79 --- /dev/null +++ b/native-base-theme/components/H2.js @@ -0,0 +1,11 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const h2Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH2, + lineHeight: variables.lineHeightH2, + }; + + return h2Theme; +}; diff --git a/native-base-theme/components/H3.js b/native-base-theme/components/H3.js new file mode 100644 index 0000000..be85213 --- /dev/null +++ b/native-base-theme/components/H3.js @@ -0,0 +1,11 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const h3Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH3, + lineHeight: variables.lineHeightH3 + }; + + return h3Theme; +}; diff --git a/native-base-theme/components/Header.js b/native-base-theme/components/Header.js new file mode 100644 index 0000000..b8f2468 --- /dev/null +++ b/native-base-theme/components/Header.js @@ -0,0 +1,312 @@ +import { PixelRatio } from "react-native"; + +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platformStyle = variables.platformStyle; + const platform = variables.platform; + + const headerTheme = { + ".span": { + height: 128, + "NativeBase.Left": { + alignSelf: "flex-start", + }, + "NativeBase.Body": { + alignSelf: "flex-end", + alignItems: "flex-start", + justifyContent: "center", + paddingBottom: 26, + }, + "NativeBase.Right": { + alignSelf: "flex-start", + }, + }, + ".hasSubtitle": { + "NativeBase.Body": { + "NativeBase.Title": { + fontSize: variables.titleFontSize - 2, + fontFamily: variables.titleFontfamily, + textAlign: "center", + }, + "NativeBase.Subtitle": { + fontSize: variables.subTitleFontSize, + fontFamily: variables.titleFontfamily, + color: variables.subtitleColor, + textAlign: "center", + }, + }, + }, + ".noShadow": { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + }, + ".hasTabs": { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + borderBottomWidth: null, + }, + ".hasSegment": { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + borderBottomWidth: null, + }, + "NativeBase.Button": { + justifyContent: "center", + alignSelf: "center", + alignItems: "center", + ".transparent": { + "NativeBase.Text": { + color: variables.toolbarBtnColor, + fontWeight: "600", + }, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + }, + paddingHorizontal: variables.buttonPadding, + }, + paddingHorizontal: 15, + }, + ".searchBar": { + "NativeBase.Item": { + "NativeBase.Icon": { + backgroundColor: "transparent", + color: variables.dropdownLinkColor, + fontSize: variables.toolbarSearchIconSize, + alignItems: "center", + marginTop: 2, + paddingRight: 10, + paddingLeft: 10, + }, + "NativeBase.IconNB": { + backgroundColor: "transparent", + color: null, + alignSelf: "center", + }, + "NativeBase.Input": { + alignSelf: "center", + lineHeight: 24, + height: variables.searchBarHeight, + }, + alignSelf: "center", + alignItems: "center", + justifyContent: "flex-start", + flex: 1, + height: variables.searchBarHeight, + borderColor: "transparent", + backgroundColor: variables.toolbarInputColor, + }, + "NativeBase.Button": { + ".transparent": { + "NativeBase.Text": { + fontWeight: "500", + }, + paddingHorizontal: null, + paddingLeft: platform === "ios" ? 10 : null, + }, + paddingHorizontal: platform === "ios" ? undefined : null, + width: platform === "ios" ? undefined : 0, + height: platform === "ios" ? undefined : 0, + }, + }, + ".rounded": { + "NativeBase.Item": { + borderRadius: platform === "ios" && platformStyle !== "material" ? 25 : 3, + }, + }, + "NativeBase.Left": { + "NativeBase.Button": { + ".hasText": { + marginLeft: -10, + height: 30, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 5, + marginLeft: 2, + }, + "NativeBase.Text": { + color: variables.toolbarBtnColor, + fontSize: 17, + marginLeft: 2, + lineHeight: 21, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 5, + marginLeft: 2, + }, + }, + ".transparent": { + marginLeft: -3, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 2, + marginLeft: 2, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 2, + marginLeft: 2, + }, + "NativeBase.Text": { + color: variables.toolbarBtnColor, + fontSize: 17, + top: platform === "ios" ? undefined : -1.5, + }, + backgroundColor: "transparent", + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + }, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + }, + alignSelf: null, + paddingHorizontal: variables.buttonPadding, + }, + flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.5, + alignSelf: "center", + alignItems: "flex-start", + }, + "NativeBase.Body": { + flex: 1, + alignItems: platform === "ios" && platformStyle !== "material" ? "center" : "flex-start", + alignSelf: "center", + "NativeBase.Segment": { + borderWidth: 0, + alignSelf: "flex-end", + marginRight: platform === "ios" ? -40 : -55, + }, + "NativeBase.Button": { + alignSelf: "center", + ".transparent": { + backgroundColor: "transparent", + }, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + }, + "NativeBase.Text": { + color: variables.inverseTextColor, + backgroundColor: "transparent", + }, + }, + }, + "NativeBase.Right": { + "NativeBase.Button": { + ".hasText": { + height: 30, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 2, + marginRight: 2, + marginLeft: 5, + }, + "NativeBase.Text": { + color: variables.toolbarBtnColor, + fontSize: 17, + lineHeight: 21, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 2, + marginRight: 2, + marginLeft: 5, + }, + }, + ".transparent": { + marginRight: -8, + paddingHorizontal: 15, + borderRadius: 50, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2, + marginTop: 2, + marginLeft: 2, + marginRight: 2, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2, + marginTop: 2, + marginLeft: 2, + marginRight: 2, + }, + "NativeBase.Text": { + color: variables.toolbarBtnColor, + fontSize: 17, + top: platform === "ios" ? undefined : -1.5, + }, + backgroundColor: "transparent", + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + }, + "NativeBase.Icon": { + color: variables.toolbarBtnColor, + }, + "NativeBase.IconNB": { + color: variables.toolbarBtnColor, + }, + alignSelf: null, + paddingHorizontal: variables.buttonPadding, + }, + flex: 1, + alignSelf: "center", + alignItems: "flex-end", + flexDirection: "row", + justifyContent: "flex-end", + }, + backgroundColor: variables.toolbarDefaultBg, + flexDirection: "row", + paddingHorizontal: 10, + justifyContent: "center", + paddingTop: platform === "ios" ? 15 : 0, + borderBottomWidth: platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0, + borderBottomColor: variables.toolbarDefaultBorder, + height: variables.toolbarHeight, + elevation: 3, + shadowColor: platformStyle === "material" ? "#000" : undefined, + shadowOffset: platformStyle === "material" ? { width: 0, height: 2 } : undefined, + shadowOpacity: platformStyle === "material" ? 0.2 : undefined, + shadowRadius: platformStyle === "material" ? 1.2 : undefined, + top: 0, + left: 0, + right: 0, + }; + + return headerTheme; +}; diff --git a/native-base-theme/components/Icon.js b/native-base-theme/components/Icon.js new file mode 100644 index 0000000..697d90e --- /dev/null +++ b/native-base-theme/components/Icon.js @@ -0,0 +1,10 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const iconTheme = { + fontSize: variables.iconFontSize, + color: "#000" + }; + + return iconTheme; +}; diff --git a/native-base-theme/components/Input.js b/native-base-theme/components/Input.js new file mode 100644 index 0000000..0f971e8 --- /dev/null +++ b/native-base-theme/components/Input.js @@ -0,0 +1,18 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const inputTheme = { + '.multiline': { + height: null, + }, + height: variables.inputHeightBase, + color: variables.inputColor, + paddingLeft: 5, + paddingRight: 5, + flex: 1, + fontSize: variables.inputFontSize, + lineHeight: variables.inputLineHeight, + }; + + return inputTheme; +}; diff --git a/native-base-theme/components/InputGroup.js b/native-base-theme/components/InputGroup.js new file mode 100644 index 0000000..9baa8a6 --- /dev/null +++ b/native-base-theme/components/InputGroup.js @@ -0,0 +1,130 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const inputGroupTheme = { + "NativeBase.Icon": { + fontSize: 24, + color: variables.sTabBarActiveTextColor, + paddingHorizontal: 5 + }, + "NativeBase.IconNB": { + fontSize: 24, + color: variables.sTabBarActiveTextColor, + paddingHorizontal: 5 + }, + "NativeBase.Input": { + height: variables.inputHeightBase, + color: variables.inputColor, + paddingLeft: 5, + paddingRight: 5, + flex: 1, + fontSize: variables.inputFontSize, + lineHeight: variables.inputLineHeight + }, + ".underline": { + ".success": { + borderColor: variables.inputSuccessBorderColor + }, + ".error": { + borderColor: variables.inputErrorBorderColor + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor + }, + ".regular": { + ".success": { + borderColor: variables.inputSuccessBorderColor + }, + ".error": { + borderColor: variables.inputErrorBorderColor + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderColor: variables.inputBorderColor + }, + ".rounded": { + ".success": { + borderColor: variables.inputSuccessBorderColor + }, + ".error": { + borderColor: variables.inputErrorBorderColor + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderRadius: variables.inputGroupRoundedBorderRadius, + borderColor: variables.inputBorderColor + }, + + ".success": { + "NativeBase.Icon": { + color: variables.inputSuccessBorderColor + }, + "NativeBase.IconNB": { + color: variables.inputSuccessBorderColor + }, + ".rounded": { + borderRadius: 30, + borderColor: variables.inputSuccessBorderColor + }, + ".regular": { + borderColor: variables.inputSuccessBorderColor + }, + ".underline": { + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputSuccessBorderColor + }, + borderColor: variables.inputSuccessBorderColor + }, + + ".error": { + "NativeBase.Icon": { + color: variables.inputErrorBorderColor + }, + "NativeBase.IconNB": { + color: variables.inputErrorBorderColor + }, + ".rounded": { + borderRadius: 30, + borderColor: variables.inputErrorBorderColor + }, + ".regular": { + borderColor: variables.inputErrorBorderColor + }, + ".underline": { + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputErrorBorderColor + }, + borderColor: variables.inputErrorBorderColor + }, + ".disabled": { + "NativeBase.Icon": { + color: "#384850" + }, + "NativeBase.IconNB": { + color: "#384850" + } + }, + + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + backgroundColor: "transparent", + flexDirection: "row", + alignItems: "center" + }; + + return inputGroupTheme; +}; diff --git a/native-base-theme/components/Item.js b/native-base-theme/components/Item.js new file mode 100644 index 0000000..ffb7eaf --- /dev/null +++ b/native-base-theme/components/Item.js @@ -0,0 +1,215 @@ +import { Platform } from 'react-native'; + +import variable from './../variables/platform'; + +export default (variables = variable) => { + const itemTheme = { + '.floatingLabel': { + 'NativeBase.Input': { + height: 60, + top: 8, + }, + 'NativeBase.Label': { + top: 8, + }, + 'NativeBase.Icon': { + top: 6, + }, + }, + '.fixedLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + flex: 1, + height: null, + width: null, + fontSize: variables.inputFontSize, + }, + 'NativeBase.Input': { + flex: 2, + fontSize: variables.inputFontSize, + }, + }, + '.stackedLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + paddingTop: 5, + alignSelf: 'flex-start', + fontSize: variables.inputFontSize - 2, + }, + 'NativeBase.Icon': { + marginTop: 36, + }, + 'NativeBase.Input': { + alignSelf: Platform.OS === 'ios' ? 'stretch' : 'flex-start', + flex: 1, + width: Platform.OS === 'ios' ? null : variables.deviceWidth - 25, + fontSize: variables.inputFontSize, + }, + flexDirection: null, + }, + '.inlineLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + paddingRight: 20, + height: null, + width: null, + fontSize: variables.inputFontSize, + }, + 'NativeBase.Input': { + paddingLeft: 5, + fontSize: variables.inputFontSize, + }, + flexDirection: 'row', + }, + 'NativeBase.Label': { + fontSize: variables.inputFontSize, + color: variables.inputColorPlaceholder, + paddingRight: 5, + }, + 'NativeBase.Icon': { + fontSize: 24, + paddingRight: 8, + }, + 'NativeBase.IconNB': { + fontSize: 24, + paddingRight: 8, + }, + 'NativeBase.Input': { + '.multiline': { + height: null, + }, + height: variables.inputHeightBase, + color: variables.inputColor, + flex: 1, + top: Platform.OS === 'ios' ? 1.5 : undefined, + fontSize: variables.inputFontSize, + lineHeight: variables.inputLineHeight, + }, + '.underline': { + 'NativeBase.Input': { + paddingLeft: 15, + }, + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + }, + '.regular': { + 'NativeBase.Input': { + paddingLeft: 8, + }, + 'NativeBase.Icon': { + paddingLeft: 10, + }, + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + borderWidth: variables.borderWidth * 2, + borderColor: variables.inputBorderColor, + }, + '.rounded': { + 'NativeBase.Input': { + paddingLeft: 8, + }, + 'NativeBase.Icon': { + paddingLeft: 10, + }, + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + borderWidth: variables.borderWidth * 2, + borderRadius: 30, + borderColor: variables.inputBorderColor, + }, + + '.success': { + 'NativeBase.Icon': { + color: variables.inputSuccessBorderColor, + }, + 'NativeBase.IconNB': { + color: variables.inputSuccessBorderColor, + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputSuccessBorderColor, + }, + '.regular': { + borderColor: variables.inputSuccessBorderColor, + }, + '.underline': { + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputSuccessBorderColor, + }, + borderColor: variables.inputSuccessBorderColor, + }, + + '.error': { + 'NativeBase.Icon': { + color: variables.inputErrorBorderColor, + }, + 'NativeBase.IconNB': { + color: variables.inputErrorBorderColor, + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputErrorBorderColor, + }, + '.regular': { + borderColor: variables.inputErrorBorderColor, + }, + '.underline': { + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputErrorBorderColor, + }, + borderColor: variables.inputErrorBorderColor, + }, + '.disabled': { + 'NativeBase.Icon': { + color: '#384850', + }, + 'NativeBase.IconNB': { + color: '#384850', + }, + }, + + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center', + marginLeft: 2, + }; + + return itemTheme; +}; diff --git a/native-base-theme/components/Label.js b/native-base-theme/components/Label.js new file mode 100644 index 0000000..2f21dcb --- /dev/null +++ b/native-base-theme/components/Label.js @@ -0,0 +1,12 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const labelTheme = { + ".focused": { + width: 0 + }, + fontSize: 17 + }; + + return labelTheme; +}; diff --git a/native-base-theme/components/Left.js b/native-base-theme/components/Left.js new file mode 100644 index 0000000..30dfbd1 --- /dev/null +++ b/native-base-theme/components/Left.js @@ -0,0 +1,11 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const leftTheme = { + flex: 1, + alignSelf: 'center', + alignItems: 'flex-start', + }; + + return leftTheme; +}; diff --git a/native-base-theme/components/ListItem.js b/native-base-theme/components/ListItem.js new file mode 100644 index 0000000..ac9fd39 --- /dev/null +++ b/native-base-theme/components/ListItem.js @@ -0,0 +1,407 @@ +import { Platform, PixelRatio } from "react-native"; + +import pickerTheme from "./Picker"; +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platform = variables.platform; + + const listItemTheme = { + "NativeBase.InputGroup": { + "NativeBase.Icon": { + paddingRight: 5 + }, + "NativeBase.IconNB": { + paddingRight: 5 + }, + "NativeBase.Input": { + paddingHorizontal: 5 + }, + flex: 1, + borderWidth: null, + margin: -10, + borderBottomColor: "transparent" + }, + ".searchBar": { + "NativeBase.Item": { + "NativeBase.Icon": { + backgroundColor: "transparent", + color: variables.dropdownLinkColor, + fontSize: platform === "ios" + ? variables.iconFontSize - 10 + : variables.iconFontSize - 5, + alignItems: "center", + marginTop: 2, + paddingRight: 8 + }, + "NativeBase.IconNB": { + backgroundColor: "transparent", + color: null, + alignSelf: "center" + }, + "NativeBase.Input": { + alignSelf: "center" + }, + alignSelf: "center", + alignItems: "center", + justifyContent: "flex-start", + flex: 1, + height: platform === "ios" ? 30 : 40, + borderColor: "transparent", + backgroundColor: "#fff", + borderRadius: 5 + }, + "NativeBase.Button": { + ".transparent": { + "NativeBase.Text": { + fontWeight: "500" + }, + paddingHorizontal: null, + paddingLeft: platform === "ios" ? 10 : null + }, + paddingHorizontal: platform === "ios" ? undefined : null, + width: platform === "ios" ? undefined : 0, + height: platform === "ios" ? undefined : 0 + }, + backgroundColor: variables.toolbarInputColor, + padding: 10, + marginLeft: null + }, + "NativeBase.CheckBox": { + marginLeft: -10, + marginRight: 10, + }, + ".first": { + ".itemHeader": { + paddingTop: variables.listItemPadding + 3 + } + }, + ".itemHeader": { + ".first": { + paddingTop: variables.listItemPadding + 3 + }, + borderBottomWidth: platform === "ios" ? variables.borderWidth : null, + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 5, + paddingTop: platform === "ios" + ? variables.listItemPadding + 25 + : undefined, + paddingBottom: platform === "android" + ? variables.listItemPadding + 20 + : undefined, + flexDirection: "row", + borderColor: variables.listBorderColor, + "NativeBase.Text": { + fontSize: 14, + color: platform === "ios" ? undefined : variables.listNoteColor + } + }, + ".itemDivider": { + borderBottomWidth: null, + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 5, + backgroundColor: variables.listDividerBg, + flexDirection: "row", + borderColor: variables.listBorderColor + }, + ".selected": { + "NativeBase.Left": { + "NativeBase.Text": { + color: variables.brandPrimary + } + }, + "NativeBase.Text": { + color: variables.brandPrimary + } + }, + "NativeBase.Left": { + "NativeBase.Body": { + "NativeBase.Text": { + ".note": { + color: variables.listNoteColor, + fontWeight: "200" + }, + fontWeight: "600" + }, + marginLeft: 10, + alignItems: null, + alignSelf: null + }, + "NativeBase.Icon": { + width: variables.iconFontSize - 10, + fontSize: variables.iconFontSize - 10 + }, + "NativeBase.IconNB": { + width: variables.iconFontSize - 10, + fontSize: variables.iconFontSize - 10 + }, + "NativeBase.Text": { + marginLeft: 10, + alignSelf: "center" + }, + flexDirection: "row" + }, + "NativeBase.Body": { + "NativeBase.Text": { + marginHorizontal: variables.listItemPadding, + ".note": { + color: variables.listNoteColor, + fontWeight: "200" + } + }, + alignSelf: null, + alignItems: null + }, + "NativeBase.Right": { + "NativeBase.Badge": { + alignSelf: null + }, + "NativeBase.PickerNB": { + "NativeBase.Button": { + marginRight: -15, + "NativeBase.Text": { + color: variables.topTabBarActiveTextColor + } + } + }, + "NativeBase.Button": { + alignSelf: null, + ".transparent": { + "NativeBase.Text": { + color: variables.topTabBarActiveTextColor + } + } + }, + "NativeBase.Icon": { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: "#c9c8cd" + }, + "NativeBase.IconNB": { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: "#c9c8cd" + }, + "NativeBase.Text": { + ".note": { + color: variables.listNoteColor, + fontWeight: "200" + }, + alignSelf: null + }, + "NativeBase.Thumbnail": { + alignSelf: null + }, + "NativeBase.Image": { + alignSelf: null + }, + "NativeBase.Radio": { + alignSelf: null + }, + "NativeBase.Checkbox": { + alignSelf: null + }, + "NativeBase.Switch": { + alignSelf: null + }, + padding: null, + flex: 0.28 + }, + "NativeBase.Text": { + ".note": { + color: variables.listNoteColor, + fontWeight: "200" + }, + alignSelf: 'center' + }, + + ".last": { + marginLeft: -(variables.listItemPadding + 5), + paddingLeft: (variables.listItemPadding + 5) * 2, + top: 1 + }, + + ".avatar": { + "NativeBase.Left": { + flex: 0 + }, + "NativeBase.Body": { + "NativeBase.Text": { + marginLeft: null + }, + flex: 1, + paddingVertical: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + marginLeft: variables.listItemPadding + 5 + }, + "NativeBase.Right": { + "NativeBase.Text": { + ".note": { + fontSize: variables.noteFontSize - 2 + } + }, + flex: 0, + paddingRight: variables.listItemPadding + 5, + alignSelf: "stretch", + paddingVertical: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null + }, + + ".thumbnail": { + "NativeBase.Left": { + flex: 0 + }, + "NativeBase.Body": { + "NativeBase.Text": { + marginLeft: null + }, + flex: 1, + paddingVertical: variables.listItemPadding + 5, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + marginLeft: variables.listItemPadding + 5 + }, + "NativeBase.Right": { + "NativeBase.Button": { + ".transparent": { + "NativeBase.Text": { + fontSize: variables.listNoteSize, + color: variables.sTabBarActiveTextColor + } + }, + height: null + }, + flex: 0, + justifyContent: "center", + alignSelf: "stretch", + paddingRight: variables.listItemPadding + 5, + paddingVertical: variables.listItemPadding + 5, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null + }, + + ".icon": { + ".last": { + "NativeBase.Body": { + borderBottomWidth: null + }, + "NativeBase.Right": { + borderBottomWidth: null + }, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor + }, + "NativeBase.Left": { + "NativeBase.Button": { + "NativeBase.IconNB": { + marginHorizontal: null, + fontSize: variables.iconFontSize - 5 + }, + "NativeBase.Icon": { + marginHorizontal: null, + fontSize: variables.iconFontSize - 8 + }, + alignSelf: "center", + height: 29, + width: 29, + borderRadius: 6, + paddingVertical: null, + paddingHorizontal: null, + alignItems: "center", + justifyContent: "center" + }, + "NativeBase.Icon": { + width: variables.iconFontSize - 5, + fontSize: variables.iconFontSize - 2 + }, + "NativeBase.IconNB": { + width: variables.iconFontSize - 5, + fontSize: variables.iconFontSize - 2 + }, + paddingRight: variables.listItemPadding + 5, + flex: 0, + height: 44, + justifyContent: "center", + alignItems: "center" + }, + "NativeBase.Body": { + "NativeBase.Text": { + marginLeft: null, + fontSize: 17 + }, + flex: 1, + height: 44, + justifyContent: "center", + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + borderColor: variables.listBorderColor + }, + "NativeBase.Right": { + "NativeBase.Text": { + textAlign: "center", + color: "#8F8E95", + fontSize: 17 + }, + "NativeBase.IconNB": { + color: "#C8C7CC", + fontSize: variables.iconFontSize - 10, + alignSelf: "center", + paddingLeft: 10, + paddingTop: 3 + }, + "NativeBase.Icon": { + color: "#C8C7CC", + fontSize: variables.iconFontSize - 10, + alignSelf: "center", + paddingLeft: 10, + paddingTop: 3 + }, + "NativeBase.Switch": { + marginRight: Platform.OS === "ios" ? undefined : -5, + alignSelf: null + }, + "NativeBase.PickerNB": { + ...pickerTheme() + }, + flexDirection: "row", + alignItems: "center", + flex: 0, + alignSelf: "stretch", + height: 44, + justifyContent: "flex-end", + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + borderColor: variables.listBorderColor, + paddingRight: variables.listItemPadding + 5 + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null, + height: 44, + justifyContent: "center" + }, + ".noBorder": { + borderBottomWidth: null + }, + alignItems: "center", + flexDirection: "row", + paddingRight: variables.listItemPadding + 5, + paddingVertical: variables.listItemPadding + 3, + marginLeft: variables.listItemPadding + 5, + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + backgroundColor: variables.listBg, + borderColor: variables.listBorderColor + }; + + return listItemTheme; +}; diff --git a/native-base-theme/components/Picker.android.js b/native-base-theme/components/Picker.android.js new file mode 100644 index 0000000..be22e10 --- /dev/null +++ b/native-base-theme/components/Picker.android.js @@ -0,0 +1,13 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const pickerTheme = { + ".note": { + color: "#8F8E95" + }, + width: 90, + marginRight: -4 + }; + + return pickerTheme; +}; diff --git a/native-base-theme/components/Picker.ios.js b/native-base-theme/components/Picker.ios.js new file mode 100644 index 0000000..81e3bfe --- /dev/null +++ b/native-base-theme/components/Picker.ios.js @@ -0,0 +1,7 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const pickerTheme = {}; + + return pickerTheme; +}; diff --git a/native-base-theme/components/Radio.js b/native-base-theme/components/Radio.js new file mode 100644 index 0000000..e0b0dc9 --- /dev/null +++ b/native-base-theme/components/Radio.js @@ -0,0 +1,26 @@ +import { Platform } from "react-native"; + +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const radioTheme = { + ".selected": { + "NativeBase.IconNB": { + color: Platform.OS === "ios" + ? variables.brandPrimary + : variables.radioSelectedColorAndroid, + lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight, + height: Platform.OS === "ios" ? 20 : undefined + } + }, + "NativeBase.IconNB": { + color: Platform.OS === "ios" ? "transparent" : undefined, + lineHeight: Platform.OS === "ios" + ? undefined + : variables.radioBtnLineHeight, + fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize + } + }; + + return radioTheme; +}; diff --git a/native-base-theme/components/Right.js b/native-base-theme/components/Right.js new file mode 100644 index 0000000..bf2480f --- /dev/null +++ b/native-base-theme/components/Right.js @@ -0,0 +1,14 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const rightTheme = { + 'NativeBase.Button': { + alignSelf: null, + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-end', + }; + + return rightTheme; +}; diff --git a/native-base-theme/components/Segment.js b/native-base-theme/components/Segment.js new file mode 100644 index 0000000..b9500e0 --- /dev/null +++ b/native-base-theme/components/Segment.js @@ -0,0 +1,45 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platform = variables.platform; + + const segmentTheme = { + height: 45, + borderColor: variables.segmentBorderColorMain, + flexDirection: "row", + justifyContent: "center", + backgroundColor: variables.segmentBackgroundColor, + "NativeBase.Button": { + alignSelf: "center", + borderRadius: 0, + paddingHorizontal: 20, + height: 30, + backgroundColor: "transparent", + borderWidth: 1, + borderColor: variables.segmentBorderColor, + elevation: 0, + ".active": { + backgroundColor: variables.segmentActiveBackgroundColor, + "NativeBase.Text": { + color: variables.segmentActiveTextColor + } + }, + ".first": { + borderTopLeftRadius: platform === "ios" ? 5 : undefined, + borderBottomLeftRadius: platform === "ios" ? 5 : undefined, + borderRightWidth: 0 + }, + ".last": { + borderTopRightRadius: platform === "ios" ? 5 : undefined, + borderBottomRightRadius: platform === "ios" ? 5 : undefined, + borderLeftWidth: 0 + }, + "NativeBase.Text": { + color: variables.segmentTextColor, + fontSize: 14 + } + } + }; + + return segmentTheme; +}; diff --git a/native-base-theme/components/Separator.js b/native-base-theme/components/Separator.js new file mode 100644 index 0000000..55f6c86 --- /dev/null +++ b/native-base-theme/components/Separator.js @@ -0,0 +1,47 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const theme = { + '.group': { + height: 50, + paddingVertical: variables.listItemPadding - 8, + paddingTop: variables.listItemPadding + 12, + '.bordered': { + height: 50, + paddingVertical: variables.listItemPadding - 8, + paddingTop: variables.listItemPadding + 12, + }, + }, + '.bordered': { + '.noTopBorder': { + borderTopWidth: 0, + }, + '.noBottomBorder': { + borderBottomWidth: 0, + }, + height: 35, + paddingTop: variables.listItemPadding + 2, + paddingBottom: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderTopWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + }, + 'NativeBase.Text': { + fontSize: variables.tabBarTextSize - 2, + color: '#777', + }, + '.noTopBorder': { + borderTopWidth: 0, + }, + '.noBottomBorder': { + borderBottomWidth: 0, + }, + height: 38, + backgroundColor: '#F0EFF5', + flex: 1, + justifyContent: 'center', + paddingLeft: variables.listItemPadding + 5, + }; + + return theme; +}; diff --git a/native-base-theme/components/Spinner.js b/native-base-theme/components/Spinner.js new file mode 100644 index 0000000..af16835 --- /dev/null +++ b/native-base-theme/components/Spinner.js @@ -0,0 +1,9 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const spinnerTheme = { + height: 80 + }; + + return spinnerTheme; +}; diff --git a/native-base-theme/components/Subtitle.js b/native-base-theme/components/Subtitle.js new file mode 100644 index 0000000..d01bf00 --- /dev/null +++ b/native-base-theme/components/Subtitle.js @@ -0,0 +1,12 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const subtitleTheme = { + fontSize: variables.subTitleFontSize, + fontFamily: variables.titleFontfamily, + color: variables.subtitleColor, + textAlign: 'center', + }; + + return subtitleTheme; +}; diff --git a/native-base-theme/components/SwipeRow.js b/native-base-theme/components/SwipeRow.js new file mode 100644 index 0000000..93879f0 --- /dev/null +++ b/native-base-theme/components/SwipeRow.js @@ -0,0 +1,44 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const swipeRowTheme = { + "NativeBase.ListItem": { + backgroundColor: "#FFF", + marginLeft: 0, + }, + "NativeBase.Left": { + flex: 0, + alignSelf: null, + alignItems: null, + "NativeBase.Button": { + flex: 1, + alignItems: "center", + justifyContent: "center", + alignSelf: "stretch", + borderRadius: 0, + }, + }, + "NativeBase.Right": { + flex: 0, + alignSelf: null, + alignItems: null, + "NativeBase.Button": { + flex: 1, + alignItems: "center", + justifyContent: "center", + alignSelf: "stretch", + borderRadius: 0, + }, + }, + "NativeBase.Button": { + flex: 1, + height: null, + alignItems: "center", + justifyContent: "center", + alignSelf: "stretch", + borderRadius: 0, + }, + }; + + return swipeRowTheme; +}; diff --git a/native-base-theme/components/Switch.js b/native-base-theme/components/Switch.js new file mode 100644 index 0000000..ed1b78e --- /dev/null +++ b/native-base-theme/components/Switch.js @@ -0,0 +1,9 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const switchTheme = { + marginVertical: -5, + }; + + return switchTheme; +}; diff --git a/native-base-theme/components/Tab.js b/native-base-theme/components/Tab.js new file mode 100644 index 0000000..543ea38 --- /dev/null +++ b/native-base-theme/components/Tab.js @@ -0,0 +1,10 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const tabTheme = { + flex: 1, + backgroundColor: "#FFF" + }; + + return tabTheme; +}; diff --git a/native-base-theme/components/TabBar.js b/native-base-theme/components/TabBar.js new file mode 100644 index 0000000..8587514 --- /dev/null +++ b/native-base-theme/components/TabBar.js @@ -0,0 +1,55 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const tabBarTheme = { + ".tabIcon": { + height: undefined + }, + ".vertical": { + height: 60 + }, + "NativeBase.Button": { + ".transparent": { + "NativeBase.Text": { + fontSize: variables.tabFontSize, + color: variables.sTabBarActiveTextColor, + fontWeight: "400" + }, + "NativeBase.IconNB": { + color: variables.sTabBarActiveTextColor + } + }, + "NativeBase.IconNB": { + color: variables.sTabBarActiveTextColor + }, + "NativeBase.Text": { + fontSize: variables.tabFontSize, + color: variables.sTabBarActiveTextColor, + fontWeight: "400" + }, + ".isTabActive": { + "NativeBase.Text": { + fontWeight: "900" + } + }, + flex: 1, + alignSelf: "stretch", + alignItems: "center", + justifyContent: "center", + borderRadius: null, + borderBottomColor: "transparent", + backgroundColor: variables.tabBgColor + }, + height: 45, + flexDirection: "row", + justifyContent: "space-around", + borderWidth: 1, + borderTopWidth: 0, + borderLeftWidth: 0, + borderRightWidth: 0, + borderBottomColor: "#ccc", + backgroundColor: variables.tabBgColor + }; + + return tabBarTheme; +}; diff --git a/native-base-theme/components/TabContainer.js b/native-base-theme/components/TabContainer.js new file mode 100644 index 0000000..bc6c334 --- /dev/null +++ b/native-base-theme/components/TabContainer.js @@ -0,0 +1,24 @@ +import variable from "./../variables/platform"; +import { Platform } from "react-native"; + +export default (variables = variable) => { + const platformStyle = variables.platformStyle; + const platform = variables.platform; + + const tabContainerTheme = { + elevation: 3, + height: 50, + flexDirection: "row", + shadowColor: platformStyle === "material" ? "#000" : undefined, + shadowOffset: platformStyle === "material" + ? { width: 0, height: 2 } + : undefined, + shadowOpacity: platformStyle === "material" ? 0.2 : undefined, + shadowRadius: platformStyle === "material" ? 1.2 : undefined, + justifyContent: "space-around", + borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0, + borderColor: variables.topTabBarBorderColor + }; + + return tabContainerTheme; +}; diff --git a/native-base-theme/components/TabHeading.js b/native-base-theme/components/TabHeading.js new file mode 100644 index 0000000..c3cbb32 --- /dev/null +++ b/native-base-theme/components/TabHeading.js @@ -0,0 +1,37 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platform = variables.platform; + + const tabHeadingTheme = { + flexDirection: "row", + backgroundColor: variables.tabDefaultBg, + flex: 1, + alignItems: "center", + justifyContent: "center", + ".scrollable": { + paddingHorizontal: 20, + flex: platform === "android" ? 0 : 1, + minWidth: platform === "android" ? undefined : 60 + }, + "NativeBase.Text": { + color: variables.topTabBarTextColor, + marginHorizontal: 7 + }, + "NativeBase.Icon": { + color: variables.topTabBarTextColor, + fontSize: platform === "ios" ? 26 : undefined + }, + ".active": { + "NativeBase.Text": { + color: variables.topTabBarActiveTextColor, + fontWeight: "600" + }, + "NativeBase.Icon": { + color: variables.topTabBarActiveTextColor + } + } + }; + + return tabHeadingTheme; +}; diff --git a/native-base-theme/components/Text.js b/native-base-theme/components/Text.js new file mode 100644 index 0000000..1ce7810 --- /dev/null +++ b/native-base-theme/components/Text.js @@ -0,0 +1,15 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const textTheme = { + fontSize: variables.DefaultFontSize - 1, + fontFamily: variables.fontFamily, + color: variables.textColor, + ".note": { + color: "#a7a7a7", + fontSize: variables.noteFontSize + } + }; + + return textTheme; +}; diff --git a/native-base-theme/components/Textarea.js b/native-base-theme/components/Textarea.js new file mode 100644 index 0000000..085ce3f --- /dev/null +++ b/native-base-theme/components/Textarea.js @@ -0,0 +1,23 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const textAreaTheme = { + ".underline": { + borderBottomWidth: variables.borderWidth, + marginTop: 5, + borderColor: variables.inputBorderColor + }, + ".bordered": { + borderWidth: 1, + marginTop: 5, + borderColor: variables.inputBorderColor + }, + color: variables.textColor, + paddingLeft: 10, + paddingRight: 5, + fontSize: 15, + textAlignVertical: "top" + }; + + return textAreaTheme; +}; diff --git a/native-base-theme/components/Thumbnail.js b/native-base-theme/components/Thumbnail.js new file mode 100644 index 0000000..2cf3c33 --- /dev/null +++ b/native-base-theme/components/Thumbnail.js @@ -0,0 +1,40 @@ +import variable from './../variables/platform'; + +export default (variables = variable) => { + const thumbnailTheme = { + '.square': { + borderRadius: 0, + '.small': { + width: 36, + height: 36, + borderRadius: 0, + }, + '.large': { + width: 80, + height: 80, + borderRadius: 0, + }, + }, + '.small': { + width: 36, + height: 36, + borderRadius: 18, + '.square': { + borderRadius: 0, + }, + }, + '.large': { + width: 80, + height: 80, + borderRadius: 40, + '.square': { + borderRadius: 0, + }, + }, + width: 56, + height: 56, + borderRadius: 28, + }; + + return thumbnailTheme; +}; diff --git a/native-base-theme/components/Title.js b/native-base-theme/components/Title.js new file mode 100644 index 0000000..aedd402 --- /dev/null +++ b/native-base-theme/components/Title.js @@ -0,0 +1,15 @@ +import { Platform } from "react-native"; + +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const titleTheme = { + fontSize: variables.titleFontSize, + fontFamily: variables.titleFontfamily, + color: variables.titleFontColor, + fontWeight: Platform.OS === "ios" ? "600" : undefined, + textAlign: "center" + }; + + return titleTheme; +}; diff --git a/native-base-theme/components/Toast.js b/native-base-theme/components/Toast.js new file mode 100644 index 0000000..2757975 --- /dev/null +++ b/native-base-theme/components/Toast.js @@ -0,0 +1,38 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const platform = variables.platform; + + const toastTheme = { + ".danger": { + backgroundColor: variables.brandDanger + }, + ".warning": { + backgroundColor: variables.brandWarning + }, + ".success": { + backgroundColor: variables.brandSuccess + }, + backgroundColor: "rgba(0,0,0,0.8)", + borderRadius: platform === "ios" ? 5 : 0, + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + padding: 10, + minHeight: 50, + "NativeBase.Text": { + color: "#fff", + flex: 1 + }, + "NativeBase.Button": { + backgroundColor: "transparent", + height: 30, + elevation: 0, + "NativeBase.Text": { + fontSize: 14 + } + } + }; + + return toastTheme; +}; diff --git a/native-base-theme/components/View.js b/native-base-theme/components/View.js new file mode 100644 index 0000000..0af0e6d --- /dev/null +++ b/native-base-theme/components/View.js @@ -0,0 +1,11 @@ +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const viewTheme = { + ".padder": { + padding: variables.contentPadding + } + }; + + return viewTheme; +}; diff --git a/native-base-theme/components/index.js b/native-base-theme/components/index.js new file mode 100644 index 0000000..25e9805 --- /dev/null +++ b/native-base-theme/components/index.js @@ -0,0 +1,240 @@ +import _ from "lodash"; +import bodyTheme from "./Body"; +import leftTheme from "./Left"; +import rightTheme from "./Right"; +import headerTheme from "./Header"; +import switchTheme from "./Switch"; +import thumbnailTheme from "./Thumbnail"; +import containerTheme from "./Container"; +import contentTheme from "./Content"; +import buttonTheme from "./Button"; +import titleTheme from "./Title"; +import subtitleTheme from "./Subtitle"; +import inputGroupTheme from "./InputGroup"; +import badgeTheme from "./Badge"; +import checkBoxTheme from "./CheckBox"; +import cardTheme from "./Card"; +import radioTheme from "./Radio"; +import h3Theme from "./H3"; +import h2Theme from "./H2"; +import h1Theme from "./H1"; +import footerTheme from "./Footer"; +import footerTabTheme from "./FooterTab"; +import fabTheme from "./Fab"; +import itemTheme from "./Item"; +import labelTheme from "./Label"; +import textAreaTheme from "./Textarea"; +import textTheme from "./Text"; +import toastTheme from "./Toast"; +import tabTheme from "./Tab"; +import tabBarTheme from "./TabBar"; +import tabContainerTheme from "./TabContainer"; +import viewTheme from "./View"; +import tabHeadingTheme from "./TabHeading"; +import iconTheme from "./Icon"; +import inputTheme from "./Input"; +import swipeRowTheme from "./SwipeRow"; +import segmentTheme from "./Segment"; +import spinnerTheme from "./Spinner"; +import cardItemTheme from "./CardItem"; +import listItemTheme from "./ListItem"; +import formTheme from "./Form"; +import separatorTheme from "./Separator"; +import variable from "./../variables/platform"; + +export default (variables = variable) => { + const theme = { + variables, + "NativeBase.Left": { + ...leftTheme(variables) + }, + "NativeBase.Right": { + ...rightTheme(variables) + }, + "NativeBase.Body": { + ...bodyTheme(variables) + }, + + "NativeBase.Header": { + ...headerTheme(variables) + }, + + "NativeBase.Button": { + ...buttonTheme(variables) + }, + + "NativeBase.Title": { + ...titleTheme(variables) + }, + "NativeBase.Subtitle": { + ...subtitleTheme(variables) + }, + + "NativeBase.InputGroup": { + ...inputGroupTheme(variables) + }, + + "NativeBase.Input": { + ...inputTheme(variables) + }, + + "NativeBase.Badge": { + ...badgeTheme(variables) + }, + + "NativeBase.CheckBox": { + ...checkBoxTheme(variables) + }, + + "NativeBase.Radio": { + ...radioTheme(variables) + }, + + "NativeBase.Card": { + ...cardTheme() + }, + + "NativeBase.CardItem": { + ...cardItemTheme(variables) + }, + + "NativeBase.Toast": { + ...toastTheme(variables) + }, + + "NativeBase.H1": { + ...h1Theme(variables) + }, + "NativeBase.H2": { + ...h2Theme(variables) + }, + "NativeBase.H3": { + ...h3Theme(variables) + }, + "NativeBase.Form": { + ...formTheme(variables) + }, + + "NativeBase.Container": { + ...containerTheme(variables) + }, + "NativeBase.Content": { + ...contentTheme(variables) + }, + + "NativeBase.Footer": { + ...footerTheme(variables) + }, + + "NativeBase.Tabs": { + flex: 1 + }, + + "NativeBase.FooterTab": { + ...footerTabTheme(variables) + }, + + "NativeBase.ListItem": { + ...listItemTheme(variables) + }, + + "NativeBase.ListItem1": { + ...listItemTheme(variables) + }, + + "NativeBase.Icon": { + ...iconTheme(variables) + }, + "NativeBase.IconNB": { + ...iconTheme(variables) + }, + "NativeBase.Text": { + ...textTheme(variables) + }, + "NativeBase.Spinner": { + ...spinnerTheme(variables) + }, + + "NativeBase.Fab": { + ...fabTheme(variables) + }, + + "NativeBase.Item": { + ...itemTheme(variables) + }, + + "NativeBase.Label": { + ...labelTheme(variables) + }, + + "NativeBase.Textarea": { + ...textAreaTheme(variables) + }, + + "NativeBase.PickerNB": { + "NativeBase.Button": { + "NativeBase.Text": {} + } + }, + + "NativeBase.Tab": { + ...tabTheme(variables) + }, + + "NativeBase.Segment": { + ...segmentTheme(variables) + }, + + "NativeBase.TabBar": { + ...tabBarTheme(variables) + }, + "NativeBase.ViewNB": { + ...viewTheme(variables) + }, + "NativeBase.TabHeading": { + ...tabHeadingTheme(variables) + }, + "NativeBase.TabContainer": { + ...tabContainerTheme(variables) + }, + "NativeBase.Switch": { + ...switchTheme(variables) + }, + "NativeBase.Separator": { + ...separatorTheme(variables) + }, + "NativeBase.SwipeRow": { + ...swipeRowTheme(variables) + }, + "NativeBase.Thumbnail": { + ...thumbnailTheme(variables) + } + }; + + const cssifyTheme = (grandparent, parent, parentKey) => { + _.forEach(parent, (style, styleName) => { + // console.log('styleName', styleName); + // console.log('parentKey', parentKey); + if ( + styleName.indexOf(".") === 0 && + parentKey && + parentKey.indexOf(".") === 0 + ) { + if (grandparent) { + if (!grandparent[styleName]) { + grandparent[styleName] = {}; + } else { + grandparent[styleName][parentKey] = style; + } + } + } + if (style && typeof style === "object") { + cssifyTheme(parent, style, styleName); + } + }); + }; + + cssifyTheme(null, theme, null); + + return theme; +}; diff --git a/native-base-theme/variables/commonColor.js b/native-base-theme/variables/commonColor.js new file mode 100644 index 0000000..84cc473 --- /dev/null +++ b/native-base-theme/variables/commonColor.js @@ -0,0 +1,277 @@ +import color from "color"; + +import { Platform, Dimensions, PixelRatio } from "react-native"; + +const deviceHeight = Dimensions.get("window").height; +const deviceWidth = Dimensions.get("window").width; +const platform = Platform.OS; +const platformStyle = undefined; + +export default { + platformStyle, + platform, + // AndroidRipple + androidRipple: true, + androidRippleColor: "rgba(256, 256, 256, 0.3)", + androidRippleColorDark: "rgba(0, 0, 0, 0.15)", + + // Badge + badgeBg: "#ED1727", + badgeColor: "#fff", + // New Variable + badgePadding: platform === "ios" ? 3 : 0, + + // Button + btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", + btnDisabledBg: "#b5b5b5", + btnDisabledClr: "#f1f1f1", + + // CheckBox + CheckboxRadius: platform === "ios" ? 13 : 0, + CheckboxBorderWidth: platform === "ios" ? 1 : 2, + CheckboxPaddingLeft: platform === "ios" ? 4 : 2, + CheckboxPaddingBottom: platform === "ios" ? 0 : 5, + CheckboxIconSize: platform === "ios" ? 21 : 14, + CheckboxIconMarginTop: platform === "ios" ? undefined : 1, + CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, + DefaultFontSize: 17, + checkboxBgColor: "#039BE5", + checkboxSize: 20, + checkboxTickColor: "#fff", + + // Segment + segmentBackgroundColor: "#3F51B5", + segmentActiveBackgroundColor: "#fff", + segmentTextColor: "#fff", + segmentActiveTextColor: "#3F51B5", + segmentBorderColor: "#fff", + segmentBorderColorMain: "#3F51B5", + + // New Variable + get defaultTextColor() { + return this.textColor; + }, + + get btnPrimaryBg() { + return this.brandPrimary; + }, + get btnPrimaryColor() { + return this.inverseTextColor; + }, + get btnInfoBg() { + return this.brandInfo; + }, + get btnInfoColor() { + return this.inverseTextColor; + }, + get btnSuccessBg() { + return this.brandSuccess; + }, + get btnSuccessColor() { + return this.inverseTextColor; + }, + get btnDangerBg() { + return this.brandDanger; + }, + get btnDangerColor() { + return this.inverseTextColor; + }, + get btnWarningBg() { + return this.brandWarning; + }, + get btnWarningColor() { + return this.inverseTextColor; + }, + get btnTextSize() { + return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; + }, + get btnTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get btnTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + + buttonPadding: 6, + + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: "#fff", + + // Color + brandPrimary: "#f58220", + brandInfo: "#62B1F6", + brandSuccess: "#5cb85c", + brandDanger: "#d9534f", + brandWarning: "#f0ad4e", + brandSidebar: "#252932", + + // Font + fontFamily: platform === "ios" ? "System" : "Roboto", + fontSizeBase: 15, + + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: "#2874F0", + + // FooterTab + tabBarTextColor: "#8bb3f4", + tabBarTextSize: platform === "ios" ? 14 : 11, + activeTab: platform === "ios" ? "#007aff" : "#fff", + sTabBarActiveTextColor: "#007aff", + tabBarActiveTextColor: "#fff", + tabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, + + // Tab + tabDefaultBg: "#2874F0", + topTabBarTextColor: "#b3c7f9", + topTabBarActiveTextColor: "#fff", + topTabActiveBgColor: platform === "ios" ? "#1569f4" : undefined, + topTabBarBorderColor: "#fff", + topTabBarActiveBorderColor: "#fff", + + // Header + toolbarBtnColor: "#fff", + toolbarDefaultBg: "#2874F0", + toolbarHeight: platform === "ios" ? 64 : 56, + toolbarIconSize: platform === "ios" ? 20 : 22, + toolbarSearchIconSize: platform === "ios" ? 20 : 23, + toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", + searchBarHeight: platform === "ios" ? 30 : 40, + toolbarInverseBg: "#222", + toolbarTextColor: "#fff", + iosStatusbar: "light-content", + toolbarDefaultBorder: "#2874F0", + get statusBarColor() { + return color(this.toolbarDefaultBg).darken(0.2).hex(); + }, + + // Icon + iconFamily: "Ionicons", + iconFontSize: platform === "ios" ? 30 : 28, + iconMargin: 7, + iconHeaderSize: platform === "ios" ? 33 : 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: "#D9D5DC", + inputSuccessBorderColor: "#2b8339", + inputErrorBorderColor: "#ed2f2f", + + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return "#575757"; + }, + + inputGroupMarginBottom: 10, + inputHeightBase: 50, + inputPaddingLeft: 5, + + get inputPaddingLeftIcon() { + return this.inputPaddingLeft * 8; + }, + + // Line Height + btnLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 22, + iconLineHeight: platform === "ios" ? 37 : 30, + lineHeight: platform === "ios" ? 20 : 24, + + // List + listBorderColor: "#c9c9c9", + listDividerBg: "#f4f4f4", + listItemHeight: 45, + listBtnUnderlayColor: "#DDD", + + // Card + cardBorderColor: "#ccc", + + // Changed Variable + listItemPadding: platform === "ios" ? 10 : 12, + + listNoteColor: "#808080", + listNoteSize: 13, + + // Progress Bar + defaultProgressColor: "#E4202D", + inverseProgressColor: "#1A191B", + + // Radio Button + radioBtnSize: platform === "ios" ? 25 : 23, + radioSelectedColorAndroid: "#5067FF", + + // New Variable + radioBtnLineHeight: platform === "ios" ? 29 : 24, + + radioColor: "#7e7e7e", + + get radioSelectedColor() { + return color(this.radioColor).darken(0.2).hex(); + }, + + // Spinner + defaultSpinnerColor: "#45D56E", + inverseSpinnerColor: "#1A191B", + + // Tabs + tabBgColor: "#F8F8F8", + tabFontSize: 15, + tabTextColor: "#222222", + + // Text + textColor: "#000", + inverseTextColor: "#fff", + noteFontSize: 14, + + // Title + titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", + titleFontSize: platform === "ios" ? 17 : 19, + subTitleFontSize: platform === "ios" ? 12 : 14, + subtitleColor: "#FFF", + + // New Variable + titleFontColor: "#FFF", + + // Other + borderRadiusBase: platform === "ios" ? 5 : 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + + get darkenHeader() { + return color(this.tabBgColor).darken(0.03).hex(); + }, + + dropdownBg: "#000", + dropdownLinkColor: "#414142", + inputLineHeight: 24, + jumbotronBg: "#C9C9CE", + jumbotronPadding: 30, + deviceWidth, + deviceHeight, + + // New Variable + inputGroupRoundedBorderRadius: 30 +}; diff --git a/native-base-theme/variables/material.js b/native-base-theme/variables/material.js new file mode 100644 index 0000000..0634d2d --- /dev/null +++ b/native-base-theme/variables/material.js @@ -0,0 +1,277 @@ +import color from "color"; + +import { Platform, Dimensions, PixelRatio } from "react-native"; + +const deviceHeight = Dimensions.get("window").height; +const deviceWidth = Dimensions.get("window").width; +const platform = Platform.OS; +const platformStyle = "material"; + +export default { + platformStyle, + platform, + // AndroidRipple + androidRipple: true, + androidRippleColor: "rgba(256, 256, 256, 0.3)", + androidRippleColorDark: "rgba(0, 0, 0, 0.15)", + + // Badge + badgeBg: "#ED1727", + badgeColor: "#fff", + // New Variable + badgePadding: platform === "ios" ? 3 : 0, + + // Button + btnFontFamily: platform === "ios" ? "Roboto" : "Roboto_medium", + btnDisabledBg: "#b5b5b5", + btnDisabledClr: "#f1f1f1", + + // CheckBox + CheckboxRadius: 0, + CheckboxBorderWidth: 2, + CheckboxPaddingLeft: 2, + CheckboxPaddingBottom: platform === "ios" ? 0 : 5, + CheckboxIconSize: platform === "ios" ? 18 : 14, + CheckboxIconMarginTop: platform === "ios" ? undefined : 1, + CheckboxFontSize: platform === "ios" ? 21 : 18, + DefaultFontSize: 17, + checkboxBgColor: "#039BE5", + checkboxSize: 20, + checkboxTickColor: "#fff", + + // Segment + segmentBackgroundColor: "#3F51B5", + segmentActiveBackgroundColor: "#fff", + segmentTextColor: "#fff", + segmentActiveTextColor: "#3F51B5", + segmentBorderColor: "#fff", + segmentBorderColorMain: "#3F51B5", + + // New Variable + get defaultTextColor() { + return this.textColor; + }, + + get btnPrimaryBg() { + return this.brandPrimary; + }, + get btnPrimaryColor() { + return this.inverseTextColor; + }, + get btnInfoBg() { + return this.brandInfo; + }, + get btnInfoColor() { + return this.inverseTextColor; + }, + get btnSuccessBg() { + return this.brandSuccess; + }, + get btnSuccessColor() { + return this.inverseTextColor; + }, + get btnDangerBg() { + return this.brandDanger; + }, + get btnDangerColor() { + return this.inverseTextColor; + }, + get btnWarningBg() { + return this.brandWarning; + }, + get btnWarningColor() { + return this.inverseTextColor; + }, + get btnTextSize() { + return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; + }, + get btnTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get btnTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + + buttonPadding: 6, + + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: "#fff", + + // Color + brandPrimary: "#3F51B5", + brandInfo: "#3F57D3", + brandSuccess: "#5cb85c", + brandDanger: "#d9534f", + brandWarning: "#f0ad4e", + brandSidebar: "#252932", + + // Font + fontFamily: "Roboto", + fontSizeBase: 15, + + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: "#3F51B5", + + // FooterTab + tabBarTextColor: "#b3c7f9", + tabBarTextSize: platform === "ios" ? 14 : 11, + activeTab: "#fff", + sTabBarActiveTextColor: "#007aff", + tabBarActiveTextColor: "#fff", + tabActiveBgColor: undefined, + + // Tab + tabDefaultBg: "#3F51B5", + topTabBarTextColor: "#b3c7f9", + topTabBarActiveTextColor: "#fff", + topTabActiveBgColor: undefined, + topTabBarBorderColor: "#fff", + topTabBarActiveBorderColor: "#fff", + + // Header + toolbarBtnColor: "#fff", + toolbarDefaultBg: "#3F51B5", + toolbarHeight: platform === "ios" ? 76 : 56, + toolbarIconSize: platform === "ios" ? 20 : 22, + toolbarSearchIconSize: platform === "ios" ? 20 : 23, + toolbarInputColor: "#fff", + searchBarHeight: platform === "ios" ? 30 : 40, + toolbarInverseBg: "#222", + toolbarTextColor: "#fff", + toolbarDefaultBorder: "#3F51B5", + iosStatusbar: "light-content", + get statusBarColor() { + return color(this.toolbarDefaultBg).darken(0.2).hex(); + }, + + // Icon + iconFamily: "Ionicons", + iconFontSize: platform === "ios" ? 30 : 28, + iconMargin: 7, + iconHeaderSize: platform === "ios" ? 29 : 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: "#D9D5DC", + inputSuccessBorderColor: "#2b8339", + inputErrorBorderColor: "#ed2f2f", + + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return "#575757"; + }, + + inputGroupMarginBottom: 10, + inputHeightBase: 50, + inputPaddingLeft: 5, + + get inputPaddingLeftIcon() { + return this.inputPaddingLeft * 8; + }, + + // Line Height + btnLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 22, + iconLineHeight: platform === "ios" ? 37 : 30, + lineHeight: platform === "ios" ? 20 : 24, + + // List + listBorderColor: "#c9c9c9", + listDividerBg: "#f4f4f4", + listItemHeight: 45, + listBtnUnderlayColor: "#DDD", + + // Card + cardBorderColor: "#ccc", + + // Changed Variable + listItemPadding: platform === "ios" ? 10 : 12, + + listNoteColor: "#808080", + listNoteSize: 13, + + // Progress Bar + defaultProgressColor: "#E4202D", + inverseProgressColor: "#1A191B", + + // Radio Button + radioBtnSize: platform === "ios" ? 25 : 23, + radioSelectedColorAndroid: "#5067FF", + + // New Variable + radioBtnLineHeight: platform === "ios" ? 29 : 24, + + radioColor: "#7e7e7e", + + get radioSelectedColor() { + return color(this.radioColor).darken(0.2).hex(); + }, + + // Spinner + defaultSpinnerColor: "#45D56E", + inverseSpinnerColor: "#1A191B", + + // Tabs + tabBgColor: "#F8F8F8", + tabFontSize: 15, + tabTextColor: "#222222", + + // Text + textColor: "#000", + inverseTextColor: "#fff", + noteFontSize: 14, + + // Title + titleFontfamily: platform === "ios" ? "Roboto" : "Roboto_medium", + titleFontSize: 19, + subTitleFontSize: 14, + subtitleColor: "#FFF", + + // New Variable + titleFontColor: "#FFF", + + // Other + borderRadiusBase: 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + + get darkenHeader() { + return color(this.tabBgColor).darken(0.03).hex(); + }, + + dropdownBg: "#000", + dropdownLinkColor: "#414142", + inputLineHeight: 24, + jumbotronBg: "#C9C9CE", + jumbotronPadding: 30, + deviceWidth, + deviceHeight, + + // New Variable + inputGroupRoundedBorderRadius: 30 +}; diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js new file mode 100644 index 0000000..e41d5c1 --- /dev/null +++ b/native-base-theme/variables/platform.js @@ -0,0 +1,278 @@ +import color from "color"; + +import { Platform, Dimensions, PixelRatio } from "react-native"; + +const deviceHeight = Dimensions.get("window").height; +const deviceWidth = Dimensions.get("window").width; +const platform = Platform.OS; +const platformStyle = undefined; + +export default { + platformStyle, + platform, + // AndroidRipple + androidRipple: true, + androidRippleColor: "rgba(256, 256, 256, 0.3)", + androidRippleColorDark: "rgba(0, 0, 0, 0.15)", + + // Badge + badgeBg: "#ED1727", + badgeColor: "#fff", + // New Variable + badgePadding: platform === "ios" ? 3 : 0, + + // Button + btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", + btnDisabledBg: "#b5b5b5", + btnDisabledClr: "#f1f1f1", + + // CheckBox + CheckboxRadius: platform === "ios" ? 13 : 0, + CheckboxBorderWidth: platform === "ios" ? 1 : 2, + CheckboxPaddingLeft: platform === "ios" ? 4 : 2, + CheckboxPaddingBottom: platform === "ios" ? 0 : 5, + CheckboxIconSize: platform === "ios" ? 21 : 14, + CheckboxIconMarginTop: platform === "ios" ? undefined : 1, + CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18, + DefaultFontSize: 17, + checkboxBgColor: "#039BE5", + checkboxSize: 20, + checkboxTickColor: "#fff", + + // Segment + segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", + segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", + segmentTextColor: platform === "ios" ? "#007aff" : "#fff", + segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", + segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", + segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", + + // New Variable + get defaultTextColor() { + return this.textColor; + }, + + get btnPrimaryBg() { + return this.brandPrimary; + }, + get btnPrimaryColor() { + return this.inverseTextColor; + }, + get btnInfoBg() { + return this.brandInfo; + }, + get btnInfoColor() { + return this.inverseTextColor; + }, + get btnSuccessBg() { + return this.brandSuccess; + }, + get btnSuccessColor() { + return this.inverseTextColor; + }, + get btnDangerBg() { + return this.brandDanger; + }, + get btnDangerColor() { + return this.inverseTextColor; + }, + get btnWarningBg() { + return this.brandWarning; + }, + get btnWarningColor() { + return this.inverseTextColor; + }, + get btnTextSize() { + return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; + }, + get btnTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get btnTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + + buttonPadding: 6, + + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: "#fff", + + // Color + // brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5", + brandPrimary: "#f58220", + brandInfo: "#62B1F6", + brandSuccess: "#5cb85c", + brandDanger: "#d9534f", + brandWarning: "#f0ad4e", + brandSidebar: "#252932", + + // Font + fontFamily: platform === "ios" ? "System" : "Roboto", + fontSizeBase: 15, + + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#4179F7", + + // FooterTab + tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", + tabBarTextSize: platform === "ios" ? 14 : 11, + activeTab: platform === "ios" ? "#007aff" : "#fff", + sTabBarActiveTextColor: "#007aff", + tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", + tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", + + // Tab + tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", + topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", + topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", + topTabActiveBgColor: platform === "ios" ? "#cde1f9" : undefined, + topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", + topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff", + + // Header + toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff", + toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", + toolbarHeight: platform === "ios" ? 64 : 56, + toolbarIconSize: platform === "ios" ? 20 : 22, + toolbarSearchIconSize: platform === "ios" ? 20 : 23, + toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", + searchBarHeight: platform === "ios" ? 30 : 40, + toolbarInverseBg: "#222", + toolbarTextColor: platform === "ios" ? "#000" : "#fff", + toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5", + iosStatusbar: platform === "ios" ? "dark-content" : "light-content", + get statusBarColor() { + return color(this.toolbarDefaultBg).darken(0.2).hex(); + }, + + // Icon + iconFamily: "Ionicons", + iconFontSize: platform === "ios" ? 30 : 28, + iconMargin: 7, + iconHeaderSize: platform === "ios" ? 33 : 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: "#D9D5DC", + inputSuccessBorderColor: "#2b8339", + inputErrorBorderColor: "#ed2f2f", + + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return "#575757"; + }, + + inputGroupMarginBottom: 10, + inputHeightBase: 50, + inputPaddingLeft: 5, + + get inputPaddingLeftIcon() { + return this.inputPaddingLeft * 8; + }, + + // Line Height + btnLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 22, + iconLineHeight: platform === "ios" ? 37 : 30, + lineHeight: platform === "ios" ? 20 : 24, + + // List + listBorderColor: "#c9c9c9", + listDividerBg: "#f4f4f4", + listItemHeight: 45, + listBtnUnderlayColor: "#DDD", + + // Card + cardBorderColor: "#ccc", + + // Changed Variable + listItemPadding: platform === "ios" ? 10 : 12, + + listNoteColor: "#808080", + listNoteSize: 13, + + // Progress Bar + defaultProgressColor: "#E4202D", + inverseProgressColor: "#1A191B", + + // Radio Button + radioBtnSize: platform === "ios" ? 25 : 23, + radioSelectedColorAndroid: "#3F51B5", + + // New Variable + radioBtnLineHeight: platform === "ios" ? 29 : 24, + + radioColor: "#7e7e7e", + + get radioSelectedColor() { + return color(this.radioColor).darken(0.2).hex(); + }, + + // Spinner + defaultSpinnerColor: "#45D56E", + inverseSpinnerColor: "#1A191B", + + // Tabs + tabBgColor: "#F8F8F8", + tabFontSize: 15, + tabTextColor: "#222222", + + // Text + textColor: "#000", + inverseTextColor: "#fff", + noteFontSize: 14, + + // Title + titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", + titleFontSize: platform === "ios" ? 17 : 19, + subTitleFontSize: platform === "ios" ? 12 : 14, + subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", + + // New Variable + titleFontColor: platform === "ios" ? "#000" : "#FFF", + + // Other + borderRadiusBase: platform === "ios" ? 5 : 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + + get darkenHeader() { + return color(this.tabBgColor).darken(0.03).hex(); + }, + + dropdownBg: "#000", + dropdownLinkColor: "#414142", + inputLineHeight: 24, + jumbotronBg: "#C9C9CE", + jumbotronPadding: 30, + deviceWidth, + deviceHeight, + + // New Variable + inputGroupRoundedBorderRadius: 30 +}; diff --git a/src/Dusken.js b/src/Dusken.js index a77d914..0a785a4 100644 --- a/src/Dusken.js +++ b/src/Dusken.js @@ -8,6 +8,7 @@ import EventListScreen from "./screens/EventListScreen"; import LoginScreen from "./screens/LoginScreen"; import MembershipScreen from "./screens/MembershipScreen"; + /* Navigation */ const tabBarRoutes = { EventList: { screen: EventListScreen }, @@ -15,7 +16,32 @@ const tabBarRoutes = { About: { screen: AboutScreen }, }; -const tabNav = TabNavigator(tabBarRoutes, {tabBarPosition: 'bottom'}); +const tabBarOptions = { + tabBarPosition: 'bottom', + tabBarOptions: { + style: { + backgroundColor: "#fff" + }, + indicatorStyle: { + backgroundColor: "#f58220" + }, + // labelStyle: { + // color: '#f58220' + // }, + activeTintColor: '#f58220', + inactiveTintColor: '#f58220', + showIcon: true, + iconStyle: { + color: '#f58220' + }, + labelStyle: { + fontSize: 10, + marginBottom: 0, + } + } +}; + +const tabNav = TabNavigator(tabBarRoutes, tabBarOptions); const DuskenContainer = StackNavigator({ Root: { screen: tabNav }, diff --git a/src/modules/about/About.js b/src/modules/about/About.js index ecac8fa..2196e59 100644 --- a/src/modules/about/About.js +++ b/src/modules/about/About.js @@ -20,7 +20,7 @@ export default class About extends Component { const styles = StyleSheet.create({ header: { - fontSize: 16, + fontSize: 20, fontWeight: 'bold', color: '#000', }, diff --git a/src/modules/membership/Membership.js b/src/modules/membership/Membership.js index 94a030c..a8e7bcc 100644 --- a/src/modules/membership/Membership.js +++ b/src/modules/membership/Membership.js @@ -74,6 +74,7 @@ const styles = StyleSheet.create({ }, headerTitle: { textAlign: 'center', + fontWeight: 'bold', fontSize: 20, color: '#000', paddingVertical: 10, diff --git a/src/screens/AboutScreen.js b/src/screens/AboutScreen.js index d6d6586..fb3d604 100644 --- a/src/screens/AboutScreen.js +++ b/src/screens/AboutScreen.js @@ -1,16 +1,24 @@ import React, { Component } from 'react'; import AboutContainer from "../modules/about/AboutContainer"; import Icon from 'react-native-vector-icons/SimpleLineIcons'; +import getTheme from '../../native-base-theme/components'; +import {StyleProvider} from "native-base"; export default class AboutScreen extends Component { static navigationOptions = { title: 'Om oss', + headerStyle: { + backgroundColor: '#f58220', + }, tabBarIcon: ({ tintColor }) => ( ), }; render() { - return (); + return ( + + + ); } } \ No newline at end of file diff --git a/src/screens/EventDetailsScreen.js b/src/screens/EventDetailsScreen.js index 7240fb7..cac29ea 100644 --- a/src/screens/EventDetailsScreen.js +++ b/src/screens/EventDetailsScreen.js @@ -1,13 +1,22 @@ import React, { Component } from 'react'; import EventDetails from "../modules/events/EventDetails"; +import {StyleProvider} from "native-base"; +import getTheme from '../../native-base-theme/components'; export default class EventDetailsScreen extends Component { static navigationOptions = ({navigation}) => ({ title: navigation.state.params.item.title.decoded, + headerStyle: { + backgroundColor: '#f58220', + } }); render() { const { params } = this.props.navigation.state; - return (); + return ( + + + + ); } } \ No newline at end of file diff --git a/src/screens/EventListScreen.js b/src/screens/EventListScreen.js index 80d0580..3c53321 100644 --- a/src/screens/EventListScreen.js +++ b/src/screens/EventListScreen.js @@ -1,10 +1,15 @@ import React, { Component } from 'react'; import EventListContainer from "../modules/events/EventListContainer"; import Icon from 'react-native-vector-icons/SimpleLineIcons'; +import {StyleProvider} from "native-base"; +import getTheme from '../../native-base-theme/components'; export default class EventsScreen extends Component { static navigationOptions = { title: 'Program', + headerStyle: { + backgroundColor: '#f58220', + }, tabBarIcon: ({ tintColor }) => ( ), @@ -16,6 +21,10 @@ export default class EventsScreen extends Component { }; render() { - return (); + return ( + + + + ); } } \ No newline at end of file diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index 9ee0aed..c0ae5cc 100644 --- a/src/screens/LoginScreen.js +++ b/src/screens/LoginScreen.js @@ -1,9 +1,14 @@ import React, { Component } from 'react'; import LoginContainer from "../modules/login/LoginContainer"; +import {StyleProvider} from "native-base"; +import getTheme from '../../native-base-theme/components'; export default class LoginScreen extends Component { static navigationOptions = { title: 'Logg inn', + headerStyle: { + backgroundColor: '#f58220', + }, }; onLogin = () => { @@ -13,7 +18,8 @@ export default class LoginScreen extends Component { render() { return ( - + + ) } } \ No newline at end of file diff --git a/src/screens/MembershipScreen.js b/src/screens/MembershipScreen.js index 4cd2108..007d2d5 100644 --- a/src/screens/MembershipScreen.js +++ b/src/screens/MembershipScreen.js @@ -1,10 +1,15 @@ import React, { Component } from 'react'; import MembershipContainer from "../modules/membership/MembershipContainer"; import Icon from 'react-native-vector-icons/SimpleLineIcons'; +import {StyleProvider} from "native-base"; +import getTheme from '../../native-base-theme/components'; export default class MembershipScreen extends Component { static navigationOptions = { title: 'Medlemskap', + headerStyle: { + backgroundColor: '#f58220', + }, tabBarIcon: ({ tintColor }) => ( ), @@ -20,7 +25,9 @@ export default class MembershipScreen extends Component { render() { return ( - + + + ) } } \ No newline at end of file