From cd946ee29aaa15489f857cfe1ab993004504317c Mon Sep 17 00:00:00 2001 From: Neil Rotstan Date: Sat, 15 Feb 2020 15:36:45 -0800 Subject: [PATCH 01/31] Dark mode in Create & Manage area --- public/index.html | 3 +- .../UserActivityTimelineWidget.js | 5 +- .../Manage/BurndownChart/BurndownChart.js | 13 +- .../Manage/CalendarHeatmap/CalendarHeatmap.js | 23 +-- .../CalendarHeatmap/CalendarHeatmap.scss | 6 +- .../Manage/ChallengeCard/ChallengeCard.js | 121 +++++++----- .../ChallengeDashboard/ChallengeDashboard.js | 5 +- .../ChallengeDashboard.scss | 43 ----- .../ChallengeKeywords/ChallengeKeywords.js | 5 +- .../ChallengeKeywords/ChallengeKeywords.scss | 12 -- .../Manage/ChallengeList/ChallengeList.js | 64 ++---- .../Manage/ChallengeList/ChallengeList.scss | 36 ---- .../Manage/ChallengeList/Messages.js | 10 - .../ChallengeOwnerLeaderboard.js | 12 +- .../ChallengeProgressBorder.js | 6 +- .../Manage/CompletionRadar/CompletionRadar.js | 76 +++++--- .../DashboardFilterToggle.js | 11 +- .../Manage/EditProject/EditProject.js | 6 +- .../EditChallenge/EditChallenge.js | 34 ++-- .../EditChallenge/Step1Schema.js | 4 +- .../EditChallenge/Step4Schema.js | 4 +- .../Manage/ManageTasks/EditTask/EditTask.js | 31 +-- .../AdminPane/Manage/ProjectCard/Messages.js | 22 ++- .../Manage/ProjectCard/ProjectCard.js | 182 ++++++++++++------ .../Manage/ProjectCard/ProjectCard.scss | 57 ------ .../ProjectDashboard/ProjectDashboard.js | 5 +- .../Manage/ProjectList/ProjectList.js | 20 +- .../Manage/ProjectOverview/ProjectOverview.js | 125 ++++++------ .../ProjectOverview/ProjectOverview.scss | 14 -- .../ProjectsDashboard/ProjectsDashboard.js | 5 +- .../Manage/StepNavigation/StepNavigation.js | 8 +- .../TaskPropertyStyleRules.js | 35 ++-- .../GeographicIndexingNotice.js | 14 +- .../Manage/ViewChallengeTasks/Messages.js | 2 +- .../ViewChallengeTasks/TaskBuildProgress.js | 31 ++- .../ViewChallengeTasks/ViewChallengeTasks.js | 2 +- .../AssociatedChallengeList.js | 28 ++- .../VirtualProjects/ManageChallengeList.js | 28 +-- .../VisibilitySwitch/VisibilitySwitch.js | 3 +- .../CalendarHeatmapWidget.js | 18 +- .../ChallengeListWidget.js | 126 ++++++------ .../ChallengeOverviewWidget.js | 142 ++++++++------ .../ChallengeOverviewWidget/Messages.js | 5 + .../ChallengeTasksWidget.js | 8 +- .../Widgets/CommentsWidget/CommentsWidget.js | 25 +-- .../CommentsWidget/CommentsWidget.scss | 5 - .../LeaderboardWidget/LeaderboardWidget.js | 12 +- .../LeaderboardWidget/LeaderboardWidget.scss | 5 - .../ProjectAboutWidget/ProjectAboutWidget.js | 9 +- .../ProjectAboutWidget.scss | 7 - .../ProjectListWidget/ProjectListWidget.js | 34 ++-- .../ProjectListWidget/ProjectListWidget.scss | 28 --- .../Widgets/ProjectManagersWidget/Messages.js | 4 +- .../ProjectManagersWidget.js | 129 ++++++++----- .../ProjectManagersWidget.scss | 59 ------ .../ProjectOverviewWidget.js | 16 +- .../ProjectOverviewWidget.scss | 27 --- .../AutosuggestTextBox/AutosuggestTextBox.js | 105 ++++++---- .../AutosuggestTextBox.scss | 33 ---- .../RJSFFormFieldAdapter.js | 11 +- src/components/Bulma/TriStateCheckbox.js | 8 +- .../ChallengeOwnerContactLink.js | 30 +-- .../ChallengeFilterSubnav.js | 3 +- .../ChallengeFilterSubnav/FilterByLocation.js | 8 +- .../OtherKeywordsOption.js | 3 +- .../ChallengeProgress/ChallengeProgress.js | 52 +++-- .../ChallengeProgress/ChallengeProgress.scss | 3 +- .../ChallengeSnapshotProgress.js | 2 +- src/components/CommentList/CommentList.js | 28 +-- src/components/CommentList/CommentList.scss | 62 ------ .../ConfigureColumnsModal.js | 38 ++-- .../ConfigureColumnsModal/Messages.js | 6 +- src/components/Dropdown/Dropdown.js | 16 +- .../EnhancedMap/LayerToggle/LayerToggle.js | 46 +++-- .../EnhancedMap/PropertyList/PropertyList.js | 4 +- .../FeaturedChallengesWidget.js | 14 +- .../WithCommandInterpreter.js | 1 - .../KeywordAutosuggestInput.js | 37 ++-- .../KeywordAutosuggestInput.scss | 2 +- src/components/Navbar/Navbar.js | 4 +- .../PastDurationSelector/Messages.js | 5 + .../PastDurationSelector.js | 15 +- src/components/PopularChallenges/Messages.js | 5 + .../PopularChallengesWidget.js | 14 +- src/components/SavedChallenges/Messages.js | 8 +- .../SavedChallenges/SavedChallengesWidget.js | 12 +- src/components/SavedTasks/Messages.js | 8 +- src/components/SavedTasks/SavedTasksWidget.js | 12 +- src/components/SearchBox/SearchBox.js | 13 +- .../TaskAnalysisTable/TaskAnalysisTable.js | 15 +- .../TaskAnalysisTableHeader.js | 110 ++++++----- .../TaskCommentInput/TaskCommentInput.js | 5 +- .../TaskConfirmationModal.js | 6 +- src/components/TaskFilters/FilterDropdown.js | 2 +- .../TaskFilters/TaskPriorityFilter.js | 3 +- .../TaskFilters/TaskPropertyFilter.js | 2 +- .../TaskFilters/TaskReviewStatusFilter.js | 3 +- .../TaskFilters/TaskStatusFilter.js | 3 +- .../TaskHistoryList/TaskHistoryList.js | 15 +- src/components/TaskPane/TaskPane.js | 15 +- .../TaskPropertiesSchema.js | 6 +- .../TaskPropertyQueryBuilder.js | 20 +- src/components/TaskTags/TaskTags.js | 47 +++-- src/components/TopUserChallenges/Messages.js | 7 +- .../TopUserChallengesWidget.js | 14 +- src/components/ViewTask/ViewTask.js | 5 +- .../WidgetWorkspace/ExportLayoutModal.js | 2 +- src/components/WidgetWorkspace/Messages.js | 5 + .../WidgetWorkspace/WidgetWorkspace.js | 13 +- .../CompletionProgressWidget.js | 2 +- .../ReviewStatusMetricsWidget.js | 2 +- .../SnapshotProgressWidget.js | 8 +- .../TaskBundleWidget/TaskBundleWidget.js | 10 +- src/interactions/User/AsAvatarUser.js | 4 +- src/lang/en-US.json | 21 +- src/pages/Inbox/HeaderNotifications.js | 19 +- src/pages/Inbox/Inbox.js | 5 +- src/pages/Inbox/Messages.js | 5 + src/pages/Inbox/Notification.js | 4 +- src/pages/Leaderboard/CardLeaderboard.js | 8 +- src/pages/Leaderboard/RowLeaderboard.js | 8 +- src/pages/Metrics/Metrics.js | 15 +- src/pages/Metrics/blocks/LeaderboardStats.js | 6 +- src/pages/Metrics/blocks/ReviewStats.js | 4 +- src/pages/Metrics/blocks/TaskStats.js | 10 +- src/pages/Profile/ApiKey.js | 8 +- src/pages/Profile/Profile.js | 6 +- .../Profile/UserSettings/UserSettings.js | 10 +- .../Review/Metrics/ReviewStatusMetrics.js | 21 +- src/pages/Review/Review.js | 28 ++- .../Review/TasksReview/TasksReviewTable.js | 56 +++--- src/services/Task/TaskStatus/TaskStatus.js | 8 +- src/static/images/bg-fireworks-left.svg | 2 +- src/static/images/bg-fireworks-right.svg | 2 +- src/static/images/bg-world-map.svg | 14 +- src/styles/components/buttons.css | 43 ++++- src/styles/components/forms.css | 80 ++++++-- src/styles/utilities/statuses.css | 16 +- src/styles/utilities/typography.css | 4 + src/styles/vendor/react-datepicker.css | 64 ++++++ src/styles/vendor/react-table.css | 49 +++-- src/tailwind.config.js | 37 +++- src/theme.scss | 14 +- src/variables.scss | 2 +- 144 files changed, 1774 insertions(+), 1497 deletions(-) delete mode 100644 src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.scss delete mode 100644 src/components/AdminPane/Manage/ChallengeList/ChallengeList.scss delete mode 100644 src/components/AdminPane/Manage/ProjectCard/ProjectCard.scss delete mode 100644 src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.scss delete mode 100644 src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.scss delete mode 100644 src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.scss delete mode 100644 src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.scss delete mode 100644 src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.scss delete mode 100644 src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.scss delete mode 100644 src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.scss delete mode 100644 src/components/AutosuggestTextBox/AutosuggestTextBox.scss delete mode 100644 src/components/CommentList/CommentList.scss diff --git a/public/index.html b/public/index.html index defd7ce66..f495a8b08 100644 --- a/public/index.html +++ b/public/index.html @@ -16,7 +16,8 @@ - + + diff --git a/src/components/ActivityTimeline/UserActivityTimeline/UserActivityTimelineWidget.js b/src/components/ActivityTimeline/UserActivityTimeline/UserActivityTimelineWidget.js index b4955c27b..09873f109 100644 --- a/src/components/ActivityTimeline/UserActivityTimeline/UserActivityTimelineWidget.js +++ b/src/components/ActivityTimeline/UserActivityTimeline/UserActivityTimelineWidget.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import classNames from 'classnames' import { FormattedMessage, injectIntl } from 'react-intl' import { Link } from 'react-router-dom' import _map from 'lodash/map' @@ -126,7 +125,7 @@ export default class UserActivityTimelineWidget extends Component { const challengeName = challengeNames.get(challengeId) return (
  • -

    +

    {challengeName} @@ -166,7 +165,7 @@ export default class UserActivityTimelineWidget extends Component { className="user-timeline-activity-widget" widgetTitle={} > -
      +
        {timelineItems}
      diff --git a/src/components/AdminPane/Manage/BurndownChart/BurndownChart.js b/src/components/AdminPane/Manage/BurndownChart/BurndownChart.js index e29ed5175..83d1bb728 100644 --- a/src/components/AdminPane/Manage/BurndownChart/BurndownChart.js +++ b/src/components/AdminPane/Manage/BurndownChart/BurndownChart.js @@ -6,8 +6,12 @@ import { ResponsiveLine } from '@nivo/line' import _map from 'lodash/map' import _filter from 'lodash/filter' import _reverse from 'lodash/reverse' +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from '../../../../tailwind.config.js' import messages from './Messages' +const colors = resolveConfig(tailwindConfig).theme.colors + /** * BurndownChart displays a basic chart showing progress towards challenge * completion over time for one or more challenges. @@ -69,7 +73,11 @@ export class BurndownChart extends Component {

      } ) diff --git a/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.js b/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.js index c126cb72d..66ab0cb74 100644 --- a/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.js +++ b/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.js @@ -54,18 +54,19 @@ export default class CalendarHeatmap extends Component {

      } - { // css class to assign - if (!value) { - return 'color-empty' - } + { // css class to assign + if (!value) { + return 'color-empty' + } - return `color-bucket-${this.colorBucketForCount(value.count)}` - }} - titleForValue={(value) => value ? `${value.date}: ${value.count}` : ''} + return `color-bucket-${this.colorBucketForCount(value.count)}` + }} + titleForValue={(value) => value ? `${value.date}: ${value.count}` : ''} /> ) diff --git a/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss b/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss index 7fc5ce2a2..4d7a6ac0a 100644 --- a/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss +++ b/src/components/AdminPane/Manage/CalendarHeatmap/CalendarHeatmap.scss @@ -11,7 +11,7 @@ } .color-empty { - fill: $grey-lightest-more; + fill: rgba(0, 0, 0, .15); } .react-calendar-heatmap { @@ -19,7 +19,7 @@ text { font-size: 10px; - fill: #aaa; + fill: #FFF; } .react-calendar-heatmap-small-text { @@ -36,7 +36,7 @@ &.high-contrast { .color-empty { - fill: $white; + fill: rgba(0, 0, 0, .15); } } } diff --git a/src/components/AdminPane/Manage/ChallengeCard/ChallengeCard.js b/src/components/AdminPane/Manage/ChallengeCard/ChallengeCard.js index 9576a282c..ade6ff6f1 100644 --- a/src/components/AdminPane/Manage/ChallengeCard/ChallengeCard.js +++ b/src/components/AdminPane/Manage/ChallengeCard/ChallengeCard.js @@ -29,72 +29,89 @@ export default class ChallengeCard extends Component { return null } + const hasActions = _isFinite(_get(this.props.challenge, 'actions.total')) + const ChallengeIcon = AsManageableChallenge(this.props.challenge).isComplete() ? CompleteIcon : VisibilityIcon return ( -
      -
      -
      +
      +
      +
      -
      - - {this.props.challenge.name} - - {this.props.showProjectName && -
      - {_get(this.props.challenge, 'parent.displayName')} -
      - } - +
      + + {this.props.challenge.name} + + {this.props.showProjectName && +
      + {_get(this.props.challenge, 'parent.displayName')} +
      } - /> + {hasActions && + + - {_isFinite(_get(this.props.challenge, 'actions.total')) && -
      - {this.props.challenge.actions.total} -
      - } +
      + {this.props.challenge.actions.total} +
      +       + } +
      +
      -
      -
      -
      this.props.toggleChallengePin(this.props.challenge.id)}> +
      +
      +
      this.props.toggleChallengePin(this.props.challenge.id)} + > + +
      +
      + + {!this.props.hideTallyControl && +
      +
      this.props.toggleChallengeTally(this.props.project.id, this.props.challenge.id)} + >
      - - {!this.props.hideTallyControl && -
      -
      this.props.toggleChallengeTally(this.props.project.id, this.props.challenge.id)} - > - -
      -
      - } -
      + }
      ) @@ -104,7 +121,7 @@ export default class ChallengeCard extends Component { const CompleteIcon = function(props) { return ( @@ -116,12 +133,12 @@ const VisibilityIcon = WithChallengeManagement(injectIntl(function(props) { return ( props.updateEnabled(props.challenge.id, !isVisible)} diff --git a/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.js b/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.js index d2027811b..b688c16ab 100644 --- a/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.js +++ b/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.js @@ -204,8 +204,9 @@ export class ChallengeDashboard extends Component {
      diff --git a/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss b/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss index 35c8ebba4..be238ad20 100644 --- a/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss +++ b/src/components/AdminPane/Manage/ChallengeDashboard/ChallengeDashboard.scss @@ -1,49 +1,6 @@ @import 'mixins.scss'; .admin__manage.challenge-dashboard { - .challenge-tasks-status { - &__building-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; - } - - h3 { - font-size: $size-3; - color: $primary; - - &.is-danger { - color: $coral; - } - } - - &__status-message { - font-size: $size-6; - white-space: pre-wrap; - max-width: 100%; - border-radius: $radius-medium; - } - - &__build-status { - font-size: $size-5; - } - } - - .admin__manage__challenge-dashboard__indexing-notice { - display: flex; - justify-content: space-between; - align-items: center; - - svg.icon { - min-width: 35px; - height: 75px; - width: auto; - margin-right: 25px; - fill: $grey; - } - } - section { margin-bottom: 1em; } diff --git a/src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.js b/src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.js index cc09dc179..65deae8d0 100644 --- a/src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.js +++ b/src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.js @@ -4,7 +4,6 @@ import classNames from 'classnames' import _compact from 'lodash/compact' import _map from 'lodash/map' import _isEmpty from 'lodash/isEmpty' -import './ChallengeKeywords.scss' /** * ChallengeKeywords renders the keywords of the given challenge as a tag set. @@ -22,12 +21,12 @@ export default class ChallengeKeywords extends Component { return null } - return {keyword} + return {keyword} })) return (
      {keywords}
      diff --git a/src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.scss b/src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.scss deleted file mode 100644 index 34a3d1adf..000000000 --- a/src/components/AdminPane/Manage/ChallengeKeywords/ChallengeKeywords.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import 'variables.scss'; - -.challenge-keywords { - display: flex; - flex-wrap: wrap; - - .tag { - margin-right: 5px; - color: $grey; - background-color: $grey-lightest-less; - } -} diff --git a/src/components/AdminPane/Manage/ChallengeList/ChallengeList.js b/src/components/AdminPane/Manage/ChallengeList/ChallengeList.js index f36aa8e90..9c3e99b49 100644 --- a/src/components/AdminPane/Manage/ChallengeList/ChallengeList.js +++ b/src/components/AdminPane/Manage/ChallengeList/ChallengeList.js @@ -3,10 +3,8 @@ import PropTypes from 'prop-types' import { FormattedMessage } from 'react-intl' import _map from 'lodash/map' import _sortBy from 'lodash/sortBy' -import AsManager from '../../../../interactions/User/AsManager' import ChallengeCard from '../ChallengeCard/ChallengeCard' import messages from './Messages' -import './ChallengeList.scss' /** * ChallengeList renders the given challenges as a list. If a selectedProject @@ -17,63 +15,39 @@ import './ChallengeList.scss' */ export default class ChallengeList extends Component { render() { - const isVirtual = this.props.project.isVirtual - const manager = AsManager(this.props.user) - // Show pinned challenges first const challengeCards = _sortBy( _map(this.props.challenges, challenge => { - let link = `/admin/project/${this.props.project.id}/challenge/${challenge.id}` - - if (isVirtual) { - link = `/browse/challenges/${challenge.id}` - } + const link = + this.props.project.isVirtual ? + `/browse/challenges/${challenge.id}` : + `/admin/project/${this.props.project.id}/challenge/${challenge.id}` - return + return ( + + ) }), challengeCard => !challengeCard.props.isPinned ) return ( -
      +
      + {!this.props.loadingChallenges && challengeCards.length === 0 ? -
      +
      : challengeCards } - - {!this.props.suppressControls && manager.canWriteProject(this.props.project) && -
      - {!isVirtual && - - } - {isVirtual && - - } -
      - }
      ) } diff --git a/src/components/AdminPane/Manage/ChallengeList/ChallengeList.scss b/src/components/AdminPane/Manage/ChallengeList/ChallengeList.scss deleted file mode 100644 index 320031554..000000000 --- a/src/components/AdminPane/Manage/ChallengeList/ChallengeList.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import 'variables.scss'; - -.admin__manage__managed-item-list.challenge-list { - .challenge-list-item { - margin-top: 0px; - - .challenge-name { - word-break: break-word; - } - } - - .item-entry:not(:last-child) { - margin-bottom: 0; - } - - .item-entry:last-child { - border-bottom: none; - } - - .challenge-list__controls { - margin-bottom: 20px; - - .button.new-challenge { - box-sizing: content-box; - margin: 20px 0px 12px 0px; - padding: 0px 30px; - font-size: $size-5; - font-weight: $weight-normal; - } - } - - .challenge-list__no-results { - text-align: center; - color: $grey; - } -} diff --git a/src/components/AdminPane/Manage/ChallengeList/Messages.js b/src/components/AdminPane/Manage/ChallengeList/Messages.js index ab86279aa..1c29ed8bd 100644 --- a/src/components/AdminPane/Manage/ChallengeList/Messages.js +++ b/src/components/AdminPane/Manage/ChallengeList/Messages.js @@ -4,16 +4,6 @@ import { defineMessages } from 'react-intl' * Internationalized messages for use with ChallengeList */ export default defineMessages({ - addChallengeLabel: { - id: 'Admin.Project.controls.addChallenge.label', - defaultMessage: "Add Challenge", - }, - - manageChallengeListLabel: { - id: 'Admin.Project.controls.manageChallengeList.label', - defaultMessage: "Manage Challenge List", - }, - noChallenges: { id: "Admin.ChallengeList.noChallenges", defaultMessage: "No Challenges", diff --git a/src/components/AdminPane/Manage/ChallengeOwnerLeaderboard/ChallengeOwnerLeaderboard.js b/src/components/AdminPane/Manage/ChallengeOwnerLeaderboard/ChallengeOwnerLeaderboard.js index acd1f0a3b..08e9892b8 100644 --- a/src/components/AdminPane/Manage/ChallengeOwnerLeaderboard/ChallengeOwnerLeaderboard.js +++ b/src/components/AdminPane/Manage/ChallengeOwnerLeaderboard/ChallengeOwnerLeaderboard.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { FormattedNumber } from 'react-intl' +import { Link } from 'react-router-dom' import _map from 'lodash/map' export default class ChallengeOwnerLeaderboard extends Component { @@ -11,16 +12,19 @@ export default class ChallengeOwnerLeaderboard extends Component { const leaders = _map( this.props.leaderboard.slice(0, 9), leader => ( -
    1. - +
    2. + . - {leader.name} + + + {leader.name} +
      3. ) ) return ( -
        +
          {leaders}
        ) diff --git a/src/components/AdminPane/Manage/ChallengeProgressBorder/ChallengeProgressBorder.js b/src/components/AdminPane/Manage/ChallengeProgressBorder/ChallengeProgressBorder.js index 87e72c609..3faeac470 100644 --- a/src/components/AdminPane/Manage/ChallengeProgressBorder/ChallengeProgressBorder.js +++ b/src/components/AdminPane/Manage/ChallengeProgressBorder/ChallengeProgressBorder.js @@ -53,7 +53,7 @@ export class ChallengeProgressBorder extends Component { const segment = (
        {this.state.hoveredStatus === status &&
        50 ? {left: "-200px"} : undefined} >
        -
        +
        { overrides.label ? overrides.label : localizedStatuses[keysByStatus[status]] }: {currentPercent}% ({actionCount}/{actions.total}) diff --git a/src/components/AdminPane/Manage/CompletionRadar/CompletionRadar.js b/src/components/AdminPane/Manage/CompletionRadar/CompletionRadar.js index 2385b527c..a07fc7ab6 100644 --- a/src/components/AdminPane/Manage/CompletionRadar/CompletionRadar.js +++ b/src/components/AdminPane/Manage/CompletionRadar/CompletionRadar.js @@ -8,8 +8,12 @@ import { TaskStatus, statusLabels } from '../../../../services/Task/TaskStatus/TaskStatus' import _map from 'lodash/map' +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from '../../../../tailwind.config.js' import messages from './Messages' +const colors = resolveConfig(tailwindConfig).theme.colors + /** * Renders a radar chart displaying relative completion statuses of tasks. */ @@ -43,37 +47,47 @@ export class CompletionRadar extends Component { values={{taskCount: totalEvaluated}} />

        } - +
        ) } diff --git a/src/components/AdminPane/Manage/DashboardFilterToggle/DashboardFilterToggle.js b/src/components/AdminPane/Manage/DashboardFilterToggle/DashboardFilterToggle.js index 9ac9458b0..dd44a86f1 100644 --- a/src/components/AdminPane/Manage/DashboardFilterToggle/DashboardFilterToggle.js +++ b/src/components/AdminPane/Manage/DashboardFilterToggle/DashboardFilterToggle.js @@ -4,10 +4,13 @@ const DashboardFilterToggle = (filterType, filterName) => { return class extends Component { render() { return ( -
        - this.props.toggleEntityFilter(filterName)} /> {this.props.filterToggleLabel} +
        + this.props.toggleEntityFilter(filterName)} + /> {this.props.filterToggleLabel}
        ) } diff --git a/src/components/AdminPane/Manage/EditProject/EditProject.js b/src/components/AdminPane/Manage/EditProject/EditProject.js index bfef4f2f9..831d7f0e0 100644 --- a/src/components/AdminPane/Manage/EditProject/EditProject.js +++ b/src/components/AdminPane/Manage/EditProject/EditProject.js @@ -108,7 +108,7 @@ export class EditProject extends Component { -
        +
        } diff --git a/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step1Schema.js b/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step1Schema.js index ae2f35b14..6234a8102 100644 --- a/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step1Schema.js +++ b/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step1Schema.js @@ -1,3 +1,4 @@ +import React from 'react' import _map from 'lodash/map' import _keys from 'lodash/keys' import _values from 'lodash/values' @@ -10,6 +11,7 @@ import { ChallengeCategoryKeywords, from '../../../../../services/Challenge/ChallengeKeywords/ChallengeKeywords' import AsEditableChallenge from '../../../../../interactions/Challenge/AsEditableChallenge' +import MarkdownContent from '../../../../MarkdownContent/MarkdownContent' import messages from './Messages' /** @@ -158,7 +160,7 @@ export const uiSchema = (intl, user, challengeData) => { }, instruction: { "ui:field": "markdown", - "ui:help": intl.formatMessage(messages.instructionDescription, {dummy: ''}), + "ui:help": , "ui:lightMode": true, }, difficulty: { diff --git a/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step4Schema.js b/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step4Schema.js index 8d9026632..f4413e70a 100644 --- a/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step4Schema.js +++ b/src/components/AdminPane/Manage/ManageChallenges/EditChallenge/Step4Schema.js @@ -157,7 +157,7 @@ export const uiSchema = intl => ({ }, customBasemap: { "ui:emptyValue": "", - "ui:help": intl.formatMessage(messages.customBasemapDescription, {dummy: ''}), + "ui:help": , }, exportableProperties: { "ui:emptyValue": "", @@ -165,7 +165,7 @@ export const uiSchema = intl => ({ }, osmIdProperty: { "ui:emptyValue": "", - "ui:help": , + "ui:help": , }, customTaskStyles: { "ui:field": "configureCustomTaskStyles", diff --git a/src/components/AdminPane/Manage/ManageTasks/EditTask/EditTask.js b/src/components/AdminPane/Manage/ManageTasks/EditTask/EditTask.js index 056dbfc68..74fe30fad 100644 --- a/src/components/AdminPane/Manage/ManageTasks/EditTask/EditTask.js +++ b/src/components/AdminPane/Manage/ManageTasks/EditTask/EditTask.js @@ -172,21 +172,24 @@ export class EditTask extends Component {
        -
        - +
        +
        - ) - let projectBody = null if (this.props.showPreview) { const matchingChallenges = project.childChallenges(this.props.filteredChallenges) projectBody = matchingChallenges.length === 0 ? null : ( -
        -
        +
        +
        - +
        + +
        ) } else if (this.props.isExpanded) { projectBody = ( -
        - +
        +
        + +
        +
        ) } - return ( -
        -
        -
        - + ( +
        + + )} + dropdownContent={() => +
          + {manager.canWriteProject(project) && +
        • + + + +
          • + } +
        • + {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} + this.props.toggleProjectPin(project.id)}> + + +
          • + {manager.canWriteProject(this.props.project) && +
        • + {this.props.project.isVirtual ? + + + : + + + + } +
          • + } +
        + } + /> +
        + ) - {projectNameColumn} + return ( +
        + {this.props.isExpanded && menuOptions} +
        +
        +
        + + + +
        - {manager.canWriteProject(project) && -
        - - +
        + + {project.displayName || project.name} + {project.isVirtual ? + + + : + null + } + {this.props.isExpanded && this.props.loadingChallenges && }
        +
        + + {!this.props.isExpanded && +
        } -
        -
        this.props.toggleProjectPin(project.id)}> - -
        -
        + {!this.props.isExpanded && menuOptions}
        {projectBody} diff --git a/src/components/AdminPane/Manage/ProjectCard/ProjectCard.scss b/src/components/AdminPane/Manage/ProjectCard/ProjectCard.scss deleted file mode 100644 index 95868073e..000000000 --- a/src/components/AdminPane/Manage/ProjectCard/ProjectCard.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import "variables.scss"; - -.project-card { - background-color: $white; - - &.is-active { - width: 390px; - height: 425px; - position: relative; - overflow: hidden; - padding-top: 25px; - background-color: $grey-lightest-more; - border-radius: $radius-medium; - margin-right: 20px; - margin-bottom: 20px; - - .project-list-item__project-name { - font-weight: $weight-semibold; - } - - .project-list-item .item-pinned { - position: absolute; - top: -10px; - right: -5px; - } - } - - &__project-content { - border-radius: 0px 0px $radius-medium $radius-medium; - padding: 5px 20px 20px 20px; - max-height: 335px; - overflow-y: scroll; - } - - &__project-challenge-preview { - margin-left: 10px; - padding: 1px 10px; - border-radius: $radius-medium; - margin-bottom: 32px; - - &__header { - font-size: $size-7; - color: $grey; - text-transform: uppercase; - margin: 10px; - font-weight: 300; - } - - .challenge-list { - font-size: $size-6; - - .item-entry:last-child > .challenge-list-item { - border-bottom: none; - } - } - } -} diff --git a/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.js b/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.js index 08a684fb2..2b09f927a 100644 --- a/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.js +++ b/src/components/AdminPane/Manage/ProjectDashboard/ProjectDashboard.js @@ -130,8 +130,9 @@ export class ProjectDashboard extends Component {
        -
        +
        +
        {pinnedCards}
        -
        +
        {unpinnedCards} -
        +
        - +
        ) } else { return ( -
        +
        {pinnedCards.concat(unpinnedCards)} -
        - +
        +
        ) diff --git a/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.js b/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.js index 6021713d6..dadeb867b 100644 --- a/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.js +++ b/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.js @@ -7,7 +7,6 @@ import ConfirmAction from '../../../ConfirmAction/ConfirmAction' import SvgSymbol from '../../../SvgSymbol/SvgSymbol' import AsManager from '../../../../interactions/User/AsManager' import messages from './Messages' -import './ProjectOverview.scss' /** * ProjectOverview displays some basic at-a-glance information about a Project @@ -27,81 +26,91 @@ export default class ProjectOverview extends Component { const manager = AsManager(this.props.user) return ( -
        -
        +
        +
        {!this.props.suppressDescription && -
        -
        +
        +
        } -
        -
        - -
        +
        +
        +
        + +
        -
        - +
        + +
        -
        - -
        +
        +
        + +
        -
        - +
        + +
        -
        - -
        +
        +
        + +
        -
        - } - skipConfirmation={() => !this.props.project.enabled} - > -
        this.props.toggleProjectEnabled(this.props.project)} +
        + } + skipConfirmation={() => !this.props.project.enabled} > - null} - /> -
        - - {!this.props.project.enabled && - - this.props.toggleProjectEnabled(this.props.project)} > - null} /> - - - - } +
        +         +
        + {!this.props.project.enabled && +
        + + + + +
        + }
        ) diff --git a/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.scss b/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.scss deleted file mode 100644 index 499fbe7b4..000000000 --- a/src/components/AdminPane/Manage/ProjectOverview/ProjectOverview.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import 'variables.scss'; - -.project-list { - .project-overview { - &__description { - font-size: $size-6; - margin-bottom: 20px; - } - - &__controls { - margin-top: 20px; - } - } -} diff --git a/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.js b/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.js index f61a5c249..97d65032c 100644 --- a/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.js +++ b/src/components/AdminPane/Manage/ProjectsDashboard/ProjectsDashboard.js @@ -77,8 +77,9 @@ export class ProjectsDashboard extends Component {
        : diff --git a/src/components/AdminPane/Manage/StepNavigation/StepNavigation.js b/src/components/AdminPane/Manage/StepNavigation/StepNavigation.js index 8dddbe397..a9e3e162c 100644 --- a/src/components/AdminPane/Manage/StepNavigation/StepNavigation.js +++ b/src/components/AdminPane/Manage/StepNavigation/StepNavigation.js @@ -17,7 +17,7 @@ export default class StepNavigation extends Component {
        -
        +
        -
        +
        {buildStyleNameAndValues(rule, index)} - {formSearch} {!_isEmpty(this.props.styleRuleErrors[index]) && -
        +
        {this.props.intl.formatMessage(errorMessages[_head(this.props.styleRuleErrors[index])])}
        } @@ -131,13 +135,16 @@ export default class TaskPropertyStyleRules extends Component { return (
        -
        +
        -
        +
        {styleForms}
        -
        diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/GeographicIndexingNotice.js b/src/components/AdminPane/Manage/ViewChallengeTasks/GeographicIndexingNotice.js index 5e12ff931..11b5cdc00 100644 --- a/src/components/AdminPane/Manage/ViewChallengeTasks/GeographicIndexingNotice.js +++ b/src/components/AdminPane/Manage/ViewChallengeTasks/GeographicIndexingNotice.js @@ -25,10 +25,16 @@ export default class GeographicIndexingNotice extends Component { } return ( -
        - - +
        + +
        ) } diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/Messages.js b/src/components/AdminPane/Manage/ViewChallengeTasks/Messages.js index 61a6fa66c..1ff7e0208 100644 --- a/src/components/AdminPane/Manage/ViewChallengeTasks/Messages.js +++ b/src/components/AdminPane/Manage/ViewChallengeTasks/Messages.js @@ -21,7 +21,7 @@ export default defineMessages({ tasksCreatedCount: { id: "Admin.Challenge.tasksCreatedCount", - defaultMessage: "{count, number} tasks created so far", + defaultMessage: "tasks created so far.", }, totalElapsedTime: { diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/TaskBuildProgress.js b/src/components/AdminPane/Manage/ViewChallengeTasks/TaskBuildProgress.js index 4ee252d3a..bf6beb90c 100644 --- a/src/components/AdminPane/Manage/ViewChallengeTasks/TaskBuildProgress.js +++ b/src/components/AdminPane/Manage/ViewChallengeTasks/TaskBuildProgress.js @@ -72,12 +72,12 @@ export default class TaskBuildProgress extends Component { return (
        -
        -
        -

        +
        +
        +

        + />

        @@ -87,22 +87,19 @@ export default class TaskBuildProgress extends Component {
        -
        -

        - -

        - -

        - + + {_get(this.props.challenge, 'actions.total', 0)} + + -

        +

        diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js b/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js index 1c9d6c024..aeda5982b 100644 --- a/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js +++ b/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js @@ -127,7 +127,7 @@ export class ViewChallengeTasks extends Component { if (_get(this.props, 'challenge.actions.total', 0) === 0) { return ( -
        +

        diff --git a/src/components/AdminPane/Manage/VirtualProjects/AssociatedChallengeList.js b/src/components/AdminPane/Manage/VirtualProjects/AssociatedChallengeList.js index f5f2c417e..163301515 100644 --- a/src/components/AdminPane/Manage/VirtualProjects/AssociatedChallengeList.js +++ b/src/components/AdminPane/Manage/VirtualProjects/AssociatedChallengeList.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types' import { FormattedMessage } from 'react-intl' import _map from 'lodash/map' import _get from 'lodash/get' -import classNames from 'classnames' import SvgSymbol from '../../../SvgSymbol/SvgSymbol' import PageResultsButton from '../../../LoadMoreButton/PageResultsButton' import messages from './Messages' @@ -19,12 +18,7 @@ export default class AssociatedChallengeList extends Component { const challengeCards = _map(this.props.challenges, challenge => (
        -
        +
        -
        +
        {challenge.name}
        {_get(challenge.parent, 'displayName')}
        -
        +
        {this.props.toBeAdded ? - : - } @@ -55,14 +53,14 @@ export default class AssociatedChallengeList extends Component { return (
        {!this.props.loadingChallenges && challengeCards.length === 0 ? -

        +

        : challengeCards } {this.props.setSearchPage &&
        - +
        }
        diff --git a/src/components/AdminPane/Manage/VirtualProjects/ManageChallengeList.js b/src/components/AdminPane/Manage/VirtualProjects/ManageChallengeList.js index ef1c2b2c7..f9875945e 100644 --- a/src/components/AdminPane/Manage/VirtualProjects/ManageChallengeList.js +++ b/src/components/AdminPane/Manage/VirtualProjects/ManageChallengeList.js @@ -58,9 +58,6 @@ export class manageChallengeList extends Component { const searchControl = this.props.projects.length === 0 ? null : ( ) @@ -100,7 +97,7 @@ export class manageChallengeList extends Component { return ( -
        +
        -
        - - + + + allStatuses={true} + />
        -
        +
        diff --git a/src/components/AdminPane/Manage/VisibilitySwitch/VisibilitySwitch.js b/src/components/AdminPane/Manage/VisibilitySwitch/VisibilitySwitch.js index 812cc3cb0..45a108571 100644 --- a/src/components/AdminPane/Manage/VisibilitySwitch/VisibilitySwitch.js +++ b/src/components/AdminPane/Manage/VisibilitySwitch/VisibilitySwitch.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import _isEmpty from 'lodash/isEmpty' import WithChallengeManagement from '../../HOCs/WithChallengeManagement/WithChallengeManagement' @@ -18,7 +19,7 @@ export class VisibilitySwitch extends Component { } render() { - if (!this.props.challenge) { + if (_isEmpty(this.props.challenge)) { return null } diff --git a/src/components/AdminPane/Manage/Widgets/CalendarHeatmapWidget/CalendarHeatmapWidget.js b/src/components/AdminPane/Manage/Widgets/CalendarHeatmapWidget/CalendarHeatmapWidget.js index 3e8923f4b..2a3f4c802 100644 --- a/src/components/AdminPane/Manage/Widgets/CalendarHeatmapWidget/CalendarHeatmapWidget.js +++ b/src/components/AdminPane/Manage/Widgets/CalendarHeatmapWidget/CalendarHeatmapWidget.js @@ -35,18 +35,24 @@ export default class CalendarHeatmapWidget extends Component { const selector = return ( - }> - + {selector}
        } + widgetTitle={} + > + ) } diff --git a/src/components/AdminPane/Manage/Widgets/ChallengeListWidget/ChallengeListWidget.js b/src/components/AdminPane/Manage/Widgets/ChallengeListWidget/ChallengeListWidget.js index a1ced6b2f..1ac5c9caf 100644 --- a/src/components/AdminPane/Manage/Widgets/ChallengeListWidget/ChallengeListWidget.js +++ b/src/components/AdminPane/Manage/Widgets/ChallengeListWidget/ChallengeListWidget.js @@ -85,70 +85,82 @@ export default class ChallengeListWidget extends Component { const cId = _isEmpty(selectedChallengeIds) ? "" : `cId=${selectedChallengeIds}` const rightHeaderControls = this.props.projects.length === 0 ? null : ( -
        -
        -
        - -
        +
        +
        + ( + + )} + dropdownContent={() => + + } + />
        -
        - ( - - )} - dropdownContent={() => - - - +
        - - +
        ) + const searchControl = this.props.challenges.length === 0 ? null : ( + + ) + return ( - } - rightHeaderControls={rightHeaderControls}> - + } + headerControls={
        {searchControl}
        } + rightHeaderControls={
        {rightHeaderControls}
        } + > +         ) } diff --git a/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/ChallengeOverviewWidget.js b/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/ChallengeOverviewWidget.js index d1c8c0416..0cf360300 100644 --- a/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/ChallengeOverviewWidget.js +++ b/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/ChallengeOverviewWidget.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { FormattedMessage, FormattedDate } from 'react-intl' import _get from 'lodash/get' +import _isEmpty from 'lodash/isEmpty' import parse from 'date-fns/parse' import { ChallengeStatus, messagesByStatus } from '../../../../../services/Challenge/ChallengeStatus/ChallengeStatus' @@ -24,6 +25,10 @@ const descriptor = { export default class ChallengeOverviewWidget extends Component { render() { + if (_isEmpty(this.props.challenge)) { + return null + } + const manager = AsManager(this.props.user) const status = _get(this.props, 'challenge.status', ChallengeStatus.none) @@ -36,82 +41,95 @@ export default class ChallengeOverviewWidget extends Component { }> -
        -
        - -
        +
        +
        +
        + +
        -
        - +
        + +
        -
        - -
        +
        +
        + +
        -
        - {this.props.challenge.parent && -
        - - {this.props.challenge.enabled && !this.props.challenge.parent.enabled && - - - - - - - } -
        - } +
        + {this.props.challenge.parent && +
        + +
        + } +
        -
        - - + {this.props.challenge.enabled && this.props.challenge.parent && !this.props.challenge.parent.enabled && +
        + + + + +
        + } -
        -
        - +
        +
        + +
        +
        -
        - {this.props.challenge.created && - - } -
        +
        +
        + +
        -
        - +
        + {this.props.challenge.created && + + } +
        -
        - {this.props.challenge.modified && - - } -
        +
        +
        + +
        -
        - +
        + {this.props.challenge.modified && + + } +
        -
        - {this.props.challenge.dataOriginDate && - - } +
        +
        + +
        + +
        + {this.props.challenge.dataOriginDate && + + } +
        diff --git a/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/Messages.js b/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/Messages.js index ecb4aecd0..f07d72a3f 100644 --- a/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/Messages.js +++ b/src/components/AdminPane/Manage/Widgets/ChallengeOverviewWidget/Messages.js @@ -50,6 +50,11 @@ export default defineMessages({ defaultMessage: "Visible:", }, + keywordsLabel: { + id: "Widgets.ChallengeOverviewWidget.fields.keywords.label", + defaultMessage: "Keywords:", + }, + projectDisabledWarning: { id: "Widgets.ChallengeOverviewWidget.projectDisabledWarning", defaultMessage: "project not visible", diff --git a/src/components/AdminPane/Manage/Widgets/ChallengeTasksWidget/ChallengeTasksWidget.js b/src/components/AdminPane/Manage/Widgets/ChallengeTasksWidget/ChallengeTasksWidget.js index d71205ff7..8bc35a5bf 100644 --- a/src/components/AdminPane/Manage/Widgets/ChallengeTasksWidget/ChallengeTasksWidget.js +++ b/src/components/AdminPane/Manage/Widgets/ChallengeTasksWidget/ChallengeTasksWidget.js @@ -18,9 +18,11 @@ const descriptor = { export default class ChallengeTasksWidget extends Component { render() { return ( - }> + } + > ) diff --git a/src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.js b/src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.js index 1451c80c2..3dfab1591 100644 --- a/src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.js +++ b/src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.js @@ -10,7 +10,6 @@ import CommentList from '../../../../CommentList/CommentList' import SvgSymbol from '../../../../SvgSymbol/SvgSymbol' import QuickWidget from '../../../../QuickWidget/QuickWidget' import messages from './Messages' -import './CommentsWidget.scss' const descriptor = { widgetKey: 'CommentsWidget', @@ -38,12 +37,12 @@ export default class CommentsWidget extends Component { target="_blank" rel="noopener noreferrer" href={`${process.env.REACT_APP_MAP_ROULETTE_SERVER_URL}/api/v2/challenge/${_get(this.props, 'challenge.id')}/comments/extract`} - className="mr-button mr-button--blue mr-button--with-icon" + className="mr-button mr-button--green-lighter mr-button--small mr-button--with-icon mr-text-sm" > @@ -51,14 +50,18 @@ export default class CommentsWidget extends Component { } return ( - } - headerControls={exportControl}> - 1} - includeTaskLinks - lightMode={this.props.lightMode} - comments={comments} /> + } + rightHeaderControls={
        {exportControl}
        } + > + 1} + includeTaskLinks + lightMode={this.props.lightMode} + comments={comments} + />         ) } diff --git a/src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.scss b/src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.scss deleted file mode 100644 index 4a0b8b7bd..000000000 --- a/src/components/AdminPane/Manage/Widgets/CommentsWidget/CommentsWidget.scss +++ /dev/null @@ -1,5 +0,0 @@ -.comments-widget { - .export-control { - margin-right: 10px; - } -} diff --git a/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.js b/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.js index dbd131c2b..1370371ea 100644 --- a/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.js +++ b/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.js @@ -12,7 +12,6 @@ import { CURRENT_MONTH } from '../../../../PastDurationSelector/PastDurationSelector' import QuickWidget from '../../../../QuickWidget/QuickWidget' import messages from './Messages' -import './LeaderboardWidget.scss' const INITIAL_MONTHS_PAST = 1 @@ -46,17 +45,18 @@ export default class LeaderboardWidget extends Component { const selector = return ( - } - headerControls={selector} + } + rightHeaderControls={
        {selector}
        } >         diff --git a/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.scss b/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.scss deleted file mode 100644 index 9d6b579aa..000000000 --- a/src/components/AdminPane/Manage/Widgets/LeaderboardWidget/LeaderboardWidget.scss +++ /dev/null @@ -1,5 +0,0 @@ -.leaderboard-widget { - .past-duration-selector { - margin-right: 10px; - } -} diff --git a/src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.js b/src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.js index bac3f7758..98780ff21 100644 --- a/src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.js +++ b/src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.js @@ -5,7 +5,6 @@ import { WidgetDataTarget, registerWidgetType } import MarkdownContent from '../../../../MarkdownContent/MarkdownContent' import QuickWidget from '../../../../QuickWidget/QuickWidget' import messages from './Messages' -import './ProjectAboutWidget.scss' const descriptor = { widgetKey: 'ProjectAboutWidget', @@ -19,9 +18,11 @@ const descriptor = { export default class ProjectAboutWidget extends Component { render() { return ( - }> + } + > ) diff --git a/src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.scss b/src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.scss deleted file mode 100644 index a5ef9c618..000000000 --- a/src/components/AdminPane/Manage/Widgets/ProjectAboutWidget/ProjectAboutWidget.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'mixins.scss'; - -.project-about-widget { - .widget__content { - @include markdown-content(); - } -} diff --git a/src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.js b/src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.js index b8f240ba1..8ac49617a 100644 --- a/src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.js +++ b/src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.js @@ -20,7 +20,6 @@ import ProjectList from '../../ProjectList/ProjectList' import QuickWidget from '../../../../QuickWidget/QuickWidget' import MenuControl from '../../../../QuickWidget/MenuControl' import messages from './Messages' -import './ProjectListWidget.scss' const descriptor = { widgetKey: 'ProjectListWidget', @@ -74,8 +73,8 @@ export default class ProjectListWidget extends Component { sym={icon ? icon : `${view}-icon`} viewBox="0 0 20 20" className={classNames( - "mr-h-6 mr-w-6 mr-ml-4", - this.props.widgetConfiguration.view === view ? "mr-fill-grey" : "mr-fill-grey-light" + "mr-h-4 mr-w-4 mr-ml-4", + this.props.widgetConfiguration.view === view ? "mr-fill-white" : "mr-fill-white-50" )} /> @@ -83,7 +82,7 @@ export default class ProjectListWidget extends Component { render() { const viewControls = ( -
        +
        {this.viewControl("card", "cards-icon")} {this.viewControl("mixed")} @@ -94,24 +93,25 @@ export default class ProjectListWidget extends Component { const searchControl = this.props.projects.length === 0 ? null : ( ) return ( - } - headerControls={searchControl} - rightHeaderControls={viewControls}> - + } + headerControls={
        {searchControl}
        } + rightHeaderControls={
        {viewControls}
        } + > +         ) } diff --git a/src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.scss b/src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.scss deleted file mode 100644 index 153538ee6..000000000 --- a/src/components/AdminPane/Manage/Widgets/ProjectListWidget/ProjectListWidget.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import 'variables.scss'; - -.admin .project-list-widget { - .widget__header__title-row { - } - - .widget__header__title-row__title { - h2.subtitle { - margin-top: 8px; - margin-right: 30px; - } - } - - &__searchbox.search-box { - max-width: 250px; - margin: 10px 20px 10px 0; - background-color: $white; - - .control-wrapper { - width: 100%; - } - } - - .project-list { - display: flex; - justify-content: center; - } -} diff --git a/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/Messages.js b/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/Messages.js index 430470de0..3ec7594fc 100644 --- a/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/Messages.js +++ b/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/Messages.js @@ -24,8 +24,8 @@ export default defineMessages({ defaultMessage: "Owner" }, - removeManagerTooltip: { - id: "Admin.ProjectManagers.controls.removeManager.tooltip", + removeManagerLabel: { + id: "Admin.ProjectManagers.controls.removeManager.label", defaultMessage: "Remove Manager" }, diff --git a/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.js b/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.js index 9b12cc612..30a22c167 100644 --- a/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.js +++ b/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import { FormattedMessage } from 'react-intl' +import { Link } from 'react-router-dom' import { WidgetDataTarget, registerWidgetType } from '../../../../../services/Widget/Widget' import _map from 'lodash/map' @@ -12,13 +13,11 @@ import { GroupType, from '../../../../../services/Project/GroupType/GroupType' import WithOSMUserSearch from '../../../HOCs/WithOSMUserSearch/WithOSMUserSearch' import AsManager from '../../../../../interactions/User/AsManager' +import AsAvatarUser from '../../../../../interactions/User/AsAvatarUser' import BusySpinner from '../../../../BusySpinner/BusySpinner' import AutosuggestTextBox from '../../../../AutosuggestTextBox/AutosuggestTextBox' -import SvgSymbol from '../../../../SvgSymbol/SvgSymbol' -import ConfirmAction from '../../../../ConfirmAction/ConfirmAction' import QuickWidget from '../../../../QuickWidget/QuickWidget' import messages from './Messages' -import './ProjectManagersWidget.scss' const descriptor = { widgetKey: 'ProjectManagersWidget', @@ -47,6 +46,11 @@ export default class ProjectManagersWidget extends Component { } updateManagerRole = (managerOsmId, groupType) => { + if (groupType === 'remove') { + this.removeManager(managerOsmId) + return + } + this.setState({ updatingManagers: this.state.updatingManagers.concat([managerOsmId]) }) @@ -58,7 +62,7 @@ export default class ProjectManagersWidget extends Component { })) } - removeManager = managerOsmId => { + removeManager = (managerOsmId) => { this.setState({ updatingManagers: this.state.updatingManagers.concat([managerOsmId]) }) @@ -116,47 +120,55 @@ export default class ProjectManagersWidget extends Component { const isProjectOwner = manager.osmId === this.props.project.owner const isLastAdmin = managerRole === GroupType.admin && adminManagers.length < 2 + // Add remove-manager option to dropdown if appropriate + const dropdownOptions = + (user.canAdministrateProject(this.props.project) && !isLastAdmin && !isProjectOwner) ? + groupTypeOptions.concat([ + + ]) : + groupTypeOptions + return ( -
        -
        -
        - {manager.displayName} +
        +
        +
        +
        +
        -
        +
        + {manager.displayName} -
        +
        -
        +
        + +
        {this.state.updatingManagers.indexOf(manager.osmId) !== -1 && } {isLastAdmin || isProjectOwner ? -
        +
        {isProjectOwner ? : }
        : - this.updateManagerRole(manager.osmId, e.target.value)} + className="mr-select mr-py-1" + > + {dropdownOptions} } - - {user.canAdministrateProject(this.props.project) && - !isLastAdmin && !isProjectOwner && - - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - this.removeManager(manager.osmId)} - title={this.props.intl.formatMessage(messages.removeManagerTooltip)}> - - - - }
        ) @@ -164,36 +176,46 @@ export default class ProjectManagersWidget extends Component { if (managers.length === 0) { managers = ( -
        +
        ) } const widgetIntro = user.canAdministrateProject(this.props.project) && ( -
        -

        - -
        - this.setState({ - addManagerUsername: username - })} - onChange={osmUser => this.setState({ - addManagerOSMUser: osmUser - })} - placeholder={this.props.intl.formatMessage(messages.osmUsername)} - fixedMenu /> +
        +

        + +

        + +
        +
        + this.setState({ + addManagerUsername: username + })} + onChange={osmUser => this.setState({ + addManagerOSMUser: osmUser + })} + placeholder={this.props.intl.formatMessage(messages.osmUsername)} + fixedMenu + /> +
        {this.state.addingManager && } {!this.state.addingManager && this.state.addManagerOSMUser && - + }
        @@ -203,10 +225,11 @@ export default class ProjectManagersWidget extends Component { return ( } - intro={widgetIntro} + noMain > + {widgetIntro} {managers} ) diff --git a/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.scss b/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.scss deleted file mode 100644 index cf224504c..000000000 --- a/src/components/AdminPane/Manage/Widgets/ProjectManagersWidget/ProjectManagersWidget.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import 'variables.scss'; - -.project-managers { - - &__manager { - display: flex; - justify-content: space-between; - align-items: center; - font-size: $size-7; - margin-top: 5px; - - &__about { - display: flex; - align-items: center; - } - - &__profile-pic { - img { - border-radius: 50%; - } - } - - &__name { - margin-left: 5px; - } - - &__controls { - display: flex; - justify-content: space-between; - align-items: center; - min-width: 100px; - } - - &__role, &__role-placeholder { - margin: 0 1em; - } - - &__control-placeholder { - width: 15px; - } - } - - &__add-manager { - h3 { - margin-bottom: 10px; - font-size: $size-5; - } - - &__form { - display: flex; - justify-content: space-between; - align-items: center; - - select { - margin-left: 1em; - } - } - } -} diff --git a/src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.js b/src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.js index 954c64fdc..7f3079ff6 100644 --- a/src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.js +++ b/src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.js @@ -3,10 +3,8 @@ import { FormattedMessage } from 'react-intl' import { WidgetDataTarget, registerWidgetType } from '../../../../../services/Widget/Widget' import ProjectOverview from '../../ProjectOverview/ProjectOverview' -import MarkdownContent from '../../../../MarkdownContent/MarkdownContent' import QuickWidget from '../../../../QuickWidget/QuickWidget' import messages from './Messages' -import './ProjectOverviewWidget.scss' const descriptor = { widgetKey: 'ProjectOverviewWidget', @@ -20,14 +18,12 @@ const descriptor = { export default class ProjectOverviewWidget extends Component { render() { return ( - }> - - -
        - -
        + } + > + ) } diff --git a/src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.scss b/src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.scss deleted file mode 100644 index 07da70724..000000000 --- a/src/components/AdminPane/Manage/Widgets/ProjectOverviewWidget/ProjectOverviewWidget.scss +++ /dev/null @@ -1,27 +0,0 @@ -.project-overview-widget { - .widget__content { - .columns { - margin: -0.5em 0; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - - .column { - padding: 0.25em; - } - } - } - - .project-overview__status.status-section { - padding-top: 5px; - } - - &__project-description { - margin-top: 20px; - } -} diff --git a/src/components/AutosuggestTextBox/AutosuggestTextBox.js b/src/components/AutosuggestTextBox/AutosuggestTextBox.js index bde0eda21..fd5162c43 100644 --- a/src/components/AutosuggestTextBox/AutosuggestTextBox.js +++ b/src/components/AutosuggestTextBox/AutosuggestTextBox.js @@ -11,9 +11,10 @@ import _difference from 'lodash/difference' import _clone from 'lodash/clone' import _indexOf from 'lodash/indexOf' import _filter from 'lodash/filter' +import _noop from 'lodash/noop' +import Dropdown from '../Dropdown/Dropdown' import BusySpinner from '../BusySpinner/BusySpinner' import messages from './Messages' -import './AutosuggestTextBox.scss' /** * AutosuggestTextBox combines a text input with a dropdown, executing a search @@ -65,19 +66,22 @@ export default class AutosuggestTextBox extends Component { */ dropdownItems(getItemProps, inputValue) { const generateResult = (result, className = "") => ( - + {this.props.resultLabel(result)} ) let items = [] + const searchResults = this.getSearchResults() const preferredResults = this.getPreferredResults() if (!_isEmpty(preferredResults)) { let className = "mr-font-medium" @@ -85,14 +89,14 @@ export default class AutosuggestTextBox extends Component { (result, index) => { // Add a border bottom to the last entry if there are more // search results. - if (index === preferredResults.length - 1) { - className += " mr-border-b-2 mr-border-grey-lighter mr-mb-2 mr-pb-2" + if (index === preferredResults.length - 1 && searchResults.length > 0) { + className += " mr-border-b-2 mr-border-white-50 mr-mb-2 mr-pb-2" } return generateResult(result, className) })) } - items = items.concat(_map(this.getSearchResults(), generateResult)) + items = items.concat(_map(searchResults, generateResult)) return items } @@ -112,41 +116,62 @@ export default class AutosuggestTextBox extends Component { render() { return ( - result ? this.props.resultLabel(result) : ''}> - {({getInputProps, getItemProps, getMenuProps, isOpen, inputValue}) => { + result ? this.props.resultLabel(result) : ''} + > + {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen, inputValue}) => { const openOnFocus = _get(this.props.preferredResults, 'length', 0) > 0 const resultItems = this.dropdownItems(getItemProps, inputValue) const show = this.state.textBoxActive || (isOpen && inputValue.length > 0) return ( -
        -
        - this.setState({textBoxActive: openOnFocus})} - onBlur={(e) => this.setState({textBoxActive: false})} - placeholder={this.props.placeholder} + _noop} + dropdownButton={dropdown => ( + this.setState({textBoxActive: openOnFocus})} + onBlur={(e) => this.setState({textBoxActive: false})} + placeholder={this.props.placeholder} /> - {this.props.isSearching && } -
        -
        -
        - {resultItems} - {(resultItems.length === 0 || this.props.showNoResults) && -
        - + )} + dropdownContent={() => { + if (this.props.isSearching) { + return ( +
        + +
        + ) + } + + return ( +
        + {resultItems} + {(resultItems.length === 0 || this.props.showNoResults) && +
        + +
        + }
        - } -
        -
        -
        + ) + }} + /> ) }} diff --git a/src/components/AutosuggestTextBox/AutosuggestTextBox.scss b/src/components/AutosuggestTextBox/AutosuggestTextBox.scss deleted file mode 100644 index 7e74ce378..000000000 --- a/src/components/AutosuggestTextBox/AutosuggestTextBox.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import 'variables.scss'; - -.autosuggest-text-box { - width: 100%; - - &__input-wrapper { - position: relative; - width: 100%; - - input { - padding-right: 40px; - width: 100%; - } - - .busy-spinner { - position: absolute; - top: 8px; - right: 5px; - } - } - - .dropdown-menu { - .dropdown-content--fixed { - position: fixed; - } - } - - &__no-results { - font-size: $size-7; - margin: 0 1em; - color: $grey-light; - } -} diff --git a/src/components/Bulma/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js b/src/components/Bulma/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js index 6129e496b..d917c3579 100644 --- a/src/components/Bulma/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js +++ b/src/components/Bulma/RJSFFormFieldAdapter/RJSFFormFieldAdapter.js @@ -80,7 +80,10 @@ export const CustomArrayFieldTemplate = props => { {itemFields} {props.canAdd &&
        -
        @@ -122,7 +125,7 @@ export class MarkdownEditField extends Component { * } -
        +