fix: update buttons and button icon design
This commit is contained in:
parent
af689a00f7
commit
28184ab038
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 { setUserRobotImage } from '../../store/userRobotImage/action'
|
||||
import { Container } from '../Container'
|
||||
import { ButtonIcon } from '../ButtonIcon'
|
||||
|
||||
const metadataController = new MetadataController()
|
||||
|
||||
@ -134,6 +135,7 @@ export const AppBar = () => {
|
||||
<Box className={styles.rightSideBox}>
|
||||
{!isAuthenticated && (
|
||||
<Button
|
||||
startIcon={<ButtonIcon />}
|
||||
onClick={() => {
|
||||
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;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-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
|
||||
*/
|
||||
.no-select {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
@ -36,10 +36,10 @@ export const theme = extendTheme({
|
||||
root: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
padding: '10px 20px',
|
||||
padding: '8px 15px',
|
||||
transition: 'ease 0.2s',
|
||||
boxShadow: 'unset',
|
||||
lineHeight: '1.25',
|
||||
lineHeight: 'inherit',
|
||||
borderRadius: '4px',
|
||||
':hover': {
|
||||
background: 'var(--primary-light)',
|
||||
@ -63,6 +63,10 @@ export const theme = extendTheme({
|
||||
borderColor: '#291334',
|
||||
background: '#29133433'
|
||||
}
|
||||
},
|
||||
startIcon: {
|
||||
marginRight: '12px',
|
||||
marginLeft: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user