From 50f38681bef1d4fb9b7916e69e80d6a56f70aa8e Mon Sep 17 00:00:00 2001 From: Jack Valley Date: Wed, 13 May 2020 11:05:44 +0300 Subject: [PATCH] Revert "Merge branch 'experimental/city-theme' into develop" This reverts commit f51da9b1af35b251f72032fd033bf86b74d51782, reversing changes made to a06088f7a05f65e1e7918d1781f2f8f2f68aa4c2. # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # # On branch develop # Your branch is up to date with 'origin/develop'. # # You are currently reverting commit a06088f. # # Changes to be committed: # modified: config/appConfig.js # deleted: config/assetPath.js # modified: config/webpack/dev.js # modified: config/webpack/prod.js # modified: config_dev.json.example # modified: package.json # deleted: src/assets/default/assets/main.scss # deleted: src/assets/default/i18n/index.js # new file: src/assets/images/turkulogowhite.png # modified: src/components/FormFields/index.js # modified: src/components/FormFields/index.scss # deleted: src/components/Header/LanguageSelector.js # deleted: src/components/Header/LanguageSelector.test.js # modified: src/components/Header/index.scss # modified: src/components/HelFormFields/HelKeywordSelector/HelKeywordSelector.js # modified: src/components/HelFormFields/HelLabeledCheckboxGroup.scss # modified: src/components/HelFormFields/HelOffersField.js # modified: src/components/HelFormFields/HelTextField.js # modified: src/components/ImageEdit/index.js # modified: src/components/ImageEdit/index.scss # modified: src/components/ImagePicker/index.js # modified: src/components/ImagePicker/index.scss # modified: src/components/SearchBar/index.js # modified: src/components/SearchBar/index.scss # modified: src/i18n/index.js # modified: src/index.jade # new file: src/themes/material-ui-tku.js # new file: src/themes/tku/tku-brand-colors.js # modified: src/views/App/index.js # modified: yarn.lock Manually reverting changes that were accidentally merged into develop. Weirdly enough Github thought taking commits from develop would be the same as merging the two branches together, while not being able to understand PR reverting (aka only reverting one branch but not the other). Please don't do that again... --- config/appConfig.js | 2 +- config/assetPath.js | 43 --- config/webpack/dev.js | 11 +- config/webpack/prod.js | 10 +- config_dev.json.example | 2 +- package.json | 2 - src/assets/default/assets/main.scss | 4 - src/assets/default/i18n/index.js | 1 - src/components/FormFields/index.js | 46 +-- src/components/FormFields/index.scss | 42 +-- src/components/Header/LanguageSelector.js | 90 ----- .../Header/LanguageSelector.test.js | 41 --- src/components/Header/index.scss | 310 ++++++------------ .../HelKeywordSelector/HelKeywordSelector.js | 7 +- .../HelLabeledCheckboxGroup.scss | 3 +- .../HelFormFields/HelOffersField.js | 10 +- src/components/HelFormFields/HelTextField.js | 9 +- src/components/ImageEdit/index.js | 5 +- src/components/ImageEdit/index.scss | 29 +- src/components/ImagePicker/index.js | 4 +- src/components/ImagePicker/index.scss | 7 - src/components/SearchBar/index.js | 28 +- src/components/SearchBar/index.scss | 25 +- src/i18n/index.js | 25 +- src/index.jade | 1 - src/views/App/index.js | 1 - yarn.lock | 2 +- 27 files changed, 168 insertions(+), 592 deletions(-) delete mode 100644 config/assetPath.js delete mode 100644 src/assets/default/assets/main.scss delete mode 100644 src/assets/default/i18n/index.js delete mode 100644 src/components/Header/LanguageSelector.js delete mode 100644 src/components/Header/LanguageSelector.test.js diff --git a/config/appConfig.js b/config/appConfig.js index ab52cd778..f6fa7f2ee 100644 --- a/config/appConfig.js +++ b/config/appConfig.js @@ -36,7 +36,7 @@ nconf.defaults({ /** * Function to retrieve value from config - * @param {undefined|string|string[]} keys + * @param {undefined|string|string[]} keys */ function getConfig(keys) { // Return all config if no keys provided diff --git a/config/assetPath.js b/config/assetPath.js deleted file mode 100644 index 87ec62d2c..000000000 --- a/config/assetPath.js +++ /dev/null @@ -1,43 +0,0 @@ -const path = require('path'); -const nconf = require('nconf'); - -let cityConfig; -let cityAssets; -let cityImages; -let cityi18n; -/** - * city_theme package could have the following folders - * some-ui / - * assets / - * -----> images / - * --------------> images that used for scss, can be imported directly - * -----> main.scss - * -----> some scss files that are imported to main.scss - * i18n / - * -----> language .json files that override the default ones - * -----> fi.json - * plus whatever - */ - -if (nconf.get('city_theme')) { - // used in development, checks from config_dev.json - cityConfig = path.resolve(__dirname, `../node_modules/${nconf.get('city_theme')}/`); - cityAssets = path.resolve(cityConfig, 'assets/'); - cityImages = path.resolve(cityAssets, 'images/'); - cityi18n = path.resolve(cityConfig, 'i18n/'); -} -else if (process.env.city_theme) { - // used in production(???), checks from process.env - cityConfig = path.resolve(__dirname, `../node_modules/${process.env.city_theme}/`); - cityAssets = path.resolve(cityConfig, 'assets/'); - cityImages = path.resolve(cityAssets, 'images/'); - cityi18n = path.resolve(cityConfig, 'i18n/'); -} -else { - // used when no city_theme is available - cityConfig = path.resolve(__dirname, '../src/assets/default/'); - cityAssets = path.resolve(cityConfig, 'assets/'); - cityImages = path.resolve(cityAssets, 'images/'); - cityi18n = path.resolve(cityConfig, 'i18n/'); -} -module.exports = {cityConfig, cityAssets, cityImages, cityi18n}; diff --git a/config/webpack/dev.js b/config/webpack/dev.js index 0fe840455..dd3572702 100644 --- a/config/webpack/dev.js +++ b/config/webpack/dev.js @@ -3,7 +3,7 @@ import common from './common.js'; import webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import {readConfig} from '../appConfig'; -import assetPath from '../assetPath'; + const publicUrl = readConfig('publicUrl') const ui_mode = readConfig('ui_mode') @@ -23,17 +23,12 @@ export default { resolve: { modules: [common.paths.ROOT, 'node_modules'], extensions: ['.', '.webpack.js', '.web.js', '.jsx', '.js'], - alias: { - '@city-assets': assetPath.cityAssets, - '@city-images': assetPath.cityImages, - '@city-i18n': assetPath.cityi18n, - }, }, module: { rules: [ { - test: /\.(js|jsx)?$/, - exclude: /node_modules/, + test: /\.(js|jsx)?$/, + exclude: /node_modules/, enforce: 'pre', use: ['babel-loader', 'eslint-loader'], }, diff --git a/config/webpack/prod.js b/config/webpack/prod.js index 57f039a15..6b314d419 100644 --- a/config/webpack/prod.js +++ b/config/webpack/prod.js @@ -3,7 +3,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const GitRevisionPlugin = require('git-revision-webpack-plugin'); const common = require('./common'); const appConfig = require('../appConfig'); -const assetPath = require('../assetPath'); // There are defined in common.js as well, but that is not available without // transpilation, which is not done for webpack configuration file @@ -34,17 +33,12 @@ const config = { resolve: { modules: [common.paths.ROOT, 'node_modules'], extensions: ['.', '.webpack.js', '.web.js', '.jsx', '.js'], - alias: { - '@city-assets': assetPath.cityAssets, - '@city-images': assetPath.cityImages, - '@city-i18n': assetPath.cityi18n, - }, }, module: { rules: [ { - test: /\.(js|jsx)?$/, - exclude: /node_modules/, + test: /\.(js|jsx)?$/, + exclude: /node_modules/, enforce: 'pre', use: ['babel-loader', 'eslint-loader'], }, diff --git a/config_dev.json.example b/config_dev.json.example index 218c97531..54c8c79f8 100644 --- a/config_dev.json.example +++ b/config_dev.json.example @@ -9,7 +9,7 @@ "publicUrl": "http://localhost:8080", "sessionSecret": "dev-secret-do-not-use-in-production", "ui_mode": "events", - "client_id": "CLIENT_ID", + "client_id": "CLIENT_ID", "openid_audience": "OPENID_AUDIENCE", "openid_authority": "OPENID_AUTHORITY" } diff --git a/package.json b/package.json index 57590237f..f19dcf27c 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,6 @@ "raven-js": "^2.3.0", "react": "16.12.0", "react-addons-pure-render-mixin": "^15.6.2", - "react-bootstrap": "^1.0.1", "react-copy-to-clipboard": "^5.0.1", "react-dom": "16.12.0", "react-helmet": "^5.2.1", @@ -71,7 +70,6 @@ "react-router-dom": "^4.2.2", "react-router-redux": "^5.0.0-alpha.9", "react-select": "^3.0.8", - "reactstrap": "^8.4.1", "redux": "4.0.4", "redux-actions": "^0.9.0", "redux-oidc": "^4.0.0-beta1", diff --git a/src/assets/default/assets/main.scss b/src/assets/default/assets/main.scss deleted file mode 100644 index fec3d0536..000000000 --- a/src/assets/default/assets/main.scss +++ /dev/null @@ -1,4 +0,0 @@ -// THIS IS A DUMMY SCSS FILE THAT IS IMPORTED WHEN NO CITY_THEME IS INSTALLED -body { - background-color: green; -} diff --git a/src/assets/default/i18n/index.js b/src/assets/default/i18n/index.js deleted file mode 100644 index ff8b4c563..000000000 --- a/src/assets/default/i18n/index.js +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/src/components/FormFields/index.js b/src/components/FormFields/index.js index 7ad149e6f..6509f3f5e 100644 --- a/src/components/FormFields/index.js +++ b/src/components/FormFields/index.js @@ -17,8 +17,8 @@ import { HelKeywordSelector, } from 'src/components/HelFormFields' import RecurringEvent from 'src/components/RecurringEvent' -import {Button,Form, FormGroup, Label, Input} from 'reactstrap'; -import {Add, Autorenew} from '@material-ui/icons' +import {Button, TextField} from '@material-ui/core' +import {Add, Autorenew, FileCopyOutlined} from '@material-ui/icons' import {mapKeywordSetToForm, mapLanguagesSetToForm} from '../../utils/apiDataMapping' import {setEventData, setData} from '../../actions/editor' import {get, isNull, pickBy} from 'lodash' @@ -26,10 +26,10 @@ import API from '../../api' import CONSTANTS from '../../constants' import OrganizationSelector from '../HelFormFields/OrganizationSelector'; import UmbrellaSelector from '../HelFormFields/UmbrellaSelector/UmbrellaSelector' +import {HelMaterialTheme} from '../../themes/material-ui' import moment from 'moment' import HelVideoFields from '../HelFormFields/HelVideoFields/HelVideoFields' - let FormHeader = (props) => (
{ props.children } @@ -296,20 +296,25 @@ class FormFields extends React.Component { /> }
@@ -328,29 +333,24 @@ class FormFields extends React.Component {
- - -
- - - - - -
- - + - div > .row { justify-content: space-between; - } .clipboard-copy-button { - padding: 3px; + padding: 4px; position: absolute; box-shadow: 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12); - border-radius: 0px; - margin-right: -25px; - - } .location-row { @@ -29,30 +24,6 @@ top: 65px; } } -.glyphicon{ - font-size: 22px; - padding-left: 15px; - padding-top: 1px; - margin-right: 0px; - -} -.place-id{ - margin-top: 10px; - border-bottom-style:dashed; - border-bottom-width: 2px; - border-radius: 0px; - border-color:rgb(84,84,84); - font-size: 16px; - .form-control:disabled, .form-control[readonly]{ - background-color: #fff; - font-size: 16px; - - } - .form-control{ - border: 0px; - } -} - @media (max-width: 544px) { .location-row { @@ -98,14 +69,3 @@ } } } -.btn-block{ - color: #fff; - background-color:#0072c6 ; - margin-top: 15px; - font-size: 15.75px; - border-radius: 2px; - -} -.glyphicon{ - margin-right:20px; -} diff --git a/src/components/Header/LanguageSelector.js b/src/components/Header/LanguageSelector.js deleted file mode 100644 index f63723bb6..000000000 --- a/src/components/Header/LanguageSelector.js +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -class LanguageSelector extends React.Component { - constructor(props) { - super(props); - this.toggle = this.toggle.bind(this); - this.state = { - isOpen: false, - }; - } - - componentDidMount() { - document.addEventListener('click', this.handleClick, false); - } - - componentWillUnmount() { - document.removeEventListener('click', this.handleClick, false); - } - - handleClick = (event) => { - if (!this.node.contains(event.target)) { - this.handleOutsideClick(); - } - } - - handleOutsideClick() { - if ( this.state.isOpen) { - this.setState({isOpen: false}); - } - } - - toggle(e) { - e.preventDefault(); - this.setState({isOpen: !this.state.isOpen}); - } - - handleLanguageChange(lang, e) { - e.preventDefault(); - this.props.changeLanguage(lang); - this.setState({isOpen: false}) - - } - - - - /** - * Returns true if language is same as current locale - * @param {object} language - * @return {boolean} - */ - isActiveLanguage(language) { - const {userLocale} = this.props; - return language.label === userLocale.locale.toUpperCase(); - } - - render() { - const {userLocale} = this.props; - const activeLocale = userLocale.locale.toUpperCase(); - return ( - - -
this.node = node} className='LanguageMain'> - -
    - {this.props.languages.map((language, index) => { - return ( -
  • - {language.label} -
    • - ) - })} -
-
- - ) - } -} - -LanguageSelector.propTypes = { - languages: PropTypes.array, - userLocale: PropTypes.object, - changeLanguage: PropTypes.func, -} -export default LanguageSelector; diff --git a/src/components/Header/LanguageSelector.test.js b/src/components/Header/LanguageSelector.test.js deleted file mode 100644 index a77bcc1e4..000000000 --- a/src/components/Header/LanguageSelector.test.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import {shallow} from 'enzyme'; -import LanguageSelector from './LanguageSelector'; - -const defaultProps = { - languages: [ - { - label: 'fi', - }, - { - label: 'en', - }, - { - label: 'sv', - }, - ], - userLocale: { - locale: 'fi', - }, - changeLanguage : () => null, -}; - -describe('languageSelector', () => { - function getWrapper(props) { - return shallow() - } - describe('acutal test', () => { - test('is default locale', () => { - const element = getWrapper().find('div'); - expect(element).toHaveLength(2); - const sec = element.at(1).find('a'); - expect(sec.text()).toBe('FI'); - }) - - test('activeLocale when en', () => { - const element = getWrapper({userLocale:{locale:'en'}}).find('div').at(1).find('a'); - expect(element.text()).toBe('EN'); - }) - }) - -}) diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss index e341109c0..ebea06cc2 100644 --- a/src/components/Header/index.scss +++ b/src/components/Header/index.scss @@ -9,224 +9,108 @@ $linkedEventsTextSize: 19px; $logoPaddingRight: 32px; $addEventPadding: 6px 12px; $languageMarginRight: 10px; -$iconMarginLeft: 24px; +$iconMarginLeft: 24px; .main-navbar { - height: $headerBarHeight; - .navbar-brand { - padding: 0px 32px 0px 0px; - font-size: unset; - } - button { - font-weight: bold; - font-size: $linkFontSize; - background-color: transparent; - border: none; - height: 55px; - } - a { - color: inherit; - &:hover, - &:active, - &:focus { - color: inherit; - } - } - .bar { - height: $helsinkiBarHeight; - width: 100%; - background: $hel-theme; - padding-left: 24px; - padding-right: 24px; - padding-top: 0px; - padding-bottom: 0px; - &__logo { - height: $helsinkiLogoHeight; - width: 100px; - white-space: nowrap; - background-image: url('../../assets/images/helsinki-logo.svg'); - background-size: contain; - background-repeat: no-repeat; - } - &__login-and-language { - display: flex; - flex-direction: row; - .btn-secondary { - &:hover { - background-color: rgba(0, 0, 0, 0.08); - } - &:focus { - outline: 5px auto -webkit-focus-ring-color; - color: #fff; - box-shadow: none; - } - } - .glyphicon { - color: #fff; - margin-right: 10px; - } - } - .language-selector { - display: flex; - align-items: center; - margin-right: $languageMarginRight; - .language-icon { - color: white; - margin-right: $languageMarginRight; - } - .language-select-box { - background-color: transparent; - color: white; - text-transform: uppercase; - &::before { - display: none; - } - } - } - } - .linked-events-bar { - height: $helsinkiBarHeight; - width: 100%; - display: flex; - background: $hel-white; - align-items: center; - &__logo { - padding-right: $logoPaddingRight; - span { - font-size: $linkedEventsTextSize; - font-weight: bold; - color: $hel-theme; - } - } - &__icon { - margin-left: $iconMarginLeft; - height: 100%; - } - &__links { - display: flex; - flex-grow: 1; - justify-content: space-between; - &__create-events { - color: #0072c6; - border: 1px solid rgba(0, 0, 0, 0.23); - padding: 5px 15px; - border-color: #0072c6; - border-width: 2px; - min-width: 64px; - &:hover { - background-color: rgba(0, 0, 0, 0.08); - } - .glyphicon { - margin-right: 10px; - } - } - &__list { - .btn { - color: black; - border: none; - &:hover { - background-color: rgba(0, 0, 0, 0.08); - } - &:focus { - color: inherit; - outline: 5px auto -webkit-focus-ring-color; - box-shadow: none; - } - .text { - padding: 6px 8px; - } - } - } - } - } -} + height: $headerBarHeight !important; -//LanguageSelector.js -.LanguageMain { - display: flex; - flex-direction: column; - color: white; - font-weight: bold; - padding: .375rem .75rem; - align-items: center; - .currentLanguage { - padding: 0.375rem 0 0.375rem 0 - } -} + button { + font-weight: bold; + font-size: $linkFontSize; + } -ul.language { - color: black; - padding-left: 0; - width: 55px; - position: absolute; - top: 100%; - z-index: 1; - li { - display: none; - position: relative; - } - &.open { - border: 1px solid black; - li { - background-color: white; - display: block; - text-align: center; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - z-index: 99999; - &.active { - background-color: lightgrey; - } - } - } -} + a { + color: inherit; -.caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 4px dashed; - border-top: 4px solid \9; - border-right: 4px solid transparent; - border-left: 4px solid transparent; -} + &:hover, + &:active, + &:focus { + color: inherit; + } + } + + .helsinki-bar { + height: $helsinkiBarHeight; + width: 100%; + display: flex; + background: $hel-theme; + justify-content: space-between; + align-items: center; + + &__logo { + height: $helsinkiLogoHeight; + white-space: nowrap; + + img { + height: $helsinkiLogoHeight; + } + } + + &__login-button { + display: flex; + flex-direction: row; + } -//Hamburger for Mobile -.navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(0,0,0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important; + &__language-button { + margin-right: $languageMarginRight; + display: flex; + align-items: center; + + .language-selector { + display: flex; + align-items: center; + + .language-icon { + color: white; + margin-right: $languageMarginRight; + } + .language-select-box { + background-color: transparent; + color: white; + text-transform: uppercase; + &::before{ + display: none; + } + } + } + } + } + + .linked-events-bar { + height: $helsinkiBarHeight; + width: 100%; + display: flex; + background: $hel-white; + align-items: center; + + &__logo { + padding-right: $logoPaddingRight; + span { + font-size: $linkedEventsTextSize; + font-weight: bold; + color: $hel-theme; + } + } + + &__icon { + margin-left: $iconMarginLeft; + height: 100%; + } + + &__links { + display: flex; + flex-grow: 1; + justify-content: space-between; + + &__mobile { + display: flex; + } + } + } } -//Mobile -@media only screen and (max-width: 991px) { - .main-navbar { - height: auto !important; - .navbar-brand { - padding: 0px; - font-size: unset; - } - .bar { - height: auto; - flex-wrap: nowrap; - .language-selector { - white-space: nowrap; - } - &__login-and-language { - .btn { - white-space: normal; - display: flex; - align-items: center; - height: auto; - } - } - } - .linked-events-bar { - height: auto; - &__links { - display: block; - text-align: center; - } - } - } -} \ No newline at end of file +.menu-drawer-mobile { + display: flex; + flex-direction: column; + width: auto; +} diff --git a/src/components/HelFormFields/HelKeywordSelector/HelKeywordSelector.js b/src/components/HelFormFields/HelKeywordSelector/HelKeywordSelector.js index 927e7a13d..2224ea4ff 100644 --- a/src/components/HelFormFields/HelKeywordSelector/HelKeywordSelector.js +++ b/src/components/HelFormFields/HelKeywordSelector/HelKeywordSelector.js @@ -9,8 +9,7 @@ import {setData as setDataAction} from '../../../actions/editor' import PropTypes from 'prop-types' import {connect} from 'react-redux' import {CopyToClipboard} from 'react-copy-to-clipboard' - - +import {FileCopyOutlined} from '@material-ui/icons' const handleKeywordChange = (checkedOptions, keywords, mainCategoryOptions, setData) => { if (isNil(checkedOptions)) { @@ -90,8 +89,8 @@ const HelKeywordSelector = ({intl, editor, setDirtyState, setData}) => { customOnChangeHandler={(selectedOption) => handleKeywordChange(selectedOption, keywords, mainCategoryOptions, setData)} /> -
) diff --git a/src/components/HelFormFields/HelTextField.js b/src/components/HelFormFields/HelTextField.js index f1f51dce4..69190f8d4 100644 --- a/src/components/HelFormFields/HelTextField.js +++ b/src/components/HelFormFields/HelTextField.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React,{Fragment, Component} from 'react' +import React from 'react' import {setData} from 'src/actions/editor.js' import {TextField} from '@material-ui/core' @@ -7,10 +7,9 @@ import validationRules from 'src/validation/validationRules'; import ValidationPopover from 'src/components/ValidationPopover' import constants from '../../constants' - const {VALIDATION_RULES, CHARACTER_LIMIT} = constants -class HelTextField extends Component { +class HelTextField extends React.Component { constructor(props) { super(props) @@ -188,7 +187,7 @@ class HelTextField extends Component { } = this.props return ( - + - + ) } } diff --git a/src/components/ImageEdit/index.js b/src/components/ImageEdit/index.js index 01899a706..88aacceca 100644 --- a/src/components/ImageEdit/index.js +++ b/src/components/ImageEdit/index.js @@ -3,8 +3,8 @@ import './index.scss' import React, {useState} from 'react'; import PropTypes from 'prop-types' import {injectIntl, FormattedMessage} from 'react-intl' -import {Button} from 'reactstrap'; import { + Button, IconButton, Dialog, DialogTitle, @@ -221,11 +221,12 @@ const ImageEdit = (props) => { {altText}
diff --git a/src/components/ImageEdit/index.scss b/src/components/ImageEdit/index.scss index 005d1f536..67903e39a 100644 --- a/src/components/ImageEdit/index.scss +++ b/src/components/ImageEdit/index.scss @@ -1,28 +1,5 @@ .image-edit-dialog { - &--image { - object-fit: contain; - } -} -.file-upload { - .btn { - padding: 16px 16px; - border-radius: 2px; - font-size: 15.75px; - background-color: #0072c6; - } - .btn-primary.disabled:hover { - background-color: #6c757d; - } -} -.button-row { - .btn { - padding: 16px 16px; - border-radius: 2px; - font-size: 15.75px; - background-color: #0072c6; - } -} -.disabled:disabled { - background-color: #6c757d; - border: none; + &--image { + object-fit: contain; + } } diff --git a/src/components/ImagePicker/index.js b/src/components/ImagePicker/index.js index 728f1d82a..033e4b884 100644 --- a/src/components/ImagePicker/index.js +++ b/src/components/ImagePicker/index.js @@ -4,8 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types' import {FormattedMessage, injectIntl} from 'react-intl' -import {Button} from 'reactstrap'; -import {IconButton, CircularProgress, Dialog, DialogTitle, DialogContent, Typography, TextField} from '@material-ui/core' +import {Button, IconButton, CircularProgress, Dialog, DialogTitle, DialogContent, Typography, TextField} from '@material-ui/core' import {Close, ErrorOutline, Publish} from '@material-ui/icons' import {deleteImage} from 'src/actions/userImages.js' import {connect} from 'react-redux' @@ -201,6 +200,7 @@ export class ImagePicker extends React.Component {
-
- - - setSearchQuery(e.target.value)} - onKeyPress={(e) => handleKeyPress(e, startDate, endDate, onFormSubmit, setSearchQuery)} - /> - -
+ setSearchQuery(e.target.value)} + onKeyPress={(e) => handleKeyPress(e, startDate, endDate, onFormSubmit, setSearchQuery)} + style={{margin: 0}} + />