account screen, list component, added a new orange to colors, listcar…

…d.styles, moved to infrastructure/styledComponents
EfrainAD · Dec 8, 2023 · 0fa24d8 · 0fa24d8
1 parent 4855e1c
commit 0fa24d8
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 10 deletions.
diff --git a/src/components/accounts/List.js 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 (
+    <StyledView>
+      <RowView>
+        <TitleText>{title}</TitleText>
+        <ArrowIcon name="arrow-forward-ios" size={24} color={theme.colors.icon.orange} />
+      </RowView>
+    </StyledView>
+  );
+};
+
+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 (
+    <View>
+      <SectionView>
+        {exerciseButtons.map((button, index) => (
+          <ButtonCard key={index} {...button} />
+        ))}
+      </SectionView>
+      <SectionView>
+        {profileButtons.map((button, index) => (
+          <ButtonCard key={index} {...button} />
+        ))}
+      </SectionView>
+      <SectionView>
+        {notificationButtons.map((button, index) => (
+          <ButtonCard key={index} {...button} />
+        ))}
+      </SectionView>
+      <SectionView>
+        {helpSupportButtons.map((button, index) => (
+          <ButtonCard key={index} {...button} />
+        ))}
+      </SectionView>
+    </View>
+  );
+};
+
+export default List;
diff --git a/src/components/accounts/ListCards.styles.js 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;
+`;
diff --git 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
@@ -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;
+`;
diff --git 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
@@ -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 (
       <SafeArea>
-         <CenteredView>
-            <H1>Account</H1>
-         </CenteredView>
+         <View style={{ flex: 1, backgroundColor: theme.colors.background.neutral[0] }}>
+            <Header title="Account"/>
+            <ScrollView>
+            <List/>
+            </ScrollView>
+         </View>
       </SafeArea>
    )
 }