rotate arrows in rtl

This commit is contained in:
Ash Monsh 2023-04-20 12:41:06 +03:00
parent b39ef68372
commit aba523cbee
3 changed files with 10 additions and 4 deletions

View File

@ -10,6 +10,7 @@ import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import useDashboard from 'store/dashboard'; import useDashboard from 'store/dashboard';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import useLocale from 'hooks/useLocale';
export default function Dashboard({ userId }) { export default function Dashboard({ userId }) {
const { formatMessage, labels, messages } = useMessages(); const { formatMessage, labels, messages } = useMessages();
@ -19,6 +20,7 @@ export default function Dashboard({ userId }) {
const { get, useQuery } = useApi(); const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId })); const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
const hasData = data && data.length !== 0; const hasData = data && data.length !== 0;
const { dir } = useLocale();
function handleMore() { function handleMore() {
setMax(max + limit); setMax(max + limit);
@ -33,7 +35,7 @@ export default function Dashboard({ userId }) {
<EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}> <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
<Link href="/settings/websites"> <Link href="/settings/websites">
<Button> <Button>
<Icon> <Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight /> <Icons.ArrowRight />
</Icon> </Icon>
<Text>{formatMessage(messages.goToSettings)}</Text> <Text>{formatMessage(messages.goToSettings)}</Text>
@ -48,7 +50,7 @@ export default function Dashboard({ userId }) {
{max < data.length && ( {max < data.length && (
<Flexbox justifyContent="center"> <Flexbox justifyContent="center">
<Button onClick={handleMore}> <Button onClick={handleMore}>
<Icon> <Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.More /> <Icons.More />
</Icon> </Icon>
<Text>{formatMessage(labels.more)}</Text> <Text>{formatMessage(labels.more)}</Text>

View File

@ -6,10 +6,12 @@ import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants'; import { ROLES } from 'lib/constants';
import SettingsTable from 'components/common/SettingsTable'; import SettingsTable from 'components/common/SettingsTable';
import useLocale from 'hooks/useLocale';
export default function TeamsTable({ data = [], onDelete }) { export default function TeamsTable({ data = [], onDelete }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { user } = useUser(); const { user } = useUser();
const { dir } = useLocale();
const columns = [ const columns = [
{ name: 'name', label: formatMessage(labels.name) }, { name: 'name', label: formatMessage(labels.name) },
@ -64,7 +66,7 @@ export default function TeamsTable({ data = [], onDelete }) {
{!showDelete && ( {!showDelete && (
<ModalTrigger> <ModalTrigger>
<Button> <Button>
<Icon> <Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight /> <Icons.ArrowRight />
</Icon> </Icon>
<Text>{formatMessage(labels.leave)}</Text> <Text>{formatMessage(labels.leave)}</Text>

View File

@ -18,6 +18,7 @@ import SideNav from 'components/layout/SideNav';
import usePageQuery from 'hooks/usePageQuery'; import usePageQuery from 'hooks/usePageQuery';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
import styles from './WebsiteMenuView.module.css'; import styles from './WebsiteMenuView.module.css';
import useLocale from 'hooks/useLocale';
const views = { const views = {
url: PagesTable, url: PagesTable,
@ -37,6 +38,7 @@ const views = {
export default function WebsiteMenuView({ websiteId, websiteDomain }) { export default function WebsiteMenuView({ websiteId, websiteDomain }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { dir } = useLocale();
const { const {
resolveUrl, resolveUrl,
query: { view }, query: { view },
@ -113,7 +115,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
<Link href={resolveUrl({ view: undefined })}> <Link href={resolveUrl({ view: undefined })}>
<Flexbox justifyContent="center"> <Flexbox justifyContent="center">
<Button variant="quiet"> <Button variant="quiet">
<Icon rotate={180}> <Icon rotate={dir === 'rtl' ? 0 : 1800}>
<Icons.ArrowRight /> <Icons.ArrowRight />
</Icon> </Icon>
<Text>{formatMessage(labels.back)}</Text> <Text>{formatMessage(labels.back)}</Text>