From 096ee26e809764a5d25e4aedbf840119d2ca57d9 Mon Sep 17 00:00:00 2001 From: Damian Stasik Date: Fri, 3 Dec 2021 00:20:17 +0100 Subject: [PATCH 1/2] refactor: use buttons to get rid of deprecated javascript URLs --- .../BrowserFilter/BrowserFilter.scss | 1 + .../BrowserFilter/FilterRow.react.js | 2 +- src/components/Button/Button.react.js | 7 +++---- src/components/Button/Button.scss | 4 +--- src/components/Filter/Filter.react.js | 3 ++- .../PermissionsDialog.react.js | 7 +++---- .../PermissionsDialog/PermissionsDialog.scss | 4 ++++ .../ProtectedFieldsDialog.react.js | 7 +++---- .../ProtectedFieldsDialog.scss | 4 ++++ .../InstallationCondition.react.js | 8 +++---- .../InstallationCondition.scss | 2 +- .../PushAudiencesOption.react.js | 14 ++++++------- .../PushAudiencesOption.scss | 1 + .../SlowQueries/SlowQueries.react.js | 7 +++---- .../Analytics/SlowQueries/SlowQueries.scss | 2 +- src/dashboard/Data/Webhooks/Webhooks.react.js | 5 +++-- src/dashboard/Data/Webhooks/Webhooks.scss | 12 +++++++++++ src/dashboard/Push/Push.scss | 1 + .../Push/PushAudiencesIndexRow.react.js | 21 ++++++++----------- src/dashboard/Push/PushAudiencesIndexRow.scss | 3 +++ src/dashboard/Push/PushNew.react.js | 2 +- src/stylesheets/globals.scss | 8 +++++++ 22 files changed, 74 insertions(+), 51 deletions(-) create mode 100644 src/dashboard/Data/Webhooks/Webhooks.scss diff --git a/src/components/BrowserFilter/BrowserFilter.scss b/src/components/BrowserFilter/BrowserFilter.scss index 55ad5e5fa5..5585ba7d28 100644 --- a/src/components/BrowserFilter/BrowserFilter.scss +++ b/src/components/BrowserFilter/BrowserFilter.scss @@ -138,6 +138,7 @@ } .remove { + @include buttonReset; display: inline-block; height: 14px; margin: 8px; diff --git a/src/components/BrowserFilter/FilterRow.react.js b/src/components/BrowserFilter/FilterRow.react.js index f7c2eb05ef..de9416ded6 100644 --- a/src/components/BrowserFilter/FilterRow.react.js +++ b/src/components/BrowserFilter/FilterRow.react.js @@ -103,7 +103,7 @@ let FilterRow = ({ options={constraints.map((c) => Constraints[c].name)} onChange={(c) => onChangeConstraint(constraintLookup[c])} /> {compareValue(compareInfo, compareTo, onChangeCompareTo, active, parentContentId)} - + ); diff --git a/src/components/Button/Button.react.js b/src/components/Button/Button.react.js index b5d29bb0eb..10d347ee06 100644 --- a/src/components/Button/Button.react.js +++ b/src/components/Button/Button.react.js @@ -39,15 +39,14 @@ let Button = (props) => { styleOverride = { width: props.width, minWidth: props.width, ...props.additionalStyles }; } return ( - { if (props.disabled) e.target.blur(); }} > {props.value} - + ); } diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 4cb7f42a6c..7de9e42e30 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -9,17 +9,15 @@ .button { @include DosisFont; + @include buttonReset($bg: none, $border: 1px solid $blue, $padding: 0 16px); display: inline-block; height: 30px; - border: 1px solid $blue; line-height: 28px; outline: 0; text-decoration: none; text-align: center; border-radius: 5px; - cursor: pointer; min-width: 110px; - padding: 0 16px; font-size: 14px; color: $blue; diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js index f6c5c60ff1..9b9bc7d7b9 100644 --- a/src/components/Filter/Filter.react.js +++ b/src/components/Filter/Filter.react.js @@ -47,6 +47,7 @@ function deleteRow(filters, index) { let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, context) => { blacklist = blacklist || []; let available = Filters.availableFilters(schema, filters); + console.log('c', context) return (
{filters.toArray().map((filter, i) => { @@ -60,7 +61,7 @@ let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, co } // Get the column preference of the current class. - const currentColumnPreference = context.currentApp.columnPreference[className]; + const currentColumnPreference = context.currentApp.columnPreference && context.currentApp.columnPreference[className]; // Check if the preference exists. if (currentColumnPreference) { diff --git a/src/components/PermissionsDialog/PermissionsDialog.react.js b/src/components/PermissionsDialog/PermissionsDialog.react.js index cd06a20bdb..ff3632a249 100644 --- a/src/components/PermissionsDialog/PermissionsDialog.react.js +++ b/src/components/PermissionsDialog/PermissionsDialog.react.js @@ -1061,13 +1061,12 @@ export default class PermissionsDialog extends React.Component { if (!this.state.transitioning) { trash = (
- - +
); } diff --git a/src/components/PermissionsDialog/PermissionsDialog.scss b/src/components/PermissionsDialog/PermissionsDialog.scss index 48e3090878..bebaee7ef4 100644 --- a/src/components/PermissionsDialog/PermissionsDialog.scss +++ b/src/components/PermissionsDialog/PermissionsDialog.scss @@ -314,6 +314,10 @@ height: 50px; padding-top: 15px; text-align: right; + + button { + @include buttonReset; + } svg { vertical-align: top; diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js index 652aaf453f..90f856b278 100644 --- a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js +++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js @@ -359,13 +359,12 @@ export default class ProtectedFieldsDialog extends React.Component { if (!this.state.transitioning) { trash = (
- - +
); } diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss index 5888126fec..9750f8e5ac 100644 --- a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss +++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss @@ -176,6 +176,10 @@ $permissionsDialogWidth: calc( padding-top: 15px; text-align: right; + button { + @include buttonReset; + } + svg { vertical-align: top; cursor: pointer; diff --git a/src/components/PushAudienceDialog/InstallationCondition.react.js b/src/components/PushAudienceDialog/InstallationCondition.react.js index b9f3b68564..617aff8539 100644 --- a/src/components/PushAudienceDialog/InstallationCondition.react.js +++ b/src/components/PushAudienceDialog/InstallationCondition.react.js @@ -115,15 +115,13 @@ export default class InstallationCondition extends React.Component {
); - //TODO Shoulse use ); return ( diff --git a/src/components/PushAudienceDialog/InstallationCondition.scss b/src/components/PushAudienceDialog/InstallationCondition.scss index 53e498af8b..e26306414a 100644 --- a/src/components/PushAudienceDialog/InstallationCondition.scss +++ b/src/components/PushAudienceDialog/InstallationCondition.scss @@ -17,7 +17,7 @@ .description { margin-top: 2px; color: $pink; - cursor: pointer; + @include buttonReset; } .valueInput { diff --git a/src/components/PushAudiencesSelector/PushAudiencesOption.react.js b/src/components/PushAudiencesSelector/PushAudiencesOption.react.js index fd458e6560..f91e5c1b6a 100644 --- a/src/components/PushAudiencesSelector/PushAudiencesOption.react.js +++ b/src/components/PushAudiencesSelector/PushAudiencesOption.react.js @@ -85,24 +85,22 @@ export default class PushAudiencesOption extends PushAudiencesBaseRow {
{detailsView} {!this.state.isNewSegment ? - {this.state.expandedView ? 'less details' : 'more details'} - : - : + }
diff --git a/src/components/PushAudiencesSelector/PushAudiencesOption.scss b/src/components/PushAudiencesSelector/PushAudiencesOption.scss index cd8a344856..00a49117b3 100644 --- a/src/components/PushAudiencesSelector/PushAudiencesOption.scss +++ b/src/components/PushAudiencesSelector/PushAudiencesOption.scss @@ -88,6 +88,7 @@ } .moreDetails { + @include buttonReset; color: $blue; &.hideMoreDetails { diff --git a/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js b/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js index c0ac36aee7..62066dca50 100644 --- a/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js +++ b/src/dashboard/Analytics/SlowQueries/SlowQueries.react.js @@ -164,14 +164,13 @@ class SlowQueries extends TableView { ...newValue, mutated: true })} /> - Download - + ); } diff --git a/src/dashboard/Analytics/SlowQueries/SlowQueries.scss b/src/dashboard/Analytics/SlowQueries/SlowQueries.scss index e574817d53..a3fa38ca17 100644 --- a/src/dashboard/Analytics/SlowQueries/SlowQueries.scss +++ b/src/dashboard/Analytics/SlowQueries/SlowQueries.scss @@ -8,7 +8,7 @@ @import 'stylesheets/globals.scss'; .toolbarAction { - padding: 0px 20px; + @include buttonReset($padding: 0px 20px); color: white; > *:not(svg) { diff --git a/src/dashboard/Data/Webhooks/Webhooks.react.js b/src/dashboard/Data/Webhooks/Webhooks.react.js index 726c7fc349..99e797db67 100644 --- a/src/dashboard/Data/Webhooks/Webhooks.react.js +++ b/src/dashboard/Data/Webhooks/Webhooks.react.js @@ -23,6 +23,7 @@ import TextInput from 'components/TextInput/TextInpu import Toolbar from 'components/Toolbar/Toolbar.react'; import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore'; import { ActionTypes as WebhookActionTypes } from 'lib/stores/WebhookStore'; +import styles from './Webhooks.scss' let TableWarning = ({ text }) =>
{text} @@ -250,9 +251,9 @@ class Webhooks extends TableView { let rowStyle = hook.url ? { cursor: 'pointer' } : {}; let deleteColumnContents = null; if (hook.url) { - deleteColumnContents = + deleteColumnContents = ; } else { let isOverridden = !!this.tableData().find(otherHook => otherHook.url && otherHook.functionName == hook.functionName && diff --git a/src/dashboard/Data/Webhooks/Webhooks.scss b/src/dashboard/Data/Webhooks/Webhooks.scss new file mode 100644 index 0000000000..4296155288 --- /dev/null +++ b/src/dashboard/Data/Webhooks/Webhooks.scss @@ -0,0 +1,12 @@ +/* + * Copyright (c) 2016-present, Parse, LLC + * All rights reserved. + * + * This source code is licensed under the license found in the LICENSE file in + * the root directory of this source tree. + */ + @import 'stylesheets/globals.scss'; + +.deleteButton { + @include buttonReset; +} diff --git a/src/dashboard/Push/Push.scss b/src/dashboard/Push/Push.scss index df0151aaf9..e7ccc68468 100644 --- a/src/dashboard/Push/Push.scss +++ b/src/dashboard/Push/Push.scss @@ -70,6 +70,7 @@ } .localeRemoveButton { + @include buttonReset; position: absolute; right: 15px; font-size: 12px; diff --git a/src/dashboard/Push/PushAudiencesIndexRow.react.js b/src/dashboard/Push/PushAudiencesIndexRow.react.js index ad2dc020b4..344a597d6f 100644 --- a/src/dashboard/Push/PushAudiencesIndexRow.react.js +++ b/src/dashboard/Push/PushAudiencesIndexRow.react.js @@ -40,24 +40,22 @@ export default class PushAudiencesIndexRow extends PushAudiencesBaseRow { {this.props.name} - Send a new push - + {countDetails} {detailsView} - {this.state.expandedView ? 'less details' : 'more details' } - + {DateUtils.yearMonthDayFormatter(this.props.createdAt)} @@ -66,13 +64,12 @@ export default class PushAudiencesIndexRow extends PushAudiencesBaseRow { {this.props.timesUsed} - - + ); diff --git a/src/dashboard/Push/PushAudiencesIndexRow.scss b/src/dashboard/Push/PushAudiencesIndexRow.scss index d12683d094..4aff60cfae 100644 --- a/src/dashboard/Push/PushAudiencesIndexRow.scss +++ b/src/dashboard/Push/PushAudiencesIndexRow.scss @@ -60,6 +60,7 @@ } .moreDetails { + @include buttonReset; color: $blue; font-size: 14px; @@ -73,6 +74,7 @@ } .newPushButton { + @include buttonReset; font-size: 14px; display: block; margin: -5px 0 -10px 0; @@ -84,6 +86,7 @@ //NOTE: May be used to global so SVG icons wrapped by can have common styles. .removeIcon { + @include buttonReset; &:hover, &:focus { svg { fill: $blue; diff --git a/src/dashboard/Push/PushNew.react.js b/src/dashboard/Push/PushNew.react.js index ad5ecc2171..40307f2297 100644 --- a/src/dashboard/Push/PushNew.react.js +++ b/src/dashboard/Push/PushNew.react.js @@ -75,7 +75,7 @@ let LocalizedMessageField = ({
Localized message - REMOVE +
Date: Sun, 5 Dec 2021 19:39:02 +0100 Subject: [PATCH 2/2] Refactor rest of the code --- src/components/Calendar/Calendar.react.js | 6 +- src/components/Calendar/Calendar.scss | 12 +- .../CascadingView/CascadingView.react.js | 9 +- .../CascadingView/CascadingView.scss | 4 + .../DataBrowserHeaderBar.react.js | 7 +- .../DataBrowserHeaderBar.scss | 3 +- src/components/Dropdown/Dropdown.react.js | 2 +- src/components/Dropdown/Dropdown.scss | 6 + .../ExplorerQueryComposer.react.js | 107 ++++++++++-------- .../ExplorerQueryComposer.scss | 12 +- .../ExplorerQueryPicker.react.js | 14 +-- .../ExplorerQueryPicker.scss | 2 + src/components/Filter/Filter.react.js | 3 +- src/components/FormTable/FormTable.react.js | 2 +- src/components/FormTable/FormTable.scss | 1 + src/components/FourOhFour/FourOhFour.react.js | 2 +- src/components/FourOhFour/FourOhFour.scss | 5 + .../InlineSubmitInput.react.js | 4 +- .../InlineSubmitInput/InlineSubmitInput.scss | 4 +- src/components/LoginForm/LoginForm.example.js | 1 - .../Analytics/Explorer/Explorer.react.js | 14 +-- .../Analytics/Explorer/Explorer.scss | 2 +- 22 files changed, 123 insertions(+), 99 deletions(-) diff --git a/src/components/Calendar/Calendar.react.js b/src/components/Calendar/Calendar.react.js index 64076468c6..9ae8f8315c 100644 --- a/src/components/Calendar/Calendar.react.js +++ b/src/components/Calendar/Calendar.react.js @@ -49,8 +49,8 @@ export default class Calendar extends React.Component { renderMonth() { return ( ); @@ -86,7 +86,7 @@ export default class Calendar extends React.Component { new Date(Date.UTC(this.state.currentMonth.getFullYear(), this.state.currentMonth.getMonth(), i)) ); labels.push( - {i} + ); } let classes = [styles.days]; diff --git a/src/components/Calendar/Calendar.scss b/src/components/Calendar/Calendar.scss index e5ee94a608..8cef061694 100644 --- a/src/components/Calendar/Calendar.scss +++ b/src/components/Calendar/Calendar.scss @@ -17,13 +17,13 @@ .month { margin-bottom: 10px; - a { + button { + @include buttonReset($border: 1px solid $blue); position: relative; display: inline-block; width: 14px; height: 14px; border-radius: 100%; - border: 1px solid $blue; opacity: 0.5; margin: 0 6px; @@ -94,8 +94,8 @@ } .days { - span, a { - @include DosisFont; + span, button { + @include buttonReset; display: inline-block; vertical-align: bottom; width: 26px; @@ -122,13 +122,13 @@ background: $darkBlue; } - .selected ~ a { + .selected ~ button { background: white; } } .shadeAfter { - .selected ~ a { + .selected ~ button { background: #efeff1; } } diff --git a/src/components/CascadingView/CascadingView.react.js b/src/components/CascadingView/CascadingView.react.js index a7b7d746db..a5068d24ad 100644 --- a/src/components/CascadingView/CascadingView.react.js +++ b/src/components/CascadingView/CascadingView.react.js @@ -20,12 +20,11 @@ export default class CascadingView extends React.Component { render() { let { content, className, children, style } = this.props; - let expander = + let expander = ; let childrenContainer = this.state.expanded ? (
{children}
) : null; diff --git a/src/components/CascadingView/CascadingView.scss b/src/components/CascadingView/CascadingView.scss index 9780448eff..ab55ff1050 100644 --- a/src/components/CascadingView/CascadingView.scss +++ b/src/components/CascadingView/CascadingView.scss @@ -27,6 +27,10 @@ $arrowColor: #343445; padding: 0; } +.arrow { + @include buttonReset; +} + .expanded { @include arrow('down', 12px, 10px, $arrowColor); content: ''; diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js index 04007d4426..b1c89280ca 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js @@ -74,13 +74,12 @@ export default class DataBrowserHeaderBar extends React.Component { elements.push( readonly || preventSchemaEdits ? null : ( ) ); diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss index 01a1283b32..d6d2097b92 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss @@ -33,9 +33,8 @@ } .addColumnButton { - @include DosisFont; + @include buttonReset($bg: #343445); display: inline-block; - background: #343445; height: 20px; width: 130px; text-align: center; diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js index 392530827c..f4aef51009 100644 --- a/src/components/Dropdown/Dropdown.react.js +++ b/src/components/Dropdown/Dropdown.react.js @@ -68,7 +68,7 @@ export default class Dropdown extends React.Component {
{React.Children.map(this.props.children, c => ( - {c} + ))}
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index ff4c65e22c..50ff4e70a3 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -28,6 +28,12 @@ background: white; overflow: auto; + button { + @include buttonReset; + display: block; + width: 100%; + } + .option { color: $blue; border-bottom: 1px solid $borderGrey; diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js index c852974bc8..be7b73b50b 100644 --- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js +++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js @@ -278,13 +278,14 @@ export default class ExplorerQueryComposer extends React.Component { let deleteButton = null; if (!this.props.isTimeSeries || index !== 0 ) { deleteButton = ( - - × - +
+ +
); } @@ -340,13 +341,14 @@ export default class ExplorerQueryComposer extends React.Component { let specialGroup = this.props.isTimeSeries && index === 0; if (!specialGroup) { deleteButton = ( - - × - +
+ +
); } @@ -519,14 +521,15 @@ export default class ExplorerQueryComposer extends React.Component { {constraintView} - - × - +
+
+
); } @@ -563,13 +566,14 @@ export default class ExplorerQueryComposer extends React.Component { color='blue' width='100%' /> - - × - +
+ +
); @@ -613,33 +617,38 @@ export default class ExplorerQueryComposer extends React.Component { value={this.state.newName} onChange={this.handleNameChange.bind(this)} placeholder={'Give your query a name'} /> - - { this.state.isSaved ? 'Rename' : 'Save' } - - - Cancel - +
+ +
+
+ +
); } else { headerView = (

{ this.state.name || 'Build a custom query' }

- { isNew ? null : - { this.state.isSaved ? 'Rename' : 'Save' } - } + { isNew ? null : ( +
+ +
+ )}
); } diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss index 2ba6997898..9f72899e2c 100644 --- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss +++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss @@ -63,10 +63,14 @@ $placeholderColor: rgba(255, 255, 255, 0.5); } } - .headerButton { + .headerButtonCell { display: table-cell; width: 40px; padding-left: 30px; + } + + .headerButton { + @include buttonReset; color: white; &.secondaryColor { @@ -104,11 +108,15 @@ $placeholderColor: rgba(255, 255, 255, 0.5); } } - .del { + .delWrapper { display: table-cell; vertical-align: middle; width: 24px; padding-left: 10px; + } + + .del { + @include buttonReset; color: #d8d8d8; font-size: 18px; line-height: 18px; diff --git a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js index 8efefdc83f..265d2260ed 100644 --- a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js +++ b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js @@ -27,20 +27,18 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
- onSelect(query)} className={styles.queryLabel}> {query.name} - - {query.preset ? null : + {query.preset ? null : }
); }); diff --git a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss index 0d423b9a3d..d546a85b6c 100644 --- a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss +++ b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss @@ -29,11 +29,13 @@ } .queryLabel { + @include buttonReset; color: $mainTextColor; } } .del { + @include buttonReset; position: absolute; right: 24px; color: #d8d8d8; diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js index 9b9bc7d7b9..f6c5c60ff1 100644 --- a/src/components/Filter/Filter.react.js +++ b/src/components/Filter/Filter.react.js @@ -47,7 +47,6 @@ function deleteRow(filters, index) { let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, context) => { blacklist = blacklist || []; let available = Filters.availableFilters(schema, filters); - console.log('c', context) return (
{filters.toArray().map((filter, i) => { @@ -61,7 +60,7 @@ let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, co } // Get the column preference of the current class. - const currentColumnPreference = context.currentApp.columnPreference && context.currentApp.columnPreference[className]; + const currentColumnPreference = context.currentApp.columnPreference[className]; // Check if the preference exists. if (currentColumnPreference) { diff --git a/src/components/FormTable/FormTable.react.js b/src/components/FormTable/FormTable.react.js index e0cc29c7ce..35cf9cf6d5 100644 --- a/src/components/FormTable/FormTable.react.js +++ b/src/components/FormTable/FormTable.react.js @@ -21,7 +21,7 @@ let Row = ({
{title} - {typeof onDelete === 'function' ? × : null} + {typeof onDelete === 'function' ? : null}
{notes.map(({ key, keyColor = '', value, strong }, index) => { return
diff --git a/src/components/FormTable/FormTable.scss b/src/components/FormTable/FormTable.scss index 83f79db87f..fcd5e21204 100644 --- a/src/components/FormTable/FormTable.scss +++ b/src/components/FormTable/FormTable.scss @@ -64,6 +64,7 @@ } .del { + @include buttonReset; position: absolute; top: 7px; right: 7px; diff --git a/src/components/FourOhFour/FourOhFour.react.js b/src/components/FourOhFour/FourOhFour.react.js index edbfd0d1a4..53aba06e1a 100644 --- a/src/components/FourOhFour/FourOhFour.react.js +++ b/src/components/FourOhFour/FourOhFour.react.js @@ -51,7 +51,7 @@ export default class FourOhFour extends React.Component {
Oh no, we can't find that page!
- history.goBack()}>Go back +
diff --git a/src/components/FourOhFour/FourOhFour.scss b/src/components/FourOhFour/FourOhFour.scss index 1242352a99..209001b87c 100644 --- a/src/components/FourOhFour/FourOhFour.scss +++ b/src/components/FourOhFour/FourOhFour.scss @@ -44,4 +44,9 @@ .back { margin-top: 40px; + + button { + @include buttonReset; + color: #fff; + } } diff --git a/src/components/InlineSubmitInput/InlineSubmitInput.react.js b/src/components/InlineSubmitInput/InlineSubmitInput.react.js index 0a38389a33..e8563090a7 100644 --- a/src/components/InlineSubmitInput/InlineSubmitInput.react.js +++ b/src/components/InlineSubmitInput/InlineSubmitInput.react.js @@ -46,9 +46,9 @@ export default class InlineSubmitInput extends React.Component { onChange={this.handleInputChange.bind(this)} /> { this.state.showButton ? - + : null } diff --git a/src/components/InlineSubmitInput/InlineSubmitInput.scss b/src/components/InlineSubmitInput/InlineSubmitInput.scss index d258027887..10f39b6472 100644 --- a/src/components/InlineSubmitInput/InlineSubmitInput.scss +++ b/src/components/InlineSubmitInput/InlineSubmitInput.scss @@ -17,19 +17,17 @@ } .button { - @include DosisFont; + @include buttonReset($border: 1px solid #159cee, $padding: 0px 7px); position: absolute; top: 30px; right: 15px; height: 20px; line-height: 20px; - border: 1px solid #159cee; outline: 0; text-decoration: none; text-align: center; border-radius: 5px; cursor: pointer; - padding: 0px 7px; font-size: 10px; color: #159cee; } diff --git a/src/components/LoginForm/LoginForm.example.js b/src/components/LoginForm/LoginForm.example.js index b7711238e7..010dee5832 100644 --- a/src/components/LoginForm/LoginForm.example.js +++ b/src/components/LoginForm/LoginForm.example.js @@ -18,7 +18,6 @@ export const demos = [
Forgot something?} action='Log In'> - FAQ - - + ); diff --git a/src/dashboard/Analytics/Explorer/Explorer.scss b/src/dashboard/Analytics/Explorer/Explorer.scss index ffab36b5c0..b0998b4c27 100644 --- a/src/dashboard/Analytics/Explorer/Explorer.scss +++ b/src/dashboard/Analytics/Explorer/Explorer.scss @@ -44,7 +44,7 @@ } .toolbarAction { - padding: 0px 20px; + @include buttonReset($padding: 0 20px); color: white; > *:not(svg) {