From a39f0929266daf53f1051bb3d45d9b1cda2ef5ad Mon Sep 17 00:00:00 2001
From: Tom <tom@altalogy.com>
Date: Mon, 25 Apr 2022 13:25:18 +0200
Subject: [PATCH] feat: footer & keyboardkeys (#86)

* Add Footer and KeyboardKeys components

* Fix lint issues

* Fix typo
---
 .../__tests__/mocks/mockTauriIPC.ts           | 70 ++++++++++++++++
 applications/launchpad_v2/src/App.test.tsx    | 24 +++---
 .../src/components/Footer/Footer.test.tsx     | 59 ++++++++++++-
 .../src/components/Footer/index.tsx           | 84 ++++++++++++++++++-
 .../src/components/Footer/styles.ts           |  4 +-
 .../KeyboardKeys/KeyboardKeys.test.tsx        | 18 ++++
 .../src/components/KeyboardKeys/index.tsx     | 40 +++++++++
 .../src/components/KeyboardKeys/styles.ts     | 31 +++++++
 .../src/components/KeyboardKeys/types.ts      |  3 +
 .../src/components/Text/index.tsx             | 14 +++-
 .../launchpad_v2/src/components/Text/types.ts |  2 +
 .../src/components/TitleBar/index.tsx         |  2 +-
 .../src/layouts/MainLayout/styles.ts          |  5 +-
 .../launchpad_v2/src/locales/footer.ts        |  7 ++
 .../launchpad_v2/src/locales/index.ts         |  2 +
 .../launchpad_v2/src/styles/Icons/CmdKey.tsx  | 20 +++++
 .../launchpad_v2/src/styles/Icons/WinKey.tsx  | 33 ++++++++
 .../launchpad_v2/src/styles/styles/colors.ts  |  5 +-
 .../launchpad_v2/src/styles/themes/dark.ts    | 14 ++--
 .../launchpad_v2/src/styles/themes/light.ts   | 13 +--
 applications/launchpad_v2/yarn.lock           |  5 ++
 21 files changed, 420 insertions(+), 35 deletions(-)
 create mode 100644 applications/launchpad_v2/__tests__/mocks/mockTauriIPC.ts
 create mode 100644 applications/launchpad_v2/src/components/KeyboardKeys/KeyboardKeys.test.tsx
 create mode 100644 applications/launchpad_v2/src/components/KeyboardKeys/index.tsx
 create mode 100644 applications/launchpad_v2/src/components/KeyboardKeys/styles.ts
 create mode 100644 applications/launchpad_v2/src/components/KeyboardKeys/types.ts
 create mode 100644 applications/launchpad_v2/src/locales/footer.ts
 create mode 100644 applications/launchpad_v2/src/styles/Icons/CmdKey.tsx
 create mode 100644 applications/launchpad_v2/src/styles/Icons/WinKey.tsx

diff --git a/applications/launchpad_v2/__tests__/mocks/mockTauriIPC.ts b/applications/launchpad_v2/__tests__/mocks/mockTauriIPC.ts
new file mode 100644
index 0000000000..b643131460
--- /dev/null
+++ b/applications/launchpad_v2/__tests__/mocks/mockTauriIPC.ts
@@ -0,0 +1,70 @@
+import { mockIPC } from '@tauri-apps/api/mocks'
+
+/**
+ * Set of default values returned by `tauriIPCMock()`
+ */
+export const defaultTauriMockValues: Record<string, unknown> = {
+  os: {
+    arch: 'x86_64',
+    platform: 'darwin',
+    ostype: 'Darwin',
+  },
+}
+
+/**
+ * The Tauri IPC mock.
+ *
+ * It uses Tauri's mockIPC and returns the value set in the `props`.
+ * If nothing found in `props`, it will return a value from `defaultTauriMockValues`.
+ *
+ * @param {Record<string, unknown>} props - pass the value you expect in tests
+ *
+ * @example
+ * // Use default values:
+ * tauriIPCMock()
+ *
+ * // Get given value from specific API module (ie. 'platform' from 'os' module)
+ * tauriIPCMock({
+ *   os: {
+ *     platform: 'darwin',
+ *   },
+ * })
+ */
+export const tauriIPCMock = (props: Record<string, unknown> = undefined) => {
+  return mockIPC((cmd, args) => {
+    switch (cmd) {
+      case 'tauri':
+        return tauriCmdMock(cmd, args, props)
+      case 'invoke':
+        return
+      default:
+        return
+    }
+  })
+}
+
+const tauriCmdMock = (
+  cmd: string,
+  args: Record<string, unknown>,
+  props: Record<string, unknown>,
+) => {
+  const tauriModule = (args?.__tauriModule as string)?.toLowerCase()
+  const messageCmd = (args?.message as { cmd?: string })?.cmd?.toLowerCase()
+
+  if (tauriModule && messageCmd) {
+    if (
+      props &&
+      Object.keys(props).includes(tauriModule) &&
+      Object.keys(props[tauriModule]).includes(messageCmd)
+    ) {
+      return props[tauriModule][messageCmd]
+    } else if (
+      Object.keys(defaultTauriMockValues).includes(tauriModule) &&
+      Object.keys(defaultTauriMockValues[tauriModule]).includes(messageCmd)
+    ) {
+      return defaultTauriMockValues[tauriModule][messageCmd]
+    }
+  }
+
+  return
+}
diff --git a/applications/launchpad_v2/src/App.test.tsx b/applications/launchpad_v2/src/App.test.tsx
index 75b2281bb0..89a6155347 100644
--- a/applications/launchpad_v2/src/App.test.tsx
+++ b/applications/launchpad_v2/src/App.test.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
-import { render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
 import { randomFillSync } from 'crypto'
 import { clearMocks } from '@tauri-apps/api/mocks'
 import { ThemeProvider } from 'styled-components'
+import { Provider } from 'react-redux'
 
 import App from './App'
-import { Provider } from 'react-redux'
+
+import { tauriIPCMock } from '../__tests__/mocks/mockTauriIPC'
 
 import { store } from './store'
 import themes from './styles/themes'
@@ -23,11 +24,14 @@ afterEach(() => {
 })
 
 test('renders without crashing', async () => {
-  render(
-    <Provider store={store}>
-      <ThemeProvider theme={themes.light}>
-        <App />
-      </ThemeProvider>
-    </Provider>,
-  )
+  tauriIPCMock()
+  await act(async () => {
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={themes.light}>
+          <App />
+        </ThemeProvider>
+      </Provider>,
+    )
+  })
 })
diff --git a/applications/launchpad_v2/src/components/Footer/Footer.test.tsx b/applications/launchpad_v2/src/components/Footer/Footer.test.tsx
index 8a36eb3333..66804a85dd 100644
--- a/applications/launchpad_v2/src/components/Footer/Footer.test.tsx
+++ b/applications/launchpad_v2/src/components/Footer/Footer.test.tsx
@@ -1,12 +1,65 @@
-import { render, screen } from '@testing-library/react'
+import { clearMocks } from '@tauri-apps/api/mocks'
+import { act, render, screen } from '@testing-library/react'
+import { randomFillSync } from 'crypto'
 
 import Footer from '.'
+import { tauriIPCMock } from '../../../__tests__/mocks/mockTauriIPC'
+
+beforeAll(() => {
+  window.crypto = {
+    getRandomValues: function (buffer) {
+      return randomFillSync(buffer)
+    },
+  }
+})
+
+afterEach(() => {
+  clearMocks()
+})
 
 describe('Footer', () => {
-  it('should render without crash', () => {
-    render(<Footer />)
+  it('should render without crashing', async () => {
+    tauriIPCMock()
+
+    await act(async () => {
+      render(<Footer />)
+    })
 
     const el = screen.getByTestId('footer-cmp')
     expect(el).toBeInTheDocument()
   })
+
+  it('should render text for supported OS type', async () => {
+    tauriIPCMock({
+      os: {
+        arch: 'x86_64',
+        platform: 'darwin',
+        ostype: 'Darwin',
+      },
+    })
+
+    await act(async () => {
+      render(<Footer />)
+    })
+
+    const el = screen.getByTestId('terminal-instructions-in-footer')
+    expect(el).toBeInTheDocument()
+  })
+
+  it('should NOT render any instructions if met unsupported OS type', async () => {
+    tauriIPCMock({
+      os: {
+        arch: 'x86_64',
+        platform: 'darwin',
+        ostype: 'unsupported',
+      },
+    })
+
+    await act(async () => {
+      render(<Footer />)
+    })
+
+    const el = screen.queryByTestId('terminal-instructions-in-footer')
+    expect(el).not.toBeInTheDocument()
+  })
 })
diff --git a/applications/launchpad_v2/src/components/Footer/index.tsx b/applications/launchpad_v2/src/components/Footer/index.tsx
index 83ee5d703a..1ca5b131e9 100644
--- a/applications/launchpad_v2/src/components/Footer/index.tsx
+++ b/applications/launchpad_v2/src/components/Footer/index.tsx
@@ -1,9 +1,89 @@
-import { StyledFooter } from './styles'
+import { useEffect, useState } from 'react'
+import { useSpring } from 'react-spring'
+import { os } from '@tauri-apps/api'
 
+import KeyboardKeys from '../KeyboardKeys'
+import Text from '../Text'
+
+import t from '../../locales'
+
+import { FooterTextWrapper, StyledFooter } from './styles'
+
+const TerminalInstructions = {
+  linux: {
+    text: t.footer.toOpenTerminal,
+    keysImage: <KeyboardKeys keys={['Ctrl', 'Alt', 'T']} />,
+  },
+  darwin: {
+    text: t.footer.toOpenTerminal,
+    keysImage: <KeyboardKeys keys={['cmd', 'T']} />,
+  },
+  windows_nt: {
+    text: t.footer.toOpenCommandPrompt,
+    keysImage: <KeyboardKeys keys={['win', 'R']} />,
+  },
+}
+
+/**
+ * Footer component.
+ *
+ * The component render instructions how to open terminal on the host machine.
+ * It supports only 'linux', 'windows (win32)' and 'macos (darwin)'.
+ * If any other platform detected, then the text is not displayed.
+ */
 const Footer = () => {
+  const [osType, setOSType] = useState<
+    'linux' | 'windows_nt' | 'darwin' | null | undefined
+  >(undefined)
+
+  const textAnim = useSpring({
+    opacity: osType === undefined ? 0 : 1,
+  })
+
+  useEffect(() => {
+    checkPlatform()
+  }, [])
+
+  const checkPlatform = async () => {
+    try {
+      const detectedPlatform = await os.type()
+
+      if (
+        ['linux', 'windows_nt', 'darwin'].includes(
+          detectedPlatform.toLowerCase(),
+        )
+      ) {
+        setOSType(
+          detectedPlatform.toLowerCase() as 'linux' | 'windows_nt' | 'darwin',
+        )
+        return
+      }
+
+      setOSType(null)
+    } catch (_err) {
+      setOSType(null)
+    }
+  }
+
   return (
     <StyledFooter data-testid='footer-cmp'>
-      <p>Press cmd + T to open terminal window</p>
+      <FooterTextWrapper
+        style={{
+          ...textAnim,
+        }}
+      >
+        {osType ? (
+          <Text
+            type='smallMedium'
+            color='inherit'
+            as={'span'}
+            testId='terminal-instructions-in-footer'
+          >
+            {t.footer.press} {TerminalInstructions[osType]?.keysImage}{' '}
+            {TerminalInstructions[osType]?.text}
+          </Text>
+        ) : null}
+      </FooterTextWrapper>
     </StyledFooter>
   )
 }
diff --git a/applications/launchpad_v2/src/components/Footer/styles.ts b/applications/launchpad_v2/src/components/Footer/styles.ts
index f0d4e4b7e4..469d547de1 100644
--- a/applications/launchpad_v2/src/components/Footer/styles.ts
+++ b/applications/launchpad_v2/src/components/Footer/styles.ts
@@ -1,3 +1,4 @@
+import { animated } from 'react-spring'
 import styled from 'styled-components'
 
 export const StyledFooter = styled.footer`
@@ -7,6 +8,7 @@ export const StyledFooter = styled.footer`
   align-items: center;
 `
 
-export const FooterCommand = styled.span`
+export const FooterTextWrapper = styled(animated.div)`
   text-align: center;
+  color: ${({ theme }) => theme.tertiary};
 `
diff --git a/applications/launchpad_v2/src/components/KeyboardKeys/KeyboardKeys.test.tsx b/applications/launchpad_v2/src/components/KeyboardKeys/KeyboardKeys.test.tsx
new file mode 100644
index 0000000000..8e85198e2f
--- /dev/null
+++ b/applications/launchpad_v2/src/components/KeyboardKeys/KeyboardKeys.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react'
+
+import KeyboardKeys from '.'
+
+describe('KeyboardKeys', () => {
+  it('should render given keys', async () => {
+    render(<KeyboardKeys keys={['Ctrl', 'R', 'win']} />)
+
+    const ctrlTile = screen.getByText('Ctrl')
+    expect(ctrlTile).toBeInTheDocument()
+
+    const rTile = screen.getByText('R')
+    expect(rTile).toBeInTheDocument()
+
+    const winTile = screen.getByTestId('svg-win-key')
+    expect(winTile).toBeInTheDocument()
+  })
+})
diff --git a/applications/launchpad_v2/src/components/KeyboardKeys/index.tsx b/applications/launchpad_v2/src/components/KeyboardKeys/index.tsx
new file mode 100644
index 0000000000..18459bf514
--- /dev/null
+++ b/applications/launchpad_v2/src/components/KeyboardKeys/index.tsx
@@ -0,0 +1,40 @@
+import { IconsWrapper, KeyTile, LetterKey } from './styles'
+import { KeyboardKeysProps } from './types'
+import SvgCmdKey from '../../styles/Icons/CmdKey'
+import SvgWinKey from '../../styles/Icons/WinKey'
+
+/**
+ * Renders keyboard keys as set of tiles.
+ * Use whenever you need to show the keyboard shortcuts, ie: "Ctrl + Alt + T"
+ *
+ * Use 'win' and 'cmd' to render Windows and Command keys.
+ *
+ * @param {string[]} keys - the set of keyboard keys
+ *
+ * @example
+ * <KeyboardKeys keys={['Ctrl', 'Alt', 'win']} />
+ */
+const KeyboardKeys = ({ keys }: KeyboardKeysProps) => {
+  const result = []
+
+  keys.forEach((key, idx) => {
+    let symbol
+    switch (key) {
+      case 'win':
+        symbol = <SvgWinKey />
+        break
+      case 'cmd':
+        symbol = <SvgCmdKey />
+        break
+      default:
+        symbol = <LetterKey>{key}</LetterKey>
+        break
+    }
+
+    result.push(<KeyTile key={`keyboard-key-${idx}`}>{symbol}</KeyTile>)
+  })
+
+  return <IconsWrapper>{result}</IconsWrapper>
+}
+
+export default KeyboardKeys
diff --git a/applications/launchpad_v2/src/components/KeyboardKeys/styles.ts b/applications/launchpad_v2/src/components/KeyboardKeys/styles.ts
new file mode 100644
index 0000000000..677dacceba
--- /dev/null
+++ b/applications/launchpad_v2/src/components/KeyboardKeys/styles.ts
@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+export const IconsWrapper = styled.div`
+  display: inline-block;
+  vertical-align: baseline;
+`
+
+export const KeyTile = styled.span`
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 10px;
+  line-height: 10px;
+  padding: 2px;
+  background: transparent;
+  border: 1px solid ${({ theme }) => theme.borderColorLight};
+  border-radius: 4px;
+  min-width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-top: -4%;
+`
+
+export const LetterKey = styled.span`
+  text-align: center;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 500;
+`
diff --git a/applications/launchpad_v2/src/components/KeyboardKeys/types.ts b/applications/launchpad_v2/src/components/KeyboardKeys/types.ts
new file mode 100644
index 0000000000..36a7eb52f1
--- /dev/null
+++ b/applications/launchpad_v2/src/components/KeyboardKeys/types.ts
@@ -0,0 +1,3 @@
+export interface KeyboardKeysProps {
+  keys: string[]
+}
diff --git a/applications/launchpad_v2/src/components/Text/index.tsx b/applications/launchpad_v2/src/components/Text/index.tsx
index 2f2563baed..0e37b30f4b 100644
--- a/applications/launchpad_v2/src/components/Text/index.tsx
+++ b/applications/launchpad_v2/src/components/Text/index.tsx
@@ -14,13 +14,23 @@ import styles from '../../styles/styles'
  * <Text type='defaultMedium' color={styles.colors.dark.primary}>...text goes here...</Text>
  */
 
-const Text = ({ type = 'defaultMedium', color, children }: TextProps) => {
+const Text = ({
+  type = 'defaultMedium',
+  as = 'p',
+  color,
+  children,
+  testId,
+}: TextProps) => {
   const textStyles = {
     color: color,
     ...styles.typography[type],
   }
 
-  return <StyledText style={textStyles}>{children}</StyledText>
+  return (
+    <StyledText as={as} style={textStyles} data-testid={testId || 'text-cmp'}>
+      {children}
+    </StyledText>
+  )
 }
 
 export default Text
diff --git a/applications/launchpad_v2/src/components/Text/types.ts b/applications/launchpad_v2/src/components/Text/types.ts
index 9cf181cdc2..f03997e46c 100644
--- a/applications/launchpad_v2/src/components/Text/types.ts
+++ b/applications/launchpad_v2/src/components/Text/types.ts
@@ -22,4 +22,6 @@ export interface TextProps {
     | 'microOblique'
   children: ReactNode
   color?: string
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h4' | 'h5' | 'h6' | 'h7' | 'p' | 'span'
+  testId?: string
 }
diff --git a/applications/launchpad_v2/src/components/TitleBar/index.tsx b/applications/launchpad_v2/src/components/TitleBar/index.tsx
index 2820fbeaf4..82cf9463e1 100644
--- a/applications/launchpad_v2/src/components/TitleBar/index.tsx
+++ b/applications/launchpad_v2/src/components/TitleBar/index.tsx
@@ -171,7 +171,7 @@ const TitleBar = ({ drawerViewWidth = '50%' }: TitleBarProps) => {
             top: 0,
             bottom: 0,
             right: 0,
-            background: '#2a2a2a',
+            background: theme.inverted.backgroundSecondary,
             borderTopRightRadius: 10,
             borderTopLeftRadius: expertViewSize === '100%' ? 10 : 0,
             ...drawerContainerStyle,
diff --git a/applications/launchpad_v2/src/layouts/MainLayout/styles.ts b/applications/launchpad_v2/src/layouts/MainLayout/styles.ts
index 38b2b7dfae..e7797e6eb6 100644
--- a/applications/launchpad_v2/src/layouts/MainLayout/styles.ts
+++ b/applications/launchpad_v2/src/layouts/MainLayout/styles.ts
@@ -25,16 +25,13 @@ export const MainContainer = styled(animated.div)`
   padding-top: 60px;
 `
 
-/**
- * @TODO move background color to the theme
- */
 export const ExpertViewBackgroundOverlay = styled(animated.div)`
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   overflow: hidden;
-  background: #1a1a1a;
+  background: ${({ theme }) => theme.inverted.background};
 `
 
 export const ExpertViewDrawer = styled(animated.div)`
diff --git a/applications/launchpad_v2/src/locales/footer.ts b/applications/launchpad_v2/src/locales/footer.ts
new file mode 100644
index 0000000000..5de08a3d72
--- /dev/null
+++ b/applications/launchpad_v2/src/locales/footer.ts
@@ -0,0 +1,7 @@
+const translations = {
+  press: 'Press',
+  toOpenTerminal: 'to open terminal window',
+  toOpenCommandPrompt: 'to open command prompt',
+}
+
+export default translations
diff --git a/applications/launchpad_v2/src/locales/index.ts b/applications/launchpad_v2/src/locales/index.ts
index 5ede942b77..a406cbb355 100644
--- a/applications/launchpad_v2/src/locales/index.ts
+++ b/applications/launchpad_v2/src/locales/index.ts
@@ -8,10 +8,12 @@
  */
 import commonI18n from './common'
 
+import footerI18n from './footer'
 import miningI18n from './mining'
 
 const transalations = {
   common: commonI18n,
+  footer: footerI18n,
   mining: miningI18n,
 }
 
diff --git a/applications/launchpad_v2/src/styles/Icons/CmdKey.tsx b/applications/launchpad_v2/src/styles/Icons/CmdKey.tsx
new file mode 100644
index 0000000000..b45f1cb719
--- /dev/null
+++ b/applications/launchpad_v2/src/styles/Icons/CmdKey.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCmdKey = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='10'
+    height='10'
+    viewBox='0 0 10 10'
+    fill='none'
+    {...props}
+  >
+    <path
+      d='M2.14888 10C1.49345 10 0.969101 9.81019 0.575843 9.43056C0.191948 9.05093 0 8.54167 0 7.90278C0 7.22685 0.201311 6.7037 0.603933 6.33333C1.01592 5.9537 1.61985 5.76389 2.41573 5.76389H7.58427C8.38951 5.76389 8.99345 5.9537 9.39607 6.33333C9.79869 6.7037 10 7.22685 10 7.90278C10 8.54167 9.80337 9.05093 9.41011 9.43056C9.02622 9.81019 8.50655 10 7.85112 10C7.32678 10 6.91011 9.90278 6.60112 9.70833C6.3015 9.51389 6.08614 9.25463 5.95506 8.93056C5.83333 8.60648 5.77247 8.25 5.77247 7.86111V2.13889C5.77247 1.75 5.83333 1.39352 5.95506 1.06945C6.08614 0.745371 6.3015 0.486111 6.60112 0.291666C6.91011 0.0972222 7.32678 0 7.85112 0C8.50655 0 9.02622 0.189815 9.41011 0.569444C9.80337 0.949074 10 1.45833 10 2.09722C10 2.77315 9.79869 3.30093 9.39607 3.68056C8.99345 4.05093 8.38951 4.23611 7.58427 4.23611H2.41573C1.61985 4.23611 1.01592 4.05093 0.603933 3.68056C0.201311 3.30093 0 2.77315 0 2.09722C0 1.45833 0.191948 0.949074 0.575843 0.569444C0.969101 0.189815 1.49345 0 2.14888 0C2.67322 0 3.08521 0.0972222 3.38483 0.291666C3.69382 0.486111 3.90918 0.745371 4.0309 1.06945C4.16198 1.39352 4.22753 1.75 4.22753 2.13889V7.86111C4.22753 8.25 4.16198 8.60648 4.0309 8.93056C3.90918 9.25463 3.69382 9.51389 3.38483 9.70833C3.08521 9.90278 2.67322 10 2.14888 10ZM2.14888 9.04167C2.51404 9.04167 2.78558 8.93981 2.96348 8.73611C3.15075 8.52315 3.24438 8.24074 3.24438 7.88889V2.11111C3.24438 1.75926 3.15075 1.48148 2.96348 1.27778C2.78558 1.06481 2.51404 0.958333 2.14888 0.958333C1.82116 0.958333 1.54494 1.0463 1.32022 1.22222C1.10487 1.39815 0.997191 1.68981 0.997191 2.09722C0.997191 2.49537 1.10955 2.7963 1.33427 3C1.55899 3.19444 1.91948 3.29167 2.41573 3.29167H7.58427C8.08052 3.29167 8.44101 3.19444 8.66573 3C8.89045 2.7963 9.00281 2.49537 9.00281 2.09722C9.00281 1.68981 8.89045 1.39815 8.66573 1.22222C8.45037 1.0463 8.17884 0.958333 7.85112 0.958333C7.48595 0.958333 7.20974 1.06481 7.02247 1.27778C6.84457 1.48148 6.75562 1.75926 6.75562 2.11111V7.88889C6.75562 8.24074 6.84457 8.52315 7.02247 8.73611C7.20974 8.93981 7.48595 9.04167 7.85112 9.04167C8.17884 9.04167 8.45037 8.9537 8.66573 8.77778C8.89045 8.60185 9.00281 8.31019 9.00281 7.90278C9.00281 7.50463 8.89045 7.20833 8.66573 7.01389C8.44101 6.81019 8.08052 6.70833 7.58427 6.70833H2.41573C1.91948 6.70833 1.55899 6.81019 1.33427 7.01389C1.10955 7.20833 0.997191 7.50463 0.997191 7.90278C0.997191 8.31019 1.10487 8.60185 1.32022 8.77778C1.54494 8.9537 1.82116 9.04167 2.14888 9.04167Z'
+      fill='currentColor'
+    />
+  </svg>
+)
+
+export default SvgCmdKey
diff --git a/applications/launchpad_v2/src/styles/Icons/WinKey.tsx b/applications/launchpad_v2/src/styles/Icons/WinKey.tsx
new file mode 100644
index 0000000000..1f7381800e
--- /dev/null
+++ b/applications/launchpad_v2/src/styles/Icons/WinKey.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgWinKey = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='10'
+    height='9'
+    viewBox='0 0 10 9'
+    fill='none'
+    {...props}
+    data-testid='svg-win-key'
+  >
+    <path
+      d='M3.84829 7.99898C3.35764 7.67221 2.83757 7.38255 2.08767 7.38255C1.63276 7.38255 1.09136 7.49056 0.421631 7.76066L1.30816 4.68743C1.40925 4.64616 1.50778 4.60885 1.60314 4.5741C1.92656 4.46037 2.387 4.33124 2.89226 4.28918C2.94991 4.28425 3.00678 4.28247 3.06404 4.28247C3.56811 4.28247 4.02816 4.45859 4.35829 4.6278C4.49986 4.70402 4.63333 4.78675 4.76581 4.86928C4.64893 5.27088 4.03033 7.38196 3.84829 7.99898Z'
+      fill='currentColor'
+    />
+    <path
+      d='M6.22162 8.96297C5.44566 8.96297 4.41105 8.32542 4.41223 8.32601L5.29619 5.25732C5.56531 5.47214 6.18825 5.88046 7.21279 5.88046C7.6833 5.88046 8.2401 5.79359 8.88653 5.56198L8.03475 8.53945C7.29986 8.84273 6.71286 8.96297 6.22162 8.96297Z'
+      fill='currentColor'
+    />
+    <path
+      d='M5.83424 1.0624V1.06458C5.6522 1.68791 5.11317 3.5354 4.93192 4.15044L5.83424 1.0624ZM4.93192 4.15044C4.45805 3.83611 3.94864 3.54903 3.22974 3.54172C3.22185 3.54172 3.21415 3.54172 3.20585 3.54172C2.74225 3.54172 2.19079 3.66453 1.51099 3.94174L2.38429 0.875424C3.04612 0.605319 3.58436 0.496725 4.03374 0.488037C4.0369 0.488037 4.04026 0.488037 4.04381 0.488037C4.30799 0.488037 4.54631 0.519431 4.75718 0.569384C5.19906 0.682125 5.83424 1.0624 5.83424 1.0624'
+      fill='currentColor'
+    />
+    <path
+      d='M7.41258 5.1619C6.64017 5.1619 5.99927 4.89555 5.50684 4.56621C5.50368 4.56424 5.49993 4.56207 5.49756 4.5595L6.39297 1.46021C6.6765 1.68055 7.31662 2.09361 8.28765 2.09361C8.77633 2.09361 9.34734 1.98916 9.9999 1.70425L9.11633 4.74727C9.11396 4.74806 9.11218 4.74924 9.111 4.74924C9.111 4.75043 9.111 4.7524 9.111 4.75339C8.49082 5.04561 7.92317 5.1619 7.41258 5.1619Z'
+      fill='currentColor'
+    />
+  </svg>
+)
+
+export default SvgWinKey
diff --git a/applications/launchpad_v2/src/styles/styles/colors.ts b/applications/launchpad_v2/src/styles/styles/colors.ts
index 56aa2bd6cf..ea0123434e 100644
--- a/applications/launchpad_v2/src/styles/styles/colors.ts
+++ b/applications/launchpad_v2/src/styles/styles/colors.ts
@@ -1,8 +1,9 @@
 const colors = {
   dark: {
     primary: '#20053D',
-    borders: '#EDECEE',
     secondary: '#716A78',
+    tertiary: '#837A8B',
+    borders: '#EDECEE',
     placeholder: '#D6D4D9',
     input: '#000000',
   },
@@ -33,9 +34,11 @@ const colors = {
     warning: '#FFEED3',
     warningText: '#D18A18',
     actionBackground: '#76A59D',
+    borderLight: '#DBDBDD',
   },
   darkMode: {
     modalBackground: '#141414',
+    modalBackgroundSecondary: '#000000',
     borders: '#222222',
     dashboard: '#0A0A0A',
     input: '#000000',
diff --git a/applications/launchpad_v2/src/styles/themes/dark.ts b/applications/launchpad_v2/src/styles/themes/dark.ts
index e3ab95f09c..5891d72c2d 100644
--- a/applications/launchpad_v2/src/styles/themes/dark.ts
+++ b/applications/launchpad_v2/src/styles/themes/dark.ts
@@ -3,7 +3,8 @@ import styles from '../styles'
 const darkTheme = {
   primary: styles.colors.light.primary,
   secondary: styles.colors.dark.secondary,
-  background: styles.colors.dark.primary,
+  tertiary: styles.colors.dark.tertiary,
+  background: styles.colors.darkMode.modalBackgroundSecondary,
   backgroundSecondary: styles.colors.darkMode.modalBackground,
   backgroundImage: styles.colors.light.backgroundImage,
   accent: styles.colors.tari.purple,
@@ -11,22 +12,23 @@ const darkTheme = {
   disabledText: styles.colors.dark.placeholder,
   tariGradient: styles.gradients.tari,
   borderColor: styles.colors.light.backgroundImage,
-
-  titleBar: styles.colors.dark.primary,
-
+  borderColorLight: styles.colors.secondary.borderLight,
   controlBackground: 'rgba(255,255,255,.2)',
 
   inverted: {
-    controlBackground: 'transparent',
     primary: styles.colors.light.primary,
     secondary: styles.colors.dark.secondary,
-    background: styles.colors.light.primary,
+    tertiary: styles.colors.dark.tertiary,
+    background: styles.colors.darkMode.modalBackgroundSecondary,
     backgroundSecondary: styles.colors.darkMode.modalBackground,
     backgroundImage: styles.colors.light.backgroundImage,
     accent: styles.colors.tari.purple,
     accentDark: styles.colors.tari.purpleDark,
     disabledText: styles.colors.dark.placeholder,
     tariGradient: styles.gradients.tari,
+    borderColor: styles.colors.light.backgroundImage,
+    borderColorLight: styles.colors.secondary.borderLight,
+    controlBackground: 'transparent',
   },
 }
 
diff --git a/applications/launchpad_v2/src/styles/themes/light.ts b/applications/launchpad_v2/src/styles/themes/light.ts
index 8065b997d9..e1c963ef43 100644
--- a/applications/launchpad_v2/src/styles/themes/light.ts
+++ b/applications/launchpad_v2/src/styles/themes/light.ts
@@ -3,6 +3,7 @@ import styles from '../styles'
 const lightTheme = {
   primary: styles.colors.dark.primary,
   secondary: styles.colors.dark.secondary,
+  tertiary: styles.colors.dark.tertiary,
   background: styles.colors.light.primary,
   backgroundSecondary: styles.colors.light.background,
   backgroundImage: styles.colors.light.backgroundImage,
@@ -11,23 +12,25 @@ const lightTheme = {
   disabledText: styles.colors.dark.placeholder,
   tariGradient: styles.gradients.tari,
   borderColor: styles.colors.dark.borders,
+  borderColorLight: styles.colors.secondary.borderLight,
   actionBackground: styles.colors.secondary.actionBackground,
-
-  titleBar: styles.colors.light.background,
-
   controlBackground: 'transparent',
 
   inverted: {
-    controlBackground: 'rgba(255,255,255,.2)',
     primary: styles.colors.light.primary,
     secondary: styles.colors.dark.secondary,
-    background: styles.colors.light.primary,
+    tertiary: styles.colors.dark.tertiary,
+    background: styles.colors.darkMode.modalBackgroundSecondary,
     backgroundSecondary: styles.colors.darkMode.modalBackground,
     backgroundImage: styles.colors.light.backgroundImage,
     accent: styles.colors.tari.purple,
     accentDark: styles.colors.tari.purpleDark,
     disabledText: styles.colors.dark.placeholder,
     tariGradient: styles.gradients.tari,
+    borderColor: styles.colors.secondary.borderLight,
+    borderColorLight: styles.colors.secondary.borderLight,
+    actionBackground: styles.colors.secondary.actionBackground,
+    controlBackground: 'rgba(255,255,255,.2)',
   },
 }
 
diff --git a/applications/launchpad_v2/yarn.lock b/applications/launchpad_v2/yarn.lock
index 632493c0a2..3e7fa94661 100644
--- a/applications/launchpad_v2/yarn.lock
+++ b/applications/launchpad_v2/yarn.lock
@@ -1163,6 +1163,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@headlessui/react@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.5.0.tgz#483b44ba2c8b8d4391e1d2c863898d7dd0cc0296"
+  integrity sha512-aaRnYxBb3MU2FNJf3Ut9RMTUqqU3as0aI1lQhgo2n9Fa67wRu14iOGqx93xB+uMNVfNwZ5B3y/Ndm7qZGuFeMQ==
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"