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

* feat(web/doc): add fade-in animation * chore(release): bump versions - [email protected]
lharti · Nov 12, 2024 · 55762e7 · 55762e7
1 parent b20a577
commit 55762e7
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git 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/[email protected]@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/[email protected]@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
@@ -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
@@ -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
@@ -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
@@ -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',
             },
         },
     },