new theme + image + styles etc

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 = [

web/config/chakra.config.js

-// 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

web/src/App.tsx

 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)
 

web/src/design/theme.ts

+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',
+    },
+  },
+})

web/src/features/topbar/topbar.tsx

-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 />

web/src/pages/home/home.tsx

-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>
   )
 }