update styles

ChainSafe · Jul 13, 2023 · 418881c · 418881c
1 parent 19a2140
commit 418881c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/packages/ui/src/components/AccountDisplay.tsx b/packages/ui/src/components/AccountDisplay.tsx
@@ -114,10 +114,16 @@ const AccountDisplay = ({
   )
 }
 
-const NameWrapperStyled = styled('div')`
-  display: flex;
-  align-items: center;
+const BoxStyled = styled(Box)`
   min-width: 0;
+  margin-left: 0.5rem;
+  display: grid !important;
+  justify-content: start;
+  justify-items: start;
+`
+
+const NameWrapperStyled = styled('div')`
+  display: grid;
 `
 
 const AddressStyled = styled('div')(
@@ -128,19 +134,14 @@ const AddressStyled = styled('div')(
 `
 )
 
-const BoxStyled = styled(Box)`
-  min-width: 0;
-  margin-left: 0.5rem;
-`
-
 const NameStyled = styled('div')`
   color: ${({ theme }) => theme.custom.text.primary};
   font-size: 1rem;
   font-weight: 500;
-  white-space: nowrap;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  min-width: 0;
+  white-space: nowrap;
 `
 
 const BalanceStyled = styled('div')(

diff --git a/packages/ui/src/components/Transactions/Transaction.tsx b/packages/ui/src/components/Transactions/Transaction.tsx
@@ -114,7 +114,7 @@ export default styled(Transaction)(
   display: flex;
   flex-direction: column;
   margin-bottom: 1rem;
-  padding: 0.5rem;
+
 
   @media (min-width: ${theme.breakpoints.values.sm}px) {
     flex-direction: row;
@@ -138,14 +138,20 @@ export default styled(Transaction)(
 
   // FIXME this is duplicated
   .badge > .MuiBadge-badge {
+    max-height: 1.3125rem;
     left: 29px;
     top: 19px;
-    border-radius: 0 50px 50px 50px;
+    border-radius: 0.9375rem;
+    padding: 0.25rem 0.5rem;
+    max-width: 2.625rem;
+    font-size: 0.625rem;
+    font-weight: 500;
+    border: 1px solid ${theme.custom.gray[400]};
   }
 
   .badge.red > .MuiBadge-badge {
-    box-shadow: ${theme.custom.boxShadow};
-    background-color: ${theme.custom.identity.red};
+    background-color: ${theme.custom.proxyBadge.multi};
+    color: ${theme.custom.text.black};
   }
 `
 )