From 0fa24d82193656a1b7d7853b52db88eac581c2e4 Mon Sep 17 00:00:00 2001
From: Jacob Clapper <105309528+bostonbachexchange@users.noreply.github.com>
Date: Wed, 6 Dec 2023 09:23:41 -0500
Subject: [PATCH] account screen, list component, added a new orange to colors,
listcard.styles, moved to infrastructure/styledComponents
---
src/components/accounts/List.js | 73 +++++++++++++++++++
src/components/accounts/ListCards.styles.js | 37 ++++++++++
src/components/currentWorkouts/WorkoutList.js | 1 -
.../styledComponents/styledComonents.js | 36 +++++++++
src/infrastructure/theme/colors.js | 7 +-
src/screens/account/account.screen.js | 21 ++++--
6 files changed, 165 insertions(+), 10 deletions(-)
create mode 100644 src/components/accounts/List.js
create mode 100644 src/components/accounts/ListCards.styles.js
diff --git a/src/components/accounts/List.js b/src/components/accounts/List.js
new file mode 100644
index 0000000..c8eb96f
--- /dev/null
+++ b/src/components/accounts/List.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { View } from 'react-native';
+// import { StyledView, RowView, TitleText, ArrowIcon, SectionView} from './ListCards.styles';
+import { StyledView, RowView, TitleText, ArrowIcon, SectionView} from '../../infrastructure/styledComponents/styledComonents';
+import { theme } from '../../infrastructure/theme';
+
+
+const ButtonCard = ({ title }) => {
+ return (
+
+
+ {title}
+
+
+
+ );
+};
+
+const List = (props) => {
+ // const title = props.title;
+ const exerciseButtons = [
+ { title: 'Edit Exercises'},
+ { title: 'Edit Categories'},
+ { title: 'Edit Workouts'},
+ { title: 'Workout History Log'},
+ { title: 'Weight (lb / kg)'},
+ { title: 'Set a Goal'},
+ { title: 'Set a Challenge'},
+ { title: 'Edit Categories'},
+ { title: 'Edit Categories'},
+ { title: 'Edit Categories'},
+ ];
+ const profileButtons = [
+ { title: 'My Profile'},
+ { title: 'My Trophies'},
+ ];
+ const notificationButtons = [
+ { title: 'Notifications'},
+ { title: 'Security and Privacy'},
+ { title: 'Delete Account'},
+ ];
+ const helpSupportButtons = [
+ { title: 'Help and Support'},
+ { title: 'Send Feedback'},
+ ];
+
+ return (
+
+
+ {exerciseButtons.map((button, index) => (
+
+ ))}
+
+
+ {profileButtons.map((button, index) => (
+
+ ))}
+
+
+ {notificationButtons.map((button, index) => (
+
+ ))}
+
+
+ {helpSupportButtons.map((button, index) => (
+
+ ))}
+
+
+ );
+};
+
+export default List;
diff --git a/src/components/accounts/ListCards.styles.js b/src/components/accounts/ListCards.styles.js
new file mode 100644
index 0000000..02b25a9
--- /dev/null
+++ b/src/components/accounts/ListCards.styles.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components/native';
+import { Text, View } from 'react-native';
+import { theme } from '../../infrastructure/theme';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export const StyledView = styled(View)`
+ background-color: ${theme.colors.background.neutral[2]};
+ margin: 5px;
+ margin-left: 8px;
+ border-radius: 20px;
+ border-width: 1px;
+ border-color: ${theme.colors.borders.neutral};
+ padding: 10px;
+ padding-bottom: 10px;
+ padding-left: 20px;
+`;
+
+export const RowView = styled(View)`
+ flex-direction: row;
+ justify-content: space-between;
+`;
+export const SectionView = styled(View)`
+ margin-top: 6px;
+ margin-bottom: 6px;
+`;
+
+export const TitleText = styled(Text)`
+ color: ${theme.colors.text.neutral};
+ font-size: 18px;
+ font-weight: 600;
+ padding-bottom: 0;
+ margin-bottom: 0;
+`;
+
+export const ArrowIcon = styled(MaterialIcons)`
+ align-self: center;
+`;
\ No newline at end of file
diff --git a/src/components/currentWorkouts/WorkoutList.js b/src/components/currentWorkouts/WorkoutList.js
index 6def3d7..d19eafa 100644
--- a/src/components/currentWorkouts/WorkoutList.js
+++ b/src/components/currentWorkouts/WorkoutList.js
@@ -1,7 +1,6 @@
import React from 'react';
import { View } from 'react-native';
import { StyledView, TitleText, InfoContainer, DifficultyText, DurationContainer, DurationText, ArrowIcon, DaysText } from './WorkoutCard.styles';
-// import { StyledView } from './WorkoutCard.styles';
import SectionHeader from '../screen/SectionHeader';
import { theme } from '../../infrastructure/theme';
diff --git a/src/infrastructure/styledComponents/styledComonents.js b/src/infrastructure/styledComponents/styledComonents.js
index 76232f3..20d6d17 100644
--- a/src/infrastructure/styledComponents/styledComonents.js
+++ b/src/infrastructure/styledComponents/styledComonents.js
@@ -1,5 +1,8 @@
import { styled } from 'styled-components'
import { theme } from '../theme'
+// import styled from 'styled-components/native';
+import { Text, View } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
export const CenteredView = styled.View`
flex: 1;
@@ -14,3 +17,36 @@ export const H1 = styled.Text`
export const Body = styled.Text`
font-size: ${theme.fontSizes.body};
`
+
+export const StyledView = styled(View)`
+ background-color: ${theme.colors.background.neutral[2]};
+ margin: 5px;
+ margin-left: 8px;
+ border-radius: 20px;
+ border-width: 1px;
+ border-color: ${theme.colors.borders.neutral};
+ padding: 10px;
+ padding-bottom: 10px;
+ padding-left: 20px;
+`;
+
+export const RowView = styled(View)`
+ flex-direction: row;
+ justify-content: space-between;
+`;
+export const SectionView = styled(View)`
+ margin-top: 6px;
+ margin-bottom: 6px;
+`;
+
+export const TitleText = styled(Text)`
+ color: ${theme.colors.text.neutral};
+ font-size: 18px;
+ font-weight: 600;
+ padding-bottom: 0;
+ margin-bottom: 0;
+`;
+
+export const ArrowIcon = styled(MaterialIcons)`
+ align-self: center;
+`;
\ No newline at end of file
diff --git a/src/infrastructure/theme/colors.js b/src/infrastructure/theme/colors.js
index daba8df..f38747b 100644
--- a/src/infrastructure/theme/colors.js
+++ b/src/infrastructure/theme/colors.js
@@ -3,7 +3,9 @@ const tertiary = [
"#B080FF",
// The color "#FF6E00" is a vivid shade of orange. It is a warm and energetic color often associated with attributes such as enthusiasm, creativity, and warmth
-"#FF9346"
+"#FF9346",
+
+"#FF6E00"
]
const neutral = [
"#2E2E2E",
@@ -43,7 +45,8 @@ export const colors = {
icon: {
tertiary: tertiary[0], // Lavender
lavender: tertiary[0],
- orange: tertiary[1],
+ // orange: tertiary[1],
+ orange: tertiary[2],
neutral: '#F7F7F7', // Very light gray
},
text: {
diff --git a/src/screens/account/account.screen.js b/src/screens/account/account.screen.js
index 3907ea5..689b712 100644
--- a/src/screens/account/account.screen.js
+++ b/src/screens/account/account.screen.js
@@ -1,15 +1,22 @@
import { SafeArea } from '../../components/utilities/safeArea.component'
-import {
- CenteredView,
- H1,
-} from '../../infrastructure/styledComponents/styledComonents'
+import { View, ScrollView } from 'react-native'
+import List from '../../components/accounts/List'
+import { theme } from '../../infrastructure/theme'
+import Header from '../../components/section/Header'
+// import {
+// CenteredView,
+// H1,
+// } from '../../infrastructure/styledComponents/styledComonents'
const AccountScreen = () => {
return (
-
- Account
-
+
+
+
+
+
+
)
}