From 3f93b1cff116a77ab9562aec499b88e68f62793a Mon Sep 17 00:00:00 2001 From: bufan Date: Tue, 30 Jan 2024 18:44:15 +0800 Subject: [PATCH 1/4] change nav icons --- .../src/components/icons/CompositeIcon.tsx | 16 ++++++++++++++++ .../dashboard/src/components/icons/ModelIcon.tsx | 16 ++++++++++++++++ .../client/dashboard/src/components/nav/Nav.tsx | 6 ++++-- 3 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 packages/client/dashboard/src/components/icons/CompositeIcon.tsx create mode 100644 packages/client/dashboard/src/components/icons/ModelIcon.tsx diff --git a/packages/client/dashboard/src/components/icons/CompositeIcon.tsx b/packages/client/dashboard/src/components/icons/CompositeIcon.tsx new file mode 100644 index 0000000..ca66392 --- /dev/null +++ b/packages/client/dashboard/src/components/icons/CompositeIcon.tsx @@ -0,0 +1,16 @@ +export default function CompositeIcon ({ isActive }: { isActive?: boolean }) { + return ( + + + + ) +} diff --git a/packages/client/dashboard/src/components/icons/ModelIcon.tsx b/packages/client/dashboard/src/components/icons/ModelIcon.tsx new file mode 100644 index 0000000..673443c --- /dev/null +++ b/packages/client/dashboard/src/components/icons/ModelIcon.tsx @@ -0,0 +1,16 @@ +export default function ModelIcon ({ isActive }: { isActive?: boolean }) { + return ( + + + + ) +} diff --git a/packages/client/dashboard/src/components/nav/Nav.tsx b/packages/client/dashboard/src/components/nav/Nav.tsx index aa217a5..1da8a20 100644 --- a/packages/client/dashboard/src/components/nav/Nav.tsx +++ b/packages/client/dashboard/src/components/nav/Nav.tsx @@ -14,6 +14,8 @@ import NodeIcon from '../icons/NodeIcon' import SdkIcon from '../icons/SdkIcon' import TerminalIcon from '../icons/TerminalIcon' import ChevronDown from '../icons/ChevronDown' +import ModelIcon from '../icons/ModelIcon' +import CompositeIcon from '../icons/CompositeIcon' type NavItem = { path?: string @@ -39,12 +41,12 @@ export default function Nav ({ appId }: { appId: string }) { { path: `/dapp/${appId}/explore/model`, name: 'Models', - icon: ExploreIcon + icon: ModelIcon }, { path: `/dapp/${appId}/explore/composite`, name: 'Composites', - icon: ExploreIcon + icon: CompositeIcon }, { path: `/dapp/${appId}/components`, From 5332d5b8b28fcd89bd86db26d594d77158951d2e Mon Sep 17 00:00:00 2001 From: bufan Date: Wed, 31 Jan 2024 16:18:50 +0800 Subject: [PATCH 2/4] reconstruct nav and styles --- packages/client/dashboard/src/App.tsx | 250 ++++++++------- .../src/components/model/CompositeEditor.tsx | 5 +- .../model/CompositePlaygroundGraphiQL.tsx | 6 +- .../model/DappModelAndComposites.tsx | 2 +- .../src/components/model/ModelInstance.tsx | 4 +- .../src/components/model/ModelSDK.tsx | 4 + .../src/components/model/ModelTabs.tsx | 37 --- .../dashboard/src/components/nav/Nav.tsx | 10 +- .../dashboard/src/container/Components.tsx | 3 +- .../src/container/DappDataStatistic.tsx | 25 -- .../{DappModelEditor.tsx => DappEditor.tsx} | 53 +++- .../dashboard/src/container/DappMetrics.tsx | 32 ++ ...ModelPlayground.tsx => DappPlayground.tsx} | 39 ++- .../{DappModelSdk.tsx => DappSdk.tsx} | 26 +- .../src/container/ExploreComposite.tsx | 94 +----- .../dashboard/src/container/ExploreModel.tsx | 87 +----- packages/client/dashboard/src/index.css | 289 ------------------ packages/client/dashboard/src/index.tsx | 10 +- .../client/dashboard/src/styles/index.css | 48 +++ .../dashboard/src/styles/playground.css | 5 - .../src/styles/react-aria/button.css | 25 ++ .../src/styles/{ => react-aria}/checkbox.css | 0 .../src/styles/react-aria/dialog.css | 17 ++ .../dashboard/src/styles/react-aria/index.css | 10 + .../src/styles/{ => react-aria}/menu.css | 25 -- .../dashboard/src/styles/react-aria/modal.css | 54 ++++ .../src/styles/react-aria/popover.css | 100 ++++++ .../dashboard/src/styles/react-aria/tabs.css | 66 ++++ .../src/styles/react-aria/textfield.css | 13 + .../dashboard/src/styles/react-aria/theme.css | 118 +++++++ packages/client/dashboard/src/styles/tab.css | 153 ---------- 31 files changed, 716 insertions(+), 894 deletions(-) delete mode 100644 packages/client/dashboard/src/components/model/ModelTabs.tsx delete mode 100644 packages/client/dashboard/src/container/DappDataStatistic.tsx rename packages/client/dashboard/src/container/{DappModelEditor.tsx => DappEditor.tsx} (73%) create mode 100644 packages/client/dashboard/src/container/DappMetrics.tsx rename packages/client/dashboard/src/container/{DappModelPlayground.tsx => DappPlayground.tsx} (76%) rename packages/client/dashboard/src/container/{DappModelSdk.tsx => DappSdk.tsx} (51%) delete mode 100644 packages/client/dashboard/src/index.css create mode 100644 packages/client/dashboard/src/styles/index.css delete mode 100644 packages/client/dashboard/src/styles/playground.css create mode 100644 packages/client/dashboard/src/styles/react-aria/button.css rename packages/client/dashboard/src/styles/{ => react-aria}/checkbox.css (100%) create mode 100644 packages/client/dashboard/src/styles/react-aria/dialog.css create mode 100644 packages/client/dashboard/src/styles/react-aria/index.css rename packages/client/dashboard/src/styles/{ => react-aria}/menu.css (76%) create mode 100644 packages/client/dashboard/src/styles/react-aria/modal.css create mode 100644 packages/client/dashboard/src/styles/react-aria/popover.css create mode 100644 packages/client/dashboard/src/styles/react-aria/tabs.css create mode 100644 packages/client/dashboard/src/styles/react-aria/textfield.css create mode 100644 packages/client/dashboard/src/styles/react-aria/theme.css delete mode 100644 packages/client/dashboard/src/styles/tab.css diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx index d4cf6f9..e54a361 100644 --- a/packages/client/dashboard/src/App.tsx +++ b/packages/client/dashboard/src/App.tsx @@ -1,4 +1,9 @@ +import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit' +import { ProfileStateProvider } from '@us3r-network/profile' +import dayjs from 'dayjs' +import relativeTime from 'dayjs/plugin/relativeTime' import { useEffect, useState } from 'react' +import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components' import { NavLink, Outlet, @@ -7,37 +12,29 @@ import { useLocation, useParams } from 'react-router-dom' -import styled from 'styled-components' -import dayjs from 'dayjs' -import relativeTime from 'dayjs/plugin/relativeTime' -import { Us3rAuthWithRainbowkitProvider } from '@us3r-network/auth-with-rainbowkit' -import { ProfileStateProvider } from '@us3r-network/profile' import { ToastContainer } from 'react-toastify' import 'react-toastify/dist/ReactToastify.min.css' - -import { DappCompositeDto, ModelStream } from './types.d' +import styled from 'styled-components' +import DappModelAndComposites from './components/model/DappModelAndComposites' +import Header from './components/nav/Header' +import Nav from './components/nav/Nav' import { CERAMIC_TESTNET_HOST, WALLET_CONNECT_PROJECT_ID } from './constants' - -import AppProvider, { useAppCtx } from './context/AppCtx' -import CeramicNodeProvider from './context/CeramicNodeCtx' - -import MyDapps from './container/MyDapps' +import CeramicNodes from './container/CeramicNodes' +import Components from './container/Components' import DappCreate from './container/DappCreate' +import DappEditor from './container/DappEditor' import DappHome from './container/DappHome' import DappInfo from './container/DappInfo' -import DappModelEditor from './container/DappModelEditor' -import DappModelPlayground from './container/DappModelPlayground' -import DappModelSdk from './container/DappModelSdk' -import DappDataStatistic from './container/DappDataStatistic' -import Components from './container/Components' -import CeramicNodes from './container/CeramicNodes' +import DappMetrics from './container/DappMetrics' +import DappPlayground from './container/DappPlayground' +import DappSdk from './container/DappSdk' +import ExploreComposite from './container/ExploreComposite' import ExploreModel from './container/ExploreModel' +import MyDapps from './container/MyDapps' import NoMatch from './container/NoMatch' - -import Header from './components/nav/Header' -import Nav from './components/nav/Nav' -import DappModelAndComposites from './components/model/DappModelAndComposites' -import ExploreComposite from './container/ExploreComposite' +import AppProvider, { useAppCtx } from './context/AppCtx' +import CeramicNodeProvider from './context/CeramicNodeCtx' +import { DappCompositeDto, ModelStream } from './types.d' dayjs.extend(relativeTime) @@ -49,23 +46,19 @@ function Routers () { } /> }> } /> - } /> - }> - } /> - } /> - } /> - } /> - - } /> }> } /> } /> + } /> - }> - } /> - } /> + }> + } /> + } /> + } /> + } /> - } /> + } /> + } /> } /> @@ -174,14 +167,31 @@ const AppContainer = styled.div` } ` -function ModelEditorLayout () { +function BuildLayout () { const [selectModel, setSelectModel] = useState() const [selectComposite, setSelectComposite] = useState() - const { pathname } = useLocation() - + const defaultKey = pathname.split('/explore/')[1] + const PAGES = [ + { + id: 'editor', + label: 'Editor' + }, + { + id: 'playground', + label: 'Playground' + }, + { + id: 'sdk', + label: 'SDK' + }, + { + id: 'metrics', + label: 'Metrics' + } + ] return ( - + { @@ -195,93 +205,99 @@ function ModelEditorLayout () { selectComposite={selectComposite} editable={pathname.includes('model-editor')} /> - - +
+ + {PAGES.map(page => ( +
+ + + +
+ ))} +
+ + {PAGES.map(page => ( + + + {page.label} + + + ))} + +
+ +
+ ) } -const EditorLayoutContainer = styled.div` - margin-top: 25px; - margin-bottom: 25px; - display: flex; - gap: 20px; - - > .list { - flex-grow: 1; - } - - .ops { - flex-grow: 1; - overflow: hidden; - } - - .playground-ops { - flex-grow: 1; - overflow: hidden; - - > div { - height: calc(100vh - 100px); - } - .graphiql-container { - height: 100%; - } - } -` - function ExploreLayout () { const { pathname } = useLocation() + const defaultExploreKey = pathname.split('/explore/')[1] + const EXPLORE_PAGES = [ + { + id: 'model', + label: 'Models' + }, + { + id: 'composite', + label: 'Composites' + }, + { + id: 'components', + label: 'Components' + } + ] return ( - -
- - {({ isActive }) => ( -
- Models -
- )} - - - {!pathname.includes('favorite') && ( - - {({ isActive }) => ( -
- Composites -
- )} - - )} -
-
- -
- + + + {EXPLORE_PAGES.map(page => ( +
+ + + +
+ ))} +
+ + {EXPLORE_PAGES.map(page => ( + + + {page.label} + + + ))} + +
+ + ) } -const ExploreLayoutContainer = styled.div` - margin-top: 25px; - margin-bottom: 25px; - - .explore-catalog { +const LayoutContainer = styled.div` + width: 100%; + margin-top: 20px; + margin-bottom: 20px; + display: flex; + gap: 20px; + .tab-list { position: absolute; - display: flex; - gap: 20px; - .item { - font-size: 24px; - font-weight: 700; - color: #718096; - > span { - transition: opacity 0.09s ease-in-out; - } - &.active { - background: #14171a; - color: #fff; - } - } + top: 0px; + right: 0px; + } + .tab-panel { + position: absolute; + width: 100%; + top: 0; + margin: 0; + padding: 0; + } + .build-content{ + flex-grow: 1; } ` diff --git a/packages/client/dashboard/src/components/model/CompositeEditor.tsx b/packages/client/dashboard/src/components/model/CompositeEditor.tsx index 77c68ca..aaa0ccf 100644 --- a/packages/client/dashboard/src/components/model/CompositeEditor.tsx +++ b/packages/client/dashboard/src/components/model/CompositeEditor.tsx @@ -83,7 +83,7 @@ const Box = styled.div` justify-content: space-between; background-color: #14171a; margin-bottom: 20px; - + height: 100%; > div { display: flex; align-items: center; @@ -100,7 +100,6 @@ const Box = styled.div` ` const EditorBox = styled.div` - height: calc(100vh - 300px); max-height: 800px; background: #14171a; border: 1px solid #39424c; @@ -110,6 +109,7 @@ const EditorBox = styled.div` * { box-sizing: border-box; } + flex: 1; ` const ResultBox = styled.div` @@ -117,6 +117,7 @@ const ResultBox = styled.div` flex-direction: column; gap: 20px; margin-top: 20px; + flex: 0 0 100px; > div { background: #1b1e23; border: 1px solid #39424c; diff --git a/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx b/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx index 6c401cc..39b7d46 100644 --- a/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx +++ b/packages/client/dashboard/src/components/model/CompositePlaygroundGraphiQL.tsx @@ -144,12 +144,8 @@ export default function CompositePlaygroundGraphiQL( const GraphiqlContainer = styled.div` border-radius: 20px; overflow: hidden; - height: calc(100vh - 200px); + height: 100%; > div { height: 100%; - .graphiql-container { - height: 100%; - width: 100%; - } } ` diff --git a/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx b/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx index 9bb7f70..48872af 100644 --- a/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx +++ b/packages/client/dashboard/src/components/model/DappModelAndComposites.tsx @@ -195,7 +195,7 @@ export default function DappModelAndComposites ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [appId]) - const isMetrics = location.pathname.endsWith('statistic') + const isMetrics = location.pathname.endsWith('metrics') const isSdk = location.pathname.endsWith('sdk') const [openModal, setOpenModal] = useState(OPEN_MODAL.NONE) diff --git a/packages/client/dashboard/src/components/model/ModelInstance.tsx b/packages/client/dashboard/src/components/model/ModelInstance.tsx index 1b18cfe..0fe0d38 100644 --- a/packages/client/dashboard/src/components/model/ModelInstance.tsx +++ b/packages/client/dashboard/src/components/model/ModelInstance.tsx @@ -15,7 +15,7 @@ import PlusIcon from '../icons/PlusIcon' import ModelInstanceFormModal from './ModelInstanceFormModal' import ModelStreamList from './ModelStreamList' -export default function Instance ({ +export default function ModelInstance ({ streamId, network, schema, @@ -271,7 +271,7 @@ export default function Instance ({ onSubmit={() => submitStream()} /> -

{name}

+ {/*

{name}

*/} {composeClientAuthenticated && ( { diff --git a/packages/client/dashboard/src/components/model/ModelSDK.tsx b/packages/client/dashboard/src/components/model/ModelSDK.tsx index f43a405..00b0994 100644 --- a/packages/client/dashboard/src/components/model/ModelSDK.tsx +++ b/packages/client/dashboard/src/components/model/ModelSDK.tsx @@ -176,6 +176,8 @@ export function Code({ name, content }: { name: string; content: string }) { } const SDKContainer = styled.div` + width: 100%; + height: 100%; display: flex; flex-direction: column; gap: 20px; @@ -194,10 +196,12 @@ const SDKContainer = styled.div` ` const SDKBox = styled.div` + height: 100%; padding: 12px 20px 0 20px; border-radius: 20px; border: 1px solid #39424c; background: #1b1e23; + overflow: scroll; ` const CodeBox = styled.div` diff --git a/packages/client/dashboard/src/components/model/ModelTabs.tsx b/packages/client/dashboard/src/components/model/ModelTabs.tsx deleted file mode 100644 index 4daec5b..0000000 --- a/packages/client/dashboard/src/components/model/ModelTabs.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * @Author: bufan bufan@hotmail.com - * @Date: 2023-12-15 10:06:03 - * @LastEditors: bufan bufan@hotmail.com - * @LastEditTime: 2023-12-21 14:55:14 - * @FilePath: /s3/packages/client/dashboard/src/components/ModelTabs.tsx - * @Description: - */ -import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components' -// import Definition from './Definition' -import ModelSDK from './ModelSDK' - -export default function ModelTabs({ - name, - modelId, -}: { - name: string - modelId: string -}) { - return ( - -
- {name} - - Model Definition - Model SDK - -
- - {/* */} - - - - - - ) -} diff --git a/packages/client/dashboard/src/components/nav/Nav.tsx b/packages/client/dashboard/src/components/nav/Nav.tsx index 1da8a20..4d4819a 100644 --- a/packages/client/dashboard/src/components/nav/Nav.tsx +++ b/packages/client/dashboard/src/components/nav/Nav.tsx @@ -49,7 +49,7 @@ export default function Nav ({ appId }: { appId: string }) { icon: CompositeIcon }, { - path: `/dapp/${appId}/components`, + path: `/dapp/${appId}/explore/components`, name: 'Components', icon: ComponentIcon } @@ -61,22 +61,22 @@ export default function Nav ({ appId }: { appId: string }) { icon: InfoIcon, items: [ { - path: `/dapp/${appId}/model-editor`, + path: `/dapp/${appId}/build/editor`, name: 'Compose', icon: LayoutIcon }, { - path: `/dapp/${appId}/model-playground`, + path: `/dapp/${appId}/build/playground`, name: 'Playground', icon: TerminalIcon }, { - path: `/dapp/${appId}/model-sdk`, + path: `/dapp/${appId}/build/sdk`, name: 'SDK', icon: SdkIcon }, { - path: `/dapp/${appId}/statistic`, + path: `/dapp/${appId}/build/metrics`, name: 'Metrics', icon: ChartIcon } diff --git a/packages/client/dashboard/src/container/Components.tsx b/packages/client/dashboard/src/container/Components.tsx index 44ddbcb..0e16003 100644 --- a/packages/client/dashboard/src/container/Components.tsx +++ b/packages/client/dashboard/src/container/Components.tsx @@ -70,7 +70,6 @@ export default function Components() { } const Box = styled.div` - margin: 25px 0; display: flex; flex-direction: column; gap: 20px; @@ -110,7 +109,7 @@ const BannerDesc = styled.ul` font-weight: 500; font-size: 18px; - line-height: 21px; + line-height: 24px; color: #ffffff; diff --git a/packages/client/dashboard/src/container/DappDataStatistic.tsx b/packages/client/dashboard/src/container/DappDataStatistic.tsx deleted file mode 100644 index 6baddbd..0000000 --- a/packages/client/dashboard/src/container/DappDataStatistic.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useOutletContext } from 'react-router-dom' -import Instance from '../components/model/ModelInstance' -import useSelectedDapp from '../hooks/useSelectedDapp' -import { ModelStream, Network } from '../types.d' - -export default function DappDataStatistic() { - const { selectModel } = useOutletContext<{ - selectModel: ModelStream - }>() - const { selectedDapp } = useSelectedDapp() - - if (selectModel) { - return ( -
- -
- ) - } - return null -} diff --git a/packages/client/dashboard/src/container/DappModelEditor.tsx b/packages/client/dashboard/src/container/DappEditor.tsx similarity index 73% rename from packages/client/dashboard/src/container/DappModelEditor.tsx rename to packages/client/dashboard/src/container/DappEditor.tsx index 36e3795..6dfff74 100644 --- a/packages/client/dashboard/src/container/DappModelEditor.tsx +++ b/packages/client/dashboard/src/container/DappEditor.tsx @@ -14,7 +14,7 @@ import { } from '../types.d' import { schemas } from '../utils/composedb-types/schemas' -export default function DappModelEditor () { +export default function DappEditor () { const { selectedDapp } = useSelectedDapp() const { selectModel, selectComposite } = useOutletContext<{ selectModel: ModelStream @@ -23,26 +23,31 @@ export default function DappModelEditor () { if (selectModel) { return ( - -
- {selectModel.stream_content?.name} -
- - + +
+ {selectModel.stream_content?.name} +
+ + ) } if (selectComposite) { return ( - -
+ +
{selectComposite.name}
- - +
+ +
+ ) } return null @@ -121,8 +126,26 @@ const Loading = styled.div` color: gray; ` -const Box = styled.div` +export const BuildContentBox = styled.div` display: flex; flex-direction: column; gap: 20px; + padding-top: 10px; + + .title-bar { + border-bottom: none; + position: relative; + top: 0; + display: flex; + align-items: center; + gap: 20px; + height: 30px; + > span { + font-weight: 700; + font-size: 24px; + } + } + .content-box { + height: calc(100vh - 160px); + } ` diff --git a/packages/client/dashboard/src/container/DappMetrics.tsx b/packages/client/dashboard/src/container/DappMetrics.tsx new file mode 100644 index 0000000..c64e14c --- /dev/null +++ b/packages/client/dashboard/src/container/DappMetrics.tsx @@ -0,0 +1,32 @@ +import { useOutletContext } from 'react-router-dom' +import ModelInstance from '../components/model/ModelInstance' +import useSelectedDapp from '../hooks/useSelectedDapp' +import { ModelStream, Network } from '../types.d' +import { BuildContentBox } from './DappEditor' + +export default function DappMetrics () { + const { selectModel } = useOutletContext<{ + selectModel: ModelStream + }>() + const { selectedDapp } = useSelectedDapp() + + if (selectModel) { + const name = selectModel.stream_content.name + return ( + +
+ {name} Streams +
+
+ +
+ + ) + } + return null +} diff --git a/packages/client/dashboard/src/container/DappModelPlayground.tsx b/packages/client/dashboard/src/container/DappPlayground.tsx similarity index 76% rename from packages/client/dashboard/src/container/DappModelPlayground.tsx rename to packages/client/dashboard/src/container/DappPlayground.tsx index 217fcb9..64c083e 100644 --- a/packages/client/dashboard/src/container/DappModelPlayground.tsx +++ b/packages/client/dashboard/src/container/DappPlayground.tsx @@ -12,8 +12,9 @@ import { Network } from '../types.d' import useSelectedDapp from '../hooks/useSelectedDapp' +import { BuildContentBox } from './DappEditor' -export default function DappModelPlayground () { +export default function DappPlayground () { const { selectModel, selectComposite } = useOutletContext<{ selectModel: ModelStream selectComposite: DappCompositeDto @@ -22,23 +23,33 @@ export default function DappModelPlayground () { const { selectedDapp } = useSelectedDapp() if (selectModel) { return ( -
- -
+ +
+ {selectModel.stream_content.name} +
+
+ +
+ ) } if (selectComposite) { return ( -
- -
+ +
+ {selectComposite.name} +
+
+ +
+ ) } return null diff --git a/packages/client/dashboard/src/container/DappModelSdk.tsx b/packages/client/dashboard/src/container/DappSdk.tsx similarity index 51% rename from packages/client/dashboard/src/container/DappModelSdk.tsx rename to packages/client/dashboard/src/container/DappSdk.tsx index a4c63ea..910095b 100644 --- a/packages/client/dashboard/src/container/DappModelSdk.tsx +++ b/packages/client/dashboard/src/container/DappSdk.tsx @@ -1,9 +1,9 @@ import { useOutletContext } from 'react-router-dom' -import styled from 'styled-components' import ModelSDK from '../components/model/ModelSDK' -import { DappCompositeDto, ModelStream } from '../types.d' +import { DappCompositeDto, ModelStream } from '../types' +import { BuildContentBox } from './DappEditor' -export default function DappModelSdk() { +export default function DappSdk () { const { selectModel } = useOutletContext<{ selectModel: ModelStream selectComposite: DappCompositeDto @@ -14,22 +14,16 @@ export default function DappModelSdk() { const modelId = selectModel.stream_id return ( -
- -
- {name}SDK -
+ +
+ {name} SDK +
+
- -
+
+ ) } return null } - -const SDKContainer = styled.div` - display: flex; - flex-direction: column; - gap: 20px; -` diff --git a/packages/client/dashboard/src/container/ExploreComposite.tsx b/packages/client/dashboard/src/container/ExploreComposite.tsx index 19632cb..1dab529 100644 --- a/packages/client/dashboard/src/container/ExploreComposite.tsx +++ b/packages/client/dashboard/src/container/ExploreComposite.tsx @@ -1,8 +1,8 @@ import { useState } from 'react' import { useSearchParams } from 'react-router-dom' -import styled from 'styled-components' import Search from '../components/common/Search' import { CompositeList } from '../components/model/ExploreCompositeList' +import { ExploreContainer } from './ExploreModel' export default function ExploreComposite () { const [searchParams] = useSearchParams() @@ -10,10 +10,8 @@ export default function ExploreComposite () { searchParams.get('searchText') || '' ) return ( - +
- {/*
ComposeDB Models
*/} -
- + ) } - -const ExploreModelContainer = styled.div` - margin-top: 25px; - margin-bottom: 25px; - .no-more { - padding: 20px; - text-align: center; - color: gray; - } - - .mobile-models-box { - margin-bottom: 20px; - } - - .title-box { - display: flex; - align-items: center; - justify-content: end; - margin-bottom: 20px; - .tools { - display: flex; - align-items: center; - gap: 15px; - - > button { - border-radius: 100px; - background: #14171a; - font-size: 14px; - line-height: 20px; - text-align: center; - font-weight: 400; - color: #a0aec0; - text-transform: capitalize; - background: #ffffff; - font-weight: 500; - color: #14171a; - cursor: pointer; - border: none; - outline: none; - /* width: 100px; */ - padding: 0 15px; - height: 36px; - - &.star-btn { - width: 52px; - height: 40px; - - background: #1a1e23; - border: 1px solid #39424c; - border-radius: 100px; - display: inline-flex; - align-items: center; - justify-items: center; - } - } - } - } - - .title { - > span { - font-size: 22px; - font-weight: 700; - line-height: 40px; - } - - /* padding: 0 0 20px 0; */ - position: sticky; - background-color: #14171a; - top: 0; - z-index: 100; - - display: flex; - justify-content: space-between; - align-items: center; - font-weight: 700; - font-size: 24px; - line-height: 28px; - font-style: italic; - - color: #ffffff; - } - - .react-aria-Button { - font-size: 18px; - } -` diff --git a/packages/client/dashboard/src/container/ExploreModel.tsx b/packages/client/dashboard/src/container/ExploreModel.tsx index 4738932..2023a5f 100644 --- a/packages/client/dashboard/src/container/ExploreModel.tsx +++ b/packages/client/dashboard/src/container/ExploreModel.tsx @@ -13,10 +13,8 @@ export default function ExploreModel () { searchParams.get('searchText') || '' ) return ( - +
- {/*
ComposeDB Models
*/} -
- + ) } -const ExploreModelContainer = styled.div` - margin-top: 25px; - margin-bottom: 25px; - .no-more { - padding: 20px; - text-align: center; - color: gray; - } - - .mobile-models-box { - margin-bottom: 20px; - } - +export const ExploreContainer = styled.div` .title-box { display: flex; align-items: center; - justify-content: end; + justify-content: start; margin-bottom: 20px; - .tools { - display: flex; - align-items: center; - gap: 15px; - - > button { - border-radius: 100px; - background: #14171a; - font-size: 14px; - line-height: 20px; - text-align: center; - font-weight: 400; - color: #a0aec0; - text-transform: capitalize; - background: #ffffff; - font-weight: 500; - color: #14171a; - cursor: pointer; - border: none; - outline: none; - /* width: 100px; */ - padding: 0 15px; - height: 36px; - - &.star-btn { - width: 52px; - height: 40px; - - background: #1a1e23; - border: 1px solid #39424c; - border-radius: 100px; - display: inline-flex; - align-items: center; - justify-items: center; - } - } - } - } - - .title { - > span { - font-size: 22px; - font-weight: 700; - line-height: 40px; - } - - /* padding: 0 0 20px 0; */ - position: sticky; - background-color: #14171a; - top: 0; - z-index: 100; - - display: flex; - justify-content: space-between; - align-items: center; - font-weight: 700; - font-size: 24px; - line-height: 28px; - font-style: italic; - - color: #ffffff; - } - - .react-aria-Button { - font-size: 18px; } ` diff --git a/packages/client/dashboard/src/index.css b/packages/client/dashboard/src/index.css deleted file mode 100644 index c8ae0f5..0000000 --- a/packages/client/dashboard/src/index.css +++ /dev/null @@ -1,289 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background: #14171a; - color: #fff; -} - -html, -body, -#root { - font-family: 'Rubik'; -} - -a, -a:hover { - text-decoration: none; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -*::-webkit-scrollbar { - display: none; -} - -button { - background: none; - border: none; - outline: none; - cursor: pointer; - &:disabled { - cursor: default; - } -} - -.react-aria-ModalOverlay { - position: fixed; - top: 0; - left: 0; - width: 100vw; - z-index: 100000; - height: var(--visual-viewport-height); - background: rgba(0 0 0 / 0.5); - backdrop-filter: blur(12px); - overflow: scroll; - - &[data-entering] { - animation: fade 200ms; - } - - &[data-exiting] { - animation: fade 150ms reverse ease-in; - } -} - -.confirm-modal { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; -} - -.react-aria-Modal { - box-shadow: 0 8px 20px rgba(0 0 0 / 0.1); - border-radius: 6px; - background: var(--page-background); - border: 1px solid var(--spectrum-global-color-gray-300); - outline: none; - padding: 30px; - position: relative; - - &[data-entering] { - animation: zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); - } -} - -@keyframes fade { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes zoom { - from { - transform: scale(0.8); - } - - to { - transform: scale(1); - } -} - -.react-aria-Dialog { - outline: none; - - .react-aria-Heading { - line-height: 1em; - margin-top: 0; - } - - .react-aria-Button { - margin-top: 20px; - } - - .favorite { - margin: 0; - } -} - -.react-aria-Button { - background: var(--spectrum-global-color-gray-50); - border: 1px solid var(--spectrum-global-color-gray-400); - border-radius: 4px; - color: var(--spectrum-alias-text-color); - appearance: none; - vertical-align: middle; - font-size: 1.2rem; - text-align: center; - margin: 0; - outline: none; - transition: border-color 200ms; - - &[data-hovered] { - border-color: var(--spectrum-global-color-gray-500); - } - - &[data-pressed] { - box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1); - background: var(--spectrum-global-color-gray-100); - border-color: var(--spectrum-global-color-gray-600); - } - - &[data-focus-visible] { - border-color: slateblue; - box-shadow: 0 0 0 1px slateblue; - } -} - -.react-aria-TextField { - margin-bottom: 8px; - - .react-aria-Label { - display: inline-block; - width: 5.357rem; - } - - .react-aria-Input { - font-size: 16px; - } -} - -/* Popover */ -.react-aria-Popover, -.list-popover { - background: #1b1e23; - border: 1px solid #39424c; - border-radius: 10px; - z-index: 200; - outline: none; - width: 200px; - - &[data-placement='top'] { - margin-bottom: 6px; - --origin: translateY(8px); - } - - &[data-placement='bottom'] { - margin-top: 6px; - --origin: translateY(-8px); - - & .react-aria-OverlayArrow svg { - transform: rotate(180deg); - } - } - - &[data-placement='right'] { - margin-left: 6px; - --origin: translateX(-8px); - - & .react-aria-OverlayArrow svg { - transform: rotate(90deg); - } - } - - &[data-placement='left'] { - margin-right: 6px; - --origin: translateX(8px); - - & .react-aria-OverlayArrow svg { - transform: rotate(-90deg); - } - } - - &[data-entering] { - animation: slide 200ms; - } - - &[data-exiting] { - animation: slide 200ms reverse ease-in; - } -} - -.react-aria-Popover a { - text-decoration: none; -} - -.react-aria-Popover .popover-item { - color: #718096; -} - -.react-aria-Popover .popover-item button { - font-weight: 400; - font-size: 16px; - line-height: 19px; - padding: 20px; - color: inherit; - margin: 0; - padding: 20px; - width: 100%; - height: 100%; - text-align: start; -} - -.react-aria-Popover .popover-item:hover { - color: #ffffff; - background: #14171a; - border-radius: 20px; -} - -@keyframes slide { - from { - transform: var(--origin); - opacity: 0; - } - - to { - transform: translateY(0); - opacity: 1; - } -} - -.react-aria-Dialog { - outline: none; -} - -.react-aria-Button { - background: var(--spectrum-global-color-gray-50); - border: 1px solid var(--spectrum-global-color-gray-400); - border-radius: 4px; - color: var(--spectrum-alias-text-color); - appearance: none; - vertical-align: middle; - font-size: 1.2rem; - text-align: center; - margin: 0; - outline: none; - padding: 6px; - transition: border-color 200ms; - - &[data-hovered] { - border-color: var(--spectrum-global-color-gray-500); - } - - &[data-pressed] { - box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1); - background: var(--spectrum-global-color-gray-100); - border-color: var(--spectrum-global-color-gray-600); - } - - &[data-focus-visible] { - border-color: slateblue; - box-shadow: 0 0 0 1px slateblue; - } -} - -@media (forced-colors: active) { - .react-aria-Popover {} -} \ No newline at end of file diff --git a/packages/client/dashboard/src/index.tsx b/packages/client/dashboard/src/index.tsx index 26d7472..4297589 100644 --- a/packages/client/dashboard/src/index.tsx +++ b/packages/client/dashboard/src/index.tsx @@ -1,19 +1,15 @@ import React from 'react' import ReactDOM from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' - import App from './App' import reportWebVitals from './reportWebVitals' -import './index.css' -import './styles/tab.css' -import './styles/playground.css' -import './styles/menu.css' -import './styles/checkbox.css' -import './styles/prism-vsc-dark-plus.css' +import './styles/index.css' +import './styles/react-aria/index.css' import '@graphiql/plugin-explorer/dist/style.css' import 'graphiql/graphiql.css' +import './styles/prism-vsc-dark-plus.css' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( diff --git a/packages/client/dashboard/src/styles/index.css b/packages/client/dashboard/src/styles/index.css new file mode 100644 index 0000000..0fe8eda --- /dev/null +++ b/packages/client/dashboard/src/styles/index.css @@ -0,0 +1,48 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background: #14171a; + color: #fff; +} + +html, +body, +#root { + font-family: 'Rubik'; +} + +a, +a:hover { + text-decoration: none; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +*::-webkit-scrollbar { + display: none; +} + +button { + background: none; + border: none; + outline: none; + cursor: pointer; + &:disabled { + cursor: default; + } +} + +.confirm-modal { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; +} diff --git a/packages/client/dashboard/src/styles/playground.css b/packages/client/dashboard/src/styles/playground.css deleted file mode 100644 index a7c7b81..0000000 --- a/packages/client/dashboard/src/styles/playground.css +++ /dev/null @@ -1,5 +0,0 @@ -.graphiql-container { - height: 100%; - width: 100%; - } - \ No newline at end of file diff --git a/packages/client/dashboard/src/styles/react-aria/button.css b/packages/client/dashboard/src/styles/react-aria/button.css new file mode 100644 index 0000000..386f105 --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/button.css @@ -0,0 +1,25 @@ +.react-aria-Button { + background: var(--spectrum-global-color-gray-50); + border: 1px solid var(--spectrum-global-color-gray-400); + color: var(--spectrum-alias-text-color); + border-radius: 4px; + appearance: none; + vertical-align: middle; + font-size: 1.2rem; + text-align: center; + margin: 0; + outline: none; + padding: 0.286rem 0.857rem; + + &[data-pressed] { + box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1); + background: var(--spectrum-global-color-gray-100); + border-color: var(--spectrum-global-color-gray-500); + } + + &[data-focus-visible] { + border-color: #14171a; + box-shadow: 0 0 0 1px #14171a; + } + } + \ No newline at end of file diff --git a/packages/client/dashboard/src/styles/checkbox.css b/packages/client/dashboard/src/styles/react-aria/checkbox.css similarity index 100% rename from packages/client/dashboard/src/styles/checkbox.css rename to packages/client/dashboard/src/styles/react-aria/checkbox.css diff --git a/packages/client/dashboard/src/styles/react-aria/dialog.css b/packages/client/dashboard/src/styles/react-aria/dialog.css new file mode 100644 index 0000000..abf3980 --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/dialog.css @@ -0,0 +1,17 @@ +/* Dialog */ +.react-aria-Dialog { + outline: none; + + .react-aria-Heading { + line-height: 1em; + margin-top: 0; + } + + .react-aria-Button { + margin-top: 20px; + } + + .favorite { + margin: 0; + } +} diff --git a/packages/client/dashboard/src/styles/react-aria/index.css b/packages/client/dashboard/src/styles/react-aria/index.css new file mode 100644 index 0000000..5b3fddc --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/index.css @@ -0,0 +1,10 @@ + +@import "theme.css"; +@import "button.css"; +@import "checkbox.css"; +@import 'dialog.css'; +@import 'menu.css'; +@import 'modal.css'; +@import 'popover.css'; +@import 'tabs.css'; +@import 'textfield.css'; diff --git a/packages/client/dashboard/src/styles/menu.css b/packages/client/dashboard/src/styles/react-aria/menu.css similarity index 76% rename from packages/client/dashboard/src/styles/menu.css rename to packages/client/dashboard/src/styles/react-aria/menu.css index 27a2e61..6fd7eff 100644 --- a/packages/client/dashboard/src/styles/menu.css +++ b/packages/client/dashboard/src/styles/react-aria/menu.css @@ -1,28 +1,3 @@ -.react-aria-Button { - background: var(--spectrum-global-color-gray-50); - border: 1px solid var(--spectrum-global-color-gray-400); - color: var(--spectrum-alias-text-color); - border-radius: 4px; - appearance: none; - vertical-align: middle; - font-size: 1.2rem; - text-align: center; - margin: 0; - outline: none; - padding: 0.286rem 0.857rem; - - &[data-pressed] { - box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1); - background: var(--spectrum-global-color-gray-100); - border-color: var(--spectrum-global-color-gray-500); - } - - &[data-focus-visible] { - border-color: #14171a; - box-shadow: 0 0 0 1px #14171a; - } - } - .react-aria-Menu { --highlight-background: #14171a; --highlight-foreground: white; diff --git a/packages/client/dashboard/src/styles/react-aria/modal.css b/packages/client/dashboard/src/styles/react-aria/modal.css new file mode 100644 index 0000000..55ee1c4 --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/modal.css @@ -0,0 +1,54 @@ +/* Modal */ +.react-aria-ModalOverlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + z-index: 100000; + height: var(--visual-viewport-height); + background: rgba(0 0 0 / 0.5); + backdrop-filter: blur(12px); + overflow: scroll; + + &[data-entering] { + animation: fade 200ms; + } + + &[data-exiting] { + animation: fade 150ms reverse ease-in; + } +} + +.react-aria-Modal { + box-shadow: 0 8px 20px rgba(0 0 0 / 0.1); + border-radius: 6px; + background: var(--page-background); + border: 1px solid var(--spectrum-global-color-gray-300); + outline: none; + padding: 30px; + position: relative; + + &[data-entering] { + animation: zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + } +} + +@keyframes fade { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes zoom { + from { + transform: scale(0.8); + } + + to { + transform: scale(1); + } +} diff --git a/packages/client/dashboard/src/styles/react-aria/popover.css b/packages/client/dashboard/src/styles/react-aria/popover.css new file mode 100644 index 0000000..ccc9d2d --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/popover.css @@ -0,0 +1,100 @@ +/* Popover */ +.react-aria-Popover, +.list-popover { + background: #1b1e23; + border: 1px solid #39424c; + border-radius: 10px; + z-index: 200; + outline: none; + width: 200px; + + &[data-placement='top'] { + margin-bottom: 6px; + --origin: translateY(8px); + } + + &[data-placement='bottom'] { + margin-top: 6px; + --origin: translateY(-8px); + + & .react-aria-OverlayArrow svg { + transform: rotate(180deg); + } + } + + &[data-placement='right'] { + margin-left: 6px; + --origin: translateX(-8px); + + & .react-aria-OverlayArrow svg { + transform: rotate(90deg); + } + } + + &[data-placement='left'] { + margin-right: 6px; + --origin: translateX(8px); + + & .react-aria-OverlayArrow svg { + transform: rotate(-90deg); + } + } + + &[data-entering] { + animation: slide 200ms; + } + + &[data-exiting] { + animation: slide 200ms reverse ease-in; + } +} + +.react-aria-Popover a { + text-decoration: none; +} + +.react-aria-Popover .popover-item { + color: #718096; +} + +.react-aria-Popover .popover-item button { + font-weight: 400; + font-size: 16px; + line-height: 19px; + padding: 20px; + color: inherit; + margin: 0; + padding: 20px; + width: 100%; + height: 100%; + text-align: start; +} + +.react-aria-Popover .popover-item:hover { + color: #ffffff; + background: #14171a; + border-radius: 20px; +} + +@keyframes slide { + from { + transform: var(--origin); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +@media (forced-colors: active) { + .react-aria-Popover {} +} + +:root { + --origin: translateY(8px); + --text-color-base: white; + --text-color: white; + --text-color-hover: white; +} \ No newline at end of file diff --git a/packages/client/dashboard/src/styles/react-aria/tabs.css b/packages/client/dashboard/src/styles/react-aria/tabs.css new file mode 100644 index 0000000..d8958d0 --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/tabs.css @@ -0,0 +1,66 @@ +/* Tabs */ +.react-aria-Tabs { + position: relative; + --text-color-base:black; + --highlight-background: white; + width: 100%; +} + +.react-aria-TabList { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &[data-orientation=horizontal] { + border: 1px solid var(--border-color); + border-radius: 999px; + } +} + +.react-aria-Tab { + padding: 10px 20px; + cursor: default; + outline: none; + position: relative; + color: var(--text-color-base); + transition: color 200ms; + --border-color: transparent; + forced-color-adjust: none; + border-radius: 999px; + a { + color: var(--text-color); + } + + &[data-hovered], + &[data-focused] { + color: var(--text-color-hover); + } + + &[data-selected] { + background-color: var(--highlight-background); + color: var(--text-color-base); + a { + color: var(--text-color-base); + } + } + + &[data-disabled] { + color: var(--text-color-disabled); + &[data-selected] { + --border-color: var(--text-color-disabled); + } + } + + &[data-focus-visible]:after { + content: ''; + position: absolute; + inset: 4px; + border-radius: 4px; + border: 2px solid var(--focus-ring-color); + } +} + +.react-aria-TabPanel { + +} \ No newline at end of file diff --git a/packages/client/dashboard/src/styles/react-aria/textfield.css b/packages/client/dashboard/src/styles/react-aria/textfield.css new file mode 100644 index 0000000..66a6acc --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/textfield.css @@ -0,0 +1,13 @@ +/* TextField */ +.react-aria-TextField { + margin-bottom: 8px; + + .react-aria-Label { + display: inline-block; + width: 5.357rem; + } + + .react-aria-Input { + font-size: 16px; + } +} \ No newline at end of file diff --git a/packages/client/dashboard/src/styles/react-aria/theme.css b/packages/client/dashboard/src/styles/react-aria/theme.css new file mode 100644 index 0000000..5777da1 --- /dev/null +++ b/packages/client/dashboard/src/styles/react-aria/theme.css @@ -0,0 +1,118 @@ +/* color themes for dark and light modes, generated with Leonardo. + * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */ + :root { + --background-color: #f8f8f8; + --gray-50: #ffffff; + --gray-100: #d0d0d0; + --gray-200: #afafaf; + --gray-300: #8f8f8f; + --gray-400: #717171; + --gray-500: #555555; + --gray-600: #393939; + --purple-100: #d5c9fa; + --purple-200: #b8a3f6; + --purple-300: #997cf2; + --purple-400: #7a54ef; + --purple-500: #582ddc; + --purple-600: #3c1e95; + --red-100: #f7c4ba; + --red-200: #f29887; + --red-300: #eb664d; + --red-400: #de2300; + --red-500: #a81b00; + --red-600: #731200; + --highlight-hover: rgb(0 0 0 / 0.07); + --highlight-pressed: rgb(0 0 0 / 0.15); + } + + /* Dark: https://leonardocolor.io/theme.html?name=Dark&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A11%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */ + @media (prefers-color-scheme: dark) { + :root { + --background-color: #1d1d1d; + --gray-50: #101010; + --gray-100: #393939; + --gray-200: #4f4f4f; + --gray-300: #686868; + --gray-400: #848484; + --gray-500: #a7a7a7; + --gray-600: #cfcfcf; + --purple-100: #3c1e95; + --purple-200: #522acd; + --purple-300: #6f46ed; + --purple-400: #8e6ef1; + --purple-500: #b099f5; + --purple-600: #d5c8fa; + --red-100: #721200; + --red-200: #9c1900; + --red-300: #cc2000; + --red-400: #e95034; + --red-500: #f08c79; + --red-600: #f7c3ba; + --highlight-hover: rgb(255 255 255 / 0.1); + --highlight-pressed: rgb(255 255 255 / 0.2); + } + } + + /* Semantic colors */ + :root { + --focus-ring-color: var(--purple-400); + --text-color: var(--gray-600); + --text-color-base: var(--gray-500); + --text-color-hover: var(--gray-600); + --text-color-disabled: var(--gray-200); + --text-color-placeholder: var(--gray-400); + --link-color: var(--purple-500); + --link-color-secondary: var(--gray-500); + --link-color-pressed: var(--purple-600); + --border-color: var(--gray-300); + --border-color-hover: var(--gray-400); + --border-color-pressed: var(--gray-400); + --border-color-disabled: var(--gray-100); + --field-background: var(--gray-50); + --field-text-color: var(--gray-600); + --overlay-background: var(--gray-50); + --button-background: var(--gray-50); + --button-background-pressed: var(--background-color); + /* these colors are the same between light and dark themes + * to ensure contrast with the foreground color */ + --highlight-background: #6f46ed; /* purple-300 from dark theme, 3.03:1 against background-color */ + --highlight-background-pressed: #522acd; /* purple-200 from dark theme */ + --highlight-background-invalid: #cc2000; /* red-300 from dark theme */ + --highlight-foreground: white; /* 5.56:1 against highlight-background */ + --highlight-foreground-pressed: #ddd; + --highlight-overlay: rgb(from #6f46ed r g b / 15%); + --invalid-color: var(--red-400); + --invalid-color-pressed: var(--red-500); + } + + /* Windows high contrast mode overrides */ + @media (forced-colors: active) { + :root { + --background-color: Canvas; + --focus-ring-color: Highlight; + --text-color: ButtonText; + --text-color-base: ButtonText; + --text-color-hover: ButtonText; + --text-color-disabled: GrayText; + --text-color-placeholder: ButtonText; + --link-color: LinkText; + --link-color-secondary: LinkText; + --link-color-pressed: LinkText; + --border-color: ButtonBorder; + --border-color-hover: ButtonBorder; + --border-color-pressed: ButtonBorder; + --border-color-disabled: GrayText; + --field-background: Field; + --field-text-color: FieldText; + --overlay-background: Canvas; + --button-background: ButtonFace; + --button-background-pressed: ButtonFace; + --highlight-background: Highlight; + --highlight-background-pressed: Highlight; + --highlight-background-invalid: LinkText; + --highlight-foreground: HighlightText; + --highlight-foreground-pressed: HighlightText; + --invalid-color: LinkText; + --invalid-color-pressed: LinkText; + } + } \ No newline at end of file diff --git a/packages/client/dashboard/src/styles/tab.css b/packages/client/dashboard/src/styles/tab.css deleted file mode 100644 index a1f0cdf..0000000 --- a/packages/client/dashboard/src/styles/tab.css +++ /dev/null @@ -1,153 +0,0 @@ -.react-aria-Tabs { - --highlight-color: #fff; - --text-color: var(--spectrum-global-color-gray-700); - --text-color-hover: var(--spectrum-global-color-gray-800); - --text-color-selected: var(--spectrum-global-color-gray-900); - --text-color-disabled: var(--spectrum-alias-text-color-disabled); - - display: flex; - height: 100%; - - &[data-orientation='horizontal'] { - flex-direction: column; - } - - &[data-orientation='vertical'] { - flex-direction: row; - } -} - -.title-bar, -.dapp-title-bar { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #39424c; - position: sticky; - top: 60px; - z-index: 100; - background-color: #14171a; -} - -.dapp-title-bar { - border-bottom: none; - position: relative; - top: 0; -} - -.title-bar > span, -.dapp-title-bar > span { - font-style: italic; - font-weight: 700; - font-size: 24px; - line-height: 28px; - color: #ffffff; -} - -.react-aria-TabList { - display: flex; - - &[aria-orientation='horizontal'] { - .react-aria-Tab { - border-bottom: 3px solid var(--border-color, transparent); - } - } - - &[aria-orientation='vertical'] { - flex-direction: column; - /* border-right: 1px solid gray; */ - - .react-aria-Tab { - border-right: 3px solid var(--border-color, transparent); - } - } -} - -.dapp-title-bar .react-aria-TabList { - border: 1px solid #39424c; - border-radius: 100px; - padding: 2px; - - &[aria-orientation='horizontal'] { - .react-aria-Tab { - border-bottom: none; - } - } -} - -.react-aria-Tab { - padding: 10px; - cursor: default; - outline: none; - position: relative; - font-weight: 700; - font-size: 18px; - line-height: 21px; - color: #718096; - cursor: pointer; - transition: color 200ms; - padding: 20px 15px; - - &[data-hovered], - &:focus { - color: var(--text-color-hover); - } - - &[aria-selected='true'] { - --border-color: var(--highlight-color); - color: var(--text-color-selected); - } - - &[aria-disabled] { - color: var(--text-color-disabled); - &[aria-selected='true'] { - --border-color: var(--text-color-disabled); - } - } - - &[data-focus-visible]:after { - content: ''; - position: absolute; - inset: 4px; - border-radius: 4px; - border: 2px solid var(--highlight-color); - } -} - -.dapp-title-bar .react-aria-Tab { - padding: 6px 20px; - font-weight: 400; - font-size: 16px; - line-height: 24px; - &[aria-selected='true'] { - color: #14171A; - background-color: #FFFFFF; - border-radius: 100px; - } -} - -.react-aria-TabPanel { - margin-top: 4px; - padding: 20px 0 0 0; - border-radius: 4px; - outline: none; - flex-grow: 1; - - &[data-focus-visible] { - box-shadow: inset 0 0 0 2px var(--highlight-color); - } -} - -@media (forced-colors: active) { - .react-aria-Tabs { - forced-color-adjust: none; - color: CanvasText; - - --highlight-color: Highlight; - --text-color: ButtonText; - --text-color-hover: ButtonText; - --text-color-selected: ButtonText; - --text-color-disabled: GrayText; - } -} - From 8df7f9f9bf659aff188f6834c1dae048d79eba32 Mon Sep 17 00:00:00 2001 From: bufan Date: Wed, 31 Jan 2024 16:18:58 +0800 Subject: [PATCH 3/4] reconstruct nav and styles --- packages/client/dashboard/src/App.tsx | 2 +- packages/client/dashboard/src/hooks/useGuideSteps.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/client/dashboard/src/App.tsx b/packages/client/dashboard/src/App.tsx index e54a361..6a31fca 100644 --- a/packages/client/dashboard/src/App.tsx +++ b/packages/client/dashboard/src/App.tsx @@ -171,7 +171,7 @@ function BuildLayout () { const [selectModel, setSelectModel] = useState() const [selectComposite, setSelectComposite] = useState() const { pathname } = useLocation() - const defaultKey = pathname.split('/explore/')[1] + const defaultKey = pathname.split('/build/')[1] const PAGES = [ { id: 'editor', diff --git a/packages/client/dashboard/src/hooks/useGuideSteps.ts b/packages/client/dashboard/src/hooks/useGuideSteps.ts index b576d50..d04e70f 100644 --- a/packages/client/dashboard/src/hooks/useGuideSteps.ts +++ b/packages/client/dashboard/src/hooks/useGuideSteps.ts @@ -100,28 +100,28 @@ export function useGuideStepsState(dapps: ClientDApp[], loadingDApps: boolean) { useEffect(() => { if (!validStep(1)) { if (!validStep2SubStep(0)) { - const isModelEditor = location.pathname.endsWith('model-editor') + const isModelEditor = location.pathname.endsWith('editor') if (isModelEditor) { completeStep2SubStep(0) } } if (!validStep2SubStep(1)) { - const isModelPlayground = location.pathname.endsWith('model-playground') + const isModelPlayground = location.pathname.endsWith('playground') if (isModelPlayground) { completeStep2SubStep(1) } } if (!validStep2SubStep(2)) { - const isModelSdk = location.pathname.endsWith('model-sdk') + const isModelSdk = location.pathname.endsWith('sdk') if (isModelSdk) { completeStep2SubStep(2) } } if (!validStep2SubStep(3)) { - const isStatistic = location.pathname.endsWith('statistic') + const isStatistic = location.pathname.endsWith('metrics') if (isStatistic) { completeStep2SubStep(3) } From 222de5c9c32055ca799622762480a6656c5f4267 Mon Sep 17 00:00:00 2001 From: bufan Date: Wed, 31 Jan 2024 16:32:48 +0800 Subject: [PATCH 4/4] fix issue playground hidden plugin div cover nav --- packages/client/dashboard/src/components/nav/Nav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/dashboard/src/components/nav/Nav.tsx b/packages/client/dashboard/src/components/nav/Nav.tsx index 4d4819a..aca3359 100644 --- a/packages/client/dashboard/src/components/nav/Nav.tsx +++ b/packages/client/dashboard/src/components/nav/Nav.tsx @@ -189,7 +189,7 @@ const NavContainer = styled.nav<{ open?: boolean }>` flex-direction: column; align-items: center; justify-content: space-between; - + z-index: 100; .item-container { display: flex; flex-direction: row;