Add info box for user with no default address (#793)

* adding infobox to home for users without a default address

* hide on mobile

* add linked address condition

* DefaultAddressInfoBox

* condition back to home and discussion

* InfoBox sryling update

front-end/src/components/DefaultAddressInfoBox.tsx

@@ -0,0 +1,24 @@
+// Copyright 2019-2020 @paritytech/polkassembly authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+import React from 'react';
+import { Link } from 'react-router-dom';
+import InfoBox from 'src/ui-components/InfoBox';
+
+const DefaultAddressInfoBox = () => {
+
+	return (
+		<InfoBox
+			className='default-address-infobox'
+			dismissable={true}
+			name='defaultAddress'
+			title='Default Address is here!'
+		>
+			<p><Link to='/settings'>Visit your settings</Link> to set a default address and let other users see your on-chain identity.</p>
+			<p>If you don&apos;t have any on-chain identity yet,&nbsp;
+				<a href='https://wiki.polkadot.network/docs/en/mirror-learn-identity#setting-an-identity' rel='noopener noreferrer' target='_blank'>here is how to set it up</a>.</p>
+		</InfoBox>
+	);
+};
+
+export default DefaultAddressInfoBox;

front-end/src/screens/Discussions/index.tsx

@@ -6,6 +6,7 @@ import styled from '@xstyled/styled-components';
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Grid } from 'semantic-ui-react';
+import DefaultAddressInfoBox from 'src/components/DefaultAddressInfoBox';
 
 import { UserDetailsContext } from '../../context/UserDetailsContext';
 import Button from '../../ui-components/Button';
@@ -28,15 +29,17 @@ const Discussions = ({ className } : {className?: string}) => {
 				</Grid.Column>
 				<Grid.Column mobile={16} tablet={16} computer={6}>
 					{currentUser.id &&
-					<div className='mainButtonContainer'>
-						<Button primary className={'newPostButton'} onClick={handleCreatePost}>New Post</Button>
-					</div>}
+						<div className='mainButtonContainer'>
+							<Button primary className={'newPostButton'} onClick={handleCreatePost}>New Post</Button>
+						</div>}
 					<InfoBox
 						dismissable={true}
 						content='This is the place to discuss all things Kusama. Anyone can start a new discussion.'
 						name='discussionsInfo'
 						title='About Discussions'
 					/>
+					{currentUser.id && currentUser.addresses?.length !== 0 && !currentUser.defaultAddress &&
+						<DefaultAddressInfoBox />}
 				</Grid.Column>
 			</Grid>
 		</div>

front-end/src/screens/Home/index.tsx

@@ -5,6 +5,7 @@
 import styled from '@xstyled/styled-components';
 import React, { useContext } from 'react';
 import { Grid } from 'semantic-ui-react';
+import DefaultAddressInfoBox from 'src/components/DefaultAddressInfoBox';
 
 import { UserDetailsContext } from '../../context/UserDetailsContext';
 import { useRouter } from '../../hooks';
@@ -46,6 +47,8 @@ const Home = ({ className }: Props) => {
 					{currentUser.id && <div className='mainButtonContainer'>
 						<Button primary className={'newPostButton'} onClick={handleCreatePost}>New Post</Button>
 					</div>}
+					{currentUser.id && currentUser.addresses?.length !== 0 && !currentUser.defaultAddress &&
+						<DefaultAddressInfoBox />}
 				</Grid.Column>
 			</Grid>
 		</div>
@@ -72,6 +75,11 @@ export default styled(Home)`
 		}
 	}
 
+	@media only screen and (max-width: 992px) {
+		.default-address-infobox {
+			visibility: hidden;
+		}
+	}
 
 	@media only screen and (max-width: 768px) {
 
@@ -112,5 +120,6 @@ export default styled(Home)`
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
+		margin-bottom: 2rem;
 	}
 `;

front-end/src/themes/theme.ts

@@ -43,6 +43,7 @@ export const theme = {
 		input_border_radius: '0.3rem'
 	},
 	shadows: {
+		box_shadow_big: '0 0.8rem 2rem rgba(83, 89, 92, 0.15)',
 		box_shadow_secondary_grey: '0 0 0 1px #706D6D inset',
 		box_shadow_secondary_red: '0 0 0 1px #D94C3D inset'
 	}

front-end/src/ui-components/GlobalStyle.tsx

@@ -42,6 +42,15 @@ export const GlobalStyle = createGlobalStyle`
     ul {
         padding: 0;
     }
+    
+    p {
+        a {
+            color: pink_primary;
+            &:hover {
+                color: pink_secondary;
+            }
+        }
+    }
 
     a:hover {
         text-decoration: none;

front-end/src/ui-components/InfoBox.tsx

@@ -41,26 +41,24 @@ const InfoBox = ({ children, className, content, dismissable, name, title }: Pro
 						onClick={handleClose}
 					/>
 				</div>}
-				{content}
+				<p>{content}</p>
 				{children}
 			</div>}
 		</>
 	);
 };
 
 export default styled(InfoBox)`
-    background-color: grey_light;
+	background-color: white;
 	color: black_text;
-	border-style: solid;
-	border-width: 1px;
-	border-color: grey_light;
+	font-size: sm;
+	border-radius: 6px;
+	box-shadow: box_shadow_big;
 	padding: 2rem 3rem;
 	position: relative;
 	margin-bottom: 2rem;
 	
 	h4 {
-		font-family: font_mono;
-		font-size: md;
 		margin-bottom: 1.2rem;
 	}
 
@@ -74,4 +72,13 @@ export default styled(InfoBox)`
 			cursor: pointer;
 		}
 	}
+
+	a {
+		color: black_text;
+		text-decoration: underline;
+		&:hover {
+			color: grey_primary;
+			text-decoration: underline;
+		}
+	}
 `;