fix: seedphrase screen

src/app/components/accountHeader/optionsDialog.tsx

@@ -10,9 +10,9 @@ const Container = styled.div((props) => ({
   position: 'absolute',
   top: 30,
   right: 20,
-  paddingTop: props.theme.spacing(12.5),
-  paddingBottom: props.theme.spacing(1),
   borderRadius: 12,
+  paddingTop: 11,
+  paddingBottom: 11,
   width: 179,
   background: props.theme.colors.background.elevation2,
 }));
@@ -22,16 +22,17 @@ const ButtonRow = styled.button`
   align-items: center;
   background: transparent;
   justify-content: flex-start;
-  margin-left: 24px;
-  margin-right: 24px;
-  margin-bottom: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 11px;
+  padding-bottom: 11px;
   font: ${(props) => props.theme.body_medium_m};
   color: ${(props) => props.theme.colors.white['0']};
   :hover {
-    opacity: 0.8;
+    background: ${(props) => props.theme.colors.background.elevation3};
   }
   :active {
-    opacity: 0.6;
+    background: ${(props) => props.theme.colors.background.elevation3};
   }
 `;
 

src/app/components/button/index.tsx

@@ -21,26 +21,27 @@ const Button = styled.button<ButtonProps>((props) => ({
 }));
 
 const AnimatedButton = styled(Button)`
-:hover {
-  background: #6977F8;
-}
-:focus {
-  background: #6977F8;
-  opacity:0.6;
-}
+  :hover {
+    background: ${(props) => (props.warning ? props.theme.colors.feedback.error : props.theme.colors.action.classicLight)};
+    opacity: 0.6;
+  }
+  :focus {
+    background: ${(props) => (props.warning ? props.theme.colors.feedback.error : props.theme.colors.action.classicLight)};
+    opacity: 0.6;
+  }
 `;
 
 const TransparentButton = styled(Button)`
   background-color: transparent;
-  border: 1px solid #4C5187;
+  border: ${(props) => `1px solid ${props.theme.colors.background.elevation6}`}
 `;
 
 const AnimatedTransparentButton = styled(TransparentButton)`
 :hover {
-  background: rgba(76, 81, 135, 0.2);
+  background: ${(props) => props.theme.colors.background.elevation6_800};
 }
 :focus {
-  background: rgba(85, 101, 247, 0.2);
+  background: ${(props) => props.theme.colors.action.classic800};
 }
 `;
 

src/app/components/confirmScreen/index.tsx

@@ -50,7 +50,7 @@ const CancelButton = styled.button((props) => ({
   alignItems: 'center',
   borderRadius: props.theme.radius(1),
   backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
+  border: `1px solid ${props.theme.colors.background.elevation2}`,
   color: props.theme.colors.white['0'],
   width: '50%',
   height: 44,

src/app/components/extendedScreenContainer/index.tsx

@@ -9,7 +9,7 @@ const ExtendedScreenRouteContainer = styled.div((props) => ({
   height: '100vh',
   width: '100vw',
   backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272a44',
+  border: `1px solid ${props.theme.colors.background.elevation2}`,
   boxShadow: '0px 8px 28px rgba(0, 0, 0, 0.35)',
 }));
 

src/app/components/seedPhraseInput/index.tsx

@@ -8,20 +8,29 @@ const InputContainer = styled.div({
 });
 
 const SeedPhraseInputLabel = styled.p((props) => ({
+  ...props.theme.body_bold_m,
   textAlign: 'left',
   marginBottom: props.theme.spacing(8),
 }));
 
-const SeedphraseInput = styled.textarea((props) => ({
+interface ContainerProps {
+  error: boolean;
+}
+
+const SeedphraseInput = styled.textarea<ContainerProps>((props) => ({
   ...props.theme.body_medium_m,
   backgroundColor: props.theme.colors.background.elevation0,
   color: props.theme.colors.white['0'],
   width: '100%',
   resize: 'none',
   minHeight: 140,
   padding: props.theme.spacing(8),
-  border: '1px solid #272A44',
+  border: props.error ? `1px solid ${props.theme.colors.feedback.error_700}` : `1px solid ${props.theme.colors.background.elevation3}`,
+  outline: 'none',
   borderRadius: props.theme.radius(1),
+  ':focus-within': {
+    border: `1px solid ${props.theme.colors.background.elevation6}`,
+  },
 }));
 const ErrorMessage = styled.h2((props) => ({
   ...props.theme.body_medium_m,
@@ -54,6 +63,7 @@ export default function SeedPhraseInput(props: SeedPhraseInputProps): JSX.Elemen
     <InputContainer>
       <SeedPhraseInputLabel>{t('SEED_INPUT_LABEL')}</SeedPhraseInputLabel>
       <SeedphraseInput
+        error={seedError !== ''}
         value={seed}
         name="secretKey"
         placeholder={t('SEED_INPUT_PLACEHOLDER')}

src/app/components/seedPhraseView/index.tsx

@@ -37,10 +37,11 @@ const OuterSeedContainer = styled.div((props) => ({
 const ShowSeedButton = styled.button((props) => ({
   ...props.theme.body_xs,
   color: props.theme.colors.white[0],
-  backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  backgroundColor: props.theme.colors.white[900],
+  border: `1px solid ${props.theme.colors.white[600]}`,
   height: 36,
   width: 110,
-  borderRadius: props.theme.radius(3),
+  borderRadius: 48,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -51,6 +52,14 @@ const ShowSeedButton = styled.button((props) => ({
   img: {
     marginRight: props.theme.spacing(4),
   },
+  ':hover': {
+    backgroundColor: props.theme.colors.white[850],
+    border: `1px solid ${props.theme.colors.white[800]}`,
+  },
+  ':focus': {
+    backgroundColor: props.theme.colors.white[600],
+    border: `1px solid ${props.theme.colors.white[800]}`,
+  },
 }));
 
 export default function SeedphraseView(props: SeedPhraseViewProps) {

src/app/components/tokenTile/index.tsx

@@ -14,6 +14,7 @@ import { getFtBalance, getFtTicker } from '@utils/tokens';
 
 interface TileProps {
   margin?: number;
+  inModel: boolean;
 }
 
 interface TickerProps {
@@ -29,7 +30,15 @@ const TileContainer = styled.button<TileProps>((props) => ({
   paddingTop: props.theme.spacing(7.25),
   paddingBottom: props.margin ?? props.theme.spacing(7.25),
   borderRadius: props.theme.radius(2),
-  marginBottom: props.theme.spacing(6),
+  marginBottom: props.inModel ? props.theme.spacing(0) : props.theme.spacing(6),
+  ':hover': {
+    ':-webkit-transform': props.inModel ? 'translateY(0px)' : 'translateY(-1px)',
+    transform: props.inModel ? 'translateY(0px)' : 'translateY(-1px)',
+    backgroundColor: props.inModel ? `1px solid ${props.theme.colors.background.elevation3}` : props.color,
+  },
+  ':focus': {
+    backgroundColor: props.inModel ? props.theme.colors.background.elevation3 : props.theme.colors.background.elevation2,
+  },
 }));
 
 const TickerImage = styled.img<TickerProps>((props) => ({
@@ -313,7 +322,7 @@ function TokenTile({
   };
 
   return (
-    <TileContainer color={underlayColor} margin={margin} onClick={handleTokenPressed}>
+    <TileContainer inModel={enlargeTicker} color={underlayColor} margin={margin} onClick={handleTokenPressed}>
       <RowContainer>
         {renderIcon()}
         <TextContainer>

src/app/components/topRow/index.tsx

@@ -22,11 +22,11 @@ const BackButton = styled.button({
 
 const AnimatedBackButton = styled(BackButton)`
 :hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: ${(props) => props.theme.colors.white[900]};
   border-radius: 24px;
 }
 :focus {
-  background: rgba(255, 255, 255, 0.12);
+  background: ${(props) => props.theme.colors.white[850]};
   border-radius: 24px;
 }
 `;

src/app/components/transactions/btcTransaction.tsx

@@ -14,8 +14,15 @@ interface TransactionHistoryItemProps {
 
 const TransactionContainer = styled.button((props) => ({
   display: 'flex',
-  marginBottom: props.theme.spacing(10),
+  paddingTop: props.theme.spacing(5),
+  paddingBottom: props.theme.spacing(5),
   background: 'none',
+  ':hover': {
+    background: props.theme.colors.white[900],
+  },
+  ':focus': {
+    background: props.theme.colors.white[850],
+  },
 }));
 
 const TransactionInfoContainer = styled.div((props) => ({

src/app/components/transactions/stxTransferTransaction.tsx

@@ -10,8 +10,15 @@ import useWalletSelector from '@hooks/useWalletSelector';
 
 const TransactionContainer = styled.button((props) => ({
   display: 'flex',
-  marginBottom: props.theme.spacing(10),
+  paddingTop: props.theme.spacing(5),
+  paddingBottom: props.theme.spacing(5),
   background: 'none',
+  ':hover': {
+    background: props.theme.colors.white[900],
+  },
+  ':focus': {
+    background: props.theme.colors.white[850],
+  },
 }));
 
 const TransactionInfoContainer = styled.div((props) => ({

src/app/screens/backupWallet/index.tsx

@@ -2,6 +2,7 @@ import backup from '@assets/img/backupWallet/backup.svg';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import ActionButton from '@components/button';
 
 const Container = styled.div((props) => ({
   flex: 1,
@@ -45,29 +46,9 @@ const BackupActionsContainer = styled.div((props) => ({
   width: '100%',
 }));
 
-const BackupButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
-}));
-
-const SkipBackupButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
+const TransparentButtonContainer = styled.div((props) => ({
+  marginRight: props.theme.spacing(8),
+  width: '100%',
 }));
 
 function BackupWallet(): JSX.Element {
@@ -91,8 +72,10 @@ function BackupWallet(): JSX.Element {
         <Title>{t('SCREEN_TITLE')}</Title>
         <SubTitle>{t('SCREEN_SUBTITLE')}</SubTitle>
         <BackupActionsContainer>
-          <SkipBackupButton onClick={handleSkip}>{t('BACKUP_SKIP_BUTTON')}</SkipBackupButton>
-          <BackupButton onClick={handleBackup}>{t('BACKUP_BUTTON')}</BackupButton>
+          <TransparentButtonContainer>
+            <ActionButton onPress={handleSkip} transparent text={t('BACKUP_SKIP_BUTTON')} />
+          </TransparentButtonContainer>
+          <ActionButton onPress={handleBackup} text={t('BACKUP_BUTTON')} />
         </BackupActionsContainer>
       </ContentContainer>
     </Container>

src/app/screens/backupWalletSteps/verifySeed.tsx

@@ -1,3 +1,4 @@
+import ActionButton from '@components/button';
 import SeedPhraseInput from '@components/seedPhraseInput';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,33 +23,18 @@ const ButtonsContainer = styled.div((props) => ({
   justifyContent: 'space-between',
   flex: 1,
   alignItems: 'flex-end',
-  marginBottom: props.theme.spacing(20),
+  marginBottom: props.theme.spacing(30),
   width: '100%',
 }));
 
-const VerifyButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.action.classic,
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
+const TransparentButtonContainer = styled.div((props) => ({
+  marginRight: props.theme.spacing(2),
+  width: '100%',
 }));
 
-const BackButton = styled.button((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: props.theme.radius(1),
-  backgroundColor: props.theme.colors.background.elevation0,
-  border: '1px solid #272A44',
-  color: props.theme.colors.white['0'],
-  width: '48%',
-  height: 44,
+const ButtonContainer = styled.div((props) => ({
+  marginLeft: props.theme.spacing(2),
+  width: '100%',
 }));
 
 interface VerifySeedProps {
@@ -63,8 +49,7 @@ export default function VerifySeed(props: VerifySeedProps): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'BACKUP_WALLET_SCREEN' });
   const { onBack, onVerifySuccess, seedPhrase } = props;
 
-  const cleanMnemonic = (rawSeed: string): string =>
-    rawSeed.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim();
+  const cleanMnemonic = (rawSeed: string): string => rawSeed.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim();
 
   const handleVerify = () => {
     if (seedPhrase === cleanMnemonic(seedInput)) {
@@ -84,8 +69,20 @@ export default function VerifySeed(props: VerifySeedProps): JSX.Element {
         setSeedError={setErr}
       />
       <ButtonsContainer>
-        <BackButton onClick={onBack}>{t('SEED_PHRASE_BACK_BUTTON')}</BackButton>
-        <VerifyButton onClick={handleVerify}>{t('SEED_PHRASE_VERIFY_BUTTON')}</VerifyButton>
+        <TransparentButtonContainer>
+          <ActionButton
+            onPress={onBack}
+            transparent
+            text={t('SEED_PHRASE_BACK_BUTTON')}
+          />
+        </TransparentButtonContainer>
+        <ButtonContainer>
+          <ActionButton
+            text={t('SEED_PHRASE_VERIFY_BUTTON')}
+            onPress={handleVerify}
+            disabled={seedInput === ''}
+          />
+        </ButtonContainer>
       </ButtonsContainer>
     </Container>
   );

src/app/screens/coinDashboard/transactionsHistoryList.tsx

@@ -50,7 +50,7 @@ const SectionHeader = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  marginBottom: props.theme.spacing(12),
+  marginBottom: props.theme.spacing(7),
 }));
 
 const SectionSeparator = styled.div((props) => ({

src/app/screens/createWalletSuccess/index.tsx

@@ -69,6 +69,13 @@ const ContinueButton = styled.button((props) => ({
   marginBottom: props.theme.spacing(30),
   height: 44,
   textAlign: 'center',
+  ':hover': {
+    background: props.theme.colors.action.classicLight,
+  },
+  ':focus': {
+    background: props.theme.colors.action.classicLight,
+    opacity: 0.6,
+  },
 }));
 
 function CreateWalletSuccess(): JSX.Element {