From 2fbe6754c4dfb9c98d50f3582ee3d577d296ea16 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 22 Aug 2022 12:38:19 +0800
Subject: [PATCH] Fixes based on comments

---
 .../components/grid/components/header/Header.tsx   |  4 +++-
 .../grid/components/header/StatusLabel.tsx         |  4 ++--
 .../Storage/StorageExplorer/FileExplorerHeader.js  | 14 +++++---------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 269b755b3ea..04e07d60420 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -114,7 +114,9 @@ const RowHeader: FC<RowHeaderProps> = ({ sorts, filters }) => {
   const onRowsDelete = () => {
     confirmAlert({
       title: 'Confirm to delete',
-      message: `Are you sure you want to delete the selected ${selectedRows.size} rows? This action cannot be undone.`,
+      message: `Are you sure you want to delete the selected ${selectedRows.size} row${
+        selectedRows.size > 1 ? 's' : ''
+      }? This action cannot be undone.`,
       confirmText: `Delete ${selectedRows.size} rows`,
       onAsyncConfirm: async () => {
         if (allRowsSelected) {
diff --git a/studio/components/grid/components/header/StatusLabel.tsx b/studio/components/grid/components/header/StatusLabel.tsx
index c38b4b7000e..7febd61713e 100644
--- a/studio/components/grid/components/header/StatusLabel.tsx
+++ b/studio/components/grid/components/header/StatusLabel.tsx
@@ -31,11 +31,11 @@ const StatusLabel: FC<Props> = ({}) => {
   }, [])
 
   return (
-    <div className="sb-grid-status-label">
+    <div className="sb-grid-status-label flex items-center justify-center">
       {status === 'saving' ? (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconLoader className="animate-spin mx-1" size={14} strokeWidth={2} />
+            <IconLoader className="animate-spin mx-1 text-scale-1100" size={14} strokeWidth={2} />
           </Tooltip.Trigger>
           <Tooltip.Content side="left">
             <Tooltip.Arrow className="radix-tooltip-arrow" />
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
index db3bbdbe4ba..04fc8859042 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
@@ -311,15 +311,11 @@ const FileExplorerHeader = ({
           <Dropdown
             overlay={[
               <Dropdown.RadioGroup key="sortOptions" value={sortBy} onChange={onChangeSortBy}>
-                <Dropdown.Radio value={STORAGE_SORT_BY.NAME}>Sort by name</Dropdown.Radio>
-                <Dropdown.Radio value={STORAGE_SORT_BY.CREATED_AT}>
-                  Sort by create time
-                </Dropdown.Radio>
-                <Dropdown.Radio value={STORAGE_SORT_BY.UPDATED_AT}>
-                  Sort by modified time
-                </Dropdown.Radio>
+                <Dropdown.Radio value={STORAGE_SORT_BY.NAME}>Name</Dropdown.Radio>
+                <Dropdown.Radio value={STORAGE_SORT_BY.CREATED_AT}>Time created</Dropdown.Radio>
+                <Dropdown.Radio value={STORAGE_SORT_BY.UPDATED_AT}>Time modified</Dropdown.Radio>
                 <Dropdown.Radio value={STORAGE_SORT_BY.LAST_ACCESSED_AT}>
-                  Sort by last accessed time
+                  Time last accessed
                 </Dropdown.Radio>
               </Dropdown.RadioGroup>,
             ]}
@@ -330,7 +326,7 @@ const FileExplorerHeader = ({
               type="text"
               disabled={breadcrumbs.length === 0}
             >
-              Sort
+              Sort by
             </Button>
           </Dropdown>
           <Dropdown