Styling dashboard header and added create repo button

Author: snyaggarwal

src/components/app/App.scss

@@ -18,3 +18,7 @@ div.rounded-input {
     color: inherit;
     text-decoration: none;
 }
+.default-button-styles, .default-button-styles:hover, .default-button-styles:focus {
+    text-decoration: none;
+    color: #FFF;
+}

src/components/app/HeaderControls.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { useTranslation } from 'react-i18next'
 import PersonIcon from '@mui/icons-material/Face2';
 import IconButton from '@mui/material/IconButton';
-import Chip from '@mui/material/Chip';
 import { getLoginURL, isLoggedIn } from '../../common/utils';
 import Languages from './Languages';
+import Button from '../common/Button';
 
 const HeaderControls = () => {
   const { t } = useTranslation()
@@ -16,7 +16,7 @@ const HeaderControls = () => {
           <IconButton color='primary'>
             <PersonIcon fontSize='inherit'/>
           </IconButton>:
-        <Chip label={t('auth.sign_in')} color='primary' style={{height: '40px', borderRadius: '100px', marginLeft: '8px'}} href={getLoginURL()} component='a' />
+        <Button className='default-button-styles' label={t('auth.sign_in')} color='primary' style={{marginLeft: '8px'}} href={getLoginURL()} component='a' />
       }
     </div>
   )

src/components/common/AddButton.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import AddIcon from '@mui/icons-material/Add';
+import Button from './Button';
+
+
+const AddButton = props => (
+  <Button icon={<AddIcon fontSize='inherit'/>} {...props} />
+)
+
+export default AddButton;

src/components/common/Button.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Chip from '@mui/material/Chip';
+import merge from 'lodash/merge';
+
+
+const Button = ({style, ...rest}) => (
+  <Chip style={merge({height: '40px', borderRadius: '100px', padding: '0 8px'}, (style || {}))} {...rest} />
+)
+
+export default Button;

src/components/dashboard/Dashboard.jsx

@@ -5,6 +5,7 @@ import Carousel from 'react-material-ui-carousel'
 import { Chip } from '@mui/material'
 import { PRIMARY, WHITE, PRIMARY_LIGHT } from '../../common/constants'
 import { getCurrentUser, isLoggedIn } from '../../common/utils';
+import AddButton from '../common/AddButton';
 
 const LinkTo = ({ label }) => <Link to='/' style={{color: PRIMARY, fontSize: '22px', margin: '0 5px'}} className='no-anchor-styles'>{label}</Link>
 
@@ -43,8 +44,11 @@ const Dashboard = () => {
       <div className='col-xs-12 padding-0 flex-vertical-center' style={{fontSize: '22px'}}>
         {
           authenticated ?
-            <span>
-              {t('dashboard.hello')} {username}!
+            <span style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
+              <span>{t('dashboard.hello')} {username}!</span>
+              <span>
+                <AddButton label={t('dashboard.create_repository')} color='primary' onClick={() => {}} />
+              </span>
             </span>:
           <span>
             {t('dashboard.welcome_line')} <LinkTo label={t('auth.sign_in')} /> {t('common.or')} <LinkTo label={t('auth.register')} />

src/i18n/locales/en/translations.json

@@ -6,7 +6,8 @@
     "name": "Dashboard",
     "welcome_line": "Welcome to OCL.",
     "take_a_tour": "Take a tour",
-    "hello": "Hello"
+    "hello": "Hello",
+    "create_repository": "Create Repository"
   },
   "my_repositories": {
     "name": "My repositories"