Add centerText option to PanelTitle

alephium · Aug 3, 2023 · 6b44c93 · 6b44c93
1 parent 1efdb2a
commit 6b44c93
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/components/PageComponents/PanelTitle.tsx b/src/components/PageComponents/PanelTitle.tsx
@@ -26,6 +26,7 @@ interface PanelTitleProps {
   size?: 'small' | 'big'
   useLayoutId?: boolean
   isSticky?: boolean
+  centerText?: boolean
 }
 
 const PanelTitle: FC<PanelTitleProps> = ({
@@ -34,14 +35,15 @@ const PanelTitle: FC<PanelTitleProps> = ({
   onBackButtonClick,
   size,
   useLayoutId = true,
-  isSticky = false
+  isSticky = false,
+  centerText = false
 }) => {
   const { scrollY } = useScroll()
 
   const titleScale = useTransform(scrollY, [0, 50], [1, 0.6])
 
   return (
-    <TitleContainer layoutId={useLayoutId ? 'sectionTitle' : ''} isSticky={isSticky}>
+    <TitleContainer layoutId={useLayoutId ? 'sectionTitle' : ''} isSticky={isSticky} centerText={centerText}>
       {onBackButtonClick && (
         <BackArrow
           onClick={onBackButtonClick}
@@ -60,11 +62,13 @@ const PanelTitle: FC<PanelTitleProps> = ({
 
 export default PanelTitle
 
-export const TitleContainer = styled(motion.div)<{ isSticky: boolean }>`
+export const TitleContainer = styled(motion.div)<Pick<PanelTitleProps, 'isSticky' | 'centerText'>>`
   display: flex;
   align-items: center;
   top: 0;
 
+  ${({ centerText }) => centerText && 'text-align: center'};
+
   ${({ isSticky }) =>
     isSticky &&
     css`

diff --git a/src/pages/HomePage/UnlockPanel.tsx b/src/pages/HomePage/UnlockPanel.tsx
@@ -77,7 +77,7 @@ const UnlockPanel = ({ onNewWalletLinkClick }: UnlockPanelProps) => {
 
   return (
     <>
-      <PanelTitle useLayoutId={false} size="big">
+      <PanelTitle useLayoutId={false} size="big" centerText>
         {dAppName ? t('Connect to dApp') : t('Welcome back.')}
       </PanelTitle>
       <ParagraphStyled centered secondary>

diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
@@ -39,7 +39,7 @@ const HomePage = () => {
       <FloatingPanel verticalAlign="center" horizontalAlign="center" transparentBg borderless>
         {showNewWalletActions ? (
           <>
-            <PanelTitle useLayoutId={false} size="big">
+            <PanelTitle useLayoutId={false} size="big" centerText>
               {t('New wallet')}
             </PanelTitle>
             <NewWalletActions onExistingWalletLinkClick={() => setShowNewWalletActions(false)} />
@@ -48,7 +48,7 @@ const HomePage = () => {
           <UnlockPanel onNewWalletLinkClick={() => setShowNewWalletActions(true)} />
         ) : (
           <>
-            <PanelTitle useLayoutId={false} size="big">
+            <PanelTitle useLayoutId={false} size="big" centerText>
               {t('Welcome.')}
             </PanelTitle>
             <NewWalletActions />