Merge pull request #1931 from atmonshi/more-rtl-ui

rotate arrows in rtl

components/pages/dashboard/Dashboard.js

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

components/pages/settings/teams/TeamsTable.js

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

components/pages/websites/WebsiteMenuView.js

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