From b30c4311405f84663089364480dc9e96ace7a854 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Fri, 4 Mar 2022 13:10:39 +0800
Subject: [PATCH 1/3] feat(console): init console table

---
 .../src/assets/images/default-placeholder.svg | 18 +++++++++++
 .../components/AppContent/index.module.scss   |  4 +++
 .../src/components/Button/index.module.scss   |  1 +
 .../ImagePlaceholder/index.module.scss        |  4 +++
 .../src/components/ImagePlaceholder/index.tsx | 11 +++++++
 .../components/ItemPreview/index.module.scss  | 21 +++++++++++++
 .../src/components/ItemPreview/index.tsx      | 23 ++++++++++++++
 .../src/pages/Applications/index.module.scss  |  7 +++++
 .../console/src/pages/Applications/index.tsx  | 22 +++++++++++++
 packages/console/src/scss/_underscore.scss    |  6 ++++
 packages/console/src/scss/normalized.scss     | 31 +++++++++++++++++++
 11 files changed, 148 insertions(+)
 create mode 100644 packages/console/src/assets/images/default-placeholder.svg
 create mode 100644 packages/console/src/components/ImagePlaceholder/index.module.scss
 create mode 100644 packages/console/src/components/ImagePlaceholder/index.tsx
 create mode 100644 packages/console/src/components/ItemPreview/index.module.scss
 create mode 100644 packages/console/src/components/ItemPreview/index.tsx

diff --git a/packages/console/src/assets/images/default-placeholder.svg b/packages/console/src/assets/images/default-placeholder.svg
new file mode 100644
index 000000000..8e0489fcb
--- /dev/null
+++ b/packages/console/src/assets/images/default-placeholder.svg
@@ -0,0 +1,18 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.2" width="50" height="50" rx="8" fill="#77B255"/>
+<g clip-path="url(#clip0_1517_47630)">
+<path d="M40.1154 29.3335C40.1154 35.5468 33.3996 39.3335 25.1154 39.3335C16.8312 39.3335 10.1154 35.5468 10.1154 29.3335C10.1154 23.1202 16.8312 16.8335 25.1154 16.8335C33.3996 16.8335 40.1154 23.1202 40.1154 29.3335Z" fill="#C6E5B3"/>
+<path d="M36.5779 21.5632C37.7179 20.6465 38.4487 19.2423 38.4487 17.6665C38.4487 14.9057 36.2096 12.6665 33.4487 12.6665C31.0646 12.6665 29.0737 14.3365 28.5729 16.5707C27.4996 16.1682 26.3371 15.939 25.1154 15.939C23.8946 15.939 22.7312 16.1682 21.6579 16.5707C21.1571 14.3365 19.1662 12.6665 16.7821 12.6665C14.0212 12.6665 11.7821 14.9057 11.7821 17.6665C11.7821 19.2423 12.5129 20.6465 13.6529 21.5632C11.4487 23.7965 10.1154 26.5707 10.1154 29.3332C10.1154 35.5465 16.8312 30.1665 25.1154 30.1665C33.3996 30.1665 40.1154 35.5465 40.1154 29.3332C40.1154 26.5707 38.7821 23.7965 36.5779 21.5632Z" fill="#77B255"/>
+<path d="M16.3654 20.1668C17.9762 20.1668 19.2821 18.861 19.2821 17.2502C19.2821 15.6393 17.9762 14.3335 16.3654 14.3335C14.7546 14.3335 13.4487 15.6393 13.4487 17.2502C13.4487 18.861 14.7546 20.1668 16.3654 20.1668Z" fill="white"/>
+<path d="M16.3654 18.5C17.0557 18.5 17.6154 17.9404 17.6154 17.25C17.6154 16.5596 17.0557 16 16.3654 16C15.675 16 15.1154 16.5596 15.1154 17.25C15.1154 17.9404 15.675 18.5 16.3654 18.5Z" fill="#292F33"/>
+<path d="M33.8654 20.1668C35.4762 20.1668 36.7821 18.861 36.7821 17.2502C36.7821 15.6393 35.4762 14.3335 33.8654 14.3335C32.2546 14.3335 30.9487 15.6393 30.9487 17.2502C30.9487 18.861 32.2546 20.1668 33.8654 20.1668Z" fill="white"/>
+<path d="M33.8654 18.5C34.5557 18.5 35.1154 17.9404 35.1154 17.25C35.1154 16.5596 34.5557 16 33.8654 16C33.175 16 32.6154 16.5596 32.6154 17.25C32.6154 17.9404 33.175 18.5 33.8654 18.5Z" fill="#292F33"/>
+<path d="M21.7821 28.5002C22.2423 28.5002 22.6154 28.1271 22.6154 27.6668C22.6154 27.2066 22.2423 26.8335 21.7821 26.8335C21.3218 26.8335 20.9487 27.2066 20.9487 27.6668C20.9487 28.1271 21.3218 28.5002 21.7821 28.5002Z" fill="#5C913B"/>
+<path d="M28.4487 28.5002C28.909 28.5002 29.2821 28.1271 29.2821 27.6668C29.2821 27.2066 28.909 26.8335 28.4487 26.8335C27.9885 26.8335 27.6154 27.2066 27.6154 27.6668C27.6154 28.1271 27.9885 28.5002 28.4487 28.5002Z" fill="#5C913B"/>
+</g>
+<defs>
+<clipPath id="clip0_1517_47630">
+<rect width="30" height="30" fill="white" transform="translate(10.1154 11)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
index c01d34663..fdbf75cc6 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -30,8 +30,10 @@
   --color-error-90: #ffdad4;
   --color-inverse-on-surface: #eff1f1;
   --color-neutral-70: #a9acac;
+  --color-neutral-90: #e0e3e3;
   --color-on-secondary-container: #201c00;
   --color-component-caption: #747778;
+  --color-outline: #78767f;
 }
 
 $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
@@ -40,5 +42,7 @@ $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
   --font-title-medium: 500 16px/24px #{$font-family};
   --font-heading-small: 600 24px/32px #{$font-family};
   --font-body: normal 16px/22px #{$font-family};
+  --font-small-text: normal 12px/17px #{$font-family};
   --font-button: 500 14px/20px #{$font-family};
+  --font-subhead-2: 500 14px/20px #{$font-family};
 }
diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index e0da289d8..2c34cd488 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -6,6 +6,7 @@
   border-radius: _.unit(2);
   font: var(--font-button);
   transition: background 0.2s ease-in-out;
+  @include _.text-ellipsis;
 
   &:not(:disabled) {
     cursor: pointer;
diff --git a/packages/console/src/components/ImagePlaceholder/index.module.scss b/packages/console/src/components/ImagePlaceholder/index.module.scss
new file mode 100644
index 000000000..ff20b9445
--- /dev/null
+++ b/packages/console/src/components/ImagePlaceholder/index.module.scss
@@ -0,0 +1,4 @@
+.placeholder {
+  width: 50px;
+  height: 50px;
+}
diff --git a/packages/console/src/components/ImagePlaceholder/index.tsx b/packages/console/src/components/ImagePlaceholder/index.tsx
new file mode 100644
index 000000000..32628230b
--- /dev/null
+++ b/packages/console/src/components/ImagePlaceholder/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import defaultPlaceholder from '@/assets/images/default-placeholder.svg';
+
+import * as styles from './index.module.scss';
+
+const ImagePlaceholder = () => {
+  return <img src={defaultPlaceholder} className={styles.placeholder} />;
+};
+
+export default ImagePlaceholder;
diff --git a/packages/console/src/components/ItemPreview/index.module.scss b/packages/console/src/components/ItemPreview/index.module.scss
new file mode 100644
index 000000000..c0e0df2e3
--- /dev/null
+++ b/packages/console/src/components/ItemPreview/index.module.scss
@@ -0,0 +1,21 @@
+@use '@/scss/underscore' as _;
+
+.item {
+  display: flex;
+  align-items: center;
+
+  > div:not(:first-child) {
+    margin-left: _.unit(4);
+  }
+
+  .title {
+    font: var(--font-body);
+    color: var(--color-primary);
+  }
+
+  .subtitle {
+    margin-top: _.unit(0.5);
+    font: var(--font-small-text);
+    color: var(--color-outline);
+  }
+}
diff --git a/packages/console/src/components/ItemPreview/index.tsx b/packages/console/src/components/ItemPreview/index.tsx
new file mode 100644
index 000000000..e45186867
--- /dev/null
+++ b/packages/console/src/components/ItemPreview/index.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  title: string;
+  subtitle?: string;
+  icon?: ReactNode;
+};
+
+const ItemPreview = ({ title, subtitle, icon }: Props) => {
+  return (
+    <div className={styles.item}>
+      {icon}
+      <div>
+        <div className={styles.title}>{title}</div>
+        {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default ItemPreview;
diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss
index 1a2f34822..ec0222efc 100644
--- a/packages/console/src/pages/Applications/index.module.scss
+++ b/packages/console/src/pages/Applications/index.module.scss
@@ -1,4 +1,11 @@
+@use '@/scss/underscore' as _;
+
 .headline {
   display: flex;
   justify-content: space-between;
 }
+
+.table {
+  margin-top: _.unit(6);
+  width: 100%;
+}
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index ca0b17e0d..bdf1a86c2 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -3,6 +3,8 @@ import React from 'react';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
+import ImagePlaceholder from '@/components/ImagePlaceholder';
+import ItemPreview from '@/components/ItemPreview';
 
 import * as styles from './index.module.scss';
 
@@ -13,6 +15,26 @@ const Applications = () => {
         <CardTitle title="applications.title" subtitle="applications.subtitle" />
         <Button disabled title="admin_console.applications.create" />
       </div>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <td>Application Name</td>
+            <td>Client ID</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <ItemPreview
+                title="Default App"
+                subtitle="Single Page Application"
+                icon={<ImagePlaceholder />}
+              />
+            </td>
+            <td>RUMatENw0rFWO5aGbMI8tY2Qol50eOg3</td>
+          </tr>
+        </tbody>
+      </table>
     </Card>
   );
 };
diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss
index 8f5c5b957..c0aed78b1 100644
--- a/packages/console/src/scss/_underscore.scss
+++ b/packages/console/src/scss/_underscore.scss
@@ -8,3 +8,9 @@
   align-items: center;
   justify-content: center;
 }
+
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index d79cd5f84..810f93755 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -1,3 +1,5 @@
+@use '@/scss/underscore' as _;
+
 body {
   margin: 0;
   padding: 0;
@@ -15,3 +17,32 @@ input {
   border: none;
   outline: none;
 }
+
+table {
+  border: 1px solid var(--color-neutral-90);
+  border-radius: _.unit(2);
+  border-spacing: 0;
+
+  thead,
+  tbody {
+    td {
+      padding: _.unit(3) _.unit(4);
+
+      &:first-child,
+      &:last-child {
+        padding: _.unit(3) _.unit(8);
+      }
+    }
+  }
+
+  thead {
+    font: var(--font-subhead-2);
+    color: var(--color-component-caption);
+  }
+
+  tbody {
+    td {
+      border-top: 1px solid var(--color-neutral-90);
+    }
+  }
+}

From f31a6e0db88a5979d5f619fd436579ad090f5c3c Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Fri, 4 Mar 2022 13:34:35 +0800
Subject: [PATCH 2/3] feat(console): copy to clipboard

---
 .../components/AppContent/index.module.scss   |  2 +
 .../CopyToClipboard/index.module.scss         | 20 +++++++++
 .../src/components/CopyToClipboard/index.tsx  | 41 +++++++++++++++++++
 .../components/ItemPreview/index.module.scss  |  1 +
 .../src/pages/Applications/index.module.scss  |  4 ++
 .../console/src/pages/Applications/index.tsx  |  7 +++-
 packages/console/src/scss/normalized.scss     | 16 ++++----
 7 files changed, 82 insertions(+), 9 deletions(-)
 create mode 100644 packages/console/src/components/CopyToClipboard/index.module.scss
 create mode 100644 packages/console/src/components/CopyToClipboard/index.tsx

diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
index fdbf75cc6..65dfde23f 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -10,6 +10,7 @@
 
 .light {
   --color-card-background: #fff;
+  --color-on-surface: #eff1f1;
   --color-on-surface-variant: #47464e;
   --color-primary: #4f37f9;
   --color-primary-30: #3500e3;
@@ -43,6 +44,7 @@ $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
   --font-heading-small: 600 24px/32px #{$font-family};
   --font-body: normal 16px/22px #{$font-family};
   --font-small-text: normal 12px/17px #{$font-family};
+  --font-caption: normal 14px/17px #{$font-family};
   --font-button: 500 14px/20px #{$font-family};
   --font-subhead-2: 500 14px/20px #{$font-family};
 }
diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
new file mode 100644
index 000000000..dd5c505e6
--- /dev/null
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -0,0 +1,20 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: inline-block;
+  padding: _.unit(3);
+  border-radius: _.unit(2);
+  background: var(--color-on-surface);
+  color: var(--color-on-secondary-container);
+  font: var(--font-caption);
+
+  .row {
+    display: flex;
+    align-items: center;
+
+    > svg {
+      margin-left: _.unit(3);
+      cursor: pointer;
+    }
+  }
+}
diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx
new file mode 100644
index 000000000..51d8febb5
--- /dev/null
+++ b/packages/console/src/components/CopyToClipboard/index.tsx
@@ -0,0 +1,41 @@
+import React, { SVGProps } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  value: string;
+};
+
+const CopyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.6667 18.3332H3.33335C2.88675 18.3487 2.45375 18.1781 2.13776 17.8621C1.82177 17.5461 1.65116 17.1131 1.66668 16.6665V8.33317C1.65116 7.88656 1.82177 7.45356 2.13776 7.13758C2.45375 6.82159 2.88675 6.65098 3.33335 6.6665H6.66668V3.33317C6.65117 2.88656 6.82177 2.45356 7.13776 2.13757C7.45375 1.82159 7.88675 1.65098 8.33335 1.6665H16.6667C17.1133 1.65098 17.5463 1.82159 17.8623 2.13757C18.1783 2.45356 18.3489 2.88656 18.3334 3.33317V11.6665C18.3486 12.113 18.1779 12.5459 17.862 12.8618C17.5461 13.1778 17.1132 13.3484 16.6667 13.3332H13.3334V16.6665C13.3486 17.113 13.1779 17.5459 12.862 17.8618C12.5461 18.1778 12.1132 18.3484 11.6667 18.3332ZM3.33335 8.33317V16.6665H11.6667V13.3332H8.33335C7.88682 13.3484 7.45396 13.1778 7.13803 12.8618C6.8221 12.5459 6.65141 12.113 6.66668 11.6665V8.33317H3.33335ZM8.33335 3.33317V11.6665H16.6667V3.33317H8.33335Z"
+      fill="#747778"
+    />
+  </svg>
+);
+
+const CopyToClipboard = ({ value }: Props) => {
+  const copy = () => {
+    // TO-DO: toast after finished
+    void navigator.clipboard.writeText(value);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.row}>
+        {value}
+        <CopyIcon onClick={copy} />
+      </div>
+    </div>
+  );
+};
+
+export default CopyToClipboard;
diff --git a/packages/console/src/components/ItemPreview/index.module.scss b/packages/console/src/components/ItemPreview/index.module.scss
index c0e0df2e3..4a47faed5 100644
--- a/packages/console/src/components/ItemPreview/index.module.scss
+++ b/packages/console/src/components/ItemPreview/index.module.scss
@@ -3,6 +3,7 @@
 .item {
   display: flex;
   align-items: center;
+  white-space: nowrap;
 
   > div:not(:first-child) {
     margin-left: _.unit(4);
diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss
index ec0222efc..d5eea084d 100644
--- a/packages/console/src/pages/Applications/index.module.scss
+++ b/packages/console/src/pages/Applications/index.module.scss
@@ -9,3 +9,7 @@
   margin-top: _.unit(6);
   width: 100%;
 }
+
+.applicationName {
+  width: 360px;
+}
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index bdf1a86c2..2486694e3 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
+import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 
@@ -18,7 +19,7 @@ const Applications = () => {
       <table className={styles.table}>
         <thead>
           <tr>
-            <td>Application Name</td>
+            <td className={styles.applicationName}>Application Name</td>
             <td>Client ID</td>
           </tr>
         </thead>
@@ -31,7 +32,9 @@ const Applications = () => {
                 icon={<ImagePlaceholder />}
               />
             </td>
-            <td>RUMatENw0rFWO5aGbMI8tY2Qol50eOg3</td>
+            <td>
+              <CopyToClipboard value="RUMatENw0rFWO5aGbMI8tY2Qol50eOg3" />
+            </td>
           </tr>
         </tbody>
       </table>
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index 810f93755..6f0f5fb93 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -23,9 +23,10 @@ table {
   border-radius: _.unit(2);
   border-spacing: 0;
 
-  thead,
-  tbody {
+  thead {
     td {
+      font: var(--font-subhead-2);
+      color: var(--color-component-caption);
       padding: _.unit(3) _.unit(4);
 
       &:first-child,
@@ -35,14 +36,15 @@ table {
     }
   }
 
-  thead {
-    font: var(--font-subhead-2);
-    color: var(--color-component-caption);
-  }
-
   tbody {
     td {
       border-top: 1px solid var(--color-neutral-90);
+      padding: _.unit(5) _.unit(4);
+
+      &:first-child,
+      &:last-child {
+        padding: _.unit(5) _.unit(8);
+      }
     }
   }
 }

From 5b0caa5d972c96da04b3d635da631a22ce33f10b Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Fri, 4 Mar 2022 13:45:34 +0800
Subject: [PATCH 3/3] feat(console): add table row hover effect

---
 .../src/components/AppContent/index.module.scss       |  1 +
 .../src/components/CopyToClipboard/index.module.scss  |  2 ++
 .../console/src/components/CopyToClipboard/index.tsx  | 11 ++++++++---
 .../console/src/pages/Applications/index.module.scss  |  8 ++++++++
 packages/console/src/scss/normalized.scss             |  1 +
 5 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
index 65dfde23f..636a2cb5a 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -35,6 +35,7 @@
   --color-on-secondary-container: #201c00;
   --color-component-caption: #747778;
   --color-outline: #78767f;
+  --color-table-row-selected: rgba(0, 0, 0, 2%);
 }
 
 $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
index dd5c505e6..589fa2f09 100644
--- a/packages/console/src/components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -7,10 +7,12 @@
   background: var(--color-on-surface);
   color: var(--color-on-secondary-container);
   font: var(--font-caption);
+  cursor: default;
 
   .row {
     display: flex;
     align-items: center;
+    cursor: text;
 
     > svg {
       margin-left: _.unit(3);
diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx
index 51d8febb5..8adb8aff7 100644
--- a/packages/console/src/components/CopyToClipboard/index.tsx
+++ b/packages/console/src/components/CopyToClipboard/index.tsx
@@ -1,4 +1,4 @@
-import React, { SVGProps } from 'react';
+import React, { MouseEventHandler, SVGProps } from 'react';
 
 import * as styles from './index.module.scss';
 
@@ -23,13 +23,18 @@ const CopyIcon = (props: SVGProps<SVGSVGElement>) => (
 );
 
 const CopyToClipboard = ({ value }: Props) => {
-  const copy = () => {
+  const copy: MouseEventHandler<SVGSVGElement> = () => {
     // TO-DO: toast after finished
     void navigator.clipboard.writeText(value);
   };
 
   return (
-    <div className={styles.container}>
+    <div
+      className={styles.container}
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
+    >
       <div className={styles.row}>
         {value}
         <CopyIcon onClick={copy} />
diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss
index d5eea084d..a4e35cb5f 100644
--- a/packages/console/src/pages/Applications/index.module.scss
+++ b/packages/console/src/pages/Applications/index.module.scss
@@ -8,6 +8,14 @@
 .table {
   margin-top: _.unit(6);
   width: 100%;
+
+  tbody tr {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-table-row-selected);
+    }
+  }
 }
 
 .applicationName {
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index 6f0f5fb93..2ccedf6e4 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -22,6 +22,7 @@ table {
   border: 1px solid var(--color-neutral-90);
   border-radius: _.unit(2);
   border-spacing: 0;
+  overflow: hidden;
 
   thead {
     td {