From 68f101c9ce671972b6c8c5defbe740e541bde914 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Gra=C3=A7a?= Date: Sat, 28 Dec 2024 14:52:40 +0000 Subject: [PATCH 1/4] commit --- assets/trophygold.svg | 12 ++++++ package-lock.json | 20 ++++++++-- package.json | 5 ++- src/App.js | 7 +++- src/pages/HomePage.js | 85 +++++++++++++++++++++++++++++++++++++++++-- 5 files changed, 118 insertions(+), 11 deletions(-) create mode 100644 assets/trophygold.svg diff --git a/assets/trophygold.svg b/assets/trophygold.svg new file mode 100644 index 0000000..67d83ed --- /dev/null +++ b/assets/trophygold.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/package-lock.json b/package-lock.json index 322183a..065fd07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@react-navigation/native-stack": "^7.2.0", "expo": "~52.0.23", "expo-font": "~13.0.2", + "expo-linear-gradient": "~14.0.1", "expo-splash-screen": "~0.29.18", "expo-status-bar": "~2.0.0", "nativewind": "^4.1.23", @@ -26,7 +27,7 @@ "react-native-reanimated": "^3.16.6", "react-native-safe-area-context": "4.12.0", "react-native-screens": "^4.4.0", - "react-native-svg": "^15.10.1", + "react-native-svg": "15.8.0", "react-native-svg-transformer": "^1.5.0", "react-native-vector-icons": "^10.2.0", "react-native-web": "~0.19.13" @@ -6328,6 +6329,17 @@ "react": "*" } }, + "node_modules/expo-linear-gradient": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-14.0.1.tgz", + "integrity": "sha512-apGtUO9AZ52ZWvX9f6K9TamWw8XcUby7jZ0Pcvd5LxUO7pl7tDPx2VlKqpzbhhS4yfCiUwX58wqocwVnE/0ZVg==", + "license": "MIT", + "peerDependencies": { + "expo": "*", + "react": "*", + "react-native": "*" + } + }, "node_modules/expo-modules-autolinking": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.4.tgz", @@ -10187,9 +10199,9 @@ } }, "node_modules/react-native-svg": { - "version": "15.10.1", - "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.10.1.tgz", - "integrity": "sha512-Hqz/doQciVFK/Df2v+wsW96oY5jxlta7rZ31KQYo78dlgvAHEaGr6paEOAMvlIruw7EHNQ0Vc1ZmJPJF2kfIPQ==", + "version": "15.8.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.8.0.tgz", + "integrity": "sha512-KHJzKpgOjwj1qeZzsBjxNdoIgv2zNCO9fVcoq2TEhTRsVV5DGTZ9JzUZwybd7q4giT/H3RdtqC3u44dWdO0Ffw==", "license": "MIT", "dependencies": { "css-select": "^5.1.0", diff --git a/package.json b/package.json index 8582bf9..3e91be9 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,11 @@ "react-native-reanimated": "^3.16.6", "react-native-safe-area-context": "4.12.0", "react-native-screens": "^4.4.0", - "react-native-svg": "^15.10.1", + "react-native-svg": "15.8.0", "react-native-svg-transformer": "^1.5.0", "react-native-vector-icons": "^10.2.0", - "react-native-web": "~0.19.13" + "react-native-web": "~0.19.13", + "expo-linear-gradient": "~14.0.1" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/App.js b/src/App.js index e303162..6b31ef9 100644 --- a/src/App.js +++ b/src/App.js @@ -46,6 +46,11 @@ export default function App() { screenOptions={({ route }) => ({ headerShown: false, tabBarShowLabel: false, + // tabBarStyle: { + // paddingBottom: 15, // Espaçamento inferior dentro da barra + // paddingTop: 10, // Espaçamento superior dentro da barra + // backgroundColor: "#fff", // Cor de fundo da barra + // }, tabBarIcon: ({ focused, size }) => { let IconComponent; let color = focused ? "#fcc766" : "#d0d0d0"; // Define as cores: ativo e inativo @@ -70,7 +75,7 @@ export default function App() { IconComponent = null; } - return ; + return ; }, tabBarActiveTintColor: "#fcc766", tabBarInactiveTintColor: "#d0d0d0", diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index c6d649b..25e520f 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,10 +1,87 @@ import React from "react"; -import { Text, View } from "react-native"; +import { Text, View, Image, TouchableOpacity } from "react-native"; +import { LinearGradient } from "expo-linear-gradient"; +import { SvgUri } from "react-native-svg"; export default function HomePage() { return ( - - Home - + + + {/* Ícone PNG */} + + + {/* Texto de boas-vindas */} + + Olá, Rodrigo! + + + {/* Botão de Monitorização */} + + Começar Monitorização + + + {/* Secção de Tarefas Diárias */} + + + Tarefas Diárias + + + {/* Primeira tarefa */} + + + Estar apenas 2 horas no Insta hoje + + + + + {/* Segunda tarefa */} + + + Falar com os amigos + + + + + + {/* Secção de Ícones e Pontos */} + + {/* Ícone de "?" */} + + + 14 + + + {/* Ícone de troféu */} + + + 2 + + + + ); } From fbe59dd72e3bedd4d3e75c181010e96df48e060a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Gra=C3=A7a?= Date: Sat, 28 Dec 2024 16:09:51 +0000 Subject: [PATCH 2/4] hsomepage quase feita --- assets/icons/check.svg | 3 + assets/icons/question.svg | 9 +++ assets/{ => icons}/trophygold.svg | 0 assets/sintome.png | Bin 0 -> 1458 bytes src/App.js | 61 ++++++++------- src/pages/HomePage.js | 126 +++++++++++++++--------------- 6 files changed, 107 insertions(+), 92 deletions(-) create mode 100644 assets/icons/check.svg create mode 100644 assets/icons/question.svg rename assets/{ => icons}/trophygold.svg (100%) create mode 100644 assets/sintome.png diff --git a/assets/icons/check.svg b/assets/icons/check.svg new file mode 100644 index 0000000..7aa9766 --- /dev/null +++ b/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/question.svg b/assets/icons/question.svg new file mode 100644 index 0000000..5fb4a5f --- /dev/null +++ b/assets/icons/question.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/trophygold.svg b/assets/icons/trophygold.svg similarity index 100% rename from assets/trophygold.svg rename to assets/icons/trophygold.svg diff --git a/assets/sintome.png b/assets/sintome.png new file mode 100644 index 0000000000000000000000000000000000000000..8cb43d31e2dd1420b72ed839b6c3595c76f2b320 GIT binary patch literal 1458 zcmV;j1x@;iP)000pP1^@s6m0MAJ00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP$)**}r0K{7sA`@`-&&_4^d7hHvK;{X5OZiHxC)ZQ-HGs&h zY2K2@{uIxXKdxvgkyy|6M+j9=D)b(0Df8!hiWexLohXcKf77-gbAHS*<{D;rR$bup zi@ENicTtL>_O@`=;D?=4Oi(|>^AeB|6?#^E)Aq~Ew-a>|prhLtK{_}{zeJ8nBUhvoh_%e&mtf9Bz#53^=d3;WI(WiH9x@O*<)5`=DWR>ImGRez}Fr=Rt@EqKlv4AhCN?~vHPS|sJR6;;5 zNJxuFwL(eZ<4tt4M@ocF1uEOpz_1y5aT-OoOzq8st_yB#@F67BG zOU~3WZ;o)F!_LRYQylaF#CC2xe1cRcQ%UuP>XK;J=vPi`Hg}ZWJsMJYz=cg(yK4d> zE@HzqxEB;2Vlm#z&+<-*gl-0;j@IHp6sbPeZxdHQhkv=1&iudk42gSql5<#)03n^| z(NFN_Ks~MSeEW6NA^THOu@L3vff;gx)%ItEmO%^nd9!>7c2%WG$>auCCWfR5pC*pY z8-HyyujnUI$#kjFbv9-2JibpBZ}@PCUTKW10*5w&c}K%N-~dq`MU_Ji^gCSruX2U( zIZ11OIlc8{%wh4Y3$VL-D(5i_oX+~h@lvP`1LX^*jY2YN<|p>^>Oaw83pWkSNaLb6 zI_@eKLF62tvGZeR$L-x^BW$(a{@|8i{*$HC6dBo^98uU&TYY9@TOx*w|mjEF5$}M)5(Pf9Y5My7C_i~r^;WQ8Q^CiJ~uS%#|R?} zJG(kB#f}Tc40myz3FZPh^vo5@+aa)A2RP6@e__ff!0yAVp%3>30e!e{^of-M`ou~B zHc%oHcKkFkrBOmd_`B{mxP8BYeLs$XF3f-j84|DA0OhxQ6|ko?kc`E!X3Z(EDs$wt z<@~SK33fUQ4>D|a!juPnSv`?2f>dKRHp8x;= M07*qoM6N<$f-d>2sQ>@~ literal 0 HcmV?d00001 diff --git a/src/App.js b/src/App.js index 6b31ef9..902a8e7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import React from "react"; -import { Text, View } from "react-native"; +import { Text, View, StatusBar } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; @@ -30,7 +30,7 @@ export default function App() { if (!fontsLoaded) { return ( - + Carregando fontes... ); @@ -46,14 +46,14 @@ export default function App() { screenOptions={({ route }) => ({ headerShown: false, tabBarShowLabel: false, - // tabBarStyle: { - // paddingBottom: 15, // Espaçamento inferior dentro da barra - // paddingTop: 10, // Espaçamento superior dentro da barra - // backgroundColor: "#fff", // Cor de fundo da barra - // }, + tabBarStyle: { + paddingTop: 5, // Espaçamento superior dentro da barra + paddingBottom: 5, // Espaçamento inferior dentro da barra + backgroundColor: "#fff", // Cor de fundo da barra + }, tabBarIcon: ({ focused, size }) => { let IconComponent; - let color = focused ? "#fcc766" : "#d0d0d0"; // Define as cores: ativo e inativo + let color = focused ? "#fcc766" : "#d0d0d0"; switch (route.name) { case "Home": @@ -92,26 +92,29 @@ export default function App() { // Stack Navigator (para gerenciar Welcome e HomeTabs) return ( - - - {/* Tela de boas-vindas sem navbar */} - - - {/* Tela HomeTabs com navbar */} - - - + <> + + + + {/* Tela de boas-vindas sem navbar */} + + + {/* Tela HomeTabs com navbar */} + + + + ); } diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 25e520f..e8ed258 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,86 +1,86 @@ import React from "react"; import { Text, View, Image, TouchableOpacity } from "react-native"; import { LinearGradient } from "expo-linear-gradient"; -import { SvgUri } from "react-native-svg"; + +// Importar os ícones SVG diretamente +import TrophyGoldIcon from "../../assets/icons/trophygold.svg"; +import QuestionIcon from "../../assets/icons/question.svg"; +import CheckIcon from "../../assets/icons/check.svg"; export default function HomePage() { return ( - - {/* Ícone PNG */} - + - {/* Texto de boas-vindas */} - - Olá, Rodrigo! - + + {/* Secção de Ícones e Pontos */} + + {/* Ícone de "?" */} + + 14 + + - {/* Botão de Monitorização */} - - Começar Monitorização - + {/* Ícone de troféu */} + + 2 + + + - {/* Secção de Tarefas Diárias */} - - - Tarefas Diárias - - {/* Primeira tarefa */} - - - Estar apenas 2 horas no Insta hoje - - + {/* Ícone PNG */} + - - {/* Segunda tarefa */} - - - Falar com os amigos + {/* Texto de boas-vindas */} + + Olá, Rodrigo! - - - - {/* Secção de Ícones e Pontos */} - - {/* Ícone de "?" */} - - - 14 - + {/* Botão de Monitorização */} + + Começar Monitorização + + + {/* Secção de Tarefas Diárias */} + + {/* Cabeçalho da seção */} + + Tarefas Diárias + 7 HORAS + + + {/* Primeira tarefa */} + + + Estar apenas 2 horas no Insta hoje + + + + + + {/* Segunda tarefa */} + + + Falar com os amigos + + + + + - {/* Ícone de troféu */} - - - 2 + ); From e61bf2f253717d271edcdaf8d1658070369a063e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Gra=C3=A7a?= Date: Sat, 28 Dec 2024 16:38:02 +0000 Subject: [PATCH 3/4] help contactos feitos --- assets/icons/helpcontacts.svg | 4 + src/pages/HomePage.js | 133 ++++++++++++++++++++-------------- 2 files changed, 82 insertions(+), 55 deletions(-) create mode 100644 assets/icons/helpcontacts.svg diff --git a/assets/icons/helpcontacts.svg b/assets/icons/helpcontacts.svg new file mode 100644 index 0000000..acfa9f6 --- /dev/null +++ b/assets/icons/helpcontacts.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index e8ed258..30465b3 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,11 +1,12 @@ import React from "react"; -import { Text, View, Image, TouchableOpacity } from "react-native"; +import { Text, View, Image, TouchableOpacity, ScrollView } from "react-native"; import { LinearGradient } from "expo-linear-gradient"; // Importar os ícones SVG diretamente import TrophyGoldIcon from "../../assets/icons/trophygold.svg"; import QuestionIcon from "../../assets/icons/question.svg"; import CheckIcon from "../../assets/icons/check.svg"; +import HelpContactsIcon from "../../assets/icons/helpcontacts.svg"; export default function HomePage() { return ( @@ -14,74 +15,96 @@ export default function HomePage() { locations={[0, 0.5, 1]} style={{ flex: 1 }} > - + + - - {/* Secção de Ícones e Pontos */} - - {/* Ícone de "?" */} - - 14 - - + + {/* Secção de Ícones e Pontos */} + + {/* Ícone de "?" */} + + 14 + + - {/* Ícone de troféu */} - - 2 - + {/* Ícone de troféu */} + + 2 + + - - - {/* Ícone PNG */} - + + {/* Ícone PNG */} + - {/* Texto de boas-vindas */} - - Olá, Rodrigo! - + {/* Texto de boas-vindas */} + + Olá, Rodrigo! + - {/* Botão de Monitorização */} - - Começar Monitorização - + {/* Botão de Monitorização */} + + Começar Monitorização + - {/* Secção de Tarefas Diárias */} - - {/* Cabeçalho da seção */} - - Tarefas Diárias - 7 HORAS - + {/* Secção de Tarefas Diárias */} + + {/* Cabeçalho da seção */} + + Tarefas Diárias + 7 HORAS + - {/* Primeira tarefa */} - - - Estar apenas 2 horas no Insta hoje - - - - + {/* Primeira tarefa */} + + + Estar apenas 2 horas no Insta hoje + + + + - {/* Segunda tarefa */} - - - Falar com os amigos - - - + {/* Segunda tarefa */} + + + Falar com os amigos + + + + - + {/* Literacia */} + + Sabias que + Ter uma adição pode prejudicar seriamente o nosso trabalho e as nossas relações. + + Aprender mais em + + + + + {/* Informação de contactos */} + + + Existem 96 profissionais de saúde à tua disposição. Não hesites em contacta-los. + + + - - + + ); } From 4eabe4257d1e0cc05da0740feb2b0214432bc30d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Gra=C3=A7a?= Date: Tue, 31 Dec 2024 12:29:35 +0000 Subject: [PATCH 4/4] homepage done wioth component --- assets/icons/check.svg | 2 +- src/components/Task.js | 17 +++++++++++ src/pages/HomePage.js | 22 +++----------- src/pages/TrophiesPage.js | 64 ++++++++++++++++++++++++++++++++++++--- 4 files changed, 82 insertions(+), 23 deletions(-) create mode 100644 src/components/Task.js diff --git a/assets/icons/check.svg b/assets/icons/check.svg index 7aa9766..9fd33d4 100644 --- a/assets/icons/check.svg +++ b/assets/icons/check.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/Task.js b/src/components/Task.js new file mode 100644 index 0000000..bcdb4d7 --- /dev/null +++ b/src/components/Task.js @@ -0,0 +1,17 @@ +import React from "react"; +import { Text, View } from "react-native"; +import CheckIcon from "../../assets/icons/check.svg"; + +const Task = ({ taskText, isCompleted }) => ( + + {taskText} + + + +); + +export default Task; \ No newline at end of file diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 30465b3..b1808d5 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,11 +1,11 @@ import React from "react"; import { Text, View, Image, TouchableOpacity, ScrollView } from "react-native"; import { LinearGradient } from "expo-linear-gradient"; +import Task from "../components/Task"; // Importar os ícones SVG diretamente import TrophyGoldIcon from "../../assets/icons/trophygold.svg"; import QuestionIcon from "../../assets/icons/question.svg"; -import CheckIcon from "../../assets/icons/check.svg"; import HelpContactsIcon from "../../assets/icons/helpcontacts.svg"; export default function HomePage() { @@ -61,23 +61,9 @@ export default function HomePage() { 7 HORAS - {/* Primeira tarefa */} - - - Estar apenas 2 horas no Insta hoje - - - - - - {/* Segunda tarefa */} - - - Falar com os amigos - - - - + {/* Tarefas */} + + {/* Literacia */} diff --git a/src/pages/TrophiesPage.js b/src/pages/TrophiesPage.js index fd10d9b..05a558b 100644 --- a/src/pages/TrophiesPage.js +++ b/src/pages/TrophiesPage.js @@ -1,10 +1,66 @@ import React from "react"; -import { Text, View } from "react-native"; +import { Text, View, Image, TouchableOpacity, ScrollView } from "react-native"; +import { LinearGradient } from "expo-linear-gradient"; +import Task from "../components/Task"; +// Importar os ícones SVG diretamente +import TrophyGoldIcon from "../../assets/icons/trophygold.svg"; +import QuestionIcon from "../../assets/icons/question.svg"; +import HelpContactsIcon from "../../assets/icons/helpcontacts.svg"; export default function TrophiesPage() { return ( - - Troféus - + + + + + + + {/* Secção de Tarefas Diárias */} + + {/* Cabeçalho */} + + Tarefas Diárias + + + {/* Tarefas */} + + + + {/* Ver todas */} + + VER TODAS + + + + {/* Literacia */} + + Sabias que + Ter uma adição pode prejudicar seriamente o nosso trabalho e as nossas relações. + + Aprender mais em + + + + + {/* Informação de contactos */} + + + Existem 96 profissionais de saúde à tua disposição. Não hesites em contacta-los. + + + + + + + + ); }