Merge pull request #1426 from oasisprotocol/lw/select-padding

Make ParaTimeSelection padding match placeholder, option, and value
oasisprotocol · Apr 26, 2023 · 205ae52 · 205ae52
2 parents 96612f8 + 3210455
commit 205ae52
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap
@@ -203,6 +203,7 @@ exports[`<ParaTimeSelection /> should render component 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  padding: 11px;
 }
 
 .c14 {
@@ -396,6 +397,12 @@ exports[`<ParaTimeSelection /> should render component 1`] = `
   }
 }
 
+@media only screen and (max-width:768px) {
+  .c12 {
+    padding: 11px;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c14 {
     margin-left: 6px;

diff --git a/src/app/pages/ParaTimesPage/ParaTimeSelection/index.tsx b/src/app/pages/ParaTimesPage/ParaTimeSelection/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Box } from 'grommet/es6/components/Box'
 import { Form } from 'grommet/es6/components/Form'
 import { FormField } from 'grommet/es6/components/FormField'
@@ -9,16 +9,20 @@ import { ParaTimeContent } from '../ParaTimeContent'
 import { ParaTimeFormFooter } from '../ParaTimeFormFooter'
 import { useParaTimes } from '../useParaTimes'
 import { useParaTimesNavigation } from '../useParaTimesNavigation'
+import { ThemeContext } from 'styled-components'
+import { ThemeType } from 'grommet/es6/themes'
 
 type ParaTimeOptionProps = {
   label: string
   isEvm?: boolean
 }
 const ParaTimeOption = ({ label, isEvm }: ParaTimeOptionProps) => {
+  const theme = useContext<ThemeType>(ThemeContext)
   const { t } = useTranslation()
+  const paddingToMatchPlaceholder = theme.global?.input?.padding
 
   return (
-    <Box direction="row" justify="between" width="240px">
+    <Box direction="row" justify="between" width="240px" pad={paddingToMatchPlaceholder}>
       <span>{label}</span>
       {isEvm && <Text color="lightText">{t('paraTimes.selection.evmc', 'EVMc')}</Text>}
     </Box>

diff --git a/src/styles/theme/ThemeProvider.tsx b/src/styles/theme/ThemeProvider.tsx
@@ -34,6 +34,14 @@ const grommetCustomTheme: ThemeType = {
       elevation: 'none',
     },
   },
+  select: {
+    options: {
+      container: {
+        // Remove padding to match ParaTimeOption when displayed as value and as option
+        pad: 'none',
+      },
+    },
+  },
   global: {
     colors: {
       oasisIndigo: '#310081',