From a8b88eb786d1dba773caf73ff5947153b90fd6d6 Mon Sep 17 00:00:00 2001
From: "fateme.fazli" <fateme.fazli@baninab.com>
Date: Wed, 28 Aug 2019 14:45:52 +0430
Subject: [PATCH] feat(rtl): added rtl compatibility to Endpoint component

---
 demo/openapi-fa.yaml                       | 4 ++--
 src/components/Endpoint/styled.elements.ts | 6 ++++--
 src/theme.ts                               | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/demo/openapi-fa.yaml b/demo/openapi-fa.yaml
index e3560a3b..0ecad606 100644
--- a/demo/openapi-fa.yaml
+++ b/demo/openapi-fa.yaml
@@ -1,9 +1,9 @@
 openapi: 3.0.0
 servers:
   - url: //petstore.swagger.io/v2
-    description: Default server
+    description: سرور پیش فرض
   - url: //petstore.swagger.io/sandbox
-    description: Sandbox server
+    description: sandbox سرور
 info:
   description: |
     این یک فایل تست api-doc است که مرتبط با مدیریت یک پت‌شاپ طراحی و نوشته شده است.
diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
index f00a032b..853f38b1 100644
--- a/src/components/Endpoint/styled.elements.ts
+++ b/src/components/Endpoint/styled.elements.ts
@@ -25,6 +25,7 @@ export const EndpointInfo = styled.div<{ expanded?: boolean; inverted?: boolean
   border: ${props => (props.inverted ? '0' : '1px solid transparent')};
   border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
   transition: border-color 0.25s ease;
+  direction: ltr;
 
   ${props =>
     (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
@@ -59,7 +60,7 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>`
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   transition: all 0.25s ease;
-
+  text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
   ${props => (props.expanded ? '' : 'transform: translateY(-50%) scaleY(0);')}
 `;
 
@@ -68,6 +69,7 @@ export const ServerItem = styled.div`
 `;
 
 export const ServerUrl = styled.div`
+  text-align: left;
   padding: 5px;
   border: 1px solid #ccc;
   background: #fff;
@@ -75,5 +77,5 @@ export const ServerUrl = styled.div`
   color: ${props => props.theme.colors.primary.main};
   > span {
     color: ${props => props.theme.colors.text.primary};
-  }
+  };
 `;
diff --git a/src/theme.ts b/src/theme.ts
index f6a12b21..4b9f37f2 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -103,13 +103,13 @@ const defaultTheme: ThemeInterface = {
     smoothing: 'antialiased',
     optimizeSpeed: true,
     headings: {
-      fontFamily: 'Montserrat, sans-serif',
+      fontFamily: 'Montserrat, sans-serif, Vazir',
       fontWeight: '400',
       lineHeight: '1.6em',
     },
     code: {
       fontSize: '13px',
-      fontFamily: 'Courier, monospace',
+      fontFamily: 'Courier, monospace, Vazir',
       lineHeight: ({ typography }) => typography.lineHeight,
       fontWeight: ({ typography }) => typography.fontWeightRegular,
       color: '#e53935',