From 1a9a155a7278351afed177d34e129c7cdf7ff2ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= Date: Tue, 29 Oct 2024 15:11:22 +0100 Subject: [PATCH 1/5] fix(dialog): Improve responsive styles --- frontend/src/components/ui/dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx index acec9b10..63aaaa8e 100644 --- a/frontend/src/components/ui/dialog.tsx +++ b/frontend/src/components/ui/dialog.tsx @@ -40,7 +40,7 @@ const DialogContent = React.forwardRef< Date: Wed, 30 Oct 2024 09:14:05 +0100 Subject: [PATCH 2/5] build(deps): Add @artsy/fresnel library --- frontend/package.json | 7 +- frontend/src/lib/tailwind-config.ts | 5 + frontend/src/media.tsx | 21 + frontend/src/pages/_document.tsx | 9 +- ...{tailwind.config.js => tailwind.config.ts} | 21 +- frontend/yarn.lock | 504 ++++++++++++++---- 6 files changed, 442 insertions(+), 125 deletions(-) create mode 100644 frontend/src/lib/tailwind-config.ts create mode 100644 frontend/src/media.tsx rename frontend/{tailwind.config.js => tailwind.config.ts} (84%) diff --git a/frontend/package.json b/frontend/package.json index 45116edb..adc49371 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ }, "packageManager": "yarn@3.5.0", "dependencies": { + "@artsy/fresnel": "7.1.4", "@deck.gl/json": "8.9.31", "@deck.gl/layers": "8.9.31", "@deck.gl/mapbox": "8.9.31", @@ -74,8 +75,8 @@ "react-map-gl": "7.1.6", "recharts": "^2.9.0", "rooks": "7.14.1", - "tailwind-merge": "^1.14.0", - "tailwindcss": "3.2.7", + "tailwind-merge": "2.5.4", + "tailwindcss": "3.4.14", "tailwindcss-animate": "1.0.7", "zod": "3.22.4" }, @@ -95,7 +96,7 @@ "eslint-plugin-prettier": "4.2.1", "husky": "6.0.0", "prettier": "2.8.3", - "prettier-plugin-tailwindcss": "0.2.1", + "prettier-plugin-tailwindcss": "0.6.8", "start-server-and-test": "1.12.1", "svg-sprite-loader": "6.0.11", "svgo": "3.0.2", diff --git a/frontend/src/lib/tailwind-config.ts b/frontend/src/lib/tailwind-config.ts new file mode 100644 index 00000000..471b05d8 --- /dev/null +++ b/frontend/src/lib/tailwind-config.ts @@ -0,0 +1,5 @@ +import resolveConfig from "tailwindcss/resolveConfig"; + +import tailwindConfig from "../../tailwind.config"; + +export default resolveConfig(tailwindConfig); diff --git a/frontend/src/media.tsx b/frontend/src/media.tsx new file mode 100644 index 00000000..f22760bb --- /dev/null +++ b/frontend/src/media.tsx @@ -0,0 +1,21 @@ +import { createMedia } from "@artsy/fresnel" +import tailwindConfig from '@/lib/tailwind-config'; + +const breakpoints = Object.entries(tailwindConfig.theme.screens).reduce( + (res, [key, value]) => ({ + ...res, + [key as keyof typeof tailwindConfig.theme.screens]: Number.parseInt((value as string).replace("px", "")), + }), + { + zero: 0, + } as Record, +); + +const AppMedia = createMedia({ + breakpoints, +}) + +// Make styles for injection into the header of the page +export const mediaStyles = AppMedia.createMediaStyle() + +export const { Media, MediaContextProvider } = AppMedia diff --git a/frontend/src/pages/_document.tsx b/frontend/src/pages/_document.tsx index 9af7aa32..0b5ce54e 100644 --- a/frontend/src/pages/_document.tsx +++ b/frontend/src/pages/_document.tsx @@ -1,4 +1,5 @@ import Document, { Html, Main, NextScript, Head } from 'next/document'; +import { mediaStyles } from '@/media'; export default class MyDocument extends Document { render() { @@ -19,10 +20,14 @@ export default class MyDocument extends Document { +