Updated recents style

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';

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;
-  }
-`;

crabfit-frontend/src/pages/Home/Home.tsx

@@ -248,6 +248,7 @@ const Home = ({ offline }) => {
           {/* eslint-disable-next-line */}
 					<P>Created by <a href="https://bengrant.dev" target="_blank">Ben Grant</a>, Crab Fit is the modern-day solution to your group event planning debates.</P>
 					<P>The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <a href="https://github.com/GRA0007/crab.fit" target="_blank" rel="noreferrer">repository</a>.</P>
+          <P>Crab Fit costs more than <strong>$100 per month</strong> to run. Consider donating below if it helped you out so it can stay free for everyone. 🦀</P>
 				</StyledMain>
 			</AboutSection>
 

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;
+    }
+  }
 `;