refactor(UI): clean up portal pages (#29018)

* refactor: list view for portal pages

* refactor: add align center class

* refactor: change footer btn class(primary)

* refactor: add order style page

* refactor: import order page in website

* refactor: remove table elements

* fix: preview image height

* fix: make string translatable

* refactor: change font variables

* refactor: order preview bg white

* refactor: center align items

* fix: breadcrumb padding

* refactor: make preview image rounded

* refactor: add condition for image container

* refactor: change alignment for mobile view

* fix: make footer button secondary

* refactor: clean code

* refactor: code indentantion

* refactor: remove space

* fix: Payment section cleanup

Co-authored-by: Summayya <frappe@Summayyas-MacBook-Air.local>
Co-authored-by: Marica <maricadsouza221197@gmail.com>
Co-authored-by: Deepesh Garg <deepeshgarg6@gmail.com>
diff --git a/erpnext/templates/includes/transaction_row.html b/erpnext/templates/includes/transaction_row.html
index 3cfb8d8..72d498c 100644
--- a/erpnext/templates/includes/transaction_row.html
+++ b/erpnext/templates/includes/transaction_row.html
@@ -1,20 +1,22 @@
 <div class="web-list-item transaction-list-item">
-	<div class="row">
+	<div class="row align-items-center">
 		<div class="col-sm-4">
-			<span class="indicator small {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }}">
-			{{ doc.name }}</span>
+			<span class="list-item-name font-weight-bold">{{ doc.name }}</span>
 			<div class="small text-muted transaction-time"
 				title="{{ frappe.utils.format_datetime(doc.modified, "medium") }}">
 				{{ frappe.utils.global_date_format(doc.modified) }}
 			</div>
 		</div>
-		<div class="col-sm-5">
+		<div class="col-sm-3">
+			<span class="indicator-pill {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }} list-item-status">{{doc.status}}</span>
+		</div>
+		<div class="col-sm-2">
 			<div class="small text-muted items-preview ellipsis ellipsis-width">
 				{{ doc.items_preview }}
 			</div>
 		</div>
 		{% if doc.get('grand_total') %}
-			<div class="col-sm-3 text-right bold">
+			<div class="col-sm-3 text-right font-weight-bold item-total">
 				{{ doc.get_formatted("grand_total") }}
 			</div>
 		{% endif %}