added upload input styling for text

Opentrons · Oct 22, 2024 · 9a3a48a · 9a3a48a
1 parent ee9c997
commit 9a3a48a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json
@@ -5,6 +5,7 @@
   "commands": "Commands: List the protocol's steps, specifying quantities in microliters (uL) and giving exact source and destination locations.",
   "copy_code": "Copy code",
   "disclaimer": "OpentronsAI can make mistakes. Review your protocol before running it on an Opentrons robot.",
+  "drag_and_drop": "Drag and drop or <a>browse</a> your files",
   "example": "For example prompts, click the buttons in the left panel.",
   "got_feedback": "Got feedback? We love to hear it.",
   "key_info": "Here are some key pieces of information to provide in your prompt:",

diff --git a/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx b/opentrons-ai-client/src/organisms/UpdateProtocol/index.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 import {
+  COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   DropdownField,
@@ -9,12 +10,13 @@ import {
   JUSTIFY_END,
   LargeButton,
   StyledText,
+  Link as LinkComponent,
 } from '@opentrons/components'
 import { UploadInput } from '../../molecules/UploadInput'
 import { HeaderWithMeter } from '../../molecules/HeaderWithMeter'
 import { useState } from 'react'
 import type { ChangeEvent } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 
 const updateOptions = [
   {
@@ -76,13 +78,37 @@ export function UpdateProtocol(): JSX.Element {
         <ContentFlex>
           <HeadingText>{t('update_existing_protocol')}</HeadingText>
           <BodyText>{t('protocol_file')}</BodyText>
-          <UploadInput
-            uploadButtonText="Choose file"
-            dragAndDropText={'Drag and drop or browse your files'}
-            onUpload={function (file: File): unknown {
-              throw new Error('Function not implemented.')
-            }}
-          ></UploadInput>
+          <Flex
+            paddingTop="40px"
+            width="auto"
+            flexDirection={DIRECTION_ROW}
+            justifyContent={JUSTIFY_CENTER}
+          >
+            <UploadInput
+              uploadButtonText="Choose file"
+              dragAndDropText={
+                <StyledText as="p">
+                  <Trans
+                    t={t}
+                    i18nKey={t('drag_and_drop')}
+                    components={{
+                      a: (
+                        <LinkComponent
+                          color={COLORS.blue55}
+                          role="button"
+                          to={''}
+                        />
+                      ),
+                    }}
+                  />
+                </StyledText>
+              }
+              onUpload={function (file: File): unknown {
+                throw new Error('Function not implemented.')
+              }}
+            ></UploadInput>
+          </Flex>
+
           <BodyText>{t('type_of_update')}</BodyText>
           <DropdownField
             options={updateOptions}