-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0fa24d8
commit 0a70bd1
Showing
18 changed files
with
623 additions
and
528 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,79 @@ | ||
| import React from 'react'; | ||
| import { View } from 'react-native'; | ||
| 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'; | ||
|
|
||
| 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> | ||
| ); | ||
| }; | ||
| 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'}, | ||
| ]; | ||
| // 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> | ||
| ); | ||
| }; | ||
| 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; | ||
| export default List |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +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'; | ||
| 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; | ||
| `; | ||
| 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; | ||
| `; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| ` | ||
| export const SectionView = styled(View)` | ||
| margin-top: 6px; | ||
| margin-bottom: 6px; | ||
| `; | ||
| 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; | ||
| `; | ||
| 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; | ||
| `; | ||
| align-self: center; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,34 @@ | ||
| import React from 'react'; | ||
| import { ProgressBarContainer, StyledLinearGradient, IconButtonContainer, AddRemoveIconButtonContainer, StyledIonicons } from './progressBar.styles'; | ||
| import { theme } from '../../infrastructure/theme'; | ||
| import React from 'react' | ||
| import { | ||
| ProgressBarContainer, | ||
| StyledLinearGradient, | ||
| IconButtonContainer, | ||
| AddRemoveIconButtonContainer, | ||
| StyledIonicons, | ||
| } from './progressBar.styles' | ||
| import { theme } from '../../infrastructure/theme' | ||
|
|
||
| const ProgressBar = () => { | ||
| return ( | ||
| <ProgressBarContainer> | ||
| <StyledLinearGradient | ||
| colors={[ | ||
| theme.colors.progress.start, | ||
| theme.colors.progress.middle, | ||
| theme.colors.progress.end, | ||
| ]} | ||
| locations={[0, 0.5104, 0.9531]} | ||
| start={{ x: 0, y: 0.5 }} | ||
| end={{ x: 1, y: 0.5 }} | ||
| /> | ||
| <IconButtonContainer> | ||
| <StyledIonicons name="remove" /> | ||
| </IconButtonContainer> | ||
| <AddRemoveIconButtonContainer> | ||
| <StyledIonicons name="add" /> | ||
| </AddRemoveIconButtonContainer> | ||
| </ProgressBarContainer> | ||
| ); | ||
| }; | ||
| return ( | ||
| <ProgressBarContainer> | ||
| <StyledLinearGradient | ||
| colors={[ | ||
| theme.colors.progress.start, | ||
| theme.colors.progress.middle, | ||
| theme.colors.progress.end, | ||
| ]} | ||
| locations={[0, 0.5104, 0.9531]} | ||
| start={{ x: 0, y: 0.5 }} | ||
| end={{ x: 1, y: 0.5 }} | ||
| /> | ||
| <IconButtonContainer> | ||
| <StyledIonicons name="remove" /> | ||
| </IconButtonContainer> | ||
| <AddRemoveIconButtonContainer> | ||
| <StyledIonicons name="add" /> | ||
| </AddRemoveIconButtonContainer> | ||
| </ProgressBarContainer> | ||
| ) | ||
| } | ||
|
|
||
| export default ProgressBar; | ||
| export default ProgressBar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,38 @@ | ||
| import styled from 'styled-components/native'; | ||
| import { View } from 'react-native'; | ||
| import { Ionicons } from '@expo/vector-icons'; | ||
| import { LinearGradient } from 'expo-linear-gradient'; | ||
| import { theme } from '../../infrastructure/theme'; | ||
| import styled from 'styled-components/native' | ||
| import { View } from 'react-native' | ||
| import { Ionicons } from '@expo/vector-icons' | ||
| import { LinearGradient } from 'expo-linear-gradient' | ||
| import { theme } from '../../infrastructure/theme' | ||
|
|
||
| export const ProgressBarContainer = styled(View)` | ||
| padding-top: 10px; | ||
| flex-direction: row; | ||
| gap: 5px; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| `; | ||
| padding-top: 10px; | ||
| flex-direction: row; | ||
| gap: 5px; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| ` | ||
|
|
||
| export const StyledLinearGradient = styled(LinearGradient)` | ||
| border-radius: 10px; | ||
| height: 25px; | ||
| width: 243px; | ||
| border-width: 2px; | ||
| border-color: ${theme.colors.borders.neutral}; | ||
| `; | ||
| border-radius: 10px; | ||
| height: 25px; | ||
| width: 243px; | ||
| border-width: 2px; | ||
| border-color: ${theme.colors.borders.neutral}; | ||
| ` | ||
|
|
||
| export const IconButtonContainer = styled(View)` | ||
| padding: 1px; | ||
| border-width: 1px; | ||
| border-color: ${theme.colors.borders.neutral}; | ||
| border-radius: 100px; | ||
| background-color: ${theme.colors.background.neutral[2]}; | ||
| `; | ||
| padding: 1px; | ||
| border-width: 1px; | ||
| border-color: ${theme.colors.borders.neutral}; | ||
| border-radius: 100px; | ||
| background-color: ${theme.colors.background.neutral[2]}; | ||
| ` | ||
|
|
||
| export const AddRemoveIconButtonContainer = styled(IconButtonContainer)` | ||
| background-color: ${theme.colors.background.neutral[0]}; | ||
| `; | ||
| background-color: ${theme.colors.background.neutral[0]}; | ||
| ` | ||
|
|
||
| export const StyledIonicons = styled(Ionicons)` | ||
| font-size: 25px; | ||
| color: ${theme.colors.text.neutral}; | ||
| `; | ||
| font-size: 25px; | ||
| color: ${theme.colors.text.neutral}; | ||
| ` |
Oops, something went wrong.