From 5658aaaea254fe4887ec59476b0ff636904293e3 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 12 Aug 2022 12:02:23 +0200
Subject: [PATCH] change(ui) - live list header

---
 .../LiveSessionList/LiveSessionList.tsx       | 47 ++++++++++---------
 .../SortOrderButton/SortOrderButton.tsx       |  4 +-
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index b6e64c57c..97866a270 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -14,6 +14,7 @@ import { capitalize } from 'App/utils';
 import LiveSessionReloadButton from 'Shared/LiveSessionReloadButton';
 import cn from 'classnames';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { numberWithCommas } from 'App/utils';
 
 const AUTOREFRESH_INTERVAL = 0.5 * 60 * 1000;
 const PER_PAGE = 10;
@@ -83,33 +84,33 @@ function LiveSessionList(props: Props) {
 
     return (
         <div>
-            <div className="flex mb-6 justify-between items-end">
-                <div className="flex items-baseline">
-                    <h3 className="text-2xl capitalize">
-                        <span>Live Sessions</span>
-                        <span className="ml-2 font-normal color-gray-medium">{total}</span>
-                    </h3>
+            <div className="bg-white p-3 rounded border">
+                <div className="flex mb-6 justify-between items-center">
+                    <div className="flex items-baseline">
+                        <h3 className="text-2xl capitalize">
+                            <span>Live Sessions</span>
+                            <span className="ml-2 font-normal color-gray-medium">{numberWithCommas(total)}</span>
+                        </h3>
 
-                    <LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
-                </div>
-                <div className="flex items-center">
-                    <div className="flex items-center ml-6 mr-4">
-                        <span className="mr-2 color-gray-medium">Sort By</span>
-                        <div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
-                            <Select
-                                plain
-                                right
-                                options={sortOptions}
-                                onChange={onSortChange}
-                                value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
-                            />
-                            <div className="mx-2" />
-                            <SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
+                        <LiveSessionReloadButton onClick={() => props.applyFilter({ ...filter })} />
+                    </div>
+                    <div className="flex items-center">
+                        <div className="flex items-center ml-6">
+                            <span className="mr-2 color-gray-medium">Sort By</span>
+                            <div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
+                                <Select
+                                    plain
+                                    right
+                                    options={sortOptions}
+                                    onChange={onSortChange}
+                                    value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
+                                />
+                                <div className="mx-2" />
+                                <SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div className="bg-white p-3 rounded border">
                 <Loader loading={loading}>
                     <NoContent
                         title={
diff --git a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
index 7d7901783..e693864fe 100644
--- a/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
+++ b/frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
@@ -14,7 +14,7 @@ export default React.memo(function SortOrderButton(props: Props) {
         <div className="flex items-center border">
             <Popup content={'Ascending'} >
                 <div
-                    className={cn("p-1 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue pointer-events-none' : isAscending })}
+                    className={cn("p-2 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue pointer-events-none' : isAscending })}
                     onClick={() => onChange('asc')}
                 >
                     <Icon name="arrow-up" size="14" color={isAscending ? 'teal' : 'gray-medium'} />
@@ -23,7 +23,7 @@ export default React.memo(function SortOrderButton(props: Props) {
 
             <Popup content={'Descending'} >
                 <div
-                    className={cn("p-1 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue pointer-events-none' : !isAscending })}
+                    className={cn("p-2 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue pointer-events-none' : !isAscending })}
                     onClick={() => onChange('desc')}
                 >
                     <Icon name="arrow-down" size="14" color={!isAscending ? 'teal' : 'gray-medium'} />