From bbf6ec1c30cd7eeb841827d845cda368c2a783a7 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 27 Mar 2023 20:17:08 +0800
Subject: [PATCH] add icon for table

---
 .../layouts/TableEditorLayout/TableEditorMenu.tsx    | 12 ++++++++++--
 studio/public/img/icons/table-icon.svg               | 11 +++++++++++
 studio/public/img/icons/view-icon.svg                |  2 +-
 studio/styles/ui.scss                                | 12 ++++++++++--
 4 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 studio/public/img/icons/table-icon.svg

diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index 71c16d319bc..eb7379a5ebe 100644
--- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -390,7 +390,16 @@ const EntityListItem = ({
       hoverText={entity.comment ? entity.comment : entity.name}
       isActive={isActive}
       icon={
-        entity.type === ENTITY_TYPE.VIEW ? (
+        entity.type === ENTITY_TYPE.TABLE ? (
+          <SVG
+            className="table-icon"
+            src={`${BASE_PATH}/img/icons/table-icon.svg`}
+            style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
+            preProcessor={(code: any) =>
+              code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
+            }
+          />
+        ) : entity.type === ENTITY_TYPE.VIEW ? (
           <SVG
             className="view-icon"
             src={`${BASE_PATH}/img/icons/view-icon.svg`}
@@ -403,7 +412,6 @@ const EntityListItem = ({
           <div
             className={clsx(
               'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
-              entity.type === ENTITY_TYPE.TABLE && 'text-green-1000 bg-green-500',
               entity.type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
               entity.type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
               entity.type === ENTITY_TYPE.PARTITIONED_TABLE && 'text-scale-1100 bg-scale-800'
diff --git a/studio/public/img/icons/table-icon.svg b/studio/public/img/icons/table-icon.svg
new file mode 100644
index 00000000000..eab407087bd
--- /dev/null
+++ b/studio/public/img/icons/table-icon.svg
@@ -0,0 +1,11 @@
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(1.000000, 1.000000)">
+            <rect fill="#349969" stroke="#133929" stroke-width="2" x="0" y="0" width="18" height="18" rx="2"></rect>
+            <line x1="0" y1="6" x2="18" y2="6" stroke="#133929" stroke-width="2"></line>
+            <line x1="0" y1="12" x2="18" y2="12" stroke="#133929" stroke-width="2"></line>
+            <line x1="6" y1="18" x2="6" y2="6" stroke="#133929" stroke-width="2"></line>
+            <line x1="12" y1="18" x2="12" y2="6" stroke="#133929" stroke-width="2"></line>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/studio/public/img/icons/view-icon.svg b/studio/public/img/icons/view-icon.svg
index b485a3db441..be2dd326b89 100644
--- a/studio/public/img/icons/view-icon.svg
+++ b/studio/public/img/icons/view-icon.svg
@@ -1,5 +1,5 @@
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="none" stroke-width="1" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
         <g transform="translate(1.000000, 1.000000)">
             <rect stroke-width="2" x="0" y="0" width="18" height="18" rx="2"></rect>
             <path d="M3,9.36363636 C3,9.36363636 5.18181818,5 9,5 C12.8181818,5 15,9.36363636 15,9.36363636 C15,9.36363636 12.8181818,13.7272727 9,13.7272727 C5.18181818,13.7272727 3,9.36363636 3,9.36363636 Z" stroke-width="1.5"></path>
diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss
index df06b76b655..8903cb37368 100644
--- a/studio/styles/ui.scss
+++ b/studio/styles/ui.scss
@@ -417,9 +417,17 @@
 .view-icon {
   rect {
     @apply fill-blue-500 stroke-blue-500;
-    
   }
   path, circle {
-    @apply stroke-blue-900;
+    @apply stroke-blue-900 fill-blue-500;;
+  }
+}
+
+.table-icon {
+  rect {
+    @apply fill-green-1000 stroke-green-500;
+  }
+  line {
+    @apply stroke-green-500;
   }
 }
\ No newline at end of file