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

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>

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}
+`

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>

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;
   }