Skip to content

Commit

Permalink
Improve display of footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@behrang
behrang committed Apr 15, 2024
1 parent 21c837e commit a648472
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 33 deletions.
65 changes: 34 additions & 31 deletions src/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { observer } from 'mobx-react-lite'
import { Model } from './Model'
import logo from './assets/logo.svg'
import logoDark from './assets/logo-dark.svg'

interface Props {
model: Model
Expand All @@ -8,62 +10,63 @@ interface Props {
const Footer = observer(({ model }: Props) => {
return (
<div className='mt-auto bg-milky font-body text-brown dark:bg-dark-900 dark:text-dark-50'>
<div className='mx-auto w-full max-w-screen-lg pb-16 pt-8'>
<div className='grid grid-cols-1 min-[480px]:grid-cols-2 lg:grid-cols-4'>
<div className='m-8'>
<h3 className='text-lg font-bold text-orange dark:text-brown'>Social</h3>
<a className='my-4 block' href='https://t.me/HipoFinance' target='hipo_telegram'>
<div className='mx-auto w-full max-w-screen-lg justify-center px-8 py-8 sm:flex sm:flex-row-reverse sm:items-start sm:px-0'>
<div className='grid grid-cols-1 min-[420px]:grid-cols-2 md:grid-cols-4'>
<div className='mx-8 my-4'>
<h3 className='font-bold text-orange dark:text-brown'>Social</h3>
<a className='my-4 block text-sm' href='https://t.me/HipoFinance' target='hipo_telegram'>
Telegram
</a>
<a className='my-4 block' href='https://twitter.com/hipofinance' target='hipo_twitter'>
<a className='my-4 block text-sm' href='https://twitter.com/hipofinance' target='hipo_twitter'>
Twitter
</a>
</div>

<div className='m-8'>
<h3 className='text-lg font-bold text-orange dark:text-brown'>Community</h3>
<a className='my-4 block' href='https://t.me/hipo_chat' target='hipo_chat'>
<div className='mx-8 my-4'>
<h3 className='font-bold text-orange dark:text-brown'>Community</h3>
<a className='my-4 block text-sm' href='https://t.me/hipo_chat' target='hipo_chat'>
Hipo Chat
</a>
<a className='my-4 block' href='https://t.me/Hipo_hub' target='hipo_hub'>
<a className='my-4 block text-sm' href='https://t.me/Hipo_hub' target='hipo_hub'>
Hipo Hub
</a>
</div>

<div className='m-8'>
<h3 className='text-lg font-bold text-orange dark:text-brown'>Docs</h3>
<a className='my-4 block' href='https://github.com/HipoFinance' target='hipo_github'>
<div className='mx-8 my-4'>
<h3 className='font-bold text-orange dark:text-brown'>Docs</h3>
<a className='my-4 block text-sm' href='https://hipo.finance/#audit' target='hipo_audits'>
Audits
</a>
<a className='my-4 block text-sm' href='https://github.com/HipoFinance' target='hipo_github'>
GitHub
</a>
<a className='my-4 block' href='https://docs.hipo.finance/' target='hipo_docs'>
<a className='my-4 block text-sm' href='https://docs.hipo.finance/' target='hipo_docs'>
Documentation
</a>
</div>

<div className='m-8'>
<h3 className='text-lg font-bold text-orange dark:text-brown'>About</h3>
<a className='my-4 block' href='https://hipo.finance/#HowHipoWorks' target='hipo_how'>
How Hipo Works?
</a>
<a className='my-4 block' href='https://hipo.finance/#audit' target='hipo_audits'>
Audits
</a>
<a className='my-4 block' href='https://hipo.finance/#roadmap' target='hipo_roadmap'>
<div className='mx-8 my-4'>
<h3 className='font-bold text-orange dark:text-brown'>About</h3>
<a className='my-4 block text-sm' href='https://hipo.finance/#roadmap' target='hipo_roadmap'>
Roadmap
</a>
<a className='my-4 block' href='https://hipo.finance/#WhyHipo' target='hipo_why'>
<a className='my-4 block text-sm' href='https://hipo.finance/#HowHipoWorks' target='hipo_how'>
How Hipo Works?
</a>
<a className='my-4 block text-sm' href='https://hipo.finance/#WhyHipo' target='hipo_why'>
Why Choose Hipo?
</a>
</div>
</div>

<p className='mx-8 mt-16 select-none font-logo text-4xl dark:text-orange' onClick={model.switchNetwork}>
Hipo
</p>

<div className='mx-8 my-4 h-1 rounded bg-orange'></div>

<p className='text-center text-xs opacity-70'>Copyright 2024, All Rights Reserved</p>
<div
className='mx-8 my-8 flex select-none flex-row items-center gap-4 pb-16 font-logo text-2xl dark:text-orange'
onClick={model.switchNetwork}
>
<img src={logo} className='-ml-4 -mr-3 h-20 dark:hidden' />
<img src={logoDark} className='-ml-4 -mr-3 hidden h-20 dark:block' />
<p>Hipo</p>
</div>
</div>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions src/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Header = observer(({ model }: Props) => {
<ul className='dark:bg-choco dark:border-c2 border-c1 sm:bg-transparent sm:dark:bg-transparent fixed bottom-0 left-0 z-10 flex w-full select-none flex-row border-t bg-milky text-sm font-thin sm:static sm:ml-4 sm:w-auto sm:border-0'>
<li
className={
'flex-1 cursor-pointer whitespace-nowrap pt-3 text-center sm:ml-4 sm:flex-none' +
'flex-1 cursor-pointer whitespace-nowrap pt-3 text-center sm:ml-4 sm:flex-none sm:pt-0' +
(model.activePage === 'stake' ? ' text-dark-600' : ' text-brown')
}
onClick={() => {
Expand Down Expand Up @@ -69,7 +69,7 @@ const Header = observer(({ model }: Props) => {
</li>
<li
className={
'flex-1 cursor-pointer whitespace-nowrap pt-3 text-center sm:ml-4 sm:flex-none' +
'flex-1 cursor-pointer whitespace-nowrap pt-3 text-center sm:ml-4 sm:flex-none sm:pt-0' +
(model.activePage === 'referral' ? ' text-dark-600' : ' text-brown')
}
onClick={() => {
Expand Down

0 comments on commit a648472

Please sign in to comment.