feat: mobile ui

app/fragments/app-add-member-to-organization-modal/src/add-member-to-organization-modal.component.tsx

@@ -7,7 +7,6 @@ import type { FC }                                from 'react'
 
 import type { AddMemberToOrganizationModalProps } from './add-member-to-organization-modal.interfaces.js'
 
-import { useTheme }                               from '@emotion/react'
 import { FormattedMessage }                       from 'react-intl'
 import { memo }                                   from 'react'
 import { useState }                               from 'react'
@@ -19,6 +18,7 @@ import { Row }                                    from '@ui/layout'
 import { Column }                                 from '@ui/layout'
 import { Modal }                                  from '@ui/modal'
 import { Text }                                   from '@ui/text'
+import { useTheme }                               from '@emotion/react'
 import { useToast }                               from '@stores/toast-notification'
 
 import { AddMemberToOrganizationHook }            from './add-member-to-organization-modal.hook.js'

app/fragments/app-add-member-to-organization-modal/src/team-switch/team-switch.component.tsx

@@ -4,12 +4,12 @@ import type { PropsWithChildren } from 'react'
 
 import type { TeamSwitchProps }   from './team-swtich.interfaces.js'
 
-import { useTheme }               from '@emotion/react'
 import React                      from 'react'
 
 import { Row }                    from '@ui/layout'
 import { BaseSwitch }             from '@ui/switch'
 import { Text }                   from '@ui/text'
+import { useTheme }               from '@emotion/react'
 
 export const TeamSwitch: FC<PropsWithChildren<TeamSwitchProps>> = ({ teamName, onChange }) => {
   const theme = useTheme() as ThemeType

app/fragments/app-base-layout/src/base-layout.client.tsx

@@ -7,14 +7,14 @@ import type { PropsWithChildren } from 'react'
 
 import type { BaseLayoutProps }   from './base-layout.interfaces.js'
 
-import { useTheme }               from '@emotion/react'
 import React                      from 'react'
 
 import { ThemeSelector }          from '@app/theme-selector'
 import { UsersTitle }             from '@app/users-title'
 import { Row }                    from '@ui/layout'
 import { Column }                 from '@ui/layout'
 import { Sidebar }                from '@ui/sidebar'
+import { useTheme }               from '@emotion/react'
 
 export const BaseLayoutClient: FC<PropsWithChildren<BaseLayoutProps>> = ({
   children,

app/fragments/app-invite-button/src/invite-button.component.tsx

@@ -5,13 +5,13 @@ import type { FC }                  from 'react'
 
 import type { InviteButtonProps }   from './invite-button.interfaces.js'
 
-import { useTheme }                 from '@emotion/react'
 import { FormattedMessage }         from 'react-intl'
 import React                        from 'react'
 
 import { Button }                   from '@ui/button'
 import { SuccessIcon }              from '@ui/icons'
 import { Text }                     from '@ui/text'
+import { useTheme }                 from '@emotion/react'
 
 import { getInviteButtonConstants } from './invite-button.constants.js'
 

app/fragments/app-invite-member-modal/src/invite-member-modal.component.tsx

@@ -6,7 +6,6 @@ import type { InputValuesType }        from './invite-member-modal.interfaces.js
 import type { InviteMemberModalProps } from './invite-member-modal.interfaces.js'
 import type { CheckedSwitchesType }    from './invite-member-modal.interfaces.js'
 
-import { useTheme }                    from '@emotion/react'
 import { FormattedMessage }            from 'react-intl'
 import { memo }                        from 'react'
 import { useState }                    from 'react'
@@ -20,6 +19,7 @@ import { Column }                      from '@ui/layout'
 import { Modal }                       from '@ui/modal'
 import { IconSwitch }                  from '@ui/switch'
 import { Text }                        from '@ui/text'
+import { useTheme }                    from '@emotion/react'
 import { useToast }                    from '@stores/toast-notification'
 
 import { InviteMemberModalInput }      from './input/index.js'

app/fragments/app-main-logo/src/main-logo.component.tsx

@@ -1,12 +1,12 @@
 import type { ThemeType }   from '@ui/theme'
 
-import { useTheme }         from '@emotion/react'
 import { FormattedMessage } from 'react-intl'
 import React                from 'react'
 
 import { AtlantisIcon }     from '@ui/icons'
 import { Column }           from '@ui/layout'
 import { Text }             from '@ui/text'
+import { useTheme }         from '@emotion/react'
 
 const MainLogo: React.FC = () => {
   const theme = useTheme() as ThemeType

app/fragments/app-member-card/src/image-group/organizations-button/organizations-button.components.tsx

@@ -3,14 +3,14 @@ import type { FC }                      from 'react'
 
 import type { OrganizationsButtonType } from './organizations-button.interfaces.js'
 
-import { useTheme }                     from '@emotion/react'
 import { useState }                     from 'react'
 import React                            from 'react'
 
 import { OrganizationsModal }           from '@app/organizations-modal'
 import { Button }                       from '@ui/button'
 import { OrganizationsIcon }            from '@ui/icons'
 import { Text }                         from '@ui/text'
+import { useTheme }                     from '@emotion/react'
 
 import { getConstants }                 from './organizations-button.constants.js'
 

app/fragments/app-member-card/src/image-group/text-group/text-group.component.tsx

@@ -3,11 +3,11 @@ import type { FC }            from 'react'
 
 import type { TextGroupType } from './text-group.interfaces.ts'
 
-import { useTheme }           from '@emotion/react'
 import React                  from 'react'
 
 import { Column }             from '@ui/layout'
 import { Text }               from '@ui/text'
+import { useTheme }           from '@emotion/react'
 
 export const TextGroup: FC<TextGroupType> = ({ name, bio }) => {
   const theme = useTheme() as ThemeType

app/fragments/app-member-card/src/image-group/timer/timer.component.tsx

@@ -3,13 +3,13 @@ import type { FC }         from 'react'
 
 import type { TimerProps } from './timer.interfaces.js'
 
-import { useTheme }        from '@emotion/react'
 import { useState }        from 'react'
 import React               from 'react'
 
 import { Button }          from '@ui/button'
 import { TimerIcon }       from '@ui/icons'
 import { Text }            from '@ui/text'
+import { useTheme }        from '@emotion/react'
 
 import { TimerHook }       from './timer.hook.js'
 import { getConstants }    from './timer.constants.js'

app/fragments/app-member-card/src/member-card.component.tsx

@@ -7,14 +7,14 @@ import type { FC }                         from 'react'
 
 import type { MemberCardProps }            from './member-card.interfaces.js'
 
-import { useTheme }                        from '@emotion/react'
 import styled                              from '@emotion/styled'
 import { useState }                        from 'react'
 import React                               from 'react'
 
 import { OnbordingConditionElement }       from '@app/onbording-condition-element'
 import { Box }                             from '@ui/layout'
 import { Progress }                        from '@ui/progress'
+import { useTheme }                        from '@emotion/react'
 
 import { ImageGroup }                      from './image-group/index.js'
 import { getProgressbarPercents }          from './getters/index.js'

app/fragments/app-member-cards-grid/src/member-cards-grid.component.tsx

@@ -7,13 +7,13 @@ import type { FC }                              from 'react'
 
 import type { MemberCardsGridProps }            from './use-get-members-data.interfaces.js'
 
-import { useTheme }                             from '@emotion/react'
 import { memo }                                 from 'react'
 import { useState }                             from 'react'
 import React                                    from 'react'
 
 import { MemberCard }                           from '@app/member-card'
 import { GridAutoRows }                         from '@ui/layout'
+import { useTheme }                             from '@emotion/react'
 import { useToast }                             from '@stores/toast-notification'
 
 import { MOCK_PENDING_MEMBER_TIMER }            from './member-cards-grid.constants.js'