diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index 538512e..c5d600a 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -27,8 +27,10 @@ import { ShareInfo, Footer, AboutSection, - Recent, } from './createStyle'; +import { + Recent, +} from '../Home/homeStyle'; import api from 'services'; import { useRecentsStore } from 'stores'; diff --git a/crabfit-frontend/src/pages/Create/createStyle.ts b/crabfit-frontend/src/pages/Create/createStyle.ts index e79b34f..cb7e35a 100644 --- a/crabfit-frontend/src/pages/Create/createStyle.ts +++ b/crabfit-frontend/src/pages/Create/createStyle.ts @@ -77,30 +77,3 @@ export const AboutSection = styled.section` font-size: 1.2rem; } `; - -export const Recent = styled.a` - text-decoration: none; - color: inherit; - display: flex; - align-items: center; - justify-content: space-between; - padding: 5px 0; - flex-wrap: wrap; - - & .name { - font-weight: 700; - color: ${props => props.theme.primaryDark}; - } - & .date { - font-weight: 400; - font-size: .9em; - opacity: .8; - text-align: right; - flex: 1; - white-space: nowrap; - } - - &:hover .name { - text-decoration: underline; - } -`; diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index c20da01..30be2e1 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -248,6 +248,7 @@ const Home = ({ offline }) => { {/* eslint-disable-next-line */}

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository.

+

Crab Fit costs more than $100 per month to run. Consider donating below if it helped you out so it can stay free for everyone. 🦀

diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 1e9797f..a3fb4d1 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -108,16 +108,24 @@ export const Recent = styled.a` font-weight: 700; font-size: 1.1em; color: ${props => props.theme.primaryDark}; + flex: 1; + display: block; } & .date { font-weight: 400; opacity: .8; - text-align: right; - flex: 1; white-space: nowrap; } &:hover .name { text-decoration: underline; } + + @media (max-width: 500px) { + display: block; + + & .date { + white-space: normal; + } + } `;