diff --git a/redwood.toml b/redwood.toml
index 147631de61591b45305cfa69db45ca5e69ceaa20..f17d59be0661d554d9e021f4fa717f0a9a6715a6 100644
--- a/redwood.toml
+++ b/redwood.toml
@@ -6,7 +6,7 @@
# https://redwoodjs.com/docs/app-configuration-redwood-toml
[web]
- title = "Redwood App"
+ title = "PG - Microservices Testing"
port = 8910
apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
includeEnvironmentVariables = [
diff --git a/web/config/chakra.config.js b/web/config/chakra.config.js
deleted file mode 100644
index 7477c5be44614dbe5ebf193aaaa1746dfd24ff67..0000000000000000000000000000000000000000
--- a/web/config/chakra.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// This object will be used to override Chakra-UI theme defaults.
-// See https://chakra-ui.com/docs/styled-system/theming/theme for theming options
-const theme = {}
-export default theme
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 170f0c31da1630895d5696100dfb633b4ae3147f..9f9da22c978a5e8445745a3a2cb9f92af3774a7a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,11 +1,11 @@
import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'
-import * as theme from 'config/chakra.config'
import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { DevFatalError } from './pages/fatal-error'
import Routes from './Routes'
import { QueryClient, QueryClientProvider } from 'react-query'
+import { theme } from './design/theme'
const extendedTheme = extendTheme(theme)
diff --git a/web/src/design/theme.ts b/web/src/design/theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5fe363fb30077f637046055b88aa960236f23681
--- /dev/null
+++ b/web/src/design/theme.ts
@@ -0,0 +1,122 @@
+import { ThemeConfig, extendTheme } from '@chakra-ui/react'
+
+const config: ThemeConfig = {
+ initialColorMode: 'light',
+ useSystemColorMode: false,
+ cssVarPrefix: 'pg',
+}
+
+export const theme = extendTheme({
+ config,
+ colors: {
+ transparent: 'transparent',
+ currentColor: 'currentColor',
+ current: 'currentColor',
+ },
+ radii: {
+ none: '0',
+ xs: '2px',
+ sm: '0.2rem',
+ base: '0.4rem',
+ md: '0.6rem',
+ lg: '0.8rem',
+ xl: '1.2rem',
+ '2xl': '1.6rem',
+ '3xl': '2.4rem',
+ full: '9999px',
+ },
+ fonts: {
+ body: `Inter,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue", system-ui, sans-serif`,
+ heading: `Inter,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue", system-ui, sans-serif`,
+ mono: `Menlo, Monaco, Consolas, 'Courier New', monospace`,
+ },
+ fontSizes: {
+ '4': '16px',
+ '5': '20px',
+ '6': '24px',
+ '7': '28px',
+ '8': '32px',
+ '9': '36px',
+ '10': '48px',
+ xs: '12px',
+ sm: '14px',
+ md: '16px',
+ lg: '20px',
+ xl: '28px',
+ '2xl': '36px',
+ '3xl': '48px',
+ },
+ fontWeights: {
+ light: 300,
+ normal: 400,
+ medium: 500,
+ bold: 700,
+ },
+ lineHeights: {
+ normal: 'normal',
+ none: '1',
+ shorter: '1.25',
+ short: '1.375',
+ base: '1.5',
+ tall: '1.625',
+ taller: '2',
+ },
+ letterSpacings: {
+ tighter: '-0.05em',
+ tight: '-0.025em',
+ normal: '0',
+ wide: '0.025em',
+ wider: '0.0625em',
+ widest: '0.1em',
+ },
+ textStyles: {
+ '-2': {
+ fontSize: 'xs',
+ lineHeight: 'short',
+ },
+ '-2u': {
+ letterSpacing: 'wider',
+ fontSize: 'xs',
+ fontWeight: 'bold',
+ lineHeight: 'short',
+ textTransform: 'uppercase',
+ },
+ '-1': {
+ fontSize: 'sm',
+ lineHeight: 'short',
+ },
+ '-1u': {
+ letterSpacing: 'wider',
+ fontSize: 'sm',
+ lineHeight: 'short',
+ fontWeight: 'bold',
+ textTransform: 'uppercase',
+ },
+ '1': {
+ fontSize: 'md',
+ lineHeight: 'base',
+ },
+ '2': {
+ fontSize: 'lg',
+ lineHeight: 'shorter',
+ },
+ '3': {
+ fontSize: 'xl',
+ lineHeight: '1.142857143',
+ },
+ '4': {
+ fontSize: '2xl',
+ lineHeight: 'short',
+ },
+ '5': {
+ fontSize: '3xl',
+ lineHeight: 'tall',
+ },
+ inherit: {
+ fontSize: 'inherit',
+ lineHeight: 'inherit',
+ color: 'inherit',
+ bgColor: 'inherit',
+ },
+ },
+})
diff --git a/web/src/features/topbar/topbar.tsx b/web/src/features/topbar/topbar.tsx
index 74921709c775d8e2e2d8931363151e453ee5c75c..baeb81e5db05430adc8b52e6f1ba839b0821d6a4 100644
--- a/web/src/features/topbar/topbar.tsx
+++ b/web/src/features/topbar/topbar.tsx
@@ -1,8 +1,17 @@
-import { Box, Divider, HStack, Icon, IconButton, Text } from '@chakra-ui/react'
+import {
+ Badge,
+ Box,
+ Divider,
+ HStack,
+ Icon,
+ IconButton,
+ Text,
+} from '@chakra-ui/react'
import { Link, back, routes, useLocation } from '@redwoodjs/router'
import React from 'react'
import { FaArrowLeft } from 'react-icons/fa'
+export const TOPBAR_HEIGHT_PX = '40px'
export const Topbar: React.FC = () => {
const { pathname } = useLocation()
@@ -11,20 +20,31 @@ export const Topbar: React.FC = () => {
}
return (
<>
- <HStack h="10" w="full" justifyContent="space-between" pr="4">
+ <HStack
+ h={TOPBAR_HEIGHT_PX}
+ w="full"
+ justifyContent="space-between"
+ pr="4"
+ bgColor="blue.200"
+ position="sticky"
+ top="0"
+ spacing="0"
+ >
{pathname !== '/' ? (
<IconButton
aria-label="back"
variant="unstyled"
onClick={handleOnBack}
- icon={<Icon as={FaArrowLeft} />}
+ icon={<Icon as={FaArrowLeft} color="gray.600" />}
/>
) : (
<Box />
)}
<Link to={routes.patterns()}>
- <Text textAlign="right">Patrones</Text>
+ <Badge textAlign="right" color="gray.600">
+ Patrones
+ </Badge>
</Link>
</HStack>
<Divider />
diff --git a/web/src/pages/home/home-background.webp b/web/src/pages/home/home-background.webp
new file mode 100644
index 0000000000000000000000000000000000000000..522f10fe475fc1d42b985cb455d2e4305880ad9e
Binary files /dev/null and b/web/src/pages/home/home-background.webp differ
diff --git a/web/src/pages/home/home.tsx b/web/src/pages/home/home.tsx
index b50bc5a64791e02aa0d9176a3d8e2f4956d9922a..a1dc3a56e99f38111146a3ea02306477109de635 100644
--- a/web/src/pages/home/home.tsx
+++ b/web/src/pages/home/home.tsx
@@ -1,17 +1,31 @@
-import React from 'react'
+import * as React from 'react'
+import image from './home-background.webp'
-import { Box, Heading, Text } from '@chakra-ui/react'
+import { Image, Text, VStack } from '@chakra-ui/react'
-export const Home = () => {
+export const Home: React.FC = () => {
return (
- <Box>
- <Heading as="h1" size="xl" mb="6">
- Testing de Microservicios
- </Heading>
- <Text fontSize="lg" mb="4">
+ <VStack alignItems="flex-start" maxW="720px">
+ <Text fontWeight="bold">Testing de Microservicios</Text>
+ <Text>
En este lugar se describe lo que hace la aplicacion, el objetivo del
- proyect, etc...
+ proyect, etc... Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.
</Text>
- </Box>
+ <Image src={image} maxH="720px" />
+ <VStack
+ w="full"
+ alignItems="flex-end"
+ fontStyle="italic"
+ fontSize="sm"
+ spacing="0"
+ >
+ <Text>Gaton Comba</Text>
+ <Text>Bruno Ravera</Text>
+ <Text>2024 - FING</Text>
+ </VStack>
+ </VStack>
)
}