fix border-radius (#255)

ChainSafe · Jul 17, 2023 · 7851e73 · 7851e73
1 parent d3f6ef9
commit 7851e73
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 7 deletions.
diff --git a/packages/ui/src/components/IdenticonBadge.tsx b/packages/ui/src/components/IdenticonBadge.tsx
@@ -46,7 +46,7 @@ const BadgeStyled = styled(Badge)<{ badgeType: AccountBadge }>`
     max-height: 1.3125rem;
     font-size: 0.625rem;
     font-weight: 500;
-    border-radius: 0.9375rem;
+    border-radius: ${({ theme }) => theme.custom.borderRadius};
     border: 1px solid ${({ theme }) => theme.custom.gray[400]};
     transform: scale(1) translate(-20%, 0);
 

diff --git a/packages/ui/src/components/Transactions/Transaction.tsx b/packages/ui/src/components/Transactions/Transaction.tsx
@@ -141,7 +141,7 @@ export default styled(Transaction)(
     max-height: 1.3125rem;
     left: 29px;
     top: 19px;
-    border-radius: 0 0.9375rem 0.9375rem 0.9375rem;
+    border-radius: ${theme.custom.borderRadius};
     padding: 0.25rem 0.5rem;
     max-width: 2.625rem;
     font-size: 0.625rem;

diff --git a/packages/ui/src/components/library/Autocomplete.tsx b/packages/ui/src/components/library/Autocomplete.tsx
@@ -113,7 +113,7 @@ export const AutocompleteStyles = css`
   }
 
   .MuiPaper-root {
-    border-radius: 0.75rem;
+    border-radius: ${theme.custom.borderRadius};
   }
 
   .MuiIconButton-root {
@@ -144,7 +144,7 @@ export const AutocompleteStyles = css`
   .MuiAutocomplete-listbox {
     padding: 0;
     border: 1px solid ${theme.custom.text.borderColor};
-    border-radius: 0.75rem;
+    border-radius: ${theme.custom.borderRadius};
     box-shadow: none;
   }
 

diff --git a/packages/ui/src/components/library/Button.tsx b/packages/ui/src/components/library/Button.tsx
@@ -11,7 +11,7 @@ export const Button = styled('button')<ButtonProps>`
   font-size: 1rem;
   line-height: 1.625rem;
   font-weight: 500;
-  border-radius: 10px;
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
   border: none;
   cursor: pointer;
   background: ${({ theme }) => theme.palette.primary.white};

diff --git a/packages/ui/src/components/library/InputField.tsx b/packages/ui/src/components/library/InputField.tsx
@@ -51,7 +51,7 @@ export const InputStyledBaseCss = css`
   padding: 0.5rem 1.25rem;
   border: none;
   outline: 1.5px solid ${theme.custom.text.borderColor};
-  border-radius: 0.75rem;
+  border-radius: ${theme.custom.borderRadius};
   font-size: 1rem;
   font-family: 'Jost', sans-serif;
 
@@ -63,7 +63,7 @@ export const InputStyledBaseCss = css`
     cursor: not-allowed;
     background: #f3f6f9;
     outline: 1.5px solid #e7e7e7;
-    border-radius: 0.75rem;
+    border-radius: ${theme.custom.borderRadius};
   }
 `
 

diff --git a/packages/ui/src/components/library/Select.tsx b/packages/ui/src/components/library/Select.tsx
@@ -105,6 +105,7 @@ const SelectMuiStyled = styled(SelectMui)<
   background: ${({ theme }) => theme.palette.primary.white};
   outline: 1.5px solid ${({ theme }) => theme.custom.text.borderColor};
   text-transform: capitalize;
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
 
   fieldset {
     min-width: ${({ minifiedVersion }) => (minifiedVersion ? '3.75rem' : '9.875rem')};

diff --git a/packages/ui/src/components/library/TextFieldLargeStyled.tsx b/packages/ui/src/components/library/TextFieldLargeStyled.tsx
@@ -6,6 +6,7 @@ const TextFieldLargeStyled = styled(TextField)`
     height: 3.5rem;
     padding: 0.5rem 0.75rem 0.5rem 1rem;
     border: none;
+    border-radius: ${({ theme }) => theme.custom.borderRadius};
     outline: 1.5px solid ${({ theme }) => theme.custom.text.borderColor};
 
     &:hover {

diff --git a/packages/ui/src/styles/theme.ts b/packages/ui/src/styles/theme.ts
@@ -13,6 +13,7 @@ declare module '@mui/material/styles' {
       }
     }
     custom: {
+      borderRadius: string
       boxShadow: string
       error: string
       text: {
@@ -116,6 +117,7 @@ export const theme = createTheme({
     fontFamily: ['Jost', 'sans-serif', 'Roboto'].join(',')
   },
   custom: {
+    borderRadius: '0.75rem',
     boxShadow:
       '0 1.21622px 2.43243px rgba(0, 0, 0, 0.1), 0 1.21622px 3.64865px rgba(0, 0, 0, 0.25)',
     error: '#ff8a65',