From 193e973a771d3e9518e0f7d7d909e910b0b0825f Mon Sep 17 00:00:00 2001 From: Bart Date: Tue, 22 Aug 2023 10:51:17 +0200 Subject: [PATCH] UI updates (first pass) (#181) * rename component * update dialog and background color * remove unused collapsible card * update start screen and other stuff * update main table design * refactor account details to new tab layout (first pass) * update details card color * alternative details tab style * predicted details tab colors * migrate details screens * components cleanup * refactor usages of ContentDetailsScript * remove more colors * improve layout * fix base dialog border, cleanup button * fix close button * reorganize some components, add ts paths config (wip) * Revert "reorganize some components, add ts paths config (wip)" This reverts commit 627c1c560840765c05aad7c19b9391b6c04c52cf. --- frontend/src/App.scss | 2 +- frontend/src/App.tsx | 19 +- frontend/src/assets/icons/close.svg | 1 - frontend/src/assets/icons/open_project.svg | 12 - frontend/src/assets/icons/yellow_line.svg | 3 - .../breadcrumbs/Breadcrumbs.module.scss | 8 +- .../components/breadcrumbs/Breadcrumbs.tsx | 14 +- .../action-button/ActionButton.module.scss | 4 +- .../buttons/button/Button.module.scss | 10 +- .../src/components/buttons/button/Button.tsx | 19 +- .../radio-button/RadioButton.module.scss | 2 +- .../toggle-button/ToggleButton.module.scss | 4 +- .../cadence-editor/cadence-editor.css | 1 + frontend/src/components/card/Card.module.scss | 30 -- frontend/src/components/card/Card.tsx | 16 +- .../collapsible-card/Collapsible.module.scss | 60 --- .../collapsible-card/CollapsibleCard.tsx | 53 --- .../colored-circle/ColloredCircle.module.scss | 10 - .../colored-circle/ColoredCircle.tsx | 18 - .../details-card/DetailsCard.module.scss | 3 +- .../details-tabs/DetailsTabs.module.scss | 59 --- .../components/details-tabs/DetailsTabs.tsx | 80 ---- .../dialogs/action/ActionDialog.module.scss | 2 +- .../dialogs/base/BaseDialog.module.scss | 9 +- .../dialogs/consent/ConsentDialog.module.scss | 5 +- .../dialogs/snapshot/SnapshotDialog.tsx | 2 +- .../errors/ErrorMessage.module.scss | 4 +- .../EventDetailsTable.module.scss | 52 --- .../event-details-table/EventDetailsTable.tsx | 55 --- .../FullScreenLoading.module.scss | 2 +- frontend/src/components/icons/Icons.tsx | 2 + .../{ => inputs}/input/Input.module.scss | 0 .../components/{ => inputs}/input/Input.tsx | 0 .../search-input/SearchInput.module.scss | 0 .../{ => inputs}/search-input/SearchInput.tsx | 2 +- .../select-input/SelectInput.module.scss | 0 .../{ => inputs}/select-input/SelectInput.tsx | 0 .../components/json-view/JsonView.module.scss | 9 +- .../src/components/label/Label.module.scss | 2 +- .../src/components/layout/Layout.module.scss | 19 +- frontend/src/components/layout/Layout.tsx | 14 +- .../line-separator/LineSeparator.module.scss | 2 +- .../list-container/ListContainer.module.scss | 4 - .../list-container/ListContainer.tsx | 8 - .../SideNavigation.module.scss | 5 +- .../src/components/table/Table.module.scss | 2 + frontend/src/components/table/Table.tsx | 19 - .../components/tabs/StyledTabs.module.scss | 31 ++ frontend/src/components/tabs/StyledTabs.tsx | 19 + .../Tabs.module.scss} | 8 +- .../{tab-list/TabList.tsx => tabs/Tabs.tsx} | 33 +- .../components/text-area/TextArea.module.scss | 26 -- .../src/components/text-area/TextArea.tsx | 30 -- .../accounts/details/Details.module.scss | 48 --- .../src/pages/accounts/details/Details.tsx | 240 ++---------- .../src/pages/accounts/details/KeysTable.tsx | 56 +++ .../storage/AccountStorage.module.scss | 49 +++ .../details/storage/AccountStorage.tsx | 105 ++++++ .../{ => storage}/StorageBadge.module.scss | 0 .../{ => storage}/StorageDomainBadge.tsx | 2 +- .../cards}/BaseStorageCard.module.scss | 11 +- .../cards}/InternalStorageCard.tsx | 4 +- .../PublicPrivateStorageCard.module.scss | 2 +- .../cards}/PublicPrivateStorageCard.tsx | 7 +- frontend/src/pages/blocks/details/Details.tsx | 44 ++- .../src/pages/blocks/main/Main.module.scss | 5 +- frontend/src/pages/blocks/main/Main.tsx | 45 +-- .../src/pages/contracts/details/Details.tsx | 4 +- .../pages/contracts/main/ContractsTable.tsx | 63 ++++ frontend/src/pages/contracts/main/Main.tsx | 62 +-- frontend/src/pages/events/Events.tsx | 182 +-------- ...ts.module.scss => EventsTable.module.scss} | 0 frontend/src/pages/events/EventsTable.tsx | 184 +++++++++ .../pages/interactions/InteractionsPage.tsx | 6 +- .../outcome/InteractionOutcome.module.scss | 15 - .../components/outcome/InteractionOutcome.tsx | 17 +- .../ValueBuilder/BoolBuilder/BoolBuilder.tsx | 2 +- .../FixedPointNumberBuilder.tsx | 2 +- .../IntegerNumberBuilder.tsx | 2 +- .../ValueBuilder/PathBuilder/PathBuilder.tsx | 4 +- .../TextualBuilder/TextualBuilder.tsx | 2 +- .../InteractionTemplates.module.scss | 1 - .../templates/InteractionTemplates.tsx | 4 +- frontend/src/pages/logs/Logs.module.scss | 7 +- frontend/src/pages/logs/Logs.tsx | 20 +- .../configuration/Configuration.module.scss | 4 +- .../start/configuration/Configuration.tsx | 2 +- .../ConfigurationSection.module.scss | 6 +- .../configuration/ConfigurationSection.tsx | 7 +- .../configuration/FormFields.module.scss | 10 +- .../pages/start/configuration/FormFields.tsx | 2 +- .../src/pages/start/main/Main.module.scss | 26 +- frontend/src/pages/start/main/Main.tsx | 21 -- .../pages/transactions/details/Details.tsx | 354 +++--------------- .../transactions/details/SignaturesTable.tsx | 46 +++ .../overview => }/TransactionOverview.tsx | 14 +- .../source/TransactionSource.module.scss} | 5 +- .../details/source/TransactionSource.tsx} | 28 +- .../transactions/main/TransactionsTable.tsx | 88 +++++ frontend/src/react-app-env.d.ts | 1 + frontend/src/styles/colors.scss | 36 +- frontend/src/styles/rules.scss | 2 + frontend/src/styles/scrollbars.scss | 2 +- 103 files changed, 996 insertions(+), 1647 deletions(-) delete mode 100644 frontend/src/assets/icons/open_project.svg delete mode 100644 frontend/src/assets/icons/yellow_line.svg delete mode 100644 frontend/src/components/collapsible-card/Collapsible.module.scss delete mode 100644 frontend/src/components/collapsible-card/CollapsibleCard.tsx delete mode 100644 frontend/src/components/colored-circle/ColloredCircle.module.scss delete mode 100644 frontend/src/components/colored-circle/ColoredCircle.tsx delete mode 100644 frontend/src/components/details-tabs/DetailsTabs.module.scss delete mode 100644 frontend/src/components/details-tabs/DetailsTabs.tsx delete mode 100644 frontend/src/components/event-details-table/EventDetailsTable.module.scss delete mode 100644 frontend/src/components/event-details-table/EventDetailsTable.tsx rename frontend/src/components/{ => inputs}/input/Input.module.scss (100%) rename frontend/src/components/{ => inputs}/input/Input.tsx (100%) rename frontend/src/components/{ => inputs}/search-input/SearchInput.module.scss (100%) rename frontend/src/components/{ => inputs}/search-input/SearchInput.tsx (95%) rename frontend/src/components/{ => inputs}/select-input/SelectInput.module.scss (100%) rename frontend/src/components/{ => inputs}/select-input/SelectInput.tsx (100%) delete mode 100644 frontend/src/components/list-container/ListContainer.module.scss delete mode 100644 frontend/src/components/list-container/ListContainer.tsx create mode 100644 frontend/src/components/tabs/StyledTabs.module.scss create mode 100644 frontend/src/components/tabs/StyledTabs.tsx rename frontend/src/components/{tab-list/TabList.module.scss => tabs/Tabs.module.scss} (91%) rename frontend/src/components/{tab-list/TabList.tsx => tabs/Tabs.tsx} (73%) delete mode 100644 frontend/src/components/text-area/TextArea.module.scss delete mode 100644 frontend/src/components/text-area/TextArea.tsx create mode 100644 frontend/src/pages/accounts/details/KeysTable.tsx create mode 100644 frontend/src/pages/accounts/details/storage/AccountStorage.module.scss create mode 100644 frontend/src/pages/accounts/details/storage/AccountStorage.tsx rename frontend/src/pages/accounts/details/{ => storage}/StorageBadge.module.scss (100%) rename frontend/src/pages/accounts/details/{ => storage}/StorageDomainBadge.tsx (89%) rename frontend/src/pages/accounts/details/{ => storage/cards}/BaseStorageCard.module.scss (89%) rename frontend/src/pages/accounts/details/{ => storage/cards}/InternalStorageCard.tsx (95%) rename frontend/src/pages/accounts/details/{ => storage/cards}/PublicPrivateStorageCard.module.scss (97%) rename frontend/src/pages/accounts/details/{ => storage/cards}/PublicPrivateStorageCard.tsx (93%) create mode 100644 frontend/src/pages/contracts/main/ContractsTable.tsx rename frontend/src/pages/events/{Events.module.scss => EventsTable.module.scss} (100%) create mode 100644 frontend/src/pages/events/EventsTable.tsx create mode 100644 frontend/src/pages/transactions/details/SignaturesTable.tsx rename frontend/src/pages/transactions/details/{components/overview => }/TransactionOverview.tsx (81%) rename frontend/src/{components/content-details-script/ContentDetailsScript.module.scss => pages/transactions/details/source/TransactionSource.module.scss} (93%) rename frontend/src/{components/content-details-script/ContentDetailsScript.tsx => pages/transactions/details/source/TransactionSource.tsx} (65%) create mode 100644 frontend/src/pages/transactions/main/TransactionsTable.tsx diff --git a/frontend/src/App.scss b/frontend/src/App.scss index dbaa1c77..fb4157a6 100644 --- a/frontend/src/App.scss +++ b/frontend/src/App.scss @@ -9,7 +9,7 @@ html, body { - background: $background; + background: $gray-110; font-family: $font-family-inter; font-size: $font-size-normal; font-style: normal; diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bd50e1ed..116d99db 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -8,7 +8,7 @@ import { withRouter, } from "react-router-dom"; import { Toaster } from "react-hot-toast"; -import { RouteWithLayout } from "./components/layout/Layout"; +import { RouteWithProjectLayout } from "./components/layout/Layout"; import { routes } from "./constants/routes"; import { UiStateContextProvider } from "./contexts/ui-state.context"; import "./App.scss"; @@ -102,16 +102,19 @@ export const FlowserRoutes = (): ReactElement => { - - - - - - + + + + + - diff --git a/frontend/src/assets/icons/close.svg b/frontend/src/assets/icons/close.svg index 9f7feffb..e4d59752 100644 --- a/frontend/src/assets/icons/close.svg +++ b/frontend/src/assets/icons/close.svg @@ -1,6 +1,5 @@ - diff --git a/frontend/src/assets/icons/open_project.svg b/frontend/src/assets/icons/open_project.svg deleted file mode 100644 index 7d204390..00000000 --- a/frontend/src/assets/icons/open_project.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/frontend/src/assets/icons/yellow_line.svg b/frontend/src/assets/icons/yellow_line.svg deleted file mode 100644 index ba79af4d..00000000 --- a/frontend/src/assets/icons/yellow_line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/src/components/breadcrumbs/Breadcrumbs.module.scss b/frontend/src/components/breadcrumbs/Breadcrumbs.module.scss index 0a4f7018..4a8b2c0f 100644 --- a/frontend/src/components/breadcrumbs/Breadcrumbs.module.scss +++ b/frontend/src/components/breadcrumbs/Breadcrumbs.module.scss @@ -6,11 +6,9 @@ .root { display: flex; height: 50px; - padding: 0 $spacing-base - 2px; + padding: 0 $spacing-base; border-radius: $border-radius-card; align-items: center; - background: $medium-violet; - margin: 0 $spacing-l; .backButtonWrapper { width: 40px; @@ -39,13 +37,13 @@ display: flex; align-items: center; - & span { + .arrow { margin: 0 $spacing-base * 0.5; } * { font-family: $font-family-inter; - font-size: $font-size-small - 1px; + font-size: $font-size-normal; color: $color-grey; text-decoration: none; } diff --git a/frontend/src/components/breadcrumbs/Breadcrumbs.tsx b/frontend/src/components/breadcrumbs/Breadcrumbs.tsx index 645de6f5..4a819e3d 100644 --- a/frontend/src/components/breadcrumbs/Breadcrumbs.tsx +++ b/frontend/src/components/breadcrumbs/Breadcrumbs.tsx @@ -3,9 +3,13 @@ import { NavLink, useHistory } from "react-router-dom"; import { useNavigation } from "../../hooks/use-navigation"; import classes from "./Breadcrumbs.module.scss"; import { ReactComponent as IconBackButton } from "../../assets/icons/back-button.svg"; +import classNames from "classnames"; -export function Breadcrumbs(): ReactElement | null { - const breadCrumbsBarHeight = 50; +type BreadcrumbsProps = { + className?: string; +}; + +export function Breadcrumbs(props: BreadcrumbsProps): ReactElement | null { const { isShowBackButtonVisible, isBreadcrumbsVisible, breadcrumbs } = useNavigation(); const history = useHistory(); @@ -20,7 +24,7 @@ export function Breadcrumbs(): ReactElement | null { } return ( -
+
{isShowBackButtonVisible && (
@@ -35,7 +39,9 @@ export function Breadcrumbs(): ReactElement | null { )) .reduce((prev, curr, i) => [ prev, - {">>"}, + + {">>"} + , curr, ])}
diff --git a/frontend/src/components/buttons/action-button/ActionButton.module.scss b/frontend/src/components/buttons/action-button/ActionButton.module.scss index 1a664881..059f8c39 100644 --- a/frontend/src/components/buttons/action-button/ActionButton.module.scss +++ b/frontend/src/components/buttons/action-button/ActionButton.module.scss @@ -25,11 +25,11 @@ .header { transition: 0.3s; - color: $light-grey; + color: $gray-10; } .footer { - color: $light-grey; + color: $gray-10; opacity: 0.5; font-size: $font-size-small; } diff --git a/frontend/src/components/buttons/button/Button.module.scss b/frontend/src/components/buttons/button/Button.module.scss index 4801231d..8e16b939 100644 --- a/frontend/src/components/buttons/button/Button.module.scss +++ b/frontend/src/components/buttons/button/Button.module.scss @@ -4,15 +4,15 @@ .button { position: relative; - background-color: $yellow; + background-color: $violet-100; border-radius: $border-radius-button; - color: $background; + color: $white; font-size: $font-size-big; font-family: $font-family-inter; letter-spacing: $character-spacing-medium; font-style: normal; font-weight: bold; - border: 2px solid $yellow; + border: 2px solid $violet-100; cursor: pointer; &:hover { @@ -47,7 +47,7 @@ } .normal { - background: $yellow; + background: $violet-100; height: 32px; padding: 0 18px; font-size: $font-size-xsmall !important; @@ -83,7 +83,7 @@ .outlined { background: none; - color: $yellow; + color: $white; &.disabled { color: $color-not-active-button-text-grey; diff --git a/frontend/src/components/buttons/button/Button.tsx b/frontend/src/components/buttons/button/Button.tsx index 98eedbd0..81b03c22 100644 --- a/frontend/src/components/buttons/button/Button.tsx +++ b/frontend/src/components/buttons/button/Button.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent, HTMLAttributes } from "react"; import classes from "./Button.module.scss"; import Loader from "react-loader-spinner"; +import classNames from "classnames"; export type ButtonProps = React.DetailedHTMLProps< React.ButtonHTMLAttributes, @@ -28,16 +29,26 @@ const Button: FunctionComponent = ({ {...restProps} onClick={onClick} disabled={disabled} - className={`${classes.button} ${classes[variant]} ${ - disabled ? classes.disabled : "" - } ${restProps.className} ${outlined ? classes.outlined : ""}`} + className={classNames( + classes.button, + classes[variant], + restProps.className, + { + [classes.disabled]: disabled, + [classes.outlined]: outlined, + } + )} > {loading && (
)} -
+
{restProps.children}
diff --git a/frontend/src/components/buttons/radio-button/RadioButton.module.scss b/frontend/src/components/buttons/radio-button/RadioButton.module.scss index 9545dbd7..5cf3c258 100644 --- a/frontend/src/components/buttons/radio-button/RadioButton.module.scss +++ b/frontend/src/components/buttons/radio-button/RadioButton.module.scss @@ -21,7 +21,7 @@ & > span { display: block; visibility: visible; - background-color: $light-grey; + background-color: $gray-10; border-radius: 50%; width: 10px; height: 10px; diff --git a/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss b/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss index 82911306..a6816b0a 100644 --- a/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss +++ b/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss @@ -29,11 +29,11 @@ &.inactive { transform: translateX(0); transition: all 100ms; - background-color: #5B5E62; + background-color: $gray-30; } &.disabled { - background-color: $dark-grey; + background-color: $gray-50; } } } diff --git a/frontend/src/components/cadence-editor/cadence-editor.css b/frontend/src/components/cadence-editor/cadence-editor.css index 4efb67b6..787fd56e 100644 --- a/frontend/src/components/cadence-editor/cadence-editor.css +++ b/frontend/src/components/cadence-editor/cadence-editor.css @@ -1,6 +1,7 @@ /* Main editor container */ .cadence-editor { width: 100%; + background: #272B32; } .cadence-editor .cm-editor { diff --git a/frontend/src/components/card/Card.module.scss b/frontend/src/components/card/Card.module.scss index 36fcbfb8..b2e80712 100644 --- a/frontend/src/components/card/Card.module.scss +++ b/frontend/src/components/card/Card.module.scss @@ -13,34 +13,4 @@ @include addNewContentAnimation(.4s); } - .loading { - position: absolute; - display: flex; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: $table-line-background; - align-items: center; - justify-content: center; - color: $light-grey; - opacity: 0.8; - } - - &.header-row { - background-color: $dark-violet; - color: $grey; - } - - &.table-line { - background-color: $table-line-background; - } - - &.dark-blue { - //background-color: $dark-blue; - } - - &.active { - border: 1px solid $yellow; - } } diff --git a/frontend/src/components/card/Card.tsx b/frontend/src/components/card/Card.tsx index bee66ad3..f5f68d24 100644 --- a/frontend/src/components/card/Card.tsx +++ b/frontend/src/components/card/Card.tsx @@ -1,34 +1,28 @@ import React, { FunctionComponent, HTMLAttributes } from "react"; import classes from "./Card.module.scss"; +import classNames from "classnames"; type CardProps = HTMLAttributes & { className?: string; - variant?: "table-line" | "black" | "header-row" | "dark-blue"; active?: boolean; - loading?: boolean; showIntroAnimation?: boolean; - loadingText?: string; }; const Card: FunctionComponent = ({ children, className, - variant = "dark-blue", active = false, - loading = false, - loadingText = "Loading ...", showIntroAnimation, ...restProps }) => { return (
- {loading && {loadingText}} {children}
); diff --git a/frontend/src/components/collapsible-card/Collapsible.module.scss b/frontend/src/components/collapsible-card/Collapsible.module.scss deleted file mode 100644 index 67208679..00000000 --- a/frontend/src/components/collapsible-card/Collapsible.module.scss +++ /dev/null @@ -1,60 +0,0 @@ -@import 'styles/spacings'; -@import 'styles/animations'; -@import 'styles/colors'; -@import 'styles/typography'; - -.root { - display: flex; - flex-direction: column; - - &.showIntroAnimation { - @include addNewContentAnimation(.4s); - } - - .header { - display: flex; - align-items: center; - color: $color-grey; - - &.expanded { - border-bottom: 1px solid $light-grey; - padding-bottom: $spacing-l * 2; - } - - .title { - display: flex; - flex-direction: column; - margin-right: $spacing-l * 2; - - & > span:first-child { - font-size: $font-size-small; - text-transform: capitalize; - flex: 1; - } - - & > span:last-child { - color: $blue; - font-size: $font-size-normal; - cursor: pointer; - } - } - - .icon { - margin-left: auto; - } - } - - .content { - max-height: 0; - transition-property: max-height; - transition: 100ms ease-in; - opacity: 0; - overflow: hidden; - - &.expanded { - opacity: 1; - margin-top: $spacing-l * 2; - max-height: initial; - } - } -} diff --git a/frontend/src/components/collapsible-card/CollapsibleCard.tsx b/frontend/src/components/collapsible-card/CollapsibleCard.tsx deleted file mode 100644 index e1de070f..00000000 --- a/frontend/src/components/collapsible-card/CollapsibleCard.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { FunctionComponent, useCallback, useState } from "react"; -import Card from "../card/Card"; -import classes from "./Collapsible.module.scss"; -import CaretIcon from "../caret-icon/CaretIcon"; - -type CollapsibleCardProps = { - header: string; - subheader?: string; - variant?: "table-line" | "black" | "header-row" | "dark-blue"; - showIntroAnimation?: boolean; - className?: string; -}; - -const CollapsibleCard: FunctionComponent = ({ - children, - variant, - header, - subheader, - showIntroAnimation, - ...restProps -}) => { - const [state, setState] = useState(false); - - const onToggle = useCallback(() => { - setState((state) => !state); - }, []); - - return ( - -
-
- {header} - {subheader && {subheader}} -
- -
-
- {children} -
- - ); -}; - -export default CollapsibleCard; diff --git a/frontend/src/components/colored-circle/ColloredCircle.module.scss b/frontend/src/components/colored-circle/ColloredCircle.module.scss deleted file mode 100644 index be524364..00000000 --- a/frontend/src/components/colored-circle/ColloredCircle.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -div .coloredCircle { - display: inline-block; - margin-left: 5px; - margin-right: 5px; - margin-bottom: -2px; - border-radius: 50%; - border-style: none; - height: 20px; - width: 20px; -} \ No newline at end of file diff --git a/frontend/src/components/colored-circle/ColoredCircle.tsx b/frontend/src/components/colored-circle/ColoredCircle.tsx deleted file mode 100644 index 42f9829a..00000000 --- a/frontend/src/components/colored-circle/ColoredCircle.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { Fragment, FunctionComponent } from "react"; -import classes from "./ColloredCircle.module.scss"; - -type ColoredCircleProps = { - color: string; -}; - -const ColoredCircle: FunctionComponent = ({ color }) => { - const styles = { backgroundColor: color }; - - return color ? ( - - - - ) : null; -}; - -export default ColoredCircle; diff --git a/frontend/src/components/details-card/DetailsCard.module.scss b/frontend/src/components/details-card/DetailsCard.module.scss index 745e2728..71810430 100644 --- a/frontend/src/components/details-card/DetailsCard.module.scss +++ b/frontend/src/components/details-card/DetailsCard.module.scss @@ -4,6 +4,7 @@ .root { overflow: scroll; + background: $gray-100; @include hiddenScrollbars(); .content { @@ -17,7 +18,7 @@ .column { display: flex; flex-direction: column; - row-gap: $spacing-l; + row-gap: $spacing-s; & > div { display: flex; diff --git a/frontend/src/components/details-tabs/DetailsTabs.module.scss b/frontend/src/components/details-tabs/DetailsTabs.module.scss deleted file mode 100644 index 29629369..00000000 --- a/frontend/src/components/details-tabs/DetailsTabs.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import 'styles/spacings'; -@import 'styles/colors'; - -.cardsContainer { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-bottom: $spacing-l * 2; - - .smallCard { - display: flex; - position: relative; - justify-content: center; - width: 100%; - padding: $spacing-l; - align-items: center; - cursor: pointer; - - &:hover { - opacity: 0.7; - } - - &__disabled { - cursor: default !important; - - &:hover { - opacity: 1; - } - } - - * + * { - margin-top: $spacing-l; - } - - .labelValue { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - - .clickable { - color: $blue !important; - } - } - - .caret { - justify-self: end; - position: absolute; - right: $spacing-l; - } - } - - .smallCard + .smallCard { - margin-left: $spacing-l; - } -} - -.contentDetailsContainer { -} diff --git a/frontend/src/components/details-tabs/DetailsTabs.tsx b/frontend/src/components/details-tabs/DetailsTabs.tsx deleted file mode 100644 index 764b2aa7..00000000 --- a/frontend/src/components/details-tabs/DetailsTabs.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { - FunctionComponent, - MouseEventHandler, - ReactElement, - useEffect, - useState, -} from "react"; -import classes from "./DetailsTabs.module.scss"; -import Card from "../card/Card"; -import Label from "../label/Label"; -import Value from "../value/Value"; -import CaretIcon from "../caret-icon/CaretIcon"; - -type TabItemProps = { - label: string; - value: string | number; - onClick?: MouseEventHandler; -}; - -type ContainerProps = { - children: ReactElement[] | any; -}; - -// TODO: Replace / consolidate with TabList? -export const DetailsTabs: FunctionComponent = ({ - children, -}) => { - const noNilChildren = children.filter((c: any) => !!c); - const selectedIndex = noNilChildren.findIndex((c: any) => c.props?.children); - const [selected, setSelected] = useState(selectedIndex); - const selectedChildren = noNilChildren[selected].props.children; - const [childContent, setChildContent] = useState(selectedChildren); - - useEffect(() => { - setChildContent(noNilChildren[selected].props.children); - }, [selected, children]); - - return ( - <> -
- {noNilChildren.map((child: any, index: number) => { - const isDisabled = !child.props.children; - return ( - { - if (!isDisabled) setSelected(index); - if (child.props.onClick) child.props.onClick(e); - }} - > -
- - - {child.props.value} - -
- {!isDisabled && ( -
- -
- )} - - ); - })} -
-
{childContent}
- - ); -}; - -export const DetailsTabItem: FunctionComponent = ({ - children, -}) => <>{children}; diff --git a/frontend/src/components/dialogs/action/ActionDialog.module.scss b/frontend/src/components/dialogs/action/ActionDialog.module.scss index 0b9fc888..3c0cbc83 100644 --- a/frontend/src/components/dialogs/action/ActionDialog.module.scss +++ b/frontend/src/components/dialogs/action/ActionDialog.module.scss @@ -7,7 +7,7 @@ display: flex; flex-direction: column; align-items: center; - color: $light-grey; + color: $gray-10; padding: $spacing-l * 3 $spacing-l * 6; @include fadeInAnimation(.5s); diff --git a/frontend/src/components/dialogs/base/BaseDialog.module.scss b/frontend/src/components/dialogs/base/BaseDialog.module.scss index 5ecdc5f0..1363079a 100644 --- a/frontend/src/components/dialogs/base/BaseDialog.module.scss +++ b/frontend/src/components/dialogs/base/BaseDialog.module.scss @@ -1,4 +1,5 @@ @import 'styles/colors'; +@import 'styles/rules'; .root { z-index: 1001; @@ -9,20 +10,22 @@ left: 0; right: 0; overflow: hidden; - background-color: rgba(20, 28, 45, .9); justify-content: center; align-items: center; - + background: transparentize($gray-110, 0.5); + backdrop-filter: blur(2px); .dialog { width: 600px; max-width: 90vw; min-height: 100px; + background: $gray-110; + border-radius: $border-radius-md; + border: 1px solid $gray-50; .card { max-height: 90vh; overflow-y: scroll; } - } } diff --git a/frontend/src/components/dialogs/consent/ConsentDialog.module.scss b/frontend/src/components/dialogs/consent/ConsentDialog.module.scss index c2baba00..49d1832a 100644 --- a/frontend/src/components/dialogs/consent/ConsentDialog.module.scss +++ b/frontend/src/components/dialogs/consent/ConsentDialog.module.scss @@ -6,14 +6,12 @@ } .root { - color: $grey; padding: $spacing-xl; .header { display: flex; align-items: center; .logo { border-radius: 50%; - background: $background; object-fit: scale-down; width: 50px; height: 50px; @@ -32,7 +30,7 @@ } } .rightSide { - color: $dark-grey; + color: $gray-20; flex: 1; text-align: end; li { @@ -50,7 +48,6 @@ .toggleAnalytics { display: flex; - color: $grey; .toggleButton { margin-right: $spacing-base; } diff --git a/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx b/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx index 4b10e1ce..e00abc54 100644 --- a/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx +++ b/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx @@ -3,7 +3,7 @@ import Button from "../../buttons/button/Button"; import classes from "./SnapshotDialog.module.scss"; import toast from "react-hot-toast"; import { ServiceRegistry } from "../../../services/service-registry"; -import Input from "../../input/Input"; +import Input from "../../inputs/input/Input"; import { ActionDialog } from "../action/ActionDialog"; import { useCurrentProjectId } from "../../../hooks/use-api"; import { useErrorHandler } from "../../../hooks/use-error-handler"; diff --git a/frontend/src/components/errors/ErrorMessage.module.scss b/frontend/src/components/errors/ErrorMessage.module.scss index 84bf88fa..4587b542 100644 --- a/frontend/src/components/errors/ErrorMessage.module.scss +++ b/frontend/src/components/errors/ErrorMessage.module.scss @@ -5,10 +5,10 @@ .root { @include fadeInAnimation(2s); - height: 50vh; display: flex; align-items: center; justify-content: center; + padding: $spacing-l; .innerWrapper { display: flex; @@ -16,7 +16,7 @@ align-items: center; .title { font-size: $font-size-large; - color: $light-grey; + color: $gray-10; } .description { diff --git a/frontend/src/components/event-details-table/EventDetailsTable.module.scss b/frontend/src/components/event-details-table/EventDetailsTable.module.scss deleted file mode 100644 index bbb36e13..00000000 --- a/frontend/src/components/event-details-table/EventDetailsTable.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -@import 'styles/colors'; -@import 'styles/spacings'; -@import 'styles/animations'; - -.root { - display: flex; - flex-direction: column; - min-width: 50%; - max-width: 50%; - - @include fadeInAnimation(.1s); - - .header { - background-color: $color-table-black; - color: $color-grey; - display: flex; - justify-content: space-around; - - > div { - flex: 1; - } - - > div:first-child { - color: $light-grey; - font-weight: bold; - padding-left: $spacing-l * 3; - } - } - - .row { - background-color: $color-table-light; - margin-top: $spacing-s; - color: $light-grey; - display: flex; - justify-content: space-around; - - > div { - flex: 1; - } - - > div:first-child { - padding-left: $spacing-l * 3; - } - - .ellipsis { - max-width: 10vw; - min-width: 10vw; - display: inline-block; - overflow: hidden; - } - } -} diff --git a/frontend/src/components/event-details-table/EventDetailsTable.tsx b/frontend/src/components/event-details-table/EventDetailsTable.tsx deleted file mode 100644 index 9e2c1d25..00000000 --- a/frontend/src/components/event-details-table/EventDetailsTable.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { FunctionComponent } from "react"; -import classes from "./EventDetailsTable.module.scss"; -import MiddleEllipsis from "../ellipsis/MiddleEllipsis"; -import CopyButton from "../buttons/copy-button/CopyButton"; -import { EventUtils } from "../../utils/event-utils"; - -export type EventData = Record; - -export type EventDetailsTableProps = { - data: EventData; - className?: string; -}; - -const EventDetailsTable: FunctionComponent = ({ - data, - ...restProps -}) => { - const eventData = EventUtils.computeEventData(data); - return ( -
-
-
VALUES
-
NAME
-
TYPE
-
VALUE
-
- {eventData.map((item, index) => ( -
-
-
- - {item.name} - -
-
- - {item.type} - -
-
- - {item.value} - - -
-
- ))} -
- ); -}; - -export default EventDetailsTable; diff --git a/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss b/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss index bff0abf4..67cb8ff2 100644 --- a/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss +++ b/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss @@ -18,6 +18,6 @@ .text { margin-top: $spacing-l; font-size: $font-size-xlarge; - color: $light-grey + color: $gray-10 } } diff --git a/frontend/src/components/icons/Icons.tsx b/frontend/src/components/icons/Icons.tsx index b3b75c0b..6a883a2b 100644 --- a/frontend/src/components/icons/Icons.tsx +++ b/frontend/src/components/icons/Icons.tsx @@ -18,6 +18,7 @@ import { ReactComponent as Script } from "../../assets/icons/script.svg"; import { ReactComponent as QuestionMark } from "../../assets/icons/question-mark.svg"; import { ReactComponent as Switch } from "../../assets/icons/switch.svg"; import { ReactComponent as Restart } from "../../assets/icons/restart.svg"; +import { ReactComponent as Open } from "assets/icons/open.svg"; export const FlowserIcon = { Account, @@ -40,4 +41,5 @@ export const FlowserIcon = { Search, Cancel, Link, + Open, }; diff --git a/frontend/src/components/input/Input.module.scss b/frontend/src/components/inputs/input/Input.module.scss similarity index 100% rename from frontend/src/components/input/Input.module.scss rename to frontend/src/components/inputs/input/Input.module.scss diff --git a/frontend/src/components/input/Input.tsx b/frontend/src/components/inputs/input/Input.tsx similarity index 100% rename from frontend/src/components/input/Input.tsx rename to frontend/src/components/inputs/input/Input.tsx diff --git a/frontend/src/components/search-input/SearchInput.module.scss b/frontend/src/components/inputs/search-input/SearchInput.module.scss similarity index 100% rename from frontend/src/components/search-input/SearchInput.module.scss rename to frontend/src/components/inputs/search-input/SearchInput.module.scss diff --git a/frontend/src/components/search-input/SearchInput.tsx b/frontend/src/components/inputs/search-input/SearchInput.tsx similarity index 95% rename from frontend/src/components/search-input/SearchInput.tsx rename to frontend/src/components/inputs/search-input/SearchInput.tsx index ccdfc756..ac49048f 100644 --- a/frontend/src/components/search-input/SearchInput.tsx +++ b/frontend/src/components/inputs/search-input/SearchInput.tsx @@ -1,7 +1,7 @@ import classNames from "classnames"; import React, { ReactElement, useRef } from "react"; import classes from "./SearchInput.module.scss"; -import { FlowserIcon } from "../icons/Icons"; +import { FlowserIcon } from "../../icons/Icons"; type SearchInputProps = { className?: string; diff --git a/frontend/src/components/select-input/SelectInput.module.scss b/frontend/src/components/inputs/select-input/SelectInput.module.scss similarity index 100% rename from frontend/src/components/select-input/SelectInput.module.scss rename to frontend/src/components/inputs/select-input/SelectInput.module.scss diff --git a/frontend/src/components/select-input/SelectInput.tsx b/frontend/src/components/inputs/select-input/SelectInput.tsx similarity index 100% rename from frontend/src/components/select-input/SelectInput.tsx rename to frontend/src/components/inputs/select-input/SelectInput.tsx diff --git a/frontend/src/components/json-view/JsonView.module.scss b/frontend/src/components/json-view/JsonView.module.scss index d40c7136..ff4cf57e 100644 --- a/frontend/src/components/json-view/JsonView.module.scss +++ b/frontend/src/components/json-view/JsonView.module.scss @@ -1,4 +1,5 @@ @import "styles/colors"; +@import "styles/scrollbars"; .root { display: inline-block; @@ -7,11 +8,5 @@ height: 100%; width: 100%; - &::-webkit-scrollbar-track { - background-color: $code-background; - } - - &::-webkit-scrollbar-corner { - background-color: $code-background; - } + @include hiddenScrollbars() } diff --git a/frontend/src/components/label/Label.module.scss b/frontend/src/components/label/Label.module.scss index 5fb1a0dc..fb7fc179 100644 --- a/frontend/src/components/label/Label.module.scss +++ b/frontend/src/components/label/Label.module.scss @@ -18,6 +18,6 @@ &.xlarge { font-size: $font-size-xlarge; - color: $light-grey; + color: $gray-10; } } diff --git a/frontend/src/components/layout/Layout.module.scss b/frontend/src/components/layout/Layout.module.scss index 9eb91b38..583b1cf0 100644 --- a/frontend/src/components/layout/Layout.module.scss +++ b/frontend/src/components/layout/Layout.module.scss @@ -1,7 +1,6 @@ @import "styles/spacings"; @import "styles/colors"; -$grid-gap: 30px; $side-nav-width: 80px; .root { @@ -18,9 +17,18 @@ $side-nav-width: 80px; flex-direction: column; min-height: 100vh; width: calc(100vw - $side-nav-width); + max-height: 100vh; + overflow-y: scroll; + + .breadcrumbs { + position: sticky; + top: 0; + z-index: 10; + background: $gray-110; + } .body { - color: $light-grey; + color: $gray-10; align-items: stretch; display: flex; flex-direction: column; @@ -28,7 +36,12 @@ $side-nav-width: 80px; } .bodyWithMargin { - margin: $grid-gap $spacing-l 0; + margin: $spacing-l; + } + + .logs { + position: sticky; + bottom: 0; } } diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index 3e290cc8..5c748742 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -1,6 +1,6 @@ import React, { FC, FunctionComponent } from "react"; import classes from "./Layout.module.scss"; -import Logs from "../../pages/logs/Logs"; +import { Logs } from "../../pages/logs/Logs"; import { Route, RouteProps, useHistory, useLocation } from "react-router-dom"; import { ReactComponent as IconBackButton } from "../../assets/icons/back-button.svg"; import classNames from "classnames"; @@ -25,13 +25,13 @@ export const RouteWithBackButton: FC = (props) => { ); }; -export const RouteWithLayout: FC = (props) => ( - +export const RouteWithProjectLayout: FC = (props) => ( + - + ); -const Layout: FunctionComponent = ({ children }) => { +const ProjectLayout: FunctionComponent = ({ children }) => { const location = useLocation(); const showMargin = !location.pathname.startsWith(routes.interactions); @@ -39,7 +39,7 @@ const Layout: FunctionComponent = ({ children }) => {
- +
{ > {children}
- +
); diff --git a/frontend/src/components/line-separator/LineSeparator.module.scss b/frontend/src/components/line-separator/LineSeparator.module.scss index e3756174..726f76af 100644 --- a/frontend/src/components/line-separator/LineSeparator.module.scss +++ b/frontend/src/components/line-separator/LineSeparator.module.scss @@ -2,7 +2,7 @@ @import "styles/spacings"; .root { - background: $light-grey; + background: $gray-10; opacity: 0.2; } diff --git a/frontend/src/components/list-container/ListContainer.module.scss b/frontend/src/components/list-container/ListContainer.module.scss deleted file mode 100644 index ff2230e0..00000000 --- a/frontend/src/components/list-container/ListContainer.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.listContainer { - display: flex; - flex-direction: column; -} diff --git a/frontend/src/components/list-container/ListContainer.tsx b/frontend/src/components/list-container/ListContainer.tsx deleted file mode 100644 index f2e8adcb..00000000 --- a/frontend/src/components/list-container/ListContainer.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React, { FunctionComponent } from "react"; -import classes from "./ListContainer.module.scss"; - -const ListContainer: FunctionComponent = ({ children }) => { - return
{children}
; -}; - -export default ListContainer; diff --git a/frontend/src/components/side-navigation/SideNavigation.module.scss b/frontend/src/components/side-navigation/SideNavigation.module.scss index f15c123c..af5b484a 100644 --- a/frontend/src/components/side-navigation/SideNavigation.module.scss +++ b/frontend/src/components/side-navigation/SideNavigation.module.scss @@ -5,12 +5,13 @@ display: flex; flex-direction: column; justify-content: space-between; - background: $new-color-1; + background: $gray-110; padding: $spacing-base 0; align-items: center; + border-right: 1px solid $gray-80; .inactiveLink { - background: $new-color-2; + background: $gray-100; opacity: 0.5; width: 50px; height: 50px; diff --git a/frontend/src/components/table/Table.module.scss b/frontend/src/components/table/Table.module.scss index fcdb9e8f..fe29c5ad 100644 --- a/frontend/src/components/table/Table.module.scss +++ b/frontend/src/components/table/Table.module.scss @@ -6,6 +6,7 @@ margin-bottom: $spacing-base; padding-bottom: $spacing-base; padding-top: $spacing-base; + background: transparentize($violet-100, 0.5) !important; } .tableRow { @@ -14,6 +15,7 @@ margin-bottom: $spacing-s; padding-bottom: $spacing-base * 0.8; padding-top: $spacing-base * 0.8; + background: transparentize($gray-80, 0.2); & > div { display: flex; diff --git a/frontend/src/components/table/Table.tsx b/frontend/src/components/table/Table.tsx index 709aae05..3a8cc844 100644 --- a/frontend/src/components/table/Table.tsx +++ b/frontend/src/components/table/Table.tsx @@ -22,7 +22,6 @@ type CustomTableProps = { renderCustomRow?: (row: Row>) => ReactElement; headerRowClass?: string; bodyRowClass?: string | ((row: Row>) => string); - footerRowClass?: string; isInitialLoading?: boolean; error?: Error | string | null | undefined; }; @@ -54,7 +53,6 @@ function Table({ renderCustomHeader, headerRowClass, bodyRowClass, - footerRowClass, className, error, enableIntroAnimations = true, @@ -95,7 +93,6 @@ function Table({ headerRowClass )} key={headerGroup.id} - variant="header-row" > {headerGroup.headers.map((header) => (
({ showIntroAnimation={ showIntroAnimation(row.original) && enableIntroAnimations } - variant="table-line" > {row.getVisibleCells().map((cell) => (
({ ) )} - {table.getFooterGroups().map((footerGroup) => ( -
- {footerGroup.headers.map((header) => ( -
- {flexRender(header.column.columnDef.footer, header.getContext())} -
- ))} -
- ))}
); } diff --git a/frontend/src/components/tabs/StyledTabs.module.scss b/frontend/src/components/tabs/StyledTabs.module.scss new file mode 100644 index 00000000..23921256 --- /dev/null +++ b/frontend/src/components/tabs/StyledTabs.module.scss @@ -0,0 +1,31 @@ +@import "styles/spacings"; +@import "styles/colors"; + +.tab { + max-width: 120px; + padding: $spacing-s !important; + display: flex; + justify-content: center; + align-items: center; +} + +.activeTab { + background: $gray-100 !important; + border-bottom: 2px solid $violet-100 !important; +} + +.tabLabel { + text-align: center; +} + +.tabWrapper { +} + +.tabWrapper, .inactiveTab { + background: $gray-110; +} + +.content { + padding: $spacing-l; + background: $gray-100; +} diff --git a/frontend/src/components/tabs/StyledTabs.tsx b/frontend/src/components/tabs/StyledTabs.tsx new file mode 100644 index 00000000..63c78f75 --- /dev/null +++ b/frontend/src/components/tabs/StyledTabs.tsx @@ -0,0 +1,19 @@ +import classes from "./StyledTabs.module.scss"; +import { Tabs, TabsProps } from "./Tabs"; +import React, { ReactElement } from "react"; + +type StyledTabsProps = TabsProps; + +export function StyledTabs(props: StyledTabsProps): ReactElement { + return ( + + ); +} diff --git a/frontend/src/components/tab-list/TabList.module.scss b/frontend/src/components/tabs/Tabs.module.scss similarity index 91% rename from frontend/src/components/tab-list/TabList.module.scss rename to frontend/src/components/tabs/Tabs.module.scss index cccf71f7..4ec30f19 100644 --- a/frontend/src/components/tab-list/TabList.module.scss +++ b/frontend/src/components/tabs/Tabs.module.scss @@ -34,7 +34,7 @@ background: none; border: none; font-size: $font-size-normal; - color: #E5E5E5; + color: $gray-10; font-family: $font-family-inter; font-weight: bold; width: 100%; @@ -49,11 +49,11 @@ } } .tabButtonActive { - background: #272B32; + background: $gray-100; } .tabButtonInactive { - background: #33383e !important; - color: rgba(229, 229, 229, 0.56) !important; + background: $gray-80 !important; + color: $gray-20 !important; } .newTabButton { width: 20px; diff --git a/frontend/src/components/tab-list/TabList.tsx b/frontend/src/components/tabs/Tabs.tsx similarity index 73% rename from frontend/src/components/tab-list/TabList.tsx rename to frontend/src/components/tabs/Tabs.tsx index 1e4e74fb..7cca6c57 100644 --- a/frontend/src/components/tab-list/TabList.tsx +++ b/frontend/src/components/tabs/Tabs.tsx @@ -1,6 +1,6 @@ import classNames from "classnames"; -import React, { ReactElement } from "react"; -import classes from "./TabList.module.scss"; +import React, { ReactElement, useState } from "react"; +import classes from "./Tabs.module.scss"; import { FlowserIcon } from "../icons/Icons"; export type TabItem = { @@ -9,7 +9,7 @@ export type TabItem = { content: React.ReactNode; }; -type TabListProps = { +export type TabsProps = { label?: string; className?: string; tabClassName?: string; @@ -17,25 +17,38 @@ type TabListProps = { tabLabelClassName?: string; activeTabClassName?: string; inactiveTabClassName?: string; - currentTabId: string | undefined; - onChangeTab: (tab: TabItem) => void; + contentClassName?: string; + currentTabId?: string | undefined; + onChangeTab?: (tab: TabItem) => void; onClose?: (tab: TabItem) => void; onAddNew?: () => void; tabs: TabItem[]; }; -export function TabList(props: TabListProps): ReactElement { +export function Tabs(props: TabsProps): ReactElement { const { label, className, tabWrapperClassName, tabLabelClassName, tabs, - currentTabId, - onChangeTab, onClose, onAddNew, } = props; + + const [fallbackCurrentTabId, setFallbackCurrentTabId] = useState( + props.tabs[0]?.id + ); + const currentTabId = props.currentTabId ?? fallbackCurrentTabId; + + function onChangeTab(tab: TabItem) { + if (props.onChangeTab) { + props.onChangeTab(tab); + } else { + setFallbackCurrentTabId(tab.id); + } + } + const currentTab = tabs.find((tab) => tab.id === currentTabId); return (
@@ -74,7 +87,9 @@ export function TabList(props: TabListProps): ReactElement { )}
- {currentTab?.content} +
+ {currentTab?.content} +
); } diff --git a/frontend/src/components/text-area/TextArea.module.scss b/frontend/src/components/text-area/TextArea.module.scss deleted file mode 100644 index e8f6ee78..00000000 --- a/frontend/src/components/text-area/TextArea.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import 'styles/rules'; -@import 'styles/colors'; -@import 'styles/typography'; -@import 'styles/spacings'; - -.root { - border: 1px solid $color-input-border; - border-radius: $border-radius-input; - display: flex; - width: 100%; - overflow: hidden; - - &:focus-within { - border-color: $yellow; - } - - & > textarea { - flex: 1; - border: none; - background: none; - padding: 10px $spacing-base * 2; - outline: none; - color: $color-grey; - font-size: $font-size-small; - } -} diff --git a/frontend/src/components/text-area/TextArea.tsx b/frontend/src/components/text-area/TextArea.tsx deleted file mode 100644 index 8b4566c3..00000000 --- a/frontend/src/components/text-area/TextArea.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { ForwardRefRenderFunction } from "react"; -import classes from "./TextArea.module.scss"; - -export type TextAreaProps = React.DetailedHTMLProps< - React.TextareaHTMLAttributes, - HTMLTextAreaElement -> & { - value?: string; - disabled?: boolean; - rows?: number; -}; - -const TextArea: ForwardRefRenderFunction = ( - { rows = 6, value = "", disabled = false, ...restProps }: TextAreaProps, - ref -) => { - return ( -
-