From 1e0dcde9ff977d1c281e044a5cc27ecd09564dc6 Mon Sep 17 00:00:00 2001
From: brunoravera <bruno@process.st>
Date: Sat, 9 Mar 2024 14:11:04 -0300
Subject: [PATCH] table styles
---
web/package.json | 1 +
web/src/design/table-theme.ts | 19 +++++++++++++++++++
web/src/design/theme.ts | 2 ++
web/src/features/topbar/topbar.tsx | 18 +++++++-----------
.../Patterns/details/pattern-details.tsx | 8 ++++----
web/src/pages/Patterns/patterns.tsx | 16 ++++++++--------
.../pages/implementations/implementations.tsx | 2 +-
yarn.lock | 3 ++-
8 files changed, 44 insertions(+), 25 deletions(-)
create mode 100644 web/src/design/table-theme.ts
diff --git a/web/package.json b/web/package.json
index e4c9759..592925f 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,7 @@
]
},
"dependencies": {
+ "@chakra-ui/anatomy": "^2.2.2",
"@chakra-ui/react": "^2",
"@emotion/react": "^11",
"@emotion/styled": "^11",
diff --git a/web/src/design/table-theme.ts b/web/src/design/table-theme.ts
new file mode 100644
index 0000000..6e186bc
--- /dev/null
+++ b/web/src/design/table-theme.ts
@@ -0,0 +1,19 @@
+import { tableAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } =
+ createMultiStyleConfigHelpers(tableAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+ td: {
+ fontFamily: 'mono',
+ color: 'teal.600',
+ padding: '4px 8px !important',
+ },
+ th: {
+ color: 'teal.700',
+ padding: '4px 8px !important',
+ },
+})
+
+export const tableTheme = defineMultiStyleConfig({ baseStyle })
diff --git a/web/src/design/theme.ts b/web/src/design/theme.ts
index 5fe363f..eb4a98d 100644
--- a/web/src/design/theme.ts
+++ b/web/src/design/theme.ts
@@ -1,4 +1,5 @@
import { ThemeConfig, extendTheme } from '@chakra-ui/react'
+import { tableTheme } from './table-theme'
const config: ThemeConfig = {
initialColorMode: 'light',
@@ -13,6 +14,7 @@ export const theme = extendTheme({
currentColor: 'currentColor',
current: 'currentColor',
},
+ components: { Table: tableTheme },
radii: {
none: '0',
xs: '2px',
diff --git a/web/src/features/topbar/topbar.tsx b/web/src/features/topbar/topbar.tsx
index baeb81e..bc5bf15 100644
--- a/web/src/features/topbar/topbar.tsx
+++ b/web/src/features/topbar/topbar.tsx
@@ -1,13 +1,5 @@
-import {
- Badge,
- Box,
- Divider,
- HStack,
- Icon,
- IconButton,
- Text,
-} from '@chakra-ui/react'
-import { Link, back, routes, useLocation } from '@redwoodjs/router'
+import { Badge, Box, Divider, HStack, Icon, IconButton } from '@chakra-ui/react'
+import { Link, back, navigate, routes, useLocation } from '@redwoodjs/router'
import React from 'react'
import { FaArrowLeft } from 'react-icons/fa'
@@ -16,7 +8,11 @@ export const Topbar: React.FC = () => {
const { pathname } = useLocation()
const handleOnBack = () => {
- back()
+ if (pathname === '/') {
+ navigate(routes.home())
+ } else {
+ back()
+ }
}
return (
<>
diff --git a/web/src/pages/Patterns/details/pattern-details.tsx b/web/src/pages/Patterns/details/pattern-details.tsx
index 0073689..2d94b65 100644
--- a/web/src/pages/Patterns/details/pattern-details.tsx
+++ b/web/src/pages/Patterns/details/pattern-details.tsx
@@ -13,18 +13,18 @@ export const PatternDetails: React.FC = () => {
return null
}
return (
- <VStack w="full" px="4" aria-label="hey" alignItems="flex-start">
- <Heading as="h2">{pattern.title}</Heading>
+ <VStack w="full" px="4" alignItems="flex-start">
+ <Text fontWeight="bold">{pattern.title}</Text>
<Text>{pattern.description}</Text>
<VStack w="full" justifyContent="center" spacing="8">
<VStack alignItems="flex-start">
- <Text pl="8" fontWeight="bold">
+ <Text pl="2" fontWeight="bold">
Implementaciones
</Text>
<Implementations patternId={pattern.id} />
</VStack>
<VStack alignItems="flex-start">
- <Text pl="8" fontWeight="bold">
+ <Text pl="2" fontWeight="bold">
Animaciones
</Text>
<Animations patternId={pattern.id} />
diff --git a/web/src/pages/Patterns/patterns.tsx b/web/src/pages/Patterns/patterns.tsx
index 912a725..242963b 100644
--- a/web/src/pages/Patterns/patterns.tsx
+++ b/web/src/pages/Patterns/patterns.tsx
@@ -1,7 +1,6 @@
import React from 'react'
import {
- Heading,
VStack,
TableContainer,
Table,
@@ -20,7 +19,6 @@ import {
} from '@chakra-ui/react'
import { FaEdit, FaEye, FaPlus, FaTrash } from 'react-icons/fa'
import { Link, routes } from '@redwoodjs/router'
-import { patterns } from '.'
import { Pattern } from 'src/models'
import { GetPatternsQuery } from './query-builder'
import { match } from 'ts-pattern'
@@ -31,17 +29,19 @@ export const Patterns: React.FC = () => {
const patternsQuery = GetPatternsQuery.useQuery({})
return (
- <VStack alignItems="flex-start" spacing="0">
- <Heading as="h2" px="6">
+ <VStack alignItems="flex-start" spacing="2">
+ <Text fontWeight="bold" px="1">
Patrones
- </Heading>
+ </Text>
<TableContainer>
- <Table variant="simple" size="lg">
+ <Table variant="striped" size="lg">
<TableCaption>Patrones disponibles</TableCaption>
<Thead>
<Tr>
{tableHeaders.map((header, index) => (
- <Th key={`th-${index}`}>{header}</Th>
+ <Th color="gray.500" key={`th-${index}`}>
+ {header}
+ </Th>
))}
</Tr>
</Thead>
@@ -90,7 +90,7 @@ type ActionsRowProps = {
}
const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
return (
- <HStack>
+ <HStack spacing="0">
{/* Linter yells but is fine https://github.com/redwoodjs/redwood/issues/1742 */}
<Link to={routes.pattern({ id: pattern.id })}>
<IconButton
diff --git a/web/src/pages/implementations/implementations.tsx b/web/src/pages/implementations/implementations.tsx
index c7e2234..fcacba9 100644
--- a/web/src/pages/implementations/implementations.tsx
+++ b/web/src/pages/implementations/implementations.tsx
@@ -39,7 +39,7 @@ export const Implementations: React.FC<ImplementationsProps> = ({
return (
<TableContainer>
- <Table variant="simple" size="lg">
+ <Table variant="striped" size="lg">
<TableCaption>
Implementaciones disponibles de {pattern.title}
</TableCaption>
diff --git a/yarn.lock b/yarn.lock
index a407428..6998661 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1780,7 +1780,7 @@ __metadata:
languageName: node
linkType: hard
-"@chakra-ui/anatomy@npm:2.2.2":
+"@chakra-ui/anatomy@npm:2.2.2, @chakra-ui/anatomy@npm:^2.2.2":
version: 2.2.2
resolution: "@chakra-ui/anatomy@npm:2.2.2"
checksum: 06088161541e63bcc240487c0916d536c4b807e53da8ec4821b6dad737c84683a5936e3e44b99b6a6435a9cf896a3236d5f87226add27378c939804daed77305
@@ -24641,6 +24641,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "web@workspace:web"
dependencies:
+ "@chakra-ui/anatomy": ^2.2.2
"@chakra-ui/react": ^2
"@chakra-ui/storybook-addon": ^5.1.0
"@emotion/react": ^11
--
GitLab