Updated QR-code page layout

Author: kjagiello

src/App.tsx

@@ -133,13 +133,16 @@ class App extends React.Component<IAppProps, {}> {
             var url = process.env.API.host + "/profile/" + account.token;
             return (
                 <Flex
-                    column
                     align="center"
                     justify="center"
                     className={classNames(style.container, style.start)}>
                     <Button icon="times" alert className={style.quit} onClick={() => dispatch(login(account.card_id))}/>
-                    <Box ><QRCode size="200"  value={url} /></Box>
-                    <Box >Scan the QRcode to view and edit your profile </Box>
+                    <Box>
+                        <div className={style.qrcode}>
+                            <QRCode size="200" value={url} className={style.qrcode} />
+                        </div>
+                    </Box>
+                    <Box p={3}><p>Scan the QRcode to<br />view and edit your profile.</p></Box>
                 </Flex>);
         }else {
             return (

src/styles/App.scss

@@ -59,3 +59,13 @@ body {
     right: 0;
     z-index: 10;
 }
+.qrcode {
+    width: 200px;
+    height: 200px;
+    border: solid 5px #fff;
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
+    box-sizing: content-box;
+}
+p {
+    line-height: 36px;
+}

src/styles/App.scss.d.ts

@@ -3,3 +3,4 @@ export const white: string;
 export const start: string;
 export const quit: string;
 export const overlay: string;
+export const qrcode: string;