Skip to content

Commit f234a3b

Browse files
author
Tim Stirrat
authored
Buttons/list, cards, dialog polish (#37)
1 parent 476e1d6 commit f234a3b

File tree

16 files changed

+125
-63
lines changed

16 files changed

+125
-63
lines changed

‎src/App.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,3 @@
1010
margin: 0 auto;
1111
max-width: 1256px + 48px; // offset grid margins
1212
}
13-
14-
.canvas-card {
15-
overflow-y: hidden; // hide jagged corners on canvas cards
16-
}

‎src/components/Database/DataViewer/CloneDialog.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
DialogButton,
2626
} from '@rmwc/dialog';
2727
import { Typography } from '@rmwc/typography';
28+
import { Theme } from '@rmwc/theme';
2829

2930
export interface Props {
3031
realtimeRef: firebase.database.Reference;
@@ -107,10 +108,10 @@ export const CloneDialog = React.memo<Props>(function CloneDialog$({
107108
))}
108109
</DialogContent>
109110
<DialogActions>
110-
<DialogButton type="button" action="close">
111-
Cancel
112-
</DialogButton>
113-
<DialogButton type="submit" raised>
111+
<Theme use={['textSecondaryOnBackground']} wrap>
112+
<DialogButton action="close">Cancel</DialogButton>
113+
</Theme>
114+
<DialogButton unelevated type="submit">
114115
Clone
115116
</DialogButton>
116117
</DialogActions>

‎src/components/Database/DataViewer/EditNode.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { useState, useRef, useEffect } from 'react';
2828
import './EditNode.scss';
2929
import keycode from 'keycode';
3030
import { jsonIshValue, getDbRootUrl } from './common/view_model';
31+
import { Theme } from '@rmwc/theme';
3132

3233
export interface Props {
3334
value?: string | boolean | number;
@@ -116,13 +117,15 @@ export const EditNode = React.memo<Props>(function EditNode$({
116117
</div>
117118
<CardActions className="EditNode__actions">
118119
<CardActionButtons>
119-
<CardActionButton
120-
type="button"
121-
onClick={() => onClose && onClose()}
122-
>
123-
Cancel
124-
</CardActionButton>
125-
<CardActionButton raised type="submit">
120+
<Theme use={['textSecondaryOnBackground']} wrap>
121+
<CardActionButton
122+
type="button"
123+
onClick={() => onClose && onClose()}
124+
>
125+
Cancel
126+
</CardActionButton>
127+
</Theme>
128+
<CardActionButton unelevated type="submit">
126129
Save
127130
</CardActionButton>
128131
</CardActionButtons>

‎src/components/Database/DataViewer/InlineQuery.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
} from '@rmwc/card';
3434

3535
import './InlineQuery.scss';
36+
import { Theme } from '@rmwc/theme';
3637

3738
export interface Props {
3839
params?: QueryParams;
@@ -136,20 +137,22 @@ export const InlineQuery = React.memo<Props>(function InlineQuery$({
136137
</div>
137138
<CardActions className="InlineQuery__actions">
138139
<CardActionButtons>
139-
{params !== DEFAULT_QUERY_PARAMS && (
140+
<Theme use={['textSecondaryOnBackground']}>
141+
{params !== DEFAULT_QUERY_PARAMS && (
142+
<CardActionButton
143+
type="button"
144+
label="Reset"
145+
danger
146+
onClick={() => onSubmit(DEFAULT_QUERY_PARAMS)}
147+
/>
148+
)}
140149
<CardActionButton
141150
type="button"
142-
label="Reset"
143-
danger
144-
onClick={() => onSubmit(DEFAULT_QUERY_PARAMS)}
151+
label="Cancel"
152+
onClick={() => onCancel && onCancel()}
145153
/>
146-
)}
147-
<CardActionButton
148-
type="button"
149-
label="Cancel"
150-
onClick={() => onCancel && onCancel()}
151-
/>
152-
<CardActionButton raised type="submit" label="Search" />
154+
</Theme>
155+
<CardActionButton unelevated type="submit" label="Search" />
153156
</CardActionButtons>
154157
</CardActions>
155158
</Card>

‎src/components/Database/DataViewer/RenameDialog.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
DialogActions,
2525
DialogButton,
2626
} from '@rmwc/dialog';
27+
import { Theme } from '@rmwc/theme';
2728

2829
export interface Props {
2930
realtimeRef: firebase.database.Reference;
@@ -79,10 +80,10 @@ export const RenameDialog = React.memo<Props>(function RenameDialog$({
7980
</div>
8081
</DialogContent>
8182
<DialogActions>
82-
<DialogButton type="button" action="close">
83-
Cancel
84-
</DialogButton>
85-
<DialogButton type="submit" raised>
83+
<Theme use={['textSecondaryOnBackground']} wrap>
84+
<DialogButton action="close">Cancel</DialogButton>
85+
</Theme>
86+
<DialogButton type="submit" unelevated>
8687
Rename
8788
</DialogButton>
8889
</DialogActions>

‎src/components/Database/Database.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020

2121
.Database-Picker {
22-
min-width: 30%;
22+
min-width: 20%;
2323
}
2424

2525
.Database-Picker--primary-only {
@@ -28,7 +28,6 @@
2828

2929
.Database-Database {
3030
flex: 1;
31-
padding: 28px;
3231

3332
// A few things in the data viewer uses position: absolute.
3433
position: relative;

‎src/components/Database/Database.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
import React, { useState, useEffect, useCallback } from 'react';
1818
import * as firebase from 'firebase/app';
1919
import 'firebase/database';
20-
import { ThemeProvider } from '@rmwc/theme';
2120
import { connect } from 'react-redux';
2221
import { NodeContainer } from './DataViewer/NodeContainer';
2322
import { AppState } from '../../store';
@@ -37,11 +36,6 @@ export interface PropsFromState {
3736

3837
export type Props = PropsFromState;
3938

40-
const theme: Record<string, string> = {
41-
primary: '#039be5',
42-
primaryBg: '#039be5',
43-
};
44-
4539
export const Database: React.FC<Props> = ({ config, namespace }) => {
4640
const [ref, setRef] = useState<firebase.database.Reference | undefined>(
4741
undefined
@@ -59,21 +53,21 @@ export const Database: React.FC<Props> = ({ config, namespace }) => {
5953
);
6054

6155
return (
62-
<ThemeProvider options={theme}>
56+
<div className="Database-Database">
6357
<CardActionBar>
6458
<IconButton
6559
icon="home"
6660
tag={props => <Link to={`/database/${namespace}/data`} {...props} />}
6761
/>
6862
</CardActionBar>
6963
{ref ? (
70-
<div className="Database-Database">
64+
<>
7165
<NodeContainer realtimeRef={ref} isViewRoot onNavigate={doNavigate} />
72-
</div>
66+
</>
7367
) : (
7468
<p>Loading</p>
7569
)}
76-
</ThemeProvider>
70+
</div>
7771
);
7872
};
7973

‎src/components/Firestore/dialogs/AddCollectionDialog.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,13 @@ export const AddCollectionDialog: React.FC<Props> = ({
136136
<DialogButton action="close">Cancel</DialogButton>
137137
</Theme>
138138
{step === Step.DOCUMENT ? (
139-
<DialogButton action="accept" isDefaultAction>
139+
<DialogButton unelevated action="accept" isDefaultAction>
140140
Save
141141
</DialogButton>
142142
) : (
143-
<DialogButton onClick={next}>Next</DialogButton>
143+
<DialogButton unelevated onClick={next}>
144+
Next
145+
</DialogButton>
144146
)}
145147
</DialogActions>
146148
</Dialog>

‎src/components/Firestore/dialogs/AddDocumentDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export const AddDocumentDialog: React.FC<Props> = ({
131131
<Theme use={['textSecondaryOnBackground']} wrap>
132132
<DialogButton action="close">Cancel</DialogButton>
133133
</Theme>
134-
<DialogButton action="accept" isDefaultAction>
134+
<DialogButton unelevated action="accept" isDefaultAction>
135135
Save
136136
</DialogButton>
137137
</DialogActions>

‎src/components/Firestore/dialogs/clearAll.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const promptClearAll = () =>
3333
<Theme use={['textSecondaryOnBackground']} wrap>
3434
<DialogButton action="close">Cancel</DialogButton>
3535
</Theme>
36-
<DialogButton action="accept" isDefaultAction danger>
36+
<DialogButton unelevated action="accept" isDefaultAction danger>
3737
Clear
3838
</DialogButton>
3939
</>

0 commit comments

Comments
 (0)