Skip to content

Commit

Permalink
Tidy up dashboard styling a bit to match other tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaclarke
jaclarke committed Jan 7, 2025
1 parent 4aeb27a commit d5af9e6
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 77 deletions.
84 changes: 39 additions & 45 deletions shared/studio/tabs/dashboard/databaseDashboard.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,18 @@
.dashboard,
.firstDashboard {
flex-grow: 1;
background-color: var(--app-panel-bg);
border-radius: 8px;
background-color: var(--app_panel_background);
border-radius: 12px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.06);
overflow: auto;
font-family: "Roboto Flex Variable", sans-serif;
@include hideScrollbar;

@include darkTheme {
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2),
0px 0px 4px 0px rgba(0, 0, 0, 0.3);
}

@include breakpoint(mobile) {
border-radius: 0;
}
Expand All @@ -24,7 +31,7 @@
flex-direction: column;
gap: 8px;
align-items: center;
color: #555;
color: var(--main_text_color);

.loading {
display: flex;
Expand All @@ -34,10 +41,6 @@
justify-content: center;
margin: auto;
}

@include darkTheme {
color: #aaa;
}
}

.dashboardLayout,
Expand All @@ -46,14 +49,11 @@
flex-direction: column;
align-items: center;

--buttonBg: var(--app-accent-green);
--buttonTextColour: #fff;

.dbName {
font-size: 28px;
font-size: 26px;
margin-top: 54px;
font-family: Roboto Mono;
font-weight: bold;
font-family: "Roboto Mono Variable", monospace;
font-weight: 650;
text-align: center;

display: flex;
Expand All @@ -76,54 +76,42 @@
.dashboard {
.buttons {
margin: 30px;
margin-top: 42px;
display: flex;
flex-flow: row wrap;
justify-content: center;

@include darkTheme {
--buttonTextColour: #1d1d1d;
}
}

.button.button {
margin: 4px;
width: 228px;

& > div {
padding: 24px 34px;
border-radius: 4px;
justify-content: center;
}
.button {
margin: 8px;
width: 200px;
height: 80px;
border-radius: 8px;
font-size: 15px;
font-weight: 550;
--buttonPrimaryBackground: var(--app-accent-green);

svg {
fill: currentColor;
margin-right: 12px;
width: 24px;
height: 24px;
}

span {
margin: unset;
}
}

.docButtons {
padding: 40px;

display: flex;
flex-flow: row wrap;
justify-content: center;

color: --app-text-colour;

a {
padding: 20px;
margin: 10px;
min-width: 175px;

text-decoration: none;
color: inherit;
outline: none;

display: inline-flex;
flex-direction: column;
align-items: center;
Expand All @@ -135,10 +123,9 @@

span {
display: inline-block;
font-size: 18px;
font-size: 16px;
line-height: 32px;
font-weight: bold;
color: var(--app-text-colour);
font-weight: 550;
}

&:hover {
Expand Down Expand Up @@ -167,16 +154,16 @@
}

.statValue {
font-weight: 700;
font-size: 48px;
font-weight: 650;
font-size: 42px;
line-height: 48px;
}

.statLabel {
font-family: "Roboto Mono", monospace;
font-family: "Roboto Mono Variable", monospace;
font-style: normal;
font-weight: 400;
font-size: 18px;
font-weight: 450;
font-size: 16px;
line-height: 24px;
opacity: 0.55;
}
Expand Down Expand Up @@ -210,14 +197,21 @@
}

p {
font-size: 18px;
font-size: 16px;
line-height: 20px;
margin: 20px 0;
}

& > div {
margin: 30px 0;

button {
padding: 0;
--buttonPrimaryBackground: var(--app-accent-green);
margin: auto;
padding: 24px;
font-weight: 550;
font-size: 15px;
border-radius: 8px;
}
}
}
Expand Down
62 changes: 30 additions & 32 deletions shared/studio/tabs/dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
DocsIcon,
} from "../../icons/docs";

import Button from "@edgedb/common/ui/button";
import {ArrowRightIcon, Button} from "@edgedb/common/newui";
import {CustomScrollbars} from "@edgedb/common/ui/customScrollbar";
import Spinner from "@edgedb/common/ui/spinner";

Expand Down Expand Up @@ -70,40 +70,40 @@ export const DatabaseDashboard = observer(function DatabaseDashboard() {

<div className={styles.buttons}>
<Button
kind="primary"
className={styles.button}
label="Open REPL"
size="large"
icon={<TabReplIcon />}
leftIcon
leftIcon={<TabReplIcon />}
onClick={() => navigateToTab("repl")}
></Button>
>
Open REPL
</Button>

<Button
kind="primary"
className={styles.button}
label="Open Editor"
size="large"
icon={<TabEditorIcon />}
leftIcon
leftIcon={<TabEditorIcon />}
onClick={() => navigateToTab("editor")}
></Button>
>
Open Editor
</Button>

<Button
kind="primary"
className={styles.button}
label="Schema Viewer"
size="large"
icon={<TabSchemaIcon />}
leftIcon
leftIcon={<TabSchemaIcon />}
onClick={() => navigateToTab("schema")}
></Button>
>
Schema Viewer
</Button>

<Button
kind="primary"
className={styles.button}
label="Data Viewer"
size="large"
icon={<TabDataExplorerIcon />}
leftIcon
leftIcon={<TabDataExplorerIcon />}
onClick={() => navigateToTab("data")}
></Button>
>
Data Viewer
</Button>
</div>

<div className={styles.stats}>
Expand Down Expand Up @@ -205,17 +205,9 @@ const FirstRunDashboard = observer(function FirstRunDashboard() {
</p>
<div>
<Button
label={
instanceState.creatingExampleDB
? `Creating example ${dbOrBranch}...`
: exampleDBExists
? `Switch to example ${dbOrBranch}`
: `Create example ${dbOrBranch}`
}
kind="primary"
loading={instanceState.creatingExampleDB}
disabled={instanceState.creatingExampleDB}
size="large"
style="square"
rightIcon={exampleDBExists ? <ArrowRightIcon /> : undefined}
onClick={
exampleDBExists
? () => navigate("_example")
Expand All @@ -226,7 +218,13 @@ const FirstRunDashboard = observer(function FirstRunDashboard() {
navigate("_example");
}
}
></Button>
>
{instanceState.creatingExampleDB
? `Creating example ${dbOrBranch}...`
: exampleDBExists
? `Switch to example ${dbOrBranch}`
: `Create example ${dbOrBranch}`}
</Button>
</div>
</div>
</div>
Expand Down

0 comments on commit d5af9e6

Please sign in to comment.