refactor(protocol-designer): add some styling to navigation bar

closes AUTH-624
Opentrons · Aug 12, 2024 · 98dd831 · 98dd831
1 parent c3e9087
commit 98dd831
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 64 deletions.
diff --git a/protocol-designer/src/Navbar.tsx b/protocol-designer/src/Navbar.tsx
diff --git a/protocol-designer/src/NavigationBar.tsx b/protocol-designer/src/NavigationBar.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { NavLink, useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import {
+  ALIGN_STRETCH,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+import { actions as loadFileActions } from './load-file'
+import type { ThunkDispatch, RouteProps } from './types'
+
+export function NavigationBar({
+  routes,
+}: {
+  routes: RouteProps[]
+}): JSX.Element {
+  const { t } = useTranslation('shared')
+  const navRoutes = routes.filter(
+    (route: RouteProps) => route.navLinkTo !== '/createNew'
+  )
+  const dispatch: ThunkDispatch<any> = useDispatch()
+  const navigate = useNavigate()
+  const loadFile = (
+    fileChangeEvent: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (window.confirm(t('confirm_import') as string)) {
+      dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
+      navigate('/overview')
+    }
+  }
+
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN}>
+      <Flex
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        padding={`${SPACING.spacing12} ${SPACING.spacing40}`}
+      >
+        <Flex gridGap={SPACING.spacing8} alignItems="center">
+          <StyledText desktopStyle="bodyLargeSemiBold">
+            {t('opentrons')}
+          </StyledText>
+          <StyledText desktopStyle="bodyLargeSemiBold" color={COLORS.purple50}>
+            {t('protocol_designer')}
+          </StyledText>
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey50}>
+            {t('version', { version: process.env.OT_PD_VERSION })}
+          </StyledText>
+        </Flex>
+        <Flex gridGap={SPACING.spacing40} alignItems="center">
+          <NavbarLink key="createNew" to={'/createNew'}>
+            <StyledText desktopStyle="bodyDefaultRegular">
+              {t('create_new_protocol')}
+            </StyledText>
+          </NavbarLink>
+          <StyledLabel>
+            <StyledText desktopStyle="bodyLargeRegular" color={COLORS.grey60}>
+              {t('import')}
+            </StyledText>
+            <input type="file" onChange={loadFile}></input>
+          </StyledLabel>
+        </Flex>
+      </Flex>
+      {/* TODO(ja, 8/12/24: delete later. Leaving access to other
+      routes at all times until we make breadcrumbs and protocol overview pg */}
+      <Flex
+        backgroundColor={COLORS.blue20}
+        padding={`${SPACING.spacing12} ${SPACING.spacing40}`}
+        gridGap={SPACING.spacing40}
+      >
+        TODO add breadcrumbs here
+        {navRoutes.map(({ name, navLinkTo }: RouteProps) => (
+          <NavbarLink key={name} to={navLinkTo}>
+            <StyledText desktopStyle="bodyDefaultRegular">{name}</StyledText>
+          </NavbarLink>
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
+
+const NavbarLink = styled(NavLink)`
+  color: ${COLORS.black90};
+  text-decoration: none;
+  align-self: ${ALIGN_STRETCH};
+  &:hover {
+    color: ${COLORS.black70};
+  }
+`
+
+const StyledLabel = styled.label`
+  height: 20px;
+  cursor: pointer;
+  input[type='file'] {
+    display: none;
+  }
+`
diff --git a/protocol-designer/src/ProtocolRoutes.tsx b/protocol-designer/src/ProtocolRoutes.tsx
@@ -7,7 +7,7 @@ import { Liquids } from './pages/Liquids'
 import { StartingDeckState } from './pages/StartingDeckState'
 import { ProtocolSteps } from './pages/ProtocolSteps'
 import { CreateNewProtocolWizard } from './pages/CreateNewProtocolWizard'
-import { Navbar } from './Navbar'
+import { NavigationBar } from './NavigationBar'
 
 import type { RouteProps } from './types'
 
@@ -58,7 +58,9 @@ export function ProtocolRoutes(): JSX.Element {
 
   return (
     <>
-      {currentPath === LANDING_ROUTE ? null : <Navbar routes={pdRoutes} />}
+      {currentPath === LANDING_ROUTE ? null : (
+        <NavigationBar routes={pdRoutes} />
+      )}
       <Box width="100%">
         <Routes>
           {allRoutes.map(({ Component, path }: RouteProps) => {

diff --git a/protocol-designer/src/localization/en/shared.json b/protocol-designer/src/localization/en/shared.json
@@ -20,10 +20,13 @@
   "no": "No",
   "one_channel": "1-Channel",
   "opentrons_flex": "Opentrons Flex",
+  "opentrons": "Opentrons",
   "ot2": "Opentrons OT-2",
+  "protocol_designer": "Protocol Designer",
   "remove": "remove",
   "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",
+  "version": "Version # {{version}}",
   "welcome": "Welcome to Protocol Designer",
   "yes": "Yes"
 }