diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss index 3efb495444..178ed2c1ae 100644 --- a/src/shared/components/SortingSelectBar/style.scss +++ b/src/shared/components/SortingSelectBar/style.scss @@ -1,4 +1,5 @@ @import '~styles/mixins'; + $view-options-toggle-right-margin: $base-unit * 2; $down-arrow-size: $base-unit; @@ -46,6 +47,144 @@ $down-arrow-size: $base-unit; @include xs-to-md { margin-right: 16px; } + + :global { + // 'Sort by' dropdown + .Select { + @include roboto-regular; + } + + .is-focused { + font-weight: 700; + } + + .Select-control { + line-height: 12px; + padding: 4px 35px 4px 10px; + width: 208px; + height: 40px; + background-color: $tc-white; + font-weight: 400; + font-size: 12px; + text-transform: none; + border: 1px solid #aaa; + color: $tc-gray-90; + position: relative; + overflow: hidden; + box-sizing: border-box; + } + + .Select-input { + width: 100% !important; + height: 0; + padding: 0; + opacity: 0; + position: absolute; + } + + .Select--single > .Select-control .Select-value { + position: static; + padding: 0; + overflow: visible; + } + + .Select.is-focused:not(.is-open) > .Select-control { + border-color: #137d60 !important; + } + + .Select-value-label { + @include roboto-regular; + + font-size: 400; + font-size: 14px; + line-height: 22px; + color: $tco-black; + vertical-align: middle; + } + + .Select-arrow-zone { + content: ' '; + display: block; + height: 0; + position: absolute; + right: 17px; + top: 50%; + width: 0; + + svg { + width: 10px; + height: 10px; + } + } + + .Select-menu-outer { + width: 100%; + color: $tc-gray-90; + font-weight: 400; + font-size: 12px; + background-color: $tc-white; + box-sizing: border-box; + margin-top: 2px; + padding: 4px 0; + position: absolute; + top: 100%; + right: 0; + z-index: 1000; + -webkit-overflow-scrolling: touch; + border: none !important; + } + + .Select-menu { + max-height: none; + overflow-y: visible; + height: 22px; + font-size: 14px; + } + + .Select-option { + box-sizing: border-box; + color: rgba(51, 51, 51, 0.8); + cursor: pointer; + display: block; + padding: 6px 16px; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + } + + .Select-option:last-child { + border-bottom-right-radius: 5px !important; + border-bottom-left-radius: 5px !important; + border-bottom: 1px solid #aaa; + } + + .Select-option:first-child { + border-top: 1px solid #aaa; + border-top-left-radius: $base-unit; + border-top-right-radius: $base-unit; + } + + .Select-option:hover { + color: $tc-black; + } + + .Select-option.is-selected { + color: $tc-black; + font-weight: 500; + background: $tc-white; + } + + .Select-option.is-focused { + background: $tc-white; + } + + .Select-noresults { + box-sizing: border-box; + color: $tc-gray-90; + cursor: default; + display: block; + padding: 8px 20px; + } + } } .view-options { @@ -92,142 +231,4 @@ $down-arrow-size: $base-unit; border-top: $down-arrow-size solid $tc-gray-50; margin-left: 3 * $base-unit; } - - :global { - // 'Sort by' dropdown - .Select { - @include roboto-regular; - } - - .is-focused { - font-weight: 700; - } - - .Select-control { - line-height: 12px; - padding: 4px 35px 4px 10px; - width: 208px; - height: 40px; - background-color: $tc-white; - font-weight: 400; - font-size: 12px; - text-transform: none; - border: 1px solid #aaa; - color: $tc-gray-90; - position: relative; - overflow: hidden; - box-sizing: border-box; - } - - .Select-input { - width: 100% !important; - height: 0; - padding: 0; - opacity: 0; - position: absolute; - } - - .Select--single > .Select-control .Select-value { - position: static; - padding: 0; - overflow: visible; - } - - .Select.is-focused:not(.is-open) > .Select-control { - border-color: #137d60 !important; - } - - .Select-value-label { - @include roboto-regular; - - font-size: 400; - font-size: 14px; - line-height: 22px; - color: $tco-black; - vertical-align: middle; - } - - .Select-arrow-zone { - content: ' '; - display: block; - height: 0; - position: absolute; - right: 17px; - top: 50%; - width: 0; - - svg { - width: 10px; - height: 10px; - } - } - - .Select-menu-outer { - width: 100%; - color: $tc-gray-90; - font-weight: 400; - font-size: 12px; - background-color: $tc-white; - box-sizing: border-box; - margin-top: 2px; - padding: 4px 0; - position: absolute; - top: 100%; - right: 0; - z-index: 1000; - -webkit-overflow-scrolling: touch; - border: none !important; - } - - .Select-menu { - max-height: none; - overflow-y: visible; - height: 22px; - font-size: 14px; - } - - .Select-option { - box-sizing: border-box; - color: rgba(51, 51, 51, 0.8); - cursor: pointer; - display: block; - padding: 6px 16px; - border-left: 1px solid #aaa; - border-right: 1px solid #aaa; - } - - .Select-option:last-child { - border-bottom-right-radius: 5px !important; - border-bottom-left-radius: 5px !important; - border-bottom: 1px solid #aaa; - } - - .Select-option:first-child { - border-top: 1px solid #aaa; - border-top-left-radius: $base-unit; - border-top-right-radius: $base-unit; - } - - .Select-option:hover { - color: $tc-black; - } - - .Select-option.is-selected { - color: $tc-black; - font-weight: 500; - background: $tc-white; - } - - .Select-option.is-focused { - background: $tc-white; - } - - .Select-noresults { - box-sizing: border-box; - color: $tc-gray-90; - cursor: default; - display: block; - padding: 8px 20px; - } - } } diff --git a/src/shared/components/Tooltip/style.scss b/src/shared/components/Tooltip/style.scss index 26c4735ae7..651af0c2ae 100644 --- a/src/shared/components/Tooltip/style.scss +++ b/src/shared/components/Tooltip/style.scss @@ -13,11 +13,28 @@ padding: 0; } + .rc-tooltip-arrow { + background: url(assets/images/tooltip-arrow.svg); + width: 30px; + height: 9px; + z-index: 10000; + } + .rc-tooltip-placement-top .rc-tooltip-arrow, .rc-tooltip-placement-topLeft .rc-tooltip-arrow, .rc-tooltip-placement-topRight .rc-tooltip-arrow { border-top-color: $tc-gray-80; - background: url(assets/images/tooltip-arrow.svg); + padding: 0; + bottom: 1px; + border-width: 0; + } + + .rc-tooltip-placement-top .rc-tooltip-arrow { + margin-left: -19px; + } + + .rc-tooltip-placement-topLeft .rc-tooltip-arrow { + margin-left: -13px; } .rc-tooltip-placement-right .rc-tooltip-arrow, diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss index e9055398cc..de9640e3ef 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss @@ -96,10 +96,13 @@ flex-direction: column; font-size: 13px; line-height: 20px; - margin: 16px 40px 0 40px; + padding-top: 30px; + padding-bottom: 50px; + margin: 0 41px; @include xs-to-sm { - margin: 16px 0 0 0; + padding: 0; + margin: 0 16px; } } @@ -177,6 +180,10 @@ button.column-1-1, margin: 0 32px 0 16px; height: auto; } + + @include xs-to-sm { + margin-top: 24px; + } } .column-1 { diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss index e186e80f70..a6155822aa 100644 --- a/src/shared/components/challenge-detail/Submissions/style.scss +++ b/src/shared/components/challenge-detail/Submissions/style.scss @@ -3,8 +3,14 @@ .container { @include roboto-regular; - margin-left: auto; - margin-right: auto; + padding-top: 30px; + padding-bottom: 50px; + margin: 0 41px; + + @include xs-to-sm { + padding: 0; + margin: 0 16px; + } div { white-space: nowrap; @@ -152,7 +158,7 @@ font-size: 13px; line-height: 15px; padding-bottom: 17px; - padding-top: 7px; + padding-top: 14px; color: $tc-gray-50; display: flex; border-bottom: 1px solid $tc-gray-10; @@ -215,13 +221,10 @@ } .container.dev { - margin: 0 46px; - padding-bottom: 0; line-height: 50px; text-align: center; @include xs-to-sm { - margin: 30px 0; line-height: 20px; } @@ -277,10 +280,8 @@ } &.mm { - margin: 28px 32px 0 32px; - @include xs-to-sm { - margin: 0; + margin: 0 16px; } } diff --git a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss index af38e9eebd..ae1b564573 100644 --- a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss +++ b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss @@ -8,19 +8,6 @@ $tip-space-95: $base-unit * 19; $tip-radius-15: $corner-radius * 7 + 1; $tip-radius-4: $corner-radius * 2; -:global { - .rc-tooltip-arrow { - background-color: url(assets/images/tooltip-arrow.svg); - width: 30px; - height: 9px; - position: absolute; - left: 41% !important; - z-index: 10000; - bottom: 0 !important; - border: 0; - } -} - div.progress-bar-tooltip { @include roboto-regular; diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx index 9cae10edab..ffbfc5fc68 100644 --- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx +++ b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx @@ -41,6 +41,8 @@ Tip.propTypes = { }; function placeArrow(TooltipNode) { + const rootLeftPos = parseInt(TooltipNode.style.left, 10); + TooltipNode.style.left = `${rootLeftPos - 5}px`; // eslint-disable-line no-param-reassign const arrow = TooltipNode.querySelector('.rc-tooltip-arrow'); arrow.style.left = '15px'; } diff --git a/src/shared/containers/Profile.jsx b/src/shared/containers/Profile.jsx index fbfade7a9a..329d4c161b 100644 --- a/src/shared/containers/Profile.jsx +++ b/src/shared/containers/Profile.jsx @@ -185,7 +185,7 @@ ProfileContainer.propTypes = { const mapStateToProps = (state, ownProps) => ({ challenges: state.members[ownProps.match.params.handle] - ? state.members[ownProps.match.params.handle].subtrackChallenges : null, + ? state.members[ownProps.match.params.handle].userMarathons : null, achievements: state.profile.achievements, copilot: state.profile.copilot, country: state.profile.country,