fln-espranza 0.0.14 → 0.0.16

package/components/Drawer.tsx

@@ -1,7 +1,12 @@
 import React from "react";
 import { ScrollView, View, TouchableOpacity } from "react-native";
-import { HomeIcon, CalendarIcon, TemplateIcon, ViewBoardsIcon } from 'react-native-heroicons/solid';
-import { StyleSheet } from 'react-native';
+import {
+  HomeIcon,
+  CalendarIcon,
+  TemplateIcon,
+  ViewBoardsIcon,
+} from "react-native-heroicons/solid";
+import { StyleSheet } from "react-native";
 import tw from "../lib/tailwind";
 import EText from "./EText";
 import Spacer from "./Spacer";
@@ -11,14 +16,14 @@ import MenuItems from "./MenuItems";
 import EIconLogout from "./icons/EIconLogout";
 
 type menuItems = {
-  title: string,
-  icon: any,
-  screen: string,
-}
+  title: string;
+  icon: any;
+  screen: string;
+};
 
 interface IProps {
-  name: string,
-  profile: string,
+  name: string;
+  profile: string;
   menuItems: menuItems[];
   navigation: any;
   logout?: () => void;
@@ -30,9 +35,10 @@ const Drawer = ({ name, profile, menuItems, navigation, logout }: IProps) => {
       scrollEnabled={true}
       showsVerticalScrollIndicator={false}
       style={{
-        position: 'relative',
-        backgroundColor: '#ffffff',
-      }}>
+        position: "relative",
+        backgroundColor: "#ffffff",
+      }}
+    >
       <View style={tw`mx-4 pt-4`}>
         <Spacer height={30} />
 
@@ -44,10 +50,18 @@ const Drawer = ({ name, profile, menuItems, navigation, logout }: IProps) => {
               nameFirstLetter={name?.split("")[0]}
             />
             <View style={tw`ml-3`}>
-              <EText size={"xl"} style={tw`font-bold -mt-1`}>{name}</EText>
-              <EText size="sm" style={[tw`font-normal`, {
-                color: Colors["text-body"]
-              }]}>
+              <EText size={"xl"} style={tw`font-bold -mt-1`}>
+                {name}
+              </EText>
+              <EText
+                size="sm"
+                style={[
+                  tw`font-normal`,
+                  {
+                    color: Colors["text-body"],
+                  },
+                ]}
+              >
                 {profile}
               </EText>
             </View>
@@ -55,32 +69,30 @@ const Drawer = ({ name, profile, menuItems, navigation, logout }: IProps) => {
         </View>
 
         <Spacer height={30} />
-        {
-          menuItems.map((item, index) => {
-            return (
-              <MenuItems
-                key={index}
-                title={item.title}
-                icon={item.icon}
-                onPress={() => navigation.navigate(item.screen)}
-              />
-            )
-          })
-        }
+        {menuItems.map((item, index) => {
+          return (
+            <MenuItems
+              key={index}
+              title={item.title}
+              icon={item.icon}
+              onPress={() => navigation.navigate(item.screen)}
+            />
+          );
+        })}
 
         <MenuItems
           title={"Logout"}
-          icon={<EIconLogout
-            size={24}
-            style={tw`text-[${Colors["primary-base"]}]`}
-          />}
-          onPress={() => logout()}
+          icon={
+            <EIconLogout
+              size={24}
+              style={tw`text-[${Colors["primary-base"]}]`}
+            />
+          }
+          onPress={() => logout && logout()}
         />
-
-
       </View>
     </ScrollView>
   );
 };
 
-export default Drawer;
+export default Drawer;

package/components/EDateAndTimeCard.tsx

@@ -5,15 +5,15 @@ import { Colors } from "../utils/Color";
 import EText from "./EText";
 import EIconClock from "./icons/EIconClock";
 
-interface IProps{
-    date: string;
-    month: string;
-    day: string;
-    time: string;
+interface IProps {
+  date: string;
+  month: string;
+  day: string;
+  time?: string;
 
 }
 
-export default function EDateAndTimeCard( {date, month, day, time}: IProps) {
+export default function EDateAndTimeCard({ date, month, day, time }: IProps) {
   return (
     <View
       style={[tw`flex-row pb-4 border-b`, { borderBottomColor: Colors.border }]}
@@ -31,20 +31,20 @@ export default function EDateAndTimeCard( {date, month, day, time}: IProps) {
           {month}
         </EText>
       </View>
-      <View style={tw`ml-3`}>
+      <View style={tw`ml-3 justify-center`}>
         <EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
           {day}
         </EText>
-        <View style={tw`flex-row justify-center items-center mt-2`}>
-          {/* <ClockIcon size={14} style={tw`text-slate-400`} /> */}
-          <EIconClock size={16} style={tw`text-slate-500`}/>
+        {
+          time ?<View style={tw`flex-row justify-center items-center mt-2`}>
+          <EIconClock size={16} style={tw`text-slate-500`} />
           <EText
             size="sm"
             style={tw`ml-1 text-slate-500`}
           >
             {time}
           </EText>
-        </View>
+        </View> : null}
       </View>
     </View>
   );

package/components/EProfile.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { View } from 'react-native';
-import tw from '../lib/tailwind';
-import { Colors } from '../utils/Color';
-import Avatar from './Avatar';
-import EText from './EText';
+import React from "react";
+import { View } from "react-native";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import Avatar from "./Avatar";
+import EText from "./EText";
 
 interface IProps {
   name: string;
@@ -12,12 +12,25 @@ interface IProps {
   children?: JSX.Element;
   titleSize: string;
   subTitleSize: string;
-
 }
 
-export default function EProfile({ name, subjectName, border, children, titleSize, subTitleSize }: IProps) {
+export default function EProfile({
+  name,
+  subjectName,
+  border,
+  children,
+  titleSize,
+  subTitleSize,
+}: IProps) {
   return (
-    <View style={[tw`flex-row items-center justify-between py-3 ${border ? "border-b" : ""}`, {borderBottomColor: Colors.border}]}>
+    <View
+      style={[
+        tw`flex-row items-center justify-between py-3 ${
+          border ? "border-b" : ""
+        }`,
+        { borderBottomColor: Colors.border },
+      ]}
+    >
       <View style={tw`flex-row items-center`}>
         <Avatar
           size="sm"
@@ -25,18 +38,25 @@ export default function EProfile({ name, subjectName, border, children, titleSiz
           nameFirstLetter={name.split(" ")[0].charAt(0)}
         />
         <View style={tw`ml-3`}>
-          <EText style={[tw`${titleSize}`, { color: Colors['text-primary'] }]}>{name}</EText>
-          {subjectName ? <EText style={[tw`mt-1 ${subTitleSize}`, { color: Colors['text-body'] }]}>
-            {subjectName}
-          </EText> : null}
+          <EText
+            style={[
+              tw`font-bold text-slate-800 mb-0.5 capitalize ${titleSize}`,
+              { color: Colors["text-primary"] },
+            ]}
+          >
+            {name}
+          </EText>
+          {subjectName ? (
+            <EText
+              size="sm"
+              style={[tw` ${subTitleSize}`, { color: Colors["text-body"] }]}
+            >
+              {subjectName}
+            </EText>
+          ) : null}
         </View>
       </View>
-      {
-        children ? <>
-          {children}
-        </> : null
-      }
-
+      {children ? <>{children}</> : null}
     </View>
-  )
+  );
 }

package/components/ETimeLineCard.tsx

@@ -1,3 +1,4 @@
+import { EIconAdd } from 'fln-espranza';
 import React from 'react'
 import { Dimensions, TouchableOpacity, View } from 'react-native'
 import { ChevronRightIcon } from 'react-native-heroicons/solid';
@@ -12,11 +13,11 @@ interface IProps {
   title: string;
   description: string;
   completed: boolean;
-  skipButton?: boolean;
+  anotherButton?: boolean;
   onPress?: () => void;
 }
 
-export default function ETimeLineCard({ title, description, completed, skipButton, onPress }: IProps) {
+export default function ETimeLineCard({ title, description, completed, anotherButton, onPress }: IProps) {
   return (
     <TouchableOpacity
       onPress={() =>  onPress && onPress()}
@@ -48,19 +49,18 @@ export default function ETimeLineCard({ title, description, completed, skipButto
           completed={completed}
           text={completed ? "Complete" : "Pending"}
           color={completed ? Colors['primary-base'] : Colors.warning}
-          textColor={completed ? "text-white" : ""}
-          size="xs"
-          padding='py-1 px-3'
-          fontWeight='font-bold'
         />
 
         {
-          skipButton ? (
-            <TouchableOpacity>
+          anotherButton ? (
+            <TouchableOpacity style={tw`flex-row`}>
               <EText size="sm" style={[tw`ml-2 font-semibold`, {color: Colors['primary-base']}]}>
-                Skip
+                Another Assessment
               </EText>
-            </TouchableOpacity>) : null
+              <EIconAdd size={20} style={[tw`ml-2`, {color: Colors['primary-base']}]}/>
+            </TouchableOpacity>
+            
+            ) : <></>
         }
       </View>
     </TouchableOpacity>

package/components/MenuItems.tsx

@@ -32,7 +32,7 @@ export default function MenuItems({ title, icon, onPress }: IProps) {
         <EText
           size="base"
           style={[
-            tw`font-medium `,
+            tw`font-semibold `,
             {
               color: Colors["text-primary"],
             },

package/components/PageHeader.tsx

@@ -1,11 +1,10 @@
-import { View, Animated, Dimensions, Image } from "react-native";
+import { View, Animated, Dimensions, TouchableOpacity } from "react-native";
 import React, { useEffect, useRef } from "react";
 import tw from "../lib/tailwind";
 import { useNavigation } from "@react-navigation/native";
-import EButtonIcon from "./EButtonIcon";
 import EText from "./EText";
 import Constants from "expo-constants";
-import { MenuIcon } from "react-native-heroicons/outline";
+import { EIconArrowLeft, EIconMenu } from "fln-espranza";
 
 const SCREEN_WIDTH = Dimensions.get("window").width;
 const HEADER_HEIGHT = 90;
@@ -48,82 +47,69 @@ export default function PageHeader({
     }).start();
   });
   return (
-    <View style={[tw`${curved ? "-mb-2" : ""} ${border ? "border-b border-slate-300" : ""} `, {}]}>
+    <View style={[tw`${"border-none border-slate-300 bg-white shadow-lg py-3"} `, {}]}>
       <View style={tw`overflow-hidden`}>
-        <Animated.View
+        <View
           style={[
-            tw`flex-row pr-4 pl-3 pb-3`,
+            tw`flex-row items-center px-3`,
             {
               paddingTop: Constants.statusBarHeight + 8,
-              transform: [{ translateX }],
-              opacity,
             },
           ]}
         >
-          <Animated.View
-            style={[tw`-mt-2 left-3 absolute `, { transform: [{ translateX }], opacity, paddingTop: Constants.statusBarHeight + 8 }]}
+          {/* LEFT ICON */}
+          <View
+            style={[tw`` ]}
           >
             {menuButton ?
-              <MenuIcon
-                onPress={() => navigation?.openDrawer()}
+            <TouchableOpacity activeOpacity={0.6} 
+            onPress={() => navigation?.openDrawer()}>
+              <EIconMenu
                 size={24}
-                // onPress={() => navigation.navigate("Dashboard")}
-                style={tw`text-slate-900 mt-2`}
+                style={tw`text-slate-800`}
               />
+            </TouchableOpacity>
+              
               :
-
-              <EButtonIcon
+              <TouchableOpacity  activeOpacity={0.6}
+              onPress={() => navigation.goBack()}>
+              <EIconArrowLeft
                 iconColor={curved ? "white" : "tint-slate-900"}
                 size={24}
                 // onPress={() => navigation.navigate("Dashboard")}
-                onPress={() => navigation.goBack()}
+                style={tw`text-slate-800`}
               />
+              </TouchableOpacity>
             }
-          </Animated.View>
-          <View style={tw`flex-1 items-center`}>
+          </View>
+          {/* TITLE */}
+          <View style={tw`flex-1 items-start px-3`}>
             <EText
-              size="base"
-              style={tw.style("text-black font-semibold ", curved && "text-white ")}
+              size="lg"
+              style={tw.style("text-slate-800 font-bold")}
             >
               {title}
             </EText>
             {subtitle ? (
               <EText
                 style={tw.style(
-                  "text-slate-800 opacity-40 font-semibold mt-0.25",
-                  curved && "text-white "
+                  "text-slate-800 opacity-40 font-semibold mt-0.25"
                 )}
               >
                 {subtitle}
               </EText>
             ) : null}
           </View>
-
+          
+          {/* RIGHT ICON */}
           {iconEnd ? (
-            <View style={[tw`mt-0.5 items-center justify-center`, {}]}>
+            <View style={[tw``, {}]}>
               {iconEnd}
             </View>
           ) : null}
-        </Animated.View>
+        </View>
         {children ? <View style={tw.style("pb-6")}>{children}</View> : null}
       </View>
-
-      {/* MASK */}
-      {curved ? (
-        <View
-          style={[
-            tw``,
-            { height: 32, width: SCREEN_WIDTH, backgroundColor: "#0547FA" },
-          ]}
-        >
-          <View
-            style={[
-              tw`bg-white -z-0`,
-              { height: 64, width: SCREEN_WIDTH, borderTopLeftRadius: 32 },
-            ]}
-          />
-        </View>
-      ) : null}
     </View>
   );
 }

package/components/SecondaryBaseLayout.tsx

@@ -1,23 +1,9 @@
-import {
-  View,
-  ImageBackground,
-  Dimensions,
-  Animated,
-  ScrollView,
-  Platform,
-} from "react-native";
-import React, { useEffect, useRef, useState } from "react";
+import { View, Dimensions, ScrollView, Platform } from "react-native";
+import React from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import tw from "../lib/tailwind";
-import EText from "./EText";
 import { StatusBar } from "expo-status-bar";
-import {
-  Container,
-  EButton,
-  EButtonIcon,
-  PageHeader,
-  PageHeaderSecondary,
-} from ".";
+import { PageHeader } from ".";
 import Constants from "expo-constants";
 import { useNavigation } from "@react-navigation/native";
 
@@ -61,7 +47,7 @@ export default function SecondaryBaseLayout({
         tw`flex-1 bg-white`,
         {
           paddingBottom: Platform.OS === "ios" ? insets.bottom : 0,
-          paddingTop: Platform.OS === "ios" ? 12 : 24,
+          paddingTop: Platform.OS === "ios" ? 44 : 24,
         },
       ]}
     >
@@ -70,22 +56,11 @@ export default function SecondaryBaseLayout({
       {/* HEADER */}
       <View
         style={[
-          tw`absolute top-0 right-0 left-0 pt-2 z-10 w-full bg-white  ${
+          tw`absolute top-0 right-0 left-0 pt-0 z-10 w-full bg-white  ${
             title ? "mb-1" : "pb-0"
           }`,
         ]}
       >
-        {/* <PageHeaderSecondary
-          title={title}
-          subtitle={subtitle}
-          button={
-            <EButtonIcon
-              type="close"
-              iconColor="slate-800"
-              onPress={() => navigation.goBack()}
-            />
-          }
-        /> */}
         <PageHeader
           border={border}
           title={title}
@@ -111,7 +86,14 @@ export default function SecondaryBaseLayout({
         {children}
       </ScrollView>
       {bottomButton ? (
-        <View style={[tw` px-4 `, {paddingBottom: Platform.OS ==='android' ? 8 : 0}]}>{bottomButton}</View>
+        <View
+          style={[
+            tw` px-4 `,
+            { paddingBottom: Platform.OS === "android" ? 8 : 0 },
+          ]}
+        >
+          {bottomButton}
+        </View>
       ) : (
         <></>
       )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {