Landing page - new design implementation #122
BIN
src/assets/images/placeholder.png
Normal file
BIN
src/assets/images/placeholder.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
@ -35,6 +35,7 @@ import {
|
|||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
||||||
import { Container } from '../Container'
|
import { Container } from '../Container'
|
||||||
|
import { ButtonIcon } from '../ButtonIcon'
|
||||||
|
|
||||||
const metadataController = new MetadataController()
|
const metadataController = new MetadataController()
|
||||||
|
|
||||||
@ -134,6 +135,7 @@ export const AppBar = () => {
|
|||||||
<Box className={styles.rightSideBox}>
|
<Box className={styles.rightSideBox}>
|
||||||
{!isAuthenticated && (
|
{!isAuthenticated && (
|
||||||
<Button
|
<Button
|
||||||
|
startIcon={<ButtonIcon />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigate(appPublicRoutes.login)
|
navigate(appPublicRoutes.login)
|
||||||
}}
|
}}
|
||||||
|
14
src/components/ButtonIcon/index.tsx
Normal file
14
src/components/ButtonIcon/index.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import styles from './style.module.scss'
|
||||||
|
import placeholder from '../../assets/images/placeholder.png'
|
||||||
|
|
||||||
|
interface ButtonIconProps {
|
||||||
|
src?: string
|
||||||
|
alt?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ButtonIcon = ({
|
||||||
|
src = placeholder,
|
||||||
|
alt = ''
|
||||||
|
}: ButtonIconProps) => {
|
||||||
|
return <img src={src} alt={alt} className={styles.icon}></img>
|
||||||
|
}
|
5
src/components/ButtonIcon/style.module.scss
Normal file
5
src/components/ButtonIcon/style.module.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.icon {
|
||||||
|
border-radius: 100px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
@ -9,6 +9,7 @@
|
|||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
|
text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -68,6 +69,7 @@ button {
|
|||||||
* when this class is assigned to a component, user will not be able to select and copy the content from that component
|
* when this class is assigned to a component, user will not be able to select and copy the content from that component
|
||||||
*/
|
*/
|
||||||
.no-select {
|
.no-select {
|
||||||
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -36,10 +36,10 @@ export const theme = extendTheme({
|
|||||||
root: {
|
root: {
|
||||||
fontSize: '14px',
|
fontSize: '14px',
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
padding: '10px 20px',
|
padding: '8px 15px',
|
||||||
transition: 'ease 0.2s',
|
transition: 'ease 0.2s',
|
||||||
boxShadow: 'unset',
|
boxShadow: 'unset',
|
||||||
lineHeight: '1.25',
|
lineHeight: 'inherit',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
':hover': {
|
':hover': {
|
||||||
background: 'var(--primary-light)',
|
background: 'var(--primary-light)',
|
||||||
@ -63,6 +63,10 @@ export const theme = extendTheme({
|
|||||||
borderColor: '#291334',
|
borderColor: '#291334',
|
||||||
background: '#29133433'
|
background: '#29133433'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
startIcon: {
|
||||||
|
marginRight: '12px',
|
||||||
|
marginLeft: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user