From 55762e7a149943213416ec598d1faa192a8becb6 Mon Sep 17 00:00:00 2001
From: lharti <7027812+lharti@users.noreply.github.com>
Date: Tue, 12 Nov 2024 16:51:15 +0100
Subject: [PATCH] feat(web/doc): add fade-in animation (#107)

* feat(web/doc): add fade-in animation

* chore(release): bump versions

 - jsonthing-web@0.5.0
---
 apps/jsonthing-web/CHANGELOG.md                       | 11 +++++++++++
 apps/jsonthing-web/package.json                       |  2 +-
 .../src/components/DocEditor/DocEditor.tsx            |  2 +-
 .../src/components/pages/DocPage/DocPage.tsx          |  2 +-
 apps/jsonthing-web/tailwind.config.ts                 |  5 +++--
 5 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/jsonthing-web/CHANGELOG.md b/apps/jsonthing-web/CHANGELOG.md
index d0da847..815f351 100644
--- a/apps/jsonthing-web/CHANGELOG.md
+++ b/apps/jsonthing-web/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.5.0](https://github.com/lharti/jsonthing/compare/jsonthing-web@0.4.1...jsonthing-web@0.5.0) (2024-11-12)
+
+
+### Features
+
+* **web/doc:** add fade-in animation ([fb931a5](https://github.com/lharti/jsonthing/commit/fb931a5092ff3fe9cb25cd039dc0112faddb8d23))
+
+
+
+
+
 ## [0.4.1](https://github.com/lharti/jsonthing/compare/jsonthing-web@0.4.0...jsonthing-web@0.4.1) (2024-11-12)
 
 **Note:** Version bump only for package jsonthing-web
diff --git a/apps/jsonthing-web/package.json b/apps/jsonthing-web/package.json
index b55aa8a..da5cf26 100644
--- a/apps/jsonthing-web/package.json
+++ b/apps/jsonthing-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "jsonthing-web",
-    "version": "0.4.1",
+    "version": "0.5.0",
     "private": true,
     "scripts": {
         "dev": "next dev --turbo",
diff --git a/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx b/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx
index 14c357c..2c4e1ab 100644
--- a/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx
+++ b/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx
@@ -45,7 +45,7 @@ export const DocEditor: React.FC<DocEditorProps> = ({
         <div className={cn(`flex flex-col`, className)}>
             <div className="mb-2 flex items-end justify-between">
                 {lintError ? (
-                    <Alert variant="destructive" className="animate-fadeIn">
+                    <Alert variant="destructive" className="animate-fade-in">
                         {lintError}
                     </Alert>
                 ) : (
diff --git a/apps/jsonthing-web/src/components/pages/DocPage/DocPage.tsx b/apps/jsonthing-web/src/components/pages/DocPage/DocPage.tsx
index 048978b..6122450 100644
--- a/apps/jsonthing-web/src/components/pages/DocPage/DocPage.tsx
+++ b/apps/jsonthing-web/src/components/pages/DocPage/DocPage.tsx
@@ -17,7 +17,7 @@ export const DocPage: React.FC<DocPageProps> = ({ id }) => {
     return (
         <article
             className={`
-              mx-auto max-w-screen-md px-4
+              mx-auto max-w-screen-md animate-fade-in-quick px-4
 
               md:px-2
             `}
diff --git a/apps/jsonthing-web/tailwind.config.ts b/apps/jsonthing-web/tailwind.config.ts
index d8c8add..d83aede 100644
--- a/apps/jsonthing-web/tailwind.config.ts
+++ b/apps/jsonthing-web/tailwind.config.ts
@@ -24,14 +24,15 @@ const config: Config = {
             },
 
             keyframes: {
-                fadeIn: {
+                'fade-in': {
                     '0%': { opacity: '0' },
                     '100%': { opacity: '1' },
                 },
             },
 
             animation: {
-                fadeIn: 'fadeIn 1s ease-in-out',
+                'fade-in': 'fade-in 0.5s ease-in-out',
+                'fade-in-quick': 'fade-in 0.1s ease-in-out',
             },
         },
     },