Our own icons for ContextMenu, chat navbar

* add icon to ContextMenuItem and render those
* use our ContextMenu for AttachmentMenu
* replace BlueprintJS components with ours for chat navbar and
  attachment menu

scss/composer/_composer.scss

@@ -60,19 +60,20 @@
     display: flex;
     align-items: flex-end;
 
-    .attachment-button,
-    .emoji-button {
-      .bp4-button.bp4-minimal {
-        width: 40px;
-        height: 40px;
+    .attachment-button {
+      width: 40px;
+      height: 40px;
 
-        &:hover {
-          background: none;
-          cursor: pointer;
-        }
-        &:focus {
-          outline: none;
-        }
+      background: none;
+      box-shadow: none;
+      border: none;
+
+      &:hover {
+        background: none;
+        cursor: pointer;
+      }
+      &:focus {
+        outline: none;
       }
     }
 

scss/main_screen/_navbar_wrapper.scss

@@ -44,12 +44,15 @@
     margin-left: auto;
     margin-right: 15px;
     display: flex;
+  }
 
-    .bp4-button {
-      margin: 0px;
-      position: relative;
-      height: 50px;
-      border-radius: 0px;
+  .navbar-button {
+    padding: 0;
+    width: 40px;
+    height: 50px;
+    border-radius: 0;
+    &:hover {
+      background-color: var(--navBarButtonHover);
     }
   }
 
@@ -66,7 +69,6 @@
   }
 
   #three-dot-menu-button {
-    width: 40px;
     height: 40px;
     border-radius: 100%;
   }

scss/misc/_context_menu.scss

@@ -19,8 +19,8 @@
   // position is determined in code
   position: fixed;
   pointer-events: auto;
-  background-color: var(--bp4MenuBg);
-  color: var(--bp4MenuText);
+  background-color: var(--bgPrimary);
+  color: var(--textPrimary);
 
   border-radius: 3px;
   overflow: hidden;
@@ -36,14 +36,20 @@
     white-space: nowrap;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
+
+    & .left-icon {
+      background-color: var(--iconBackground);
+      margin: 0 5px 0 0;
+    }
 
     & .right-icon {
       width: 18px;
       height: 18px;
+      margin-left: auto;
       @include color-svg(
         '../images/icons/navigate_next.svg',
-        var(--bp4MenuText),
+        var(--textPrimary),
         100%
       );
       transform: translate(11px, -0.07em);

src/renderer/components/Button/index.tsx

@@ -7,6 +7,7 @@ type Props = React.PropsWithChildren<{
   'aria-label'?: string
   className?: string
   disabled?: boolean
+  active?: boolean
   id?: string
   onClick: any
   type?: 'primary' | 'secondary' | 'danger'
@@ -15,6 +16,7 @@ type Props = React.PropsWithChildren<{
 export default function Button({
   children,
   disabled = false,
+  active = false,
   id,
   onClick,
   type,
@@ -27,6 +29,7 @@ export default function Button({
       role='button'
       className={classNames(
         styles.button,
+        active && styles.active,
         type && styles[type],
         props.className
       )}

src/renderer/components/Button/style.module.scss

@@ -31,6 +31,10 @@
     color: var(--buttonDangerText);
   }
 
+  &.active {
+    background-color: var(--navBarButtonActive);
+  }
+
   &:disabled {
     background-color: var(--buttonDisabledBackground);
     color: var(--buttonDisabledText);

src/renderer/components/ContextMenu.tsx

@@ -6,15 +6,19 @@ import React, {
   useCallback,
 } from 'react'
 import classNames from 'classnames'
+import Icon from './Icon'
+import type { IconName } from './Icon'
 
 import useContextMenu from '../hooks/useContextMenu'
 
 type ContextMenuItemActionable = {
+  icon?: IconName
   action: (event: React.MouseEvent<Element, MouseEvent>) => void
   subitems?: never
 }
 
 type ContextMenuItemExpandable = {
+  icon?: IconName
   action?: never
   subitems: (ContextMenuItem | undefined)[]
 }
@@ -344,6 +348,7 @@ export function ContextMenu(props: {
               key={index}
               {...(item.subitems && { 'data-expandable-index': index })}
             >
+              {item.icon && <Icon className='left-icon' icon={item.icon} />}
               {item.label}
               {item.subitems && <div className='right-icon'></div>}
             </div>

src/renderer/components/Icon/index.tsx

@@ -8,6 +8,7 @@ export type IconName =
   | 'audio-muted'
   | 'bell'
   | 'brightness-6'
+  | 'chats'
   | 'code-tags'
   | 'cross'
   | 'devices'
@@ -17,27 +18,46 @@ export type IconName =
   | 'info'
   | 'lead-pencil'
   | 'list'
+  | 'map'
+  | 'media'
   | 'more'
   | 'open_in_new'
+  | 'paperclip'
   | 'person'
   | 'person-filled'
+  | 'phone'
   | 'qr'
   | 'question_mark'
   | 'reaction'
   | 'settings'
   | 'swap_vert'
+  | 'undo'
+  | 'upload-file'
 
 type Props = {
   className?: string
   icon: IconName
+  coloring?: string
   size?: number
+  rotation?: number
 }
 
-export default function Icon({ size = 20, icon, className }: Props) {
+export default function Icon({
+  coloring = 'primary',
+  size = 20,
+  rotation = 0,
+  icon,
+  className,
+}: Props) {
   return (
     <span
-      className={classNames(styles.icon, className)}
+      className={classNames(
+        styles.icon,
+        coloring && styles[coloring],
+        className
+      )}
       style={{
+        transform: `rotate(${rotation}deg)`,
         WebkitMaskImage: `url(../images/icons/${icon}.svg)`,
         height: `${size}px`,
         width: `${size}px`,

src/renderer/components/Icon/styles.module.scss

@@ -4,4 +4,16 @@
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: contain;
+
+  &.navbar {
+    background-color: var(--navBarText);
+  }
+
+  &.settings {
+    background-color: var(--settingsIconColor);
+  }
+
+  &.context-menu {
+    background-color: var(--contextMenuText);
+  }
 }

src/renderer/components/SearchInput/styles.module.scss

@@ -1,4 +1,3 @@
-$backgroundColorHover: rgba(143, 153, 168, 0.15);
 $borderRadius: 10px;
 $closeButtonSize: 30px;
 
@@ -38,7 +37,7 @@ $closeButtonSize: 30px;
   min-width: $closeButtonSize;
 
   &:hover {
-    background-color: $backgroundColorHover;
+    background-color: var(--navBarButtonHover);
   }
 }