diff --git a/frontend/frontend/src/components/Home/Progress.js b/frontend/frontend/src/components/Home/Progress.js index 0fd88fd7..0a53112f 100644 --- a/frontend/frontend/src/components/Home/Progress.js +++ b/frontend/frontend/src/components/Home/Progress.js @@ -24,6 +24,7 @@ const ProgressSection = ({ num, item, passed, isActive, onClick }) => { className={classnames( 'text-lg font-bold', passed ? 'text-blue-500' : 'text-gray-500', + isActive ? '-mt-[5px]' : '', )} > {`Step ${num + 1}`} diff --git a/frontend/frontend/src/pages/Home/stages/Display.js b/frontend/frontend/src/pages/Home/stages/Display.js index ea959d29..13bef992 100644 --- a/frontend/frontend/src/pages/Home/stages/Display.js +++ b/frontend/frontend/src/pages/Home/stages/Display.js @@ -43,30 +43,32 @@ const DisplayStage = ({ userId, themeSuffix }) => { return (
-
-
- Copy the image URL or download the PNG. Share on GitHub, Twitter, - LinkedIn, or anywhere else! -
-
-
- {[ - { title: 'Copy URL', active: true, onClick: copyUrl }, - { title: 'Download PNG', active: true, onClick: downloadPNG }, - ].map((item, index) => ( - - ))} +
+
+
+ Copy the image URL or download the PNG. Share on GitHub, Twitter, + LinkedIn, or anywhere else! +
+
+
+ {[ + { title: 'Copy URL', active: true, onClick: copyUrl }, + { title: 'Download PNG', active: true, onClick: downloadPNG }, + ].map((item, index) => ( + + ))} +
@@ -75,7 +77,6 @@ const DisplayStage = ({ userId, themeSuffix }) => { title="Your Card" description="The finished product!" imageSrc={`${themeSuffix}&disable_animations=true`} - selected />