Merge pull request #1190 from ONEARMY/feat/comment-login-link

Comment login link style update
ONEARMY · Jul 16, 2021 · f849ee4 · f849ee4
2 parents 17b5711 + 2b3fc62
commit f849ee4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/components/Comment/CommentTextArea.tsx b/src/components/Comment/CommentTextArea.tsx
@@ -4,7 +4,7 @@ import { Box, Text } from 'rebass/styled-components'
 import theme from 'src/themes/styled.theme'
 import { Avatar } from '../Avatar'
 import { useCommonStores } from 'src'
-import { Link } from 'react-router-dom'
+import { Link } from '../Links'
 
 export interface IProps {
   onSubmit: (string) => Promise<void>
@@ -60,6 +60,10 @@ const TextStyled = styled(Text)`
   bottom: 6px;
 `
 
+const LoginTextStyled = styled(Text)`
+  padding: 1.5em 1em;
+`
+
 export const CommentTextArea = ({ onChange, comment, loading }) => {
   const { stores } = useCommonStores()
   const user = stores.userStore.activeUser
@@ -81,9 +85,19 @@ export const CommentTextArea = ({ onChange, comment, loading }) => {
             placeholder="Leave your questions or feedback..."
           />
         ) : (
-          <Text height="2em" lineHeight="2em">
-            Hi there! <Link to="/sign-in">Login</Link> to leave a comment
-          </Text>
+          <LoginTextStyled>
+            Hi there!{' '}
+            <Link
+              to="/sign-in"
+              sx={{
+                textDecoration: 'underline',
+                color: 'inherit',
+              }}
+            >
+              Login
+            </Link>{' '}
+            to leave a comment
+          </LoginTextStyled>
         )}
       </TextBoxStyled>
       {user && <TextStyled fontSize="2">{comment.length}/400</TextStyled>}

diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx
@@ -5,7 +5,7 @@ import { AdminTags } from './content/AdminTags'
 import { AdminUsers } from './content/AdminUsers'
 import { AdminBetaTesters } from './content/AdminBetaTesters'
 import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
-import { Link } from 'react-router-dom'
+import { Link } from 'src/components/Links'
 import Text from 'src/components/Text'
 import Flex from 'src/components/Flex'
 import { Box } from 'rebass'