From 7850c51b6261dd528f14133124979d51e906686b Mon Sep 17 00:00:00 2001 From: Sara Bee <855595+doeg@users.noreply.github.com> Date: Fri, 22 Jan 2021 17:55:06 -0500 Subject: [PATCH 1/2] Add Button + Icon components Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com> --- web/vtadmin/package-lock.json | 10 ++ web/vtadmin/package.json | 2 + web/vtadmin/src/components/Button.module.scss | 77 +++++++++++++ web/vtadmin/src/components/Button.tsx | 36 ++++++ web/vtadmin/src/components/Icon.tsx | 82 +++++++++++++ .../src/components/routes/Debug.module.scss | 24 ++++ web/vtadmin/src/components/routes/Debug.tsx | 108 ++++++++++++++++++ web/vtadmin/src/hooks/useTheme.ts | 26 +++++ web/vtadmin/src/icons/add.svg | 3 + web/vtadmin/src/icons/alertFail.svg | 3 + web/vtadmin/src/icons/archive.svg | 3 + web/vtadmin/src/icons/archiveAuto.svg | 3 + web/vtadmin/src/icons/archiveForever.svg | 3 + web/vtadmin/src/icons/archiveRestore.svg | 3 + web/vtadmin/src/icons/arrowDown.svg | 3 + web/vtadmin/src/icons/arrowLeft.svg | 3 + web/vtadmin/src/icons/arrowRight.svg | 3 + web/vtadmin/src/icons/arrowUp.svg | 3 + web/vtadmin/src/icons/avatar.svg | 3 + web/vtadmin/src/icons/boxChecked.svg | 3 + web/vtadmin/src/icons/boxEmpty.svg | 3 + web/vtadmin/src/icons/boxIndeterminate.svg | 3 + web/vtadmin/src/icons/bug.svg | 3 + web/vtadmin/src/icons/chart.svg | 3 + web/vtadmin/src/icons/checkSuccess.svg | 3 + web/vtadmin/src/icons/chevronDown.svg | 3 + web/vtadmin/src/icons/chevronLeft.svg | 3 + web/vtadmin/src/icons/chevronRight.svg | 3 + web/vtadmin/src/icons/chevronUp.svg | 3 + web/vtadmin/src/icons/circleAdd.svg | 3 + web/vtadmin/src/icons/circleDelete.svg | 3 + web/vtadmin/src/icons/circleRemove.svg | 3 + web/vtadmin/src/icons/circleWorkflow.svg | 4 + web/vtadmin/src/icons/clear.svg | 3 + web/vtadmin/src/icons/code.svg | 3 + web/vtadmin/src/icons/copy.svg | 3 + web/vtadmin/src/icons/delete.svg | 3 + web/vtadmin/src/icons/document.svg | 3 + web/vtadmin/src/icons/download.svg | 3 + web/vtadmin/src/icons/dropDown.svg | 3 + web/vtadmin/src/icons/dropUp.svg | 3 + web/vtadmin/src/icons/ellipsis.svg | 3 + web/vtadmin/src/icons/gear.svg | 3 + web/vtadmin/src/icons/history.svg | 3 + web/vtadmin/src/icons/index.tsx | 59 ++++++++++ web/vtadmin/src/icons/info.svg | 3 + web/vtadmin/src/icons/keyG.svg | 3 + web/vtadmin/src/icons/keyK.svg | 3 + web/vtadmin/src/icons/keyR.svg | 3 + web/vtadmin/src/icons/keyS.svg | 3 + web/vtadmin/src/icons/keyT.svg | 3 + web/vtadmin/src/icons/keyboard.svg | 3 + web/vtadmin/src/icons/link.svg | 5 + web/vtadmin/src/icons/pageFirst.svg | 3 + web/vtadmin/src/icons/pageLast.svg | 3 + web/vtadmin/src/icons/pause.svg | 3 + web/vtadmin/src/icons/question.svg | 4 + web/vtadmin/src/icons/radioEmpty.svg | 3 + web/vtadmin/src/icons/radioSelected.svg | 4 + web/vtadmin/src/icons/refresh.svg | 3 + web/vtadmin/src/icons/remove.svg | 3 + web/vtadmin/src/icons/retry.svg | 3 + web/vtadmin/src/icons/runQuery.svg | 7 ++ web/vtadmin/src/icons/search.svg | 3 + web/vtadmin/src/icons/sort.svg | 3 + web/vtadmin/src/icons/spinnerLoading.svg | 3 + web/vtadmin/src/icons/start.svg | 3 + web/vtadmin/src/icons/wrench.svg | 3 + web/vtadmin/src/index.css | 6 + 69 files changed, 616 insertions(+) create mode 100644 web/vtadmin/src/components/Button.module.scss create mode 100644 web/vtadmin/src/components/Button.tsx create mode 100644 web/vtadmin/src/components/Icon.tsx create mode 100644 web/vtadmin/src/components/routes/Debug.module.scss create mode 100644 web/vtadmin/src/hooks/useTheme.ts create mode 100644 web/vtadmin/src/icons/add.svg create mode 100644 web/vtadmin/src/icons/alertFail.svg create mode 100644 web/vtadmin/src/icons/archive.svg create mode 100644 web/vtadmin/src/icons/archiveAuto.svg create mode 100644 web/vtadmin/src/icons/archiveForever.svg create mode 100644 web/vtadmin/src/icons/archiveRestore.svg create mode 100644 web/vtadmin/src/icons/arrowDown.svg create mode 100644 web/vtadmin/src/icons/arrowLeft.svg create mode 100644 web/vtadmin/src/icons/arrowRight.svg create mode 100644 web/vtadmin/src/icons/arrowUp.svg create mode 100644 web/vtadmin/src/icons/avatar.svg create mode 100644 web/vtadmin/src/icons/boxChecked.svg create mode 100644 web/vtadmin/src/icons/boxEmpty.svg create mode 100644 web/vtadmin/src/icons/boxIndeterminate.svg create mode 100644 web/vtadmin/src/icons/bug.svg create mode 100644 web/vtadmin/src/icons/chart.svg create mode 100644 web/vtadmin/src/icons/checkSuccess.svg create mode 100644 web/vtadmin/src/icons/chevronDown.svg create mode 100644 web/vtadmin/src/icons/chevronLeft.svg create mode 100644 web/vtadmin/src/icons/chevronRight.svg create mode 100644 web/vtadmin/src/icons/chevronUp.svg create mode 100644 web/vtadmin/src/icons/circleAdd.svg create mode 100644 web/vtadmin/src/icons/circleDelete.svg create mode 100644 web/vtadmin/src/icons/circleRemove.svg create mode 100644 web/vtadmin/src/icons/circleWorkflow.svg create mode 100644 web/vtadmin/src/icons/clear.svg create mode 100644 web/vtadmin/src/icons/code.svg create mode 100644 web/vtadmin/src/icons/copy.svg create mode 100644 web/vtadmin/src/icons/delete.svg create mode 100644 web/vtadmin/src/icons/document.svg create mode 100644 web/vtadmin/src/icons/download.svg create mode 100644 web/vtadmin/src/icons/dropDown.svg create mode 100644 web/vtadmin/src/icons/dropUp.svg create mode 100644 web/vtadmin/src/icons/ellipsis.svg create mode 100644 web/vtadmin/src/icons/gear.svg create mode 100644 web/vtadmin/src/icons/history.svg create mode 100644 web/vtadmin/src/icons/index.tsx create mode 100644 web/vtadmin/src/icons/info.svg create mode 100644 web/vtadmin/src/icons/keyG.svg create mode 100644 web/vtadmin/src/icons/keyK.svg create mode 100644 web/vtadmin/src/icons/keyR.svg create mode 100644 web/vtadmin/src/icons/keyS.svg create mode 100644 web/vtadmin/src/icons/keyT.svg create mode 100644 web/vtadmin/src/icons/keyboard.svg create mode 100644 web/vtadmin/src/icons/link.svg create mode 100644 web/vtadmin/src/icons/pageFirst.svg create mode 100644 web/vtadmin/src/icons/pageLast.svg create mode 100644 web/vtadmin/src/icons/pause.svg create mode 100644 web/vtadmin/src/icons/question.svg create mode 100644 web/vtadmin/src/icons/radioEmpty.svg create mode 100644 web/vtadmin/src/icons/radioSelected.svg create mode 100644 web/vtadmin/src/icons/refresh.svg create mode 100644 web/vtadmin/src/icons/remove.svg create mode 100644 web/vtadmin/src/icons/retry.svg create mode 100644 web/vtadmin/src/icons/runQuery.svg create mode 100644 web/vtadmin/src/icons/search.svg create mode 100644 web/vtadmin/src/icons/sort.svg create mode 100644 web/vtadmin/src/icons/spinnerLoading.svg create mode 100644 web/vtadmin/src/icons/start.svg create mode 100644 web/vtadmin/src/icons/wrench.svg diff --git a/web/vtadmin/package-lock.json b/web/vtadmin/package-lock.json index b3dd549bb9e..430fd8c89c0 100644 --- a/web/vtadmin/package-lock.json +++ b/web/vtadmin/package-lock.json @@ -2287,6 +2287,11 @@ "@babel/types": "^7.3.0" } }, + "@types/classnames": { + "version": "2.2.11", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz", + "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==" + }, "@types/cookie": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.0.tgz", @@ -4253,6 +4258,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", diff --git a/web/vtadmin/package.json b/web/vtadmin/package.json index db9dd8e6c9e..178e0cfc192 100644 --- a/web/vtadmin/package.json +++ b/web/vtadmin/package.json @@ -10,11 +10,13 @@ "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.6.0", + "@types/classnames": "^2.2.11", "@types/jest": "^26.0.19", "@types/node": "^12.19.9", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "@types/react-router-dom": "^5.1.7", + "classnames": "^2.2.6", "node-sass": "^4.14.1", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/web/vtadmin/src/components/Button.module.scss b/web/vtadmin/src/components/Button.module.scss new file mode 100644 index 00000000000..5468a942234 --- /dev/null +++ b/web/vtadmin/src/components/Button.module.scss @@ -0,0 +1,77 @@ +.button { + background: var(--colorPrimary); + border: solid 2px var(--colorPrimary); + border-radius: 6px; + color: var(--textColorInverted); + cursor: pointer; + font-family: var(--fontFamilyPrimary); + font-size: var(--fontSizeDefault); + font-weight: 500; + line-height: var(--lineHeightBody); + outline: none; + padding: 8px 11px 9px; + user-select: none; + transition: all 0.1s ease-in-out; + white-space: nowrap; + width: min-content; + + .icon { + display: inline-block; + fill: var(--textColorInverted); + height: 1.2em; + margin-right: 0.4em; + vertical-align: text-bottom; + width: 1.2em; + } +} + +.button:active { + background: var(--colorPrimary200); + border-color: var(--colorPrimary200); + box-shadow: none !important; +} + +.button:disabled { + background: var(--colorDisabled); + border-color: var(--colorDisabled); + cursor: not-allowed; +} + +.button:not(:disabled):hover, +.button:not(:disabled):focus { + box-shadow: var(--boxShadowHover); +} + +.button.secondary { + background: transparent; + border: solid 2px var(--colorPrimary); + color: var(--colorPrimary); + + .icon { + fill: var(--colorPrimary); + } + + &:active { + background: var(--backgroundSecondaryHighlight); + } + + &:disabled { + background: transparent; + border-color: var(--colorDisabled); + color: var(--colorDisabled); + } + + &:disabled .icon { + fill: var(--colorDisabled); + } +} + +.button.sizeLarge { + font-size: var(--fontSizeLarge); + padding: 13px 15px; +} + +.button.sizeSmall { + font-size: var(--fontSizeSmall); + padding: 4px 6px; +} diff --git a/web/vtadmin/src/components/Button.tsx b/web/vtadmin/src/components/Button.tsx new file mode 100644 index 00000000000..643fc99bcd2 --- /dev/null +++ b/web/vtadmin/src/components/Button.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import cx from 'classnames'; + +import style from './Button.module.scss'; +import { Icon, Icons } from './Icon'; + +interface Props extends React.DetailedHTMLProps, HTMLButtonElement> { + className?: string; + icon?: Icons; + secondary?: boolean; + size?: 'large' | 'medium' | 'small'; +} + +export const Button: React.FunctionComponent = ({ + children, + className, + icon, + secondary, + size = 'medium', + type = 'button', + ...props +}) => { + const buttonClass = cx(className, style.button, { + [style.secondary]: !!secondary, + [style.sizeLarge]: size === 'large', + [style.sizeSmall]: size === 'small', + [style.withIcon]: !!icon, + }); + + return ( + + ); +}; diff --git a/web/vtadmin/src/components/Icon.tsx b/web/vtadmin/src/components/Icon.tsx new file mode 100644 index 00000000000..9ddef9aca7b --- /dev/null +++ b/web/vtadmin/src/components/Icon.tsx @@ -0,0 +1,82 @@ +import * as icons from '../icons'; + +interface Props { + className?: string; + icon: Icons; +} + +// All icons are from the VTAdmin Figma icon library: +// https://www.figma.com/file/By3SoETBRHpOirv3Ctfxdq/Designs +export const Icon = ({ icon, ...props }: Props) => { + const componentName = icon.charAt(0).toUpperCase() + icon.slice(1); + + const IconComponent = (icons as any)[componentName]; + if (!IconComponent) { + console.warn(`Invalid icon: ${icon}`); + return null; + } + + return ; +}; + +export enum Icons { + add = 'add', + alertFail = 'alertFail', + archive = 'archive', + archiveAuto = 'archiveAuto', + archiveForever = 'archiveForever', + archiveRestore = 'archiveRestore', + arrowDown = 'arrowDown', + arrowLeft = 'arrowLeft', + arrowRight = 'arrowRight', + arrowUp = 'arrowUp', + avatar = 'avatar', + boxChecked = 'boxChecked', + boxEmpty = 'boxEmpty', + boxIndeterminate = 'boxIndeterminate', + bug = 'bug', + chart = 'chart', + checkSuccess = 'checkSuccess', + chevronDown = 'chevronDown', + chevronLeft = 'chevronLeft', + chevronRight = 'chevronRight', + chevronUp = 'chevronUp', + circleAdd = 'circleAdd', + circleDelete = 'circleDelete', + circleRemove = 'circleRemove', + circleWorkflow = 'circleWorkflow', + clear = 'clear', + code = 'code', + copy = 'copy', + delete = 'delete', + document = 'document', + download = 'download', + dropDown = 'dropDown', + dropUp = 'dropUp', + ellipsis = 'ellipsis', + gear = 'gear', + history = 'history', + info = 'info', + keyG = 'keyG', + keyK = 'keyK', + keyR = 'keyR', + keyS = 'keyS', + keyT = 'keyT', + keyboard = 'keyboard', + link = 'link', + pageFirst = 'pageFirst', + pageLast = 'pageLast', + pause = 'pause', + question = 'question', + radioEmpty = 'radioEmpty', + radioSelected = 'radioSelected', + refresh = 'refresh', + remove = 'remove', + retry = 'retry', + runQuery = 'runQuery', + search = 'search', + sort = 'sort', + spinnerLoading = 'spinnerLoading', + start = 'start', + wrench = 'wrench', +} diff --git a/web/vtadmin/src/components/routes/Debug.module.scss b/web/vtadmin/src/components/routes/Debug.module.scss new file mode 100644 index 00000000000..7bea9230716 --- /dev/null +++ b/web/vtadmin/src/components/routes/Debug.module.scss @@ -0,0 +1,24 @@ +.buttonContainer { + column-gap: 16px; + display: grid; + grid-template-columns: repeat(4, min-content); + row-gap: 24px; +} + +.iconContainer { + column-gap: 12px; + display: grid; + grid-template-columns: repeat(12, min-content); + row-gap: 12px; +} + +.icon { + fill: var(--colorPrimary); + padding: 10px; + transition: fill 0.1s ease-in-out; + + &:hover { + background: var(--backgroundSecondaryHighlight); + fill: var(--colorPrimary200); + } +} diff --git a/web/vtadmin/src/components/routes/Debug.tsx b/web/vtadmin/src/components/routes/Debug.tsx index 20ed185c72e..9d8a6e4dde5 100644 --- a/web/vtadmin/src/components/routes/Debug.tsx +++ b/web/vtadmin/src/components/routes/Debug.tsx @@ -1,12 +1,120 @@ import * as React from 'react'; +import { Theme, useTheme } from '../../hooks/useTheme'; +import { Button } from '../Button'; +import { Icon, Icons } from '../Icon'; +import style from './Debug.module.scss'; export const Debug = () => { + const [theme, setTheme] = useTheme(); + return (

Debugging βœ¨πŸ¦‹πŸ›πŸπŸžπŸœπŸ•·πŸ•ΈπŸ¦‚πŸ¦—πŸ¦Ÿβœ¨

Environment variables

{JSON.stringify(process.env, null, 2)}
+ +

Style Guide

+ +

Theme

+
+ {Object.values(Theme).map((t) => ( +
+ +
+ ))} +
+ +

Icons

+
+ {Object.values(Icons).map((i) => ( + + ))} +
+ +

Buttons

+
+ {/* Large */} + + + + + + + + + + {/* Medium */} + + + + + + + + + + {/* Small */} + + + + + + + + +
); }; diff --git a/web/vtadmin/src/hooks/useTheme.ts b/web/vtadmin/src/hooks/useTheme.ts new file mode 100644 index 00000000000..212a2c57c0c --- /dev/null +++ b/web/vtadmin/src/hooks/useTheme.ts @@ -0,0 +1,26 @@ +import { useState } from 'react'; + +export enum Theme { + dark = 'dark', + light = 'light', +} + +const DEFAULT_THEME: Theme = Theme.light; +const HTML_THEME_ATTR = 'data-vtadmin-theme'; + +// useTheme is a hook for using and setting the display theme. +// This particular implementation is super quick + dirty for the purposes +// of the Debug page. The :) correct implementation :) will be more robust, +// with persistence, system defaults, and night shift mode. +export const useTheme = (): [Theme, (t: Theme) => void] => { + const currentTheme = document.documentElement.getAttribute(HTML_THEME_ATTR); + const tidyTheme = currentTheme && currentTheme in Theme ? (currentTheme as Theme) : DEFAULT_THEME; + const [theme, setTheme] = useState(tidyTheme); + + const _setTheme = (nextTheme: Theme): void => { + document.documentElement.setAttribute(HTML_THEME_ATTR, nextTheme); + setTheme(nextTheme); + }; + + return [theme, _setTheme]; +}; diff --git a/web/vtadmin/src/icons/add.svg b/web/vtadmin/src/icons/add.svg new file mode 100644 index 00000000000..6cfaf8703d2 --- /dev/null +++ b/web/vtadmin/src/icons/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/alertFail.svg b/web/vtadmin/src/icons/alertFail.svg new file mode 100644 index 00000000000..34b0a759e12 --- /dev/null +++ b/web/vtadmin/src/icons/alertFail.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/archive.svg b/web/vtadmin/src/icons/archive.svg new file mode 100644 index 00000000000..254b65dc671 --- /dev/null +++ b/web/vtadmin/src/icons/archive.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/archiveAuto.svg b/web/vtadmin/src/icons/archiveAuto.svg new file mode 100644 index 00000000000..1fda8044d1a --- /dev/null +++ b/web/vtadmin/src/icons/archiveAuto.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/archiveForever.svg b/web/vtadmin/src/icons/archiveForever.svg new file mode 100644 index 00000000000..3032a5113f0 --- /dev/null +++ b/web/vtadmin/src/icons/archiveForever.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/archiveRestore.svg b/web/vtadmin/src/icons/archiveRestore.svg new file mode 100644 index 00000000000..977e25223e9 --- /dev/null +++ b/web/vtadmin/src/icons/archiveRestore.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/arrowDown.svg b/web/vtadmin/src/icons/arrowDown.svg new file mode 100644 index 00000000000..34eee04812c --- /dev/null +++ b/web/vtadmin/src/icons/arrowDown.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/arrowLeft.svg b/web/vtadmin/src/icons/arrowLeft.svg new file mode 100644 index 00000000000..f49c80605d5 --- /dev/null +++ b/web/vtadmin/src/icons/arrowLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/arrowRight.svg b/web/vtadmin/src/icons/arrowRight.svg new file mode 100644 index 00000000000..96db03e4af0 --- /dev/null +++ b/web/vtadmin/src/icons/arrowRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/arrowUp.svg b/web/vtadmin/src/icons/arrowUp.svg new file mode 100644 index 00000000000..f41e225a0df --- /dev/null +++ b/web/vtadmin/src/icons/arrowUp.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/avatar.svg b/web/vtadmin/src/icons/avatar.svg new file mode 100644 index 00000000000..6c07927d006 --- /dev/null +++ b/web/vtadmin/src/icons/avatar.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/boxChecked.svg b/web/vtadmin/src/icons/boxChecked.svg new file mode 100644 index 00000000000..51b1905958c --- /dev/null +++ b/web/vtadmin/src/icons/boxChecked.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/boxEmpty.svg b/web/vtadmin/src/icons/boxEmpty.svg new file mode 100644 index 00000000000..b5e95c2053e --- /dev/null +++ b/web/vtadmin/src/icons/boxEmpty.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/boxIndeterminate.svg b/web/vtadmin/src/icons/boxIndeterminate.svg new file mode 100644 index 00000000000..37f0709ff6e --- /dev/null +++ b/web/vtadmin/src/icons/boxIndeterminate.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/bug.svg b/web/vtadmin/src/icons/bug.svg new file mode 100644 index 00000000000..bf78b51c611 --- /dev/null +++ b/web/vtadmin/src/icons/bug.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/chart.svg b/web/vtadmin/src/icons/chart.svg new file mode 100644 index 00000000000..3e0153f9f45 --- /dev/null +++ b/web/vtadmin/src/icons/chart.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/checkSuccess.svg b/web/vtadmin/src/icons/checkSuccess.svg new file mode 100644 index 00000000000..b5c462a855b --- /dev/null +++ b/web/vtadmin/src/icons/checkSuccess.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/chevronDown.svg b/web/vtadmin/src/icons/chevronDown.svg new file mode 100644 index 00000000000..ac17c4bdea8 --- /dev/null +++ b/web/vtadmin/src/icons/chevronDown.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/chevronLeft.svg b/web/vtadmin/src/icons/chevronLeft.svg new file mode 100644 index 00000000000..01669f10a01 --- /dev/null +++ b/web/vtadmin/src/icons/chevronLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/chevronRight.svg b/web/vtadmin/src/icons/chevronRight.svg new file mode 100644 index 00000000000..19d065551ba --- /dev/null +++ b/web/vtadmin/src/icons/chevronRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/chevronUp.svg b/web/vtadmin/src/icons/chevronUp.svg new file mode 100644 index 00000000000..927d4a02a41 --- /dev/null +++ b/web/vtadmin/src/icons/chevronUp.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/circleAdd.svg b/web/vtadmin/src/icons/circleAdd.svg new file mode 100644 index 00000000000..f9c75f61b29 --- /dev/null +++ b/web/vtadmin/src/icons/circleAdd.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/circleDelete.svg b/web/vtadmin/src/icons/circleDelete.svg new file mode 100644 index 00000000000..10da72cee62 --- /dev/null +++ b/web/vtadmin/src/icons/circleDelete.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/circleRemove.svg b/web/vtadmin/src/icons/circleRemove.svg new file mode 100644 index 00000000000..43ba454c158 --- /dev/null +++ b/web/vtadmin/src/icons/circleRemove.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/circleWorkflow.svg b/web/vtadmin/src/icons/circleWorkflow.svg new file mode 100644 index 00000000000..93a4839daed --- /dev/null +++ b/web/vtadmin/src/icons/circleWorkflow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/vtadmin/src/icons/clear.svg b/web/vtadmin/src/icons/clear.svg new file mode 100644 index 00000000000..6e333f79c32 --- /dev/null +++ b/web/vtadmin/src/icons/clear.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/code.svg b/web/vtadmin/src/icons/code.svg new file mode 100644 index 00000000000..4594e63d450 --- /dev/null +++ b/web/vtadmin/src/icons/code.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/copy.svg b/web/vtadmin/src/icons/copy.svg new file mode 100644 index 00000000000..b05713fd878 --- /dev/null +++ b/web/vtadmin/src/icons/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/delete.svg b/web/vtadmin/src/icons/delete.svg new file mode 100644 index 00000000000..1b7d3ec3bba --- /dev/null +++ b/web/vtadmin/src/icons/delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/document.svg b/web/vtadmin/src/icons/document.svg new file mode 100644 index 00000000000..1c783c1270d --- /dev/null +++ b/web/vtadmin/src/icons/document.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/download.svg b/web/vtadmin/src/icons/download.svg new file mode 100644 index 00000000000..c8a10209c70 --- /dev/null +++ b/web/vtadmin/src/icons/download.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/dropDown.svg b/web/vtadmin/src/icons/dropDown.svg new file mode 100644 index 00000000000..55a1362fe8e --- /dev/null +++ b/web/vtadmin/src/icons/dropDown.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/dropUp.svg b/web/vtadmin/src/icons/dropUp.svg new file mode 100644 index 00000000000..eeb0e2c5658 --- /dev/null +++ b/web/vtadmin/src/icons/dropUp.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/ellipsis.svg b/web/vtadmin/src/icons/ellipsis.svg new file mode 100644 index 00000000000..f7d4abfc3a0 --- /dev/null +++ b/web/vtadmin/src/icons/ellipsis.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/gear.svg b/web/vtadmin/src/icons/gear.svg new file mode 100644 index 00000000000..1234fdfb6e1 --- /dev/null +++ b/web/vtadmin/src/icons/gear.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/history.svg b/web/vtadmin/src/icons/history.svg new file mode 100644 index 00000000000..1d9b551f0c0 --- /dev/null +++ b/web/vtadmin/src/icons/history.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/index.tsx b/web/vtadmin/src/icons/index.tsx new file mode 100644 index 00000000000..9ddad6ebe32 --- /dev/null +++ b/web/vtadmin/src/icons/index.tsx @@ -0,0 +1,59 @@ +export { ReactComponent as Add } from './add.svg'; +export { ReactComponent as AlertFail } from './alertFail.svg'; +export { ReactComponent as Archive } from './archive.svg'; +export { ReactComponent as ArchiveAuto } from './archiveAuto.svg'; +export { ReactComponent as ArchiveForever } from './archiveForever.svg'; +export { ReactComponent as ArchiveRestore } from './archiveRestore.svg'; +export { ReactComponent as ArrowDown } from './arrowDown.svg'; +export { ReactComponent as ArrowLeft } from './arrowLeft.svg'; +export { ReactComponent as ArrowRight } from './arrowRight.svg'; +export { ReactComponent as ArrowUp } from './arrowUp.svg'; +export { ReactComponent as Avatar } from './avatar.svg'; +export { ReactComponent as BoxChecked } from './boxChecked.svg'; +export { ReactComponent as BoxEmpty } from './boxEmpty.svg'; +export { ReactComponent as BoxIndeterminate } from './boxIndeterminate.svg'; +export { ReactComponent as Bug } from './bug.svg'; +export { ReactComponent as Chart } from './chart.svg'; +export { ReactComponent as CheckSuccess } from './checkSuccess.svg'; +export { ReactComponent as ChevronDown } from './chevronDown.svg'; +export { ReactComponent as ChevronLeft } from './chevronLeft.svg'; +export { ReactComponent as ChevronRight } from './chevronRight.svg'; +export { ReactComponent as ChevronUp } from './chevronUp.svg'; +export { ReactComponent as CircleAdd } from './circleAdd.svg'; +export { ReactComponent as CircleDelete } from './circleDelete.svg'; +export { ReactComponent as CircleRemove } from './circleRemove.svg'; +export { ReactComponent as CircleWorkflow } from './circleWorkflow.svg'; +export { ReactComponent as Clear } from './clear.svg'; +export { ReactComponent as Code } from './code.svg'; +export { ReactComponent as Copy } from './copy.svg'; +export { ReactComponent as Delete } from './delete.svg'; +export { ReactComponent as Document } from './document.svg'; +export { ReactComponent as Download } from './download.svg'; +export { ReactComponent as DropDown } from './dropDown.svg'; +export { ReactComponent as DropUp } from './dropUp.svg'; +export { ReactComponent as Ellipsis } from './ellipsis.svg'; +export { ReactComponent as Gear } from './gear.svg'; +export { ReactComponent as History } from './history.svg'; +export { ReactComponent as Info } from './info.svg'; +export { ReactComponent as KeyG } from './keyG.svg'; +export { ReactComponent as KeyK } from './keyK.svg'; +export { ReactComponent as KeyR } from './keyR.svg'; +export { ReactComponent as KeyS } from './keyS.svg'; +export { ReactComponent as KeyT } from './keyT.svg'; +export { ReactComponent as Keyboard } from './keyboard.svg'; +export { ReactComponent as Link } from './link.svg'; +export { ReactComponent as PageFirst } from './pageFirst.svg'; +export { ReactComponent as PageLast } from './pageLast.svg'; +export { ReactComponent as Pause } from './pause.svg'; +export { ReactComponent as Question } from './question.svg'; +export { ReactComponent as RadioEmpty } from './radioEmpty.svg'; +export { ReactComponent as RadioSelected } from './radioSelected.svg'; +export { ReactComponent as Refresh } from './refresh.svg'; +export { ReactComponent as Remove } from './remove.svg'; +export { ReactComponent as Retry } from './retry.svg'; +export { ReactComponent as RunQuery } from './runQuery.svg'; +export { ReactComponent as Search } from './search.svg'; +export { ReactComponent as Sort } from './sort.svg'; +export { ReactComponent as SpinnerLoading } from './spinnerLoading.svg'; +export { ReactComponent as Start } from './start.svg'; +export { ReactComponent as Wrench } from './wrench.svg'; diff --git a/web/vtadmin/src/icons/info.svg b/web/vtadmin/src/icons/info.svg new file mode 100644 index 00000000000..2e63c251898 --- /dev/null +++ b/web/vtadmin/src/icons/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/keyG.svg b/web/vtadmin/src/icons/keyG.svg new file mode 100644 index 00000000000..7891b1cfc2d --- /dev/null +++ b/web/vtadmin/src/icons/keyG.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/keyK.svg b/web/vtadmin/src/icons/keyK.svg new file mode 100644 index 00000000000..e4d73488281 --- /dev/null +++ b/web/vtadmin/src/icons/keyK.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/keyR.svg b/web/vtadmin/src/icons/keyR.svg new file mode 100644 index 00000000000..11594694255 --- /dev/null +++ b/web/vtadmin/src/icons/keyR.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/keyS.svg b/web/vtadmin/src/icons/keyS.svg new file mode 100644 index 00000000000..2f133aef0d6 --- /dev/null +++ b/web/vtadmin/src/icons/keyS.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/keyT.svg b/web/vtadmin/src/icons/keyT.svg new file mode 100644 index 00000000000..9ec3641971e --- /dev/null +++ b/web/vtadmin/src/icons/keyT.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/keyboard.svg b/web/vtadmin/src/icons/keyboard.svg new file mode 100644 index 00000000000..0b55a537f99 --- /dev/null +++ b/web/vtadmin/src/icons/keyboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/link.svg b/web/vtadmin/src/icons/link.svg new file mode 100644 index 00000000000..b158d204593 --- /dev/null +++ b/web/vtadmin/src/icons/link.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/vtadmin/src/icons/pageFirst.svg b/web/vtadmin/src/icons/pageFirst.svg new file mode 100644 index 00000000000..cd2ccd3a057 --- /dev/null +++ b/web/vtadmin/src/icons/pageFirst.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/pageLast.svg b/web/vtadmin/src/icons/pageLast.svg new file mode 100644 index 00000000000..6c7e933fd4b --- /dev/null +++ b/web/vtadmin/src/icons/pageLast.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/pause.svg b/web/vtadmin/src/icons/pause.svg new file mode 100644 index 00000000000..fcaf684242a --- /dev/null +++ b/web/vtadmin/src/icons/pause.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/question.svg b/web/vtadmin/src/icons/question.svg new file mode 100644 index 00000000000..12b85ac5722 --- /dev/null +++ b/web/vtadmin/src/icons/question.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/vtadmin/src/icons/radioEmpty.svg b/web/vtadmin/src/icons/radioEmpty.svg new file mode 100644 index 00000000000..0906998ce94 --- /dev/null +++ b/web/vtadmin/src/icons/radioEmpty.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/radioSelected.svg b/web/vtadmin/src/icons/radioSelected.svg new file mode 100644 index 00000000000..872843d1f59 --- /dev/null +++ b/web/vtadmin/src/icons/radioSelected.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/vtadmin/src/icons/refresh.svg b/web/vtadmin/src/icons/refresh.svg new file mode 100644 index 00000000000..12aa7f04be2 --- /dev/null +++ b/web/vtadmin/src/icons/refresh.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/remove.svg b/web/vtadmin/src/icons/remove.svg new file mode 100644 index 00000000000..6f083a3e381 --- /dev/null +++ b/web/vtadmin/src/icons/remove.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/retry.svg b/web/vtadmin/src/icons/retry.svg new file mode 100644 index 00000000000..9fb25e812fb --- /dev/null +++ b/web/vtadmin/src/icons/retry.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/runQuery.svg b/web/vtadmin/src/icons/runQuery.svg new file mode 100644 index 00000000000..82be16118fb --- /dev/null +++ b/web/vtadmin/src/icons/runQuery.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/web/vtadmin/src/icons/search.svg b/web/vtadmin/src/icons/search.svg new file mode 100644 index 00000000000..e1311fd3849 --- /dev/null +++ b/web/vtadmin/src/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/sort.svg b/web/vtadmin/src/icons/sort.svg new file mode 100644 index 00000000000..e6081f52dbc --- /dev/null +++ b/web/vtadmin/src/icons/sort.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/spinnerLoading.svg b/web/vtadmin/src/icons/spinnerLoading.svg new file mode 100644 index 00000000000..42525d17ffd --- /dev/null +++ b/web/vtadmin/src/icons/spinnerLoading.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/start.svg b/web/vtadmin/src/icons/start.svg new file mode 100644 index 00000000000..3cfe43f56c2 --- /dev/null +++ b/web/vtadmin/src/icons/start.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/icons/wrench.svg b/web/vtadmin/src/icons/wrench.svg new file mode 100644 index 00000000000..cb586f87612 --- /dev/null +++ b/web/vtadmin/src/icons/wrench.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/vtadmin/src/index.css b/web/vtadmin/src/index.css index c8314423509..8b3a8426d05 100644 --- a/web/vtadmin/src/index.css +++ b/web/vtadmin/src/index.css @@ -68,12 +68,15 @@ --backgroundPrimaryHighlight: rgba(61, 90, 254, 0.1); --backgroundSecondary: var(--grey75); --backgroundSecondaryHighlight: var(--grey200); + --boxShadowHover: 0 3px 3px #cbd5e0; + --colorDisabled: var(--grey400); --colorPrimary: #3d5afe; --colorPrimary50: #8187ff; --colorPrimary200: #0031ca; --colorScaffolding: var(--grey400); --tableBorderColor: var(--grey400); --textColorPrimary: #17171b; + --textColorInverted: #fff; --textColorSecondary: #718096; --textColorDisabled: #cbd5e0; } @@ -84,12 +87,15 @@ --backgroundPrimaryHighlight: rgba(129, 135, 255, 0.2); --backgroundSecondary: var(--grey900); --backgroundSecondaryHighlight: var(--grey800); + --boxShadowHover: 0 3px 3px #2d3748; + --colorDisabled: var(--grey600); --colorPrimary: #8187ff; --colorPrimary50: #b6b7ff; --colorPrimary200: #4a5acb; --colorScaffolding: var(--grey600); --tableBorderColor: var(--grey800); --textColorPrimary: #fff; + --textColorInverted: #17171b; --textColorSecondary: #cbd5e0; --textColorDisabled: #2d3748; } From 1d7481a695b8cebbbc868de15108cafd5d2732ce Mon Sep 17 00:00:00 2001 From: Sara Bee <855595+doeg@users.noreply.github.com> Date: Fri, 22 Jan 2021 18:37:09 -0500 Subject: [PATCH 2/2] Add Button + Icon components Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com> --- web/vtadmin/src/components/Button.module.scss | 9 +++++---- web/vtadmin/src/components/routes/Debug.module.scss | 6 +++--- web/vtadmin/src/index.css | 6 +++--- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/web/vtadmin/src/components/Button.module.scss b/web/vtadmin/src/components/Button.module.scss index 5468a942234..7b9c50ab33e 100644 --- a/web/vtadmin/src/components/Button.module.scss +++ b/web/vtadmin/src/components/Button.module.scss @@ -9,7 +9,7 @@ font-weight: 500; line-height: var(--lineHeightBody); outline: none; - padding: 8px 11px 9px; + padding: 8px 11px; user-select: none; transition: all 0.1s ease-in-out; white-space: nowrap; @@ -18,10 +18,10 @@ .icon { display: inline-block; fill: var(--textColorInverted); - height: 1.2em; + height: 1.4em; margin-right: 0.4em; - vertical-align: text-bottom; - width: 1.2em; + vertical-align: middle; + width: 1.4em; } } @@ -72,6 +72,7 @@ } .button.sizeSmall { + border-width: 1px; font-size: var(--fontSizeSmall); padding: 4px 6px; } diff --git a/web/vtadmin/src/components/routes/Debug.module.scss b/web/vtadmin/src/components/routes/Debug.module.scss index 7bea9230716..46bced42ee3 100644 --- a/web/vtadmin/src/components/routes/Debug.module.scss +++ b/web/vtadmin/src/components/routes/Debug.module.scss @@ -6,15 +6,15 @@ } .iconContainer { - column-gap: 12px; + column-gap: 0; display: grid; grid-template-columns: repeat(12, min-content); - row-gap: 12px; + row-gap: 0; } .icon { fill: var(--colorPrimary); - padding: 10px; + padding: 16px; transition: fill 0.1s ease-in-out; &:hover { diff --git a/web/vtadmin/src/index.css b/web/vtadmin/src/index.css index 8b3a8426d05..9bf96c53914 100644 --- a/web/vtadmin/src/index.css +++ b/web/vtadmin/src/index.css @@ -52,9 +52,9 @@ --fontFamilyMonospace: 'NotoMono', source-code-pro, menlo, monaco, consolas, 'Courier New', monospace; /* Body text */ - --fontSizeDefault: 1.5rem; - --fontSizeLarge: 1.7rem; - --fontSizeSmall: 1.3rem; + --fontSizeDefault: 1.4rem; + --fontSizeLarge: 1.6rem; + --fontSizeSmall: 1.2rem; --lineHeightBody: 1.36; /* Headings */