Fix mobile app

src/components/PreferencesModal/GeneralTab.tsx

@@ -18,7 +18,6 @@ import { useUsers } from '../../lib/accounts'
 import UserInfo from './UserInfo'
 import LoginButton from '../atoms/LoginButton'
 import { useAnalytics, analyticsEvents } from '../../lib/analytics'
-import { IconArrowRotate } from '../icons'
 import { FormCheckItem } from '../atoms/form'
 
 const GeneralTab = () => {
@@ -81,10 +80,7 @@ const GeneralTab = () => {
                 loginState !== 'logging-in' ? (
                   <>{t('preferences.addAccount')}</>
                 ) : (
-                  <>
-                    <IconArrowRotate />
-                    {t('preferences.loginWorking')}
-                  </>
+                  <>{t('preferences.loginWorking')}</>
                 )
               }
             </LoginButton>

src/components/PreferencesModal/PreferencesModal.tsx

@@ -13,8 +13,9 @@ import {
   backgroundColor,
   closeIconColor,
 } from '../../lib/styled/styleFunctions'
-import { IconClose } from '../icons'
 import { useTranslation } from 'react-i18next'
+import Icon from '../atoms/Icon'
+import { mdiClose } from '@mdi/js'
 
 const Container = styled.div`
   z-index: 7000;
@@ -143,7 +144,7 @@ const PreferencesModal = () => {
       </TabNav>
       <TabContent>{content}</TabContent>
       <CloseButton onClick={toggleClosed}>
-        <IconClose />
+        <Icon path={mdiClose} />
       </CloseButton>
     </Container>
   )

src/components/atoms/ButtonIcon.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from '../../lib/styled'
+import Icon from './Icon'
 
 const StyledButtonIcon = styled.button`
   color: currentColor;
@@ -14,14 +15,14 @@ const StyledButtonIcon = styled.button`
 `
 
 interface ButtonIconProps {
-  icon: React.ReactNode
+  iconPath: string
   className?: string
   onClick?: () => void
 }
 
-const ButtonIcon = ({ icon, className, onClick }: ButtonIconProps) => (
+const ButtonIcon = ({ iconPath, className, onClick }: ButtonIconProps) => (
   <StyledButtonIcon onClick={onClick} className={className}>
-    {icon}
+    <Icon path={iconPath} />
   </StyledButtonIcon>
 )
 

src/components/atoms/PageContainer.tsx

@@ -1,7 +1,7 @@
 import styled from '../../lib/styled'
 
 const PageContainer = styled.div`
-  padding: 3rem;
+  padding: 1em;
   height: 100%;
   overflow-y: auto;
 `