src/components/AppBar/AppBar.tsx

@@ -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)
                 }}

src/components/ButtonIcon/index.tsx

@@ -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>
+}

src/components/ButtonIcon/style.module.scss

@@ -0,0 +1,5 @@
+.icon {
+  border-radius: 100px;
+  width: 20px;
+  height: 20px;
+}

src/index.css

@@ -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;
 }
 

src/theme/index.ts

@@ -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
         }
       }
     },