Change nav bar buttons

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

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

@@ -7,6 +7,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import Icon from './Icon'
+import type { IconName } from './Icon'
 
 import useContextMenu from '../hooks/useContextMenu'
 

src/renderer/components/Icon/index.tsx

@@ -8,16 +8,17 @@ export type IconName =
   | 'audio-muted'
   | 'bell'
   | 'brightness-6'
+  | 'chats'
   | 'code-tags'
   | 'cross'
   | 'devices'
-  | 'document'
   | 'favorite'
   | 'forum'
   | 'image'
   | 'info'
   | 'lead-pencil'
   | 'list'
+  | 'map'
   | 'media'
   | 'more'
   | 'open_in_new'
@@ -30,18 +31,33 @@ export type IconName =
   | '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);
   }
 }
 

src/renderer/components/composer/menuAttachment.tsx

@@ -12,7 +12,7 @@ import { LastUsedSlot, rememberLastUsedPath } from '../../utils/lastUsedPaths'
 import { selectedAccountId } from '../../ScreenController'
 import Icon from '../Icon'
 
-import { ContextMenuItem } from './ContextMenu'
+import { ContextMenuItem } from '../ContextMenu'
 import { ContextMenuContext } from '../../contexts/ContextMenuContext'
 
 import type { T } from '@deltachat/jsonrpc-client'
@@ -103,18 +103,18 @@ export default function MenuAttachment({
 
   // item array used to populate menu
   const menu: (ContextMenuItem | false)[] = [
-    settings?.settings.webrtc_instance && {
-      icon: 'phone' as IconName,
+    settings?.settings.webrtc_instance !== undefined && {
+      icon: 'phone',
       label: tx('videochat'),
       action: onVideoChat,
     },
     {
-      icon: 'media' as IconName,
+      icon: 'image',
       label: tx('image'),
       action: addFilenameMedia.bind(null),
     },
     {
-      icon: 'document' as IconName,
+      icon: 'upload-file',
       label: tx('file'),
       action: addFilenameFile.bind(null),
     },
@@ -143,7 +143,7 @@ export default function MenuAttachment({
       className='attachment-button'
       onClick={onClickAttachmentMenu}
     >
-      <Icon icon='paperclip' />
+      <Icon coloring='context-menu' icon='paperclip' />
     </button>
   )
 }

src/renderer/components/screens/MainScreen.tsx

@@ -2,11 +2,9 @@ import React, { useState, useRef, useEffect, useCallback } from 'react'
 import { C } from '@deltachat/jsonrpc-client'
 import {
   Alignment,
-  Classes,
   Navbar,
   NavbarGroup,
   NavbarHeading,
-  Button,
 } from '@blueprintjs/core'
 
 import Gallery from '../Gallery'
@@ -18,6 +16,8 @@ import MailingListProfile from '../dialogs/MessageListProfile'
 import SettingsStoreInstance, { useSettingsStore } from '../../stores/settings'
 import { Type } from '../../backend-com'
 import { InlineVerifiedIcon } from '../VerifiedIcon'
+import Button from '../Button'
+import Icon from '../Icon'
 import SearchInput from '../SearchInput'
 import MessageListView from '../MessageListView'
 import useChat from '../../hooks/chat/useChat'
@@ -160,16 +160,14 @@ export default function MainScreen({ accountId }: Props) {
                   {tx('chat_archived_chats_title')}
                 </div>
                 <Button
-                  className={[
-                    Classes.MINIMAL,
-                    'icon-rotated',
-                    'archived-chats-return-button',
-                    'no-drag',
-                  ].join(' ')}
-                  icon='undo'
+                  className={['archived-chats-return-button', 'no-drag'].join(
+                    ' '
+                  )}
                   onClick={() => setArchivedChatsSelected(false)}
                   aria-label={tx('back')}
-                />
+                >
+                  <Icon coloring='context-menu' icon='undo' rotation={90} />
+                </Button>
               </>
             )}
             {!showArchivedChats && (
@@ -199,13 +197,13 @@ export default function MainScreen({ accountId }: Props) {
                 aria-disabled={threeDotMenuHidden}
               >
                 <Button
-                  className='icon-rotated'
-                  minimal
-                  icon='more'
                   id='three-dot-menu-button'
+                  className='navbar-button'
                   aria-label={tx('main_menu')}
                   onClick={onClickThreeDotMenu}
-                />
+                >
+                  <Icon coloring='navbar' icon='more' rotation={90} size={24} />
+                </Button>
               </span>
             )}
           </NavbarGroup>
@@ -359,29 +357,29 @@ function ChatNavButtons() {
       <span className='views no-drag'>
         <Button
           onClick={() => setChatView(ChatView.MessageList)}
-          minimal
-          large
           active={activeView === ChatView.MessageList}
-          icon={'chat'}
           aria-label={tx('chat')}
-        />
+          className='navbar-button'
+        >
+          <Icon coloring='navbar' icon='chats' size={18} />
+        </Button>
         <Button
           onClick={() => setChatView(ChatView.Media)}
-          minimal
-          large
           active={activeView === ChatView.Media}
-          icon={'media'}
           aria-label={tx('media')}
-        />
+          className='navbar-button'
+        >
+          <Icon coloring='navbar' icon='image' size={18} />
+        </Button>
         {settingsStore?.desktopSettings.enableOnDemandLocationStreaming && (
           <Button
-            minimal
-            large
-            icon='map'
             onClick={() => setChatView(ChatView.Map)}
             active={activeView === ChatView.Map}
             aria-label={tx('tab_map')}
-          />
+            className='navbar-button'
+          >
+            <Icon coloring='navbar' icon='map' size={18} />
+          </Button>
         )}
       </span>
     </>

themes/_themebase.scss

@@ -32,6 +32,8 @@ $hover-contrast-change: 2%;
   /* NavBar */
   --navBarBackground: #{$bgNavBar};
   --navBarText: #{$textNavBar};
+  --navBarButtonHover: rgba(143, 153, 168, 0.15);
+  --navBarButtonActive: rgba(143, 153, 168, 0.3);
   --navBarSearchPlaceholder: #{changeContrast($textNavBar, 27%)};
   --navBarGroupSubtitle: #{changeContrast($textNavBar, 27%)};
   /* ChatView */