From 97c7668f2c4b865ded6ac4028c63a35f463e6f5e Mon Sep 17 00:00:00 2001 From: Izak Robles Date: Thu, 31 Aug 2023 16:27:21 -0500 Subject: [PATCH] Central Note Styling (darkMode needs work) --- lib/screens/AddNoteScreen.tsx | 102 ++----------- lib/screens/EditNoteScreen.tsx | 255 ++++++++++++++++----------------- styles/colors.ts | 4 +- styles/pages/HomeStyles.ts | 4 +- styles/pages/NoteStyles.ts | 89 ++++++++++++ 5 files changed, 227 insertions(+), 227 deletions(-) diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx index b818296..cb318d6 100644 --- a/lib/screens/AddNoteScreen.tsx +++ b/lib/screens/AddNoteScreen.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState, useRef } from "react"; import { Alert, View, - StyleSheet, TextInput, TouchableOpacity, Keyboard, @@ -24,7 +23,7 @@ import { RichToolbar, actions, } from "react-native-pell-rich-editor"; -import Constants from "expo-constants"; +import { NotePageStyles } from "../../styles/pages/NoteStyles"; const user = User.getInstance(); @@ -110,12 +109,12 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { return ( - - + + setTitleText(text)} value={titleText} @@ -123,21 +122,21 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { {isPublished ? ( setIsPublished(!isPublished)} > ) : ( setIsPublished(!isPublished)} > )} - + { setViewMedia(!viewMedia); @@ -222,7 +221,7 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { iconTint={"#000"} selectedIconTint={"#2095F2"} /> - + = ({ navigation, route }) => { > (richTextRef.current = r)} - style={styles.input} + style={NotePageStyles.input} autoCorrect={true} placeholder="Write your note here" onChange={(text) => setBodyText(text)} @@ -314,87 +313,4 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { ); }; -const styles = StyleSheet.create({ - topContainer: { - justifyContent: "space-between", - paddingHorizontal: 5, - paddingTop: Constants.statusBarHeight, - flexDirection: "row", - backgroundColor: "#F4DFCD", - alignItems: "center", - textAlign: "center", - }, - topText: { - flex: 1, - maxWidth: "100%", - fontWeight: "700", - fontSize: 32, - textAlign: "center", - }, - topButtons: { - backgroundColor: "#111111", - borderRadius: 50, - width: 50, - height: 50, - alignItems: "center", - justifyContent: "center", - zIndex: 99, - }, - toggles: { - backgroundColor: "#111111", - borderRadius: 50, - width: 50, - height: 50, - alignItems: "center", - justifyContent: "center", - marginLeft: 10, - zIndex: 99, - }, - container: { - backgroundColor: "white", - overflow: "hidden", - }, - title: { - height: 45, - width: "70%", - borderColor: "#111111", - borderWidth: 1, - borderRadius: 30, - paddingHorizontal: 10, - textAlign: "center", - fontSize: 30, - }, - input: { - flex: 1, - borderColor: "#111111", - fontSize: 22, - }, - addButton: { - position: "absolute", - bottom: 20, - right: 20, - backgroundColor: "#111111", - borderRadius: 50, - width: 50, - height: 50, - alignItems: "center", - justifyContent: "center", - }, - keyContainer: { - height: 60, - paddingVertical: 5, - width: "100%", - backgroundColor: "#F4DFCD", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - paddingHorizontal: 40, - }, - saveText: { - color: "#111111", - fontWeight: "bold", - fontSize: 12, - }, -}); - export default AddNoteScreen; diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 6692f13..481e242 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from "react"; import { View, TextInput, - StyleSheet, Keyboard, ScrollView, useWindowDimensions, @@ -28,6 +27,7 @@ import { actions, } from "react-native-pell-rich-editor"; import LoadingImage from "../components/loadingImage"; +import { NotePageStyles } from "../../styles/pages/NoteStyles"; const user = User.getInstance(); @@ -143,30 +143,30 @@ const EditNoteScreen: React.FC = ({ return ( - + navigation.goBack()} > {owner ? ( isPublished ? ( setIsPublished(!isPublished)} > ) : ( setIsPublished(!isPublished)} > @@ -176,7 +176,7 @@ const EditNoteScreen: React.FC = ({ )} - + { setViewMedia(!viewMedia); @@ -267,7 +267,7 @@ const EditNoteScreen: React.FC = ({ selectedIconTint={"#2095F2"} /> - + = ({ shouldPlay={true} useNativeControls={true} isLooping={true} - style={styles.video} + style={NotePageStyles.video} /> )} @@ -367,7 +367,7 @@ const EditNoteScreen: React.FC = ({ > (richTextRef.current = r)} - style={styles.input} + style={NotePageStyles.input} autoCorrect={true} placeholder="Write your note here" onChange={(text) => setText(text)} @@ -384,125 +384,120 @@ const EditNoteScreen: React.FC = ({ ); }; -const styles = StyleSheet.create({ - topContainer: { - justifyContent: "space-between", - paddingHorizontal: 5, - paddingTop: Constants.statusBarHeight, - flexDirection: "row", - backgroundColor: "#F4DFCD", - alignItems: "center", - textAlign: "center", - }, - topText: { - flex: 1, - maxWidth: "100%", - fontWeight: "700", - fontSize: 32, - textAlign: "center", - }, - topButtons: { - backgroundColor: "#111111", - borderRadius: 50, - width: 50, - height: 50, - alignItems: "center", - justifyContent: "center", - zIndex: 99, - }, - toggles: { - backgroundColor: "#111111", - borderRadius: 50, - width: 50, - height: 50, - alignItems: "center", - justifyContent: "center", - marginLeft: 10, - zIndex: 99, - }, - container: { - backgroundColor: "white", - overflow: "hidden", - paddingBottom: "50%", - }, - title: { - height: 45, - width: "70%", - borderColor: "#111111", - borderWidth: 1, - borderRadius: 30, - paddingHorizontal: 10, - textAlign: "center", - fontSize: 30, - }, - input: { - flex: 1, - borderColor: "#111111", - fontSize: 22, - }, - addButton: { - position: "absolute", - bottom: 20, - right: 20, - backgroundColor: "#111111", - borderRadius: 50, - width: 50, - height: 50, - alignItems: "center", - justifyContent: "center", - }, - keyContainer: { - height: 60, - paddingVertical: 5, - width: "100%", - backgroundColor: "#F4DFCD", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - paddingHorizontal: 40, - }, - saveText: { - color: "#111111", - fontWeight: "bold", - fontSize: 12, - }, - video: { - width: "100%", - height: "100%", - justifyContent: "center", - alignSelf: "center", - }, - closeUnderlay: { - position: "absolute", - top: 50, - right: 10, - width: 50, - height: 50, - borderRadius: 30, - backgroundColor: "rgba(5,5,5,0.5)", - alignItems: "center", - justifyContent: "center", - zIndex: 100, - }, - icon: { - alignSelf: "center", - marginLeft: 4, - }, - footerContainer: { - backgroundColor: "rgba(255,255,255, 0.8)", - padding: 10, - alignItems: "center", - marginBottom: "13%", - width: "80%", - justifyContent: "center", - alignSelf: "center", - borderRadius: 10, - }, - footerText: { - textAlign: "center", - fontSize: 16, - fontWeight: "700", - }, -}); +// const styles = StyleSheet.create({ +// topContainer: { +// justifyContent: "space-between", +// paddingHorizontal: 5, +// paddingTop: Constants.statusBarHeight, +// flexDirection: "row", +// backgroundColor: "#F4DFCD", +// alignItems: "center", +// textAlign: "center", +// }, +// topText: { +// flex: 1, +// maxWidth: "100%", +// fontWeight: "700", +// fontSize: 32, +// textAlign: "center", +// }, +// topButtons: { +// backgroundColor: "#111111", +// borderRadius: 50, +// width: 50, +// height: 50, +// alignItems: "center", +// justifyContent: "center", +// zIndex: 99, +// }, +// toggles: { +// backgroundColor: "#111111", +// borderRadius: 50, +// width: 50, +// height: 50, +// alignItems: "center", +// justifyContent: "center", +// marginLeft: 10, +// zIndex: 99, +// }, +// container: { +// backgroundColor: "white", +// overflow: "hidden", +// paddingBottom: "50%", +// }, +// title: { +// height: 45, +// width: "70%", +// borderColor: "#111111", +// borderWidth: 1, +// borderRadius: 30, +// paddingHorizontal: 10, +// textAlign: "center", +// fontSize: 30, +// }, +// input: { +// flex: 1, +// borderColor: "#111111", +// fontSize: 22, +// }, +// addButton: { +// position: "absolute", +// bottom: 20, +// right: 20, +// backgroundColor: "#111111", +// borderRadius: 50, +// width: 50, +// height: 50, +// alignItems: "center", +// justifyContent: "center", +// }, +// keyContainer: { +// height: 60, +// paddingVertical: 5, +// width: "100%", +// backgroundColor: "#F4DFCD", +// flexDirection: "row", +// alignItems: "center", +// justifyContent: "space-between", +// paddingHorizontal: 40, +// }, +// saveText: { +// color: "#111111", +// fontWeight: "bold", +// fontSize: 12, +// }, +// +// closeUnderlay: { +// position: "absolute", +// top: 50, +// right: 10, +// width: 50, +// height: 50, +// borderRadius: 30, +// backgroundColor: "rgba(5,5,5,0.5)", +// alignItems: "center", +// justifyContent: "center", +// zIndex: 100, +// }, +// icon: { +// alignSelf: "center", +// marginLeft: 4, +// }, +// footerContainer: { +// backgroundColor: "rgba(255,255,255, 0.8)", +// padding: 10, +// alignItems: "center", +// marginBottom: "13%", +// width: "80%", +// justifyContent: "center", +// alignSelf: "center", +// borderRadius: 10, +// }, +// footerText: { +// textAlign: "center", +// fontSize: 16, +// fontWeight: "700", +// }, +// }); export default EditNoteScreen; diff --git a/styles/colors.ts b/styles/colors.ts index 3358efd..314ec3f 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -4,10 +4,10 @@ export const lightTheme = { backgroundPrimary: "#faf7f7", backgroundSecondary: "#fff", backgroundTertiary: "#111", - border: "#999", actionPrimary: "#1f65ff", highlightPrimary: "red", highlightSecondary: "#02c484", + highlightTertiary: "#F4DFCD", }; export const darkTheme = { @@ -16,8 +16,8 @@ export const darkTheme = { backgroundPrimary: "#111", backgroundSecondary: "#222", backgroundTertiary: "#000", - border: "#444", actionPrimary: "#1a58cc", highlightPrimary: "#cc0000", highlightSecondary: "#02c484", + highlightTertiary: "#444", }; diff --git a/styles/pages/HomeStyles.ts b/styles/pages/HomeStyles.ts index aaa61b3..9763447 100644 --- a/styles/pages/HomeStyles.ts +++ b/styles/pages/HomeStyles.ts @@ -22,7 +22,7 @@ export const HomeStyles = StyleSheet.create({ color: globalStyle.highlightSecondary, }, highlightColor: { - color: globalStyle.border, + color: globalStyle.highlightTertiary, }, backColor: { color: globalStyle.backgroundTertiary, @@ -91,7 +91,7 @@ export const HomeStyles = StyleSheet.create({ }, filters: { justifyContent: "center", - borderColor: globalStyle.border, + borderColor: globalStyle.highlightTertiary, borderWidth: 2, borderRadius: 30, marginRight: 10, diff --git a/styles/pages/NoteStyles.ts b/styles/pages/NoteStyles.ts index e69de29..628eb5e 100644 --- a/styles/pages/NoteStyles.ts +++ b/styles/pages/NoteStyles.ts @@ -0,0 +1,89 @@ +import { StyleSheet } from "react-native"; +import { lightTheme, darkTheme } from "../colors"; +import Constants from "expo-constants"; + +// build out settings for dark/light mode configuration +const globalStyle = lightTheme; +// const globalStyle = darkTheme; + +export const NotePageStyles = StyleSheet.create({ + topContainer: { + justifyContent: "space-between", + paddingHorizontal: 5, + paddingTop: Constants.statusBarHeight, + flexDirection: "row", + backgroundColor: globalStyle.highlightTertiary, + alignItems: "center", + textAlign: "center", + }, + topText: { + flex: 1, + maxWidth: "100%", + fontWeight: "700", + fontSize: 32, + textAlign: "center", + color: globalStyle.textPrimary, + }, + topButtons: { + backgroundColor: globalStyle.backgroundTertiary, + borderRadius: 50, + width: 50, + height: 50, + alignItems: "center", + justifyContent: "center", + zIndex: 99, + }, + container: { + backgroundColor: globalStyle.backgroundPrimary, + overflow: "hidden", + }, + title: { + height: 45, + width: "70%", + borderColor: globalStyle.backgroundTertiary, + borderWidth: 1, + borderRadius: 30, + paddingHorizontal: 10, + textAlign: "center", + fontSize: 30, + color: globalStyle.textPrimary, + }, + input: { + flex: 1, + borderColor: globalStyle.backgroundTertiary, + fontSize: 22, + color: globalStyle.textPrimary, + }, + addButton: { + position: "absolute", + bottom: 20, + right: 20, + backgroundColor: globalStyle.backgroundTertiary, + borderRadius: 50, + width: 50, + height: 50, + alignItems: "center", + justifyContent: "center", + }, + keyContainer: { + height: 60, + paddingVertical: 5, + width: "100%", + backgroundColor: globalStyle.highlightTertiary, + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + paddingHorizontal: 40, + }, + saveText: { + color: globalStyle.textPrimary, + fontWeight: "bold", + fontSize: 12, + }, + video: { + width: "100%", + height: "100%", + justifyContent: "center", + alignSelf: "center", + }, +});