app/(tabs)/index.tsx

@@ -7,7 +7,7 @@ import { formatTime } from '@/components/shared/business/timeHelpers';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '@/app/RootStackParamList';
-import { HorizontalSpacer, VerticalSpacer } from '@/components/shared/Spacers';
+import { VerticalSpacer } from '@/components/shared/Spacers';
 import { TimerPickerModal } from 'react-native-timer-picker';
 import Button from '@/components/shared/Button';
 import NumberSelector from '@/components/shared/NumberSelector';
@@ -63,11 +63,14 @@ export default function Dashboard() {
 
   return (
     <Container>
+      <Title>{i18n.t('appTitle')}</Title>
+
+      <VerticalSpacer heightUnits={8} />
+
       <CardContainer>
-        <Card backgroundColor="darkGrey" color="black" borderColor="darkGrey" onPress={() => setShowPreparationTimePicker(true)}>
+        <Card backgroundColor="grey" onPress={() => setShowPreparationTimePicker(true)}>
           <CardTextContainer>
             <BlackCustomText>{t('preparation')}</BlackCustomText>
-            <VerticalSpacer heightUnits={3} />
             <BlackCustomText>{formatTime(localPreparationTime)}</BlackCustomText>
           </CardTextContainer>
         </Card>
@@ -94,10 +97,9 @@ export default function Dashboard() {
           }}
         />
 
-        <Card backgroundColor="white" borderColor="pink" color="black" onPress={() => setShowWorkTimePicker(true)}>
+        <Card backgroundColor="red" onPress={() => setShowWorkTimePicker(true)}>
           <CardTextContainer>
             <CustomText>{t('fight')}</CustomText>
-            <VerticalSpacer heightUnits={3} />
             <CustomText>{formatTime(localWorkTime)}</CustomText>
           </CardTextContainer>
         </Card>
@@ -124,10 +126,9 @@ export default function Dashboard() {
           }}
         />
 
-        <Card backgroundColor="white" borderColor="blue" color='black' onPress={() => setShowRestTimePicker(true)}>
+        <Card backgroundColor="green" onPress={() => setShowRestTimePicker(true)}>
           <CardTextContainer>
             <CustomText>{t('rest')}</CustomText>
-            <VerticalSpacer heightUnits={3} />
             <CustomText>{formatTime(localRestTime)}</CustomText>
           </CardTextContainer>
         </Card>
@@ -154,43 +155,28 @@ export default function Dashboard() {
           }}
         />
 
-        <Card backgroundColor="black" color="white" borderColor="black">
+        <Card backgroundColor="black">
           <CardTextContainer>
-            <WhiteCustomText>{t('repetition')}</WhiteCustomText>
+            <CustomText>{t('repetition')}</CustomText>
-            <VerticalSpacer heightUnits={3} />
             <NumberSelector reps={localReps} setReps={handleRepsChange} />
           </CardTextContainer>
         </Card>
       </CardContainer>
 
       <VerticalSpacer heightUnits={5} />
-      <CenterText>{t('totalTime')}: {totalWorkTime}</CenterText>
+      <Text>{t('totalTime')}: {totalWorkTime}</Text>
 
       <VerticalSpacer heightUnits={5} />
 
-      <Row>
+      <Button label={t('begin')} onPress={() => navigation.navigate('Timer')} />
-        <SmallButton color="blue" labelColor="white" label={t('settings')} onPress={() => navigation.navigate('Settings')} />
+
-        <LargeButton color="pink" labelColor="white" label={t('begin')} onPress={() => navigation.navigate('Timer')} />
+      <VerticalSpacer heightUnits={5} />
-      </Row>
+
+      <Button label={t('settings')} onPress={() => navigation.navigate('Settings')} />
     </Container>
   );
 }
 
-const Row = styled.View({
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%'
-})
-
-const SmallButton = styled(Button)({
-  width: '30%'
-})
-
-const LargeButton = styled(Button)({
-  width: '65%'
-})
-
 const LoadingContainer = styled.View({
   flex: 1,
   justifyContent: 'center',
@@ -210,7 +196,7 @@ const Container = styled.View({
 })
 
 const CardTextContainer = styled.View({
-  flexDirection: 'column',
+  flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center'
 })
@@ -221,21 +207,12 @@ const CardContainer = styled.View({
 })
 
 const CustomText = styled(Text)(({ theme }) => ({
-  fontSize: 23,
+  fontSize: 20,
   fontWeight: 'bold',
   textAlign: 'center',
-}))
-
-const WhiteCustomText = styled(CustomText)(({ theme }) => ({
   color: theme.colors.fixed.white
 }))
 
 const BlackCustomText = styled(CustomText)(({ theme }) => ({
   color: theme.colors.fixed.black
 }))
-
-const CenterText = styled(Text)(({ theme }) => ({
-  textAlign: 'center',
-  fontSize: 22,
-  color: theme.colors.fixed.black
-}))

app/Timer.tsx

@@ -189,9 +189,9 @@ export default function Timer() {
   const renderBgColor: () => TimerBgColor = () => {
     if (isFinish) return "black";
     if (isPreparationPhase) return "grey";
-    if (isWorkPhase) return "pink";
+    if (isWorkPhase) return "red";
 
-    return "blue";
+    return "green";
   };
 
   return (

components/shared/Button.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/native';
 import { HorizontalSpacer } from '@/components/shared/Spacers';
 import { Text } from '@/components/shared/Themed';
 
-type ButtonColor = 'green' | 'red' | 'grey' | 'white' | 'black' | 'darkGrey' | 'blue' | 'pink';
+type ButtonColor = 'green' | 'red' | 'grey' | 'white';
 type LabelColor =  ButtonColor | 'black';
 type IconLocation = 'left' | 'right';
 
@@ -69,11 +69,11 @@ const Container = styled.TouchableOpacity<{
   disabled: boolean;
   secondary: boolean;
 }>(({ theme, bgColor, secondary }) => ({
-  backgroundColor: secondary ? theme.colors.fixed.white : theme.colors.fixed[bgColor],
+  backgroundColor: theme.colors.fixed[bgColor],
-  borderWidth: 4,
+  borderWidth: secondary ? 1 : 0,
   borderColor: theme.colors.fixed[bgColor],
-  borderRadius: 0,
+  borderRadius: 6,
-  height: theme.layout.gridUnit * 20,
+  height: theme.layout.gridUnit * 12,
   justifyContent: 'center',
   paddingHorizontal: theme.layout.gridUnit * 4,
   alignItems: 'center',

components/shared/Card.tsx

@@ -5,46 +5,30 @@ import { TouchableOpacity } from 'react-native';
 export interface CardProps {
   children: React.ReactNode;
   backgroundColor: CardBackgroundColor;
-  borderColor: CardBorderColor;
-  color: CardColor;
   testID?: string;
   onPress?: () => void;
 }
 
-type CardBackgroundColor = 'red' | 'green' | 'grey' | 'black' | 'white' | 'darkGrey';
+type CardBackgroundColor = 'red' | 'green' | 'grey' | 'black';
-type CardBorderColor = 'pink' | 'blue' | 'grey' | 'black' | 'white' | 'darkGrey';
-type CardColor = 'black' | 'white';
 
 const Card: React.FC<CardProps> = ({
   children,
   backgroundColor = 'red',
-  color = 'black',
-  borderColor = 'pink',
   testID = undefined,
   onPress
 }) => {
   const safeOnPress = useCallback(() => onPress?.(), [onPress]);
 
   const content = (
-    <Container
+    <Container bgColor={backgroundColor} testID={testID}>
-      color={color}
-      bgColor={backgroundColor}
-      testID={testID}
-      borderColor={borderColor}
-    >
       {children}
     </Container>
   );
 
   const touchableContent = (
-    <CustomTouchableOpacity
+    <TouchableOpacity onPress={safeOnPress}>
-      onPress={safeOnPress}
-      bgColor={backgroundColor}
-      color={color}
-      borderColor={borderColor}
-    >
       {content}
-    </CustomTouchableOpacity>
+    </TouchableOpacity>
   )
 
   return (
@@ -52,29 +36,14 @@ const Card: React.FC<CardProps> = ({
   );
 };
 
-const CustomTouchableOpacity = styled(TouchableOpacity)<{
+const Container = styled.View<{
-  color: CardColor;
-  borderColor: CardBorderColor;
   bgColor: CardBackgroundColor;
-}>(({ theme, color, borderColor, bgColor }) => ({
+}>(({ theme, bgColor }) => ({
-  color: theme.colors.fixed[color],
+  padding: 30,
-  borderColor: theme.colors.fixed[borderColor],
+  width: '100%',
+  borderRadius: 10,
+  overflow: 'hidden',
   backgroundColor: theme.colors.fixed[bgColor]
 }));
 
-const Container = styled.View<{
-  bgColor: CardBackgroundColor;
-  borderColor: CardBorderColor;
-  color: CardColor;
-}>(({ theme, bgColor, borderColor, color }) => ({
-  padding: 25,
-  width: '100%',
-  borderRadius: 0,
-  overflow: 'hidden',
-  backgroundColor: theme.colors.fixed[bgColor],
-  borderWidth: 4,
-  borderColor: theme.colors.fixed[borderColor],
-  color: theme.colors.fixed[color]
-}));
-
 export default Card;

components/useCases/timer/business/type.ts

@@ -1 +1 @@
-export type TimerBgColor = 'pink' | 'blue' | 'black' | 'grey';
+export type TimerBgColor = 'red' | 'green' | 'black' | 'grey';

components/useCases/timer/view/TimerContent.tsx

@@ -58,69 +58,56 @@ export default function TimerContent({
   };
 
   return (
-    <View>
+    <>
-      <Column bgColor={bgColor}>
+      <Title isPreparationPhase={isPreparationPhase}>{getTitle()}</Title>
-        <PartContainer>
-          <Text>3:23</Text>
-          {!isPreparationPhase && <Reps>{currentRep} / {reps}</Reps>}
-          {isPreparationPhase && <Reps isPreparationPhase={true}>{t('preparationDescription')}</Reps>}
-        </PartContainer>
 
-        <PartContainer>
+      <VerticalSpacer heightUnits={8} />
-          <Title isPreparationPhase={isPreparationPhase}>{getTitle()}</Title>
-          <VerticalSpacer heightUnits={2} />
-          <Time isPreparationPhase={isPreparationPhase}>
-            {formatTime(timeLeft)}
-          </Time>
-        </PartContainer>
 
-        <PartContainer>
+      <Time isPreparationPhase={isPreparationPhase}>
-          <ButtonContainer bgColor={bgColor}>
+        {formatTime(timeLeft)}
-            <Button
+      </Time>
-              secondary={true}
-              label={t('prev')}
-              color={'black'}
-              labelColor={'white'}
-              onPress={isPreparationPhase ? handleNoop : previousRep}
-              status={isPreparationPhase ? 'disabled' : 'ready'}
-            />
 
-            <ElasticSpacer />
+      <VerticalSpacer heightUnits={8} />
 
-            {isRunning ? (
+      {!isPreparationPhase && <Reps>{currentRep} / {reps}</Reps>}
-              <Button secondary={true} color={'black'} label={t('stop')} onPress={handleStop} />
+      {isPreparationPhase && <Reps isPreparationPhase={true}>{t('preparationDescription')}</Reps>}
-            ) : (
-              <Button secondary={true} color={'black'} label={t('start')} onPress={handleContinue} />
-            )}
 
-            <ElasticSpacer />
+      <VerticalSpacer heightUnits={8} />
 
-            <Button
+      <ButtonContainer bgColor={bgColor}>
-              secondary={true}
+        <Button
-              label={t('next')}
+          label={t('prev')}
-              color={'black'}
+          onPress={isPreparationPhase ? handleNoop : previousRep}
-              onPress={isPreparationPhase ? nextRep : nextRep}
+          status={isPreparationPhase ? 'disabled' : 'ready'}
-              status="ready"
+        />
-            />
-          </ButtonContainer>
 
-          <VerticalSpacer heightUnits={4} />
+        <ElasticSpacer />
 
-          <Button label={i18n.t('back')} onPress={handleBackClick} />
+        {isRunning ? (
-        </PartContainer>
+          <Button label={t('stop')} onPress={handleStop} />
-      </Column>
+        ) : (
-    </View>
+          <Button label={t('start')} onPress={handleContinue} />
+        )}
+
+        <ElasticSpacer />
+
+        <Button
+          label={t('next')}
+          onPress={isPreparationPhase ? nextRep : nextRep}
+          status="ready"
+        />
+      </ButtonContainer>
+
+      <VerticalSpacer heightUnits={4} />
+
+      <Button label={i18n.t('back')} onPress={handleBackClick} />
+    </>
   );
 }
 
-const PartContainer = styled(View)({
-  backgroundColor: 'transparent',
-});
-
 const ButtonContainer = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
   backgroundColor: theme.colors.fixed[bgColor],
   flexDirection: 'row',
-  gap: 10,
   justifyContent: 'space-between',
 }));
 
@@ -136,13 +123,6 @@ const Time = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparat
   color: isPreparationPhase ? theme.colors.fixed.black : theme.colors.fixed.white
 }));
 
-const Column = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
-  flexDirection: 'column',
-  justifyContent: 'space-around',
-  height: '100%',
-  backgroundColor: theme.colors.fixed[bgColor],
-}));
-
 const Reps = styled(Text)<{ isPreparationPhase?: boolean }>(({ theme, isPreparationPhase = false }) => ({
   fontSize: 30,
   fontWeight: 'bold',

constants/Colors.ts

@@ -3,11 +3,7 @@ const baseColors = {
   white: '#FFFFFF',
   red: '#FF4141',
   green: '#3AC26E',
-  grey: '#F5F5F5',
+  grey: '#F9F9F9',
-  darkGrey: '#D9CFC7',
-  yellow: '#FFD700',
-  pink: '#E4007C',
-  blue: '#86C3E3'
 } as const;
 
 export default {