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 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss index c01d34663..636a2cb5a 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; @@ -30,8 +31,11 @@ --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; + --color-table-row-selected: rgba(0, 0, 0, 2%); } $font-family: 'SF UI Text', 'SF Pro Display', sans-serif; @@ -40,5 +44,8 @@ $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-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/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/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss new file mode 100644 index 000000000..589fa2f09 --- /dev/null +++ b/packages/console/src/components/CopyToClipboard/index.module.scss @@ -0,0 +1,22 @@ +@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); + cursor: default; + + .row { + display: flex; + align-items: center; + cursor: text; + + > 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..8adb8aff7 --- /dev/null +++ b/packages/console/src/components/CopyToClipboard/index.tsx @@ -0,0 +1,46 @@ +import React, { MouseEventHandler, SVGProps } from 'react'; + +import * as styles from './index.module.scss'; + +type Props = { + value: string; +}; + +const CopyIcon = (props: SVGProps) => ( + + + +); + +const CopyToClipboard = ({ value }: Props) => { + const copy: MouseEventHandler = () => { + // TO-DO: toast after finished + void navigator.clipboard.writeText(value); + }; + + return ( +
{ + event.stopPropagation(); + }} + > +
+ {value} + +
+
+ ); +}; + +export default CopyToClipboard; 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 ; +}; + +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..4a47faed5 --- /dev/null +++ b/packages/console/src/components/ItemPreview/index.module.scss @@ -0,0 +1,22 @@ +@use '@/scss/underscore' as _; + +.item { + display: flex; + align-items: center; + white-space: nowrap; + + > 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 ( +
+ {icon} +
+
{title}
+ {subtitle &&
{subtitle}
} +
+
+ ); +}; + +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..a4e35cb5f 100644 --- a/packages/console/src/pages/Applications/index.module.scss +++ b/packages/console/src/pages/Applications/index.module.scss @@ -1,4 +1,23 @@ +@use '@/scss/underscore' as _; + .headline { display: flex; justify-content: space-between; } + +.table { + margin-top: _.unit(6); + width: 100%; + + tbody tr { + cursor: pointer; + + &:hover { + background: var(--color-table-row-selected); + } + } +} + +.applicationName { + width: 360px; +} diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx index ca0b17e0d..2486694e3 100644 --- a/packages/console/src/pages/Applications/index.tsx +++ b/packages/console/src/pages/Applications/index.tsx @@ -3,6 +3,9 @@ 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'; import * as styles from './index.module.scss'; @@ -13,6 +16,28 @@ const Applications = () => {