Refactor UI layout in App.tsx, update Avatar component usage, and fix…

… flex layout issue
softstack · May 3, 2024 · c17e007 · c17e007
1 parent 58da260
commit c17e007
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -226,7 +226,7 @@ function App() {
                         <BackButton goBack={goBack} />
                         {account && <SkipButton skip={skip} />}
                     </div>
-                    <Avatar src={avatarPhone} height="60%" />
+                    <Avatar src={avatarPhone} />
                     <div className="flex flex-col bg-white pt-4 px-8 pb-8 gap-4 rounded-t-3xl rounded-b-xl shadow-custom-white">
                         <h2 className="headline">CONNECT</h2>
                         <EVMConnectModal
@@ -257,7 +257,7 @@ function App() {
                 <>
                     <div className="components-container mb-2">
                         <BackButton goBack={goBack} />
-                        <Avatar src={avatarTable} height="60%" />
+                        <Avatar src={avatarTable} />
                         <div className="flex flex-col bg-white pt-4 px-8 pb-2 min-h-fit gap-2 rounded-t-3xl rounded-b-xl shadow-custom-white">
                             <h2 className="headline">HORRAY!</h2>
                             <div className="text-sm font-semibold text-center text-customGrayAddress">

diff --git a/src/components/utils/Avatar.tsx b/src/components/utils/Avatar.tsx
@@ -2,15 +2,11 @@ import React from 'react';
 
 type Props = {
     src: string;
-    height?: string;
 };
 
-const Avatar: React.FC<Props> = ({ src, height = '100%' }) => {
+const Avatar: React.FC<Props> = ({ src }) => {
     return (
-        <div
-            className="flex flex-grow items-center justify-center overflow-hidden max-h-96 py-4 px-8"
-            style={{ height: height }}
-        >
+        <div className="flex flex-grow items-center justify-center overflow-hidden max-h-96 py-4 px-8">
             <img
                 className="max-h-full max-w-full w-auto object-scale-down"
                 src={src}