fix RTL layout issues

frontend/src/app/components/address/address.component.html

@@ -55,7 +55,7 @@
 
     <br>
     <div class="title-tx">
-      <h2>
+      <h2 class="text-left">
         <ng-template [ngIf]="!transactions?.length">&nbsp;</ng-template>
         <ng-template i18n="X of X Address Transaction" [ngIf]="transactions?.length === 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction</ng-template>
         <ng-template i18n="X of X Address Transactions (Plural)" [ngIf]="transactions?.length > 1">{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions</ng-template>

frontend/src/app/components/block/block.component.html

@@ -163,7 +163,7 @@
     </div>
 
     <div #blockTxTitle id="block-tx-title" class="block-tx-title">
-      <h2>
+      <h2 class="text-left">
         <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
         <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
         <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>

frontend/src/app/components/docs/docs.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Env, StateService } from 'src/app/services/state.service';
 
@@ -13,6 +13,8 @@ export class DocsComponent implements OnInit {
   env: Env;
   showWebSocketTab = true;
 
+  @HostBinding('attr.dir') dir = 'ltr';
+
   constructor(
     private route: ActivatedRoute,
     private stateService: StateService,

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
 import { EChartsOption, graphic } from 'echarts';
 import { Observable } from 'rxjs';
 import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/operators';
@@ -35,6 +35,8 @@ export class HashrateChartComponent implements OnInit {
     renderer: 'svg',
   };
 
+  @HostBinding('attr.dir') dir = 'ltr';
+
   hashrateObservable$: Observable<any>;
   isLoading = true;
   formatNumber = formatNumber;

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core';
 import { EChartsOption } from 'echarts';
 import { Observable } from 'rxjs';
 import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/operators';
@@ -33,6 +33,8 @@ export class HashrateChartPoolsComponent implements OnInit {
     renderer: 'svg',
   };
 
+  @HostBinding('attr.dir') dir = 'ltr';
+
   hashrateObservable$: Observable<any>;
   isLoading = true;
 

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit, HostBinding } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { EChartsOption, PieSeriesOption } from 'echarts';
@@ -31,6 +31,8 @@ export class PoolRankingComponent implements OnInit {
   };
   chartInstance: any = undefined;
 
+  @HostBinding('attr.dir') dir = 'ltr';
+
   miningStatsObservable$: Observable<MiningStats>;
 
   constructor(

frontend/src/app/components/transaction/transaction.component.html

@@ -200,7 +200,7 @@
 
     <app-transactions-list #txList [transactions]="[tx]" [errorUnblinded]="errorUnblinded" [outputIndex]="outputIndex" [transactionPage]="true"></app-transactions-list>
 
-    <div class="title">
+    <div class="title text-left">
       <h2 i18n="transaction.details">Details</h2>
     </div>
     <div class="box">

frontend/src/styles.scss

@@ -698,6 +698,16 @@ th {
     margin-right: 0px;
     text-align: right;
   }
+
+  .nav-pills {
+    @extend .nav-pills;
+    display: inline-block;
+  }
+
+  .description {
+    direction: rtl;
+  }
+
   .dropdown {
     margin-right: 1rem;
     margin-left: 0;
@@ -712,12 +722,29 @@ th {
     left: 0px;
     right: auto;
   }
-  .fa-arrow-alt-circle-right {
+  .fa-circle-right {
-    @extend .fa-arrow-alt-circle-right;
+    @extend .fa-circle-right;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
   }
 
+  .btn.ml-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .pool-name {
+    @extend .pool-name;
+    padding-right: 10px;
+  }
+
+  .endpoint-container {
+    @extend .endpoint-container;
+    .section-header {
+      @extend .section-header;
+      text-align: left;
+    }
+  }
+
   .table td {
     text-align: right;
     .fiat {
@@ -809,6 +836,14 @@ th {
     }
   }
 
+  .full-container {
+    @extend .full-container;
+    .formRadioGroup {
+      @extend .formRadioGroup;
+      direction: ltr;
+    }
+  }
+
   .mempool-graph {
     @extend .mempool-graph;
     direction: ltr;