Merge pull request #85 from secretkeylabs/imamahzafar/fix/ui-bugs

Fix UI bugs
secretkeylabs · Nov 25, 2022 · 9edba02 · 9edba02
2 parents ff474ff + a7f67bb
commit 9edba02
Show file tree

Hide file tree

Showing 43 changed files with 467 additions and 377 deletions.
diff --git a/src/app/components/bottomModal/index.tsx b/src/app/components/bottomModal/index.tsx
@@ -8,12 +8,12 @@ const BottomModalHeaderText = styled.h1((props) => ({
   flex: 1,
 }));
 
-const RowContainer = styled.div((props) => ({
+const RowContainer = styled.div({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'space-between',
-  margin: props.theme.spacing(12),
-}));
+  margin: '24px 24px 20px 24px',
+});
 
 const ButtonImage = styled.img({
   alignSelf: 'center',

diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx
@@ -20,7 +20,7 @@ const Button = styled.button<ButtonProps>((props) => ({
 
 const TransparentButton = styled(Button)`
   background-color: transparent;
-  border: 1px solid ${(props) => props.theme.colors.white['600']};
+  border: 1px solid #4C5187;
 `;
 
 const ButtonText = styled.div((props) => ({

diff --git a/src/app/components/confirmStxTransactionComponent/index.tsx b/src/app/components/confirmStxTransactionComponent/index.tsx
@@ -55,8 +55,7 @@ const Button = styled.button((props) => ({
 }));
 
 const ButtonText = styled.div((props) => ({
-  ...props.theme.body_xs,
-  fontWeight: 700,
+  ...props.theme.body_medium_m,
   color: props.theme.colors.white['0'],
   textAlign: 'center',
 }));

diff --git a/src/app/components/passwordInput/index.tsx b/src/app/components/passwordInput/index.tsx
@@ -34,18 +34,18 @@ const HeaderText = styled.h1((props) => ({
   marginTop: props.theme.spacing(15),
 }));
 
-const HeaderContainer = styled.div((props) => ({
-  marginTop: props.theme.spacing(32),
+const HeaderContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-}));
+});
 
 const PasswordInputContainer = styled.div((props) => ({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
-  border: '1px solid #303354;',
+  border: '1px solid #303354',
+  backgroundColor: props.theme.colors.background.elevation0,
   borderRadius: props.theme.radius(1),
   paddingLeft: props.theme.spacing(4),
   paddingRight: props.theme.spacing(4),
@@ -76,7 +76,6 @@ const ButtonsContainer = styled.div<ButtonContainerProps>((props) => ({
   display: 'flex',
   flexDirection: props.stackButtonAlignment ? 'column-reverse' : 'row',
   alignItems: props.stackButtonAlignment ? 'center' : 'flex-end',
-  justifyContent: 'space-between',
   flex: 1,
   marginTop: props.ifError ? props.theme.spacing(30) : props.theme.spacing(40),
   marginBottom: props.theme.spacing(8),

diff --git a/src/app/components/recipinetAddressView/index.tsx b/src/app/components/recipinetAddressView/index.tsx
@@ -14,8 +14,6 @@ const InfoContainer = styled.div((props) => ({
 const RowContainer = styled.div({
   display: 'flex',
   flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
 });
 
 const TitleText = styled.h1((props) => ({
@@ -30,17 +28,21 @@ const ValueText = styled.h1((props) => ({
   wordBreak: 'break-all',
 }));
 
+const AssociatedAddressText = styled.h1((props) => ({
+  ...props.theme.body_m,
+  marginTop: props.theme.spacing(2),
+  wordBreak: 'break-all',
+  color: props.theme.colors.white['400'],
+}));
+
 const ButtonImage = styled.img((props) => ({
   marginRight: props.theme.spacing(3),
-  alignSelf: 'center',
-  transform: 'all',
+  marginTop: props.theme.spacing(1),
 }));
 
 const ActionButton = styled.button((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  justifyContent: 'center',
-  alignItems: 'center',
   backgroundColor: 'transparent',
   marginLeft: props.theme.spacing(12),
 }));
@@ -61,7 +63,7 @@ function RecipientAddressView({ recipient }: Props) {
       <TitleText>{t('RECEPIENT_ADDRESS')}</TitleText>
       <ValueText>{bnsName}</ValueText>
       <RowContainer>
-        <ValueText>{recipient}</ValueText>
+        {bnsName ? <AssociatedAddressText>{recipient}</AssociatedAddressText> : <ValueText>{recipient}</ValueText>}
         <ActionButton onClick={handleOnPress}>
           <ButtonImage src={ArrowSquareOut} />
         </ActionButton>

diff --git a/src/app/components/resetWallet/index.tsx b/src/app/components/resetWallet/index.tsx
@@ -5,7 +5,6 @@ import styled from 'styled-components';
 
 const ResetWalletText = styled.h1((props) => ({
   ...props.theme.body_l,
-  textAlign: 'center',
   color: props.theme.colors.white['200'],
   paddingLeft: props.theme.spacing(8),
   paddingRight: props.theme.spacing(8),
@@ -25,7 +24,7 @@ const ButtonContainer = styled.div((props) => ({
 
 const TransparentButtonContainer = styled.div((props) => ({
   marginLeft: props.theme.spacing(2),
-  marginRight: props.theme.spacing(2),
+  marginRight: props.theme.spacing(6),
   width: '100%',
 }));
 

diff --git a/src/app/components/seedPhraseView/index.tsx b/src/app/components/seedPhraseView/index.tsx
@@ -1,43 +1,43 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import styled from 'styled-components';
 import Eye from '@assets/img/createPassword/Eye.svg';
+import SeedPhraseWord from './word';
 
 interface SeedPhraseViewProps {
   seedPhrase: string;
+  isVisible: boolean;
+  setIsVisible: (isVisible: boolean) => void;
 }
-
 interface SeedContainerProps {
   isVisible: boolean;
 }
 
-const Container = styled.div({
+const Container = styled.div((props) => ({
   position: 'relative',
-});
+  paddingBottom: props.theme.spacing(20),
+}));
 
 const SeedContainer = styled.div<SeedContainerProps>((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  backgroundColor: props.theme.colors.background['elevation-1'],
-  border: `1px solid ${props.theme.colors.background.elevation2}`,
-  borderRadius: props.theme.radius(1),
+  display: 'grid',
+  gridTemplateColumns: ' 100px 100px 100px',
+  textAlign: 'center',
+  margin: 0,
+  columnGap: props.theme.spacing(3),
   paddingBottom: props.theme.spacing(17),
   paddingLeft: props.theme.spacing(5),
   filter: `blur(${props.isVisible ? 0 : '3px'})`,
 }));
 
-const SeedWord = styled.p((props) => ({
-  ...props.theme.body_medium_m,
-  width: '25%',
-  marginTop: props.theme.spacing(17),
-  marginRight: props.theme.spacing(4),
-  marginLeft: props.theme.spacing(9),
+const OuterSeedContainer = styled.div((props) => ({
+  backgroundColor: props.theme.colors.background['elevation-1'],
+  border: `1px solid ${props.theme.colors.background.elevation3}`,
+  borderRadius: props.theme.radius(1),
 }));
 
 const ShowSeedButton = styled.button((props) => ({
   ...props.theme.body_xs,
   color: props.theme.colors.white[0],
-  backgroundColor: props.theme.colors.background.elevation2,
+  backgroundColor: 'rgba(255, 255, 255, 0.1)',
   height: 36,
   width: 110,
   borderRadius: props.theme.radius(3),
@@ -54,8 +54,7 @@ const ShowSeedButton = styled.button((props) => ({
 }));
 
 export default function SeedphraseView(props: SeedPhraseViewProps) {
-  const { seedPhrase } = props;
-  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const { seedPhrase, isVisible, setIsVisible } = props;
   const seedPhraseWords = useMemo(() => seedPhrase?.split(' '), [seedPhrase]);
 
   const handleToggleVisibility = () => {
@@ -64,18 +63,17 @@ export default function SeedphraseView(props: SeedPhraseViewProps) {
 
   return (
     <Container>
-      <SeedContainer isVisible={isVisible}>
-        {seedPhraseWords.map((word, index) => (
-          <SeedWord key={word}>
-            {index + 1}
-            {'. '}
-            {word}
-          </SeedWord>
-        ))}
-      </SeedContainer>
+      <OuterSeedContainer>
+        <SeedContainer isVisible={isVisible}>
+          {seedPhraseWords.map((word, index) => (
+            <SeedPhraseWord index={index} word={word} />
+          ))}
+        </SeedContainer>
+      </OuterSeedContainer>
+
       {!isVisible && (
         <ShowSeedButton onClick={handleToggleVisibility}>
-          <img src={Eye} alt="show-password" height={24} />
+          <img src={Eye} alt="show-password" height={16} />
           Show
         </ShowSeedButton>
       )}

diff --git a/src/app/components/seedPhraseView/word.tsx b/src/app/components/seedPhraseView/word.tsx
@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+const SeedWord = styled.p((props) => ({
+  ...props.theme.body_medium_m,
+  marginTop: props.theme.spacing(16),
+}));
+
+const OrdinalNumber = styled.p((props) => ({
+  ...props.theme.body_medium_m,
+  marginLeft: props.theme.spacing(7),
+  marginRight: props.theme.spacing(1.5),
+  marginTop: props.theme.spacing(16),
+  color: props.theme.colors.white['400'],
+}));
+
+const Container = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+});
+
+interface Props {
+  index:number;
+  word: string
+}
+
+function SeedPhraseWord({ index, word }: Props) {
+  return (
+    <Container>
+      <OrdinalNumber>
+        {index + 1}
+        .
+      </OrdinalNumber>
+      <SeedWord key={word}>
+        {word}
+      </SeedWord>
+    </Container>
+  );
+}
+
+export default SeedPhraseWord;