improve the active state of the changelog button

medyo · Nov 12, 2022 · 0ed63e1 · 0ed63e1
1 parent fa0f194
commit 0ed63e1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/assets/App.css b/src/assets/App.css
@@ -723,7 +723,11 @@ Producthunt item
   text-transform: lowercase;
   background-color: var(--tooltip-accent-color);
 }
-
+.changelogNewButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .searchBar {
   position: relative;
   margin: 0 auto;

diff --git a/src/features/changelog/components/Changelog.tsx b/src/features/changelog/components/Changelog.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState }  from 'react'
 import ReactTooltip from 'react-tooltip'
-import { HiBell } from 'react-icons/hi'
+import { HiBell, HiSparkles } from 'react-icons/hi'
 import ReactMarkdown from 'react-markdown'
 import { format } from 'timeago.js'
 import BeatLoader from 'react-spinners/BeatLoader'
-import {useGetVersions} from "../api/getVersions";
-import {useChangelogStore} from "../stores/changelog";
-import {getAppVersion} from "src/utils/Os";
+import { useGetVersions } from '../api/getVersions'
+import { useChangelogStore } from '../stores/changelog'
+import { getAppVersion } from 'src/utils/Os'
 import { trackChangeLogOpen } from 'src/lib/analytics'
 
 export const Changelog = () => {
@@ -82,7 +82,13 @@ export const Changelog = () => {
         data-tip
         data-for={tooltipId}
         className={'changelogButton' + (!isChangelogRead() ? ' active' : '')}>
-        {isChangelogRead() ? <HiBell style={{ width: 14 }} /> : `New`}
+        {isChangelogRead() ? (
+          <HiBell style={{ width: 14 }} />
+        ) : (
+          <div className="changelogNewButton">
+            <HiSparkles style={{ width: 14 }} /> New
+          </div>
+        )}
       </span>
     </>
   )