From bff4b8252acc874aaf57ced3b4ab92d33307b2f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arijus=20=C5=A0ukys?= <arijus@questdb.io>
Date: Thu, 5 Oct 2023 15:32:14 +0300
Subject: [PATCH] web console news ui tweak (#202)

* refactor swing animation and extract to a component

* use `transparent` skin on help button

* reduce background color intensity on search box
---
 .../src/scenes/Editor/Menu/index.tsx          |  2 +-
 packages/web-console/src/scenes/News/bell.tsx | 28 +++++++++++++++
 .../web-console/src/scenes/News/index.tsx     | 35 ++-----------------
 .../web-console/src/theme/global-styles.ts    |  3 +-
 4 files changed, 33 insertions(+), 35 deletions(-)
 create mode 100644 packages/web-console/src/scenes/News/bell.tsx

diff --git a/packages/web-console/src/scenes/Editor/Menu/index.tsx b/packages/web-console/src/scenes/Editor/Menu/index.tsx
index ad1826606..5fcb2c77a 100644
--- a/packages/web-console/src/scenes/Editor/Menu/index.tsx
+++ b/packages/web-console/src/scenes/Editor/Menu/index.tsx
@@ -252,7 +252,7 @@ const Menu = () => {
         />
         <DropdownMenu.Root modal={false}>
           <DropdownMenu.Trigger asChild>
-            <Button skin="secondary" prefixIcon={<Question size="18px" />}>
+            <Button skin="transparent" prefixIcon={<Question size="18px" />}>
               Help
             </Button>
           </DropdownMenu.Trigger>
diff --git a/packages/web-console/src/scenes/News/bell.tsx b/packages/web-console/src/scenes/News/bell.tsx
new file mode 100644
index 000000000..fe0806f8e
--- /dev/null
+++ b/packages/web-console/src/scenes/News/bell.tsx
@@ -0,0 +1,28 @@
+import styled, { css, keyframes } from "styled-components"
+import { Notification2 } from "styled-icons/remix-line"
+
+const angle = "10deg"
+const swingFrames = keyframes`
+  0%, 50%, 100% {
+    transform: rotate(0);
+  }
+
+  10%, 20%, 30% {
+    transform: rotate(-${angle});
+  }
+
+  15%, 25%, 40% {
+    transform: rotate(${angle});
+  }
+`
+
+const swing = css`
+  animation: ${swingFrames} 2s infinite ease-in-out;
+  transform-origin: 50% 0;
+`
+
+export const Bell = styled(Notification2)<{ unread: boolean }>`
+  color: ${({ theme, unread }) => theme.color[unread ? "red" : "foreground"]};
+
+  ${({ unread }) => unread && swing}
+`
diff --git a/packages/web-console/src/scenes/News/index.tsx b/packages/web-console/src/scenes/News/index.tsx
index be368096e..bb044c5e6 100644
--- a/packages/web-console/src/scenes/News/index.tsx
+++ b/packages/web-console/src/scenes/News/index.tsx
@@ -7,39 +7,10 @@ import { useDispatch, useSelector } from "react-redux"
 import { selectors, actions } from "../../store"
 import ReactMarkdown from "react-markdown"
 import { Loader, Button } from "@questdb/react-components"
-import { Notification2 } from "styled-icons/remix-line"
 import { db } from "../../store/db"
 import { UnreadItemsIcon } from "../../components/UnreadItemsIcon"
 import { Thumbnail } from "./thumbnail"
-
-const swing = () => {
-  let animation = ""
-  const numKeyframes = 30 // 5 sec total animation
-
-  for (let i = 0; i < numKeyframes; i++) {
-    const rotateDegree = i % 2 === 0 ? 15 : -15
-    const keyframePercent = (i / numKeyframes) * 100
-    animation += `
-      ${keyframePercent}% {
-        transform: rotate(${rotateDegree}deg);
-      }
-    `
-  }
-  return animation
-}
-
-const BellIcon = styled(Notification2)<{ $unread: boolean }>`
-  color: ${({ theme, $unread }) => theme.color[$unread ? "red" : "foreground"]};
-
-  ${({ $unread }) =>
-    $unread &&
-    `
-  animation: 5s linear swing infinite;
-  @keyframes swing {
-    ${swing()}
-  }
-  `}
-`
+import { Bell } from "./bell"
 
 const Loading = styled.div`
   display: grid;
@@ -164,9 +135,9 @@ const News = () => {
       trigger={
         <IconWithTooltip
           icon={
-            <Button skin={newsOpened ? "primary" : "secondary"}>
+            <Button skin={newsOpened ? "secondary" : "transparent"}>
               <UnreadItemsIcon
-                icon={<BellIcon size="18px" $unread={hasUnreadNews} />}
+                icon={<Bell size="18px" unread={hasUnreadNews} />}
                 tick={hasUnreadNews}
               />
             </Button>
diff --git a/packages/web-console/src/theme/global-styles.ts b/packages/web-console/src/theme/global-styles.ts
index 24b78ca4f..6067d60aa 100644
--- a/packages/web-console/src/theme/global-styles.ts
+++ b/packages/web-console/src/theme/global-styles.ts
@@ -11,7 +11,7 @@ const DocSearchStyles = css`
     --docsearch-modal-background: ${({ theme }) => theme.color.background};
     --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
     /* Search box */
-    --docsearch-searchbox-background: rgba(255, 255, 255, 0.1);
+    --docsearch-searchbox-background: #2d303e;
     --docsearch-searchbox-focus-background: #141725;
     /* Hit */
     --docsearch-hit-color: ${({ theme }) => theme.color.foreground};
@@ -35,7 +35,6 @@ const DocSearchStyles = css`
   .DocSearch-Button {
     height: 3rem;
     border-radius: 0.4rem;
-    background: ${({ theme }) => theme.color.selection};
     color: ${({ theme }) => theme.color.foreground};
     border: none;
   }