update footer links

riccardoperra · Dec 11, 2023 · 4162940 · 4162940
1 parent 6eb4561
commit 4162940
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 41 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ dist
 ./**/*.env.*
 .idea
 .pnpm-store/
+.DS_STORE
diff --git a/apps/codeimage/changelog/1-3-0_03-02-2023.mdx b/apps/codeimage/changelog/1-3-0_03-02-2023.mdx
diff --git a/apps/codeimage/src/components/Footer/Footer.css.ts b/apps/codeimage/src/components/Footer/Footer.css.ts
@@ -9,3 +9,15 @@ export const wrapper = style({
   color: themeVars.dynamicColors.descriptionTextColor,
   width: 'auto',
 });
+
+export const link = style({
+  userSelect: 'none',
+  ':hover': {
+    textDecoration: 'underline',
+  },
+  selectors: {
+    '&:not([href])': {
+      cursor: 'default',
+    },
+  },
+});
diff --git a/apps/codeimage/src/components/Footer/Footer.tsx b/apps/codeimage/src/components/Footer/Footer.tsx
@@ -1,22 +1,31 @@
 import {Box, Link} from '@codeimage/ui';
 import {appEnvironment} from '@core/configuration';
+import {createControlledDialog} from '@core/hooks/createControlledDialog';
+import {Changelog} from '../Changelog/Changelog';
+import {link} from './Footer.css';
 import * as styles from './Footer.css';
 
 export const Footer = () => {
   const {version} = appEnvironment;
+  const openDialog = createControlledDialog();
 
   return (
     <div class={styles.wrapper}>
       <Box display={'inlineFlex'} justifyContent={'flexEnd'} padding={1}>
         <Box marginRight={5}>
-          <Link href={'https://github.com/riccardoperra/codeimage'} size="xs">
+          <Link
+            class={link}
+            href={'https://github.com/riccardoperra/codeimage'}
+            size="xs"
+          >
             GitHub
           </Link>
         </Box>
 
         <Box marginRight={5}>
           <Link
             as={'a'}
+            class={link}
             href={'https://github.com/riccardoperra/codeimage/issues'}
             size="xs"
           >
@@ -26,21 +35,26 @@ export const Footer = () => {
 
         <Box marginRight={5}>
           <Link
+            class={link}
             as={'a'}
             href={'https://github.com/riccardoperra/codeimage/releases'}
             size="xs"
           >
-            Changelog
+            Releases
           </Link>
         </Box>
 
         <Box>
           <Link
+            class={link}
             as={'a'}
-            href={'https://github.com/riccardoperra/codeimage'}
             size="xs"
+            onClick={() => openDialog(Changelog, {latest: false})}
           >
-            Version {version}
+            🎉
+            <Box as={'span'} marginLeft={1}>
+              What's new
+            </Box>
           </Link>
         </Box>
       </Box>