From 31ebcbba3affa4c2e88dcb73fb083f7c17614d27 Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Sat, 23 Oct 2021 13:26:34 +0100 Subject: [PATCH 1/9] Reset password styles --- frontend/web/components/pages/PasswordResetPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/web/components/pages/PasswordResetPage.js b/frontend/web/components/pages/PasswordResetPage.js index 48f26df2ed9d..9cb7a1909b40 100644 --- a/frontend/web/components/pages/PasswordResetPage.js +++ b/frontend/web/components/pages/PasswordResetPage.js @@ -41,7 +41,7 @@ const PasswordResetPage = class extends Component {
{({ isSaving, error }) => ( -
+

Reset Password

{isSaving ? ( @@ -60,7 +60,7 @@ const PasswordResetPage = class extends Component { onChange={(e) => { this.setState({ password: Utils.safeParseEventValue(e) }); }} - className="input-default full-width" + className="input-default full-width mt-4" placeholder="New Password" type="password" name="password1" id="password1" From 43cb40533373cfae6ffb58974bce0dd8ab813c04 Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Sat, 23 Oct 2021 14:28:30 +0100 Subject: [PATCH 2/9] Signup/login improvements --- frontend/common/project.js | 7 +- .../web/components/ForgotPasswordModal.js | 5 +- frontend/web/components/base/forms/Input.js | 9 +- .../web/components/base/forms/InputGroup.js | 14 +- frontend/web/components/pages/HomePage.js | 251 ++++++++++-------- frontend/web/styles/components/_input.scss | 14 + frontend/web/styles/project/_forms.scss | 4 +- 7 files changed, 184 insertions(+), 120 deletions(-) diff --git a/frontend/common/project.js b/frontend/common/project.js index 3ee99c8fab49..06c6d01e2dba 100644 --- a/frontend/common/project.js +++ b/frontend/common/project.js @@ -1,8 +1,9 @@ module.exports = global.Project = { - api: 'https://api-staging.flagsmith.com/api/v1/', + api: 'https://api-dev.flagsmith.com/api/v1/', flagsmithClientAPI: 'https://api.flagsmith.com/api/v1/', - flagsmith: 'ENktaJnfLVbLifybz34JmX', // This is our Bullet Train API key - Bullet Train runs on Bullet Train! - env: 'staging', // This is used for Sentry tracking + flagsmith: '8KzETdDeMY7xkqkSkY3Gsg', // This is our Bullet Train API key - Bullet Train runs on Bullet Train! + debug: false, + env: 'dev', // This is used for Sentry tracking maintenance: false, // trigger maintenance mode demoAccount: { email: 'kyle+bullet-train@solidstategroup.com', diff --git a/frontend/web/components/ForgotPasswordModal.js b/frontend/web/components/ForgotPasswordModal.js index fa583cad7b7a..383f3ed6a1d7 100644 --- a/frontend/web/components/ForgotPasswordModal.js +++ b/frontend/web/components/ForgotPasswordModal.js @@ -3,7 +3,9 @@ import data from '../../common/data/base/_data'; const ForgotPassword = class extends React.Component { constructor(props, context) { super(props, context); - this.state = {}; + this.state = { + email: props.initialValue + }; } handleSubmit = (e) => { @@ -30,6 +32,7 @@ const ForgotPassword = class extends React.Component { inputProps={{ className: 'full-width mb-2' }} title="Email Address" placeholder="email" type="email" + value={this.state.email} onChange={e => this.setState({ email: Utils.safeParseEventValue(e) })} /> diff --git a/frontend/web/components/base/forms/Input.js b/frontend/web/components/base/forms/Input.js index fd15868bba93..fca1ca11fa7f 100644 --- a/frontend/web/components/base/forms/Input.js +++ b/frontend/web/components/base/forms/Input.js @@ -24,7 +24,7 @@ const Input = class extends React.Component { constructor(props, context) { super(props, context); - this.state = { shouldValidate: false }; + this.state = { shouldValidate: false, type: this.props.type }; } onFocus = (e) => { @@ -65,6 +65,7 @@ const Input = class extends React.Component { const className = cn({ 'input-container': true, + 'password': this.props.type === 'password', 'focused': this.state.isFocused, 'invalid': this.state.shouldValidate && !isValid, }, this.props.className); @@ -82,6 +83,7 @@ const Input = class extends React.Component { ref={c => this.input = c} {...rest} mask={this.props.mask} + type={this.state.type} formatCharacters={maskedCharacters} onKeyDown={this.onKeyDown} onFocus={this.onFocus} @@ -94,11 +96,16 @@ const Input = class extends React.Component { ref={c => this.input = c} {...rest} onFocus={this.onFocus} onKeyDown={this.onKeyDown} + type={this.state.type} + onBlur={this.onBlur} value={this.props.value} className={innerClassName} /> )} + {this.props.type === 'password' && ( + this.setState({ type: this.state.type === 'password' ? 'text' : 'password' })} className={`input-icon-right icon ion ${this.state.type === 'text' ? 'ion-ios-eye-off' : 'ion-ios-eye'}`}/> + )}
); } diff --git a/frontend/web/components/base/forms/InputGroup.js b/frontend/web/components/base/forms/InputGroup.js index 32487dbb9007..f226d63f8020 100644 --- a/frontend/web/components/base/forms/InputGroup.js +++ b/frontend/web/components/base/forms/InputGroup.js @@ -29,7 +29,19 @@ const FormGroup = class extends Component { > {this.props.tooltip} - ) : } + ) : ( + + + + +
+ {this.props.rightComponent} +
+ + + )} {inputProps && inputProps.error && ( diff --git a/frontend/web/components/pages/HomePage.js b/frontend/web/components/pages/HomePage.js index 92c44b3d123c..e928c10e2d09 100644 --- a/frontend/web/components/pages/HomePage.js +++ b/frontend/web/components/pages/HomePage.js @@ -19,6 +19,16 @@ const HomePage = class extends React.Component { this.state = {}; } + componentDidUpdate(prevProps, prevState, snapshot) { + if (this.props.location.pathname !== prevProps.location.pathname) { + const emailField = document.querySelector('input[type="text"]'); + if (emailField) { + emailField.focus(); + emailField.value = emailField.value; + } + } + } + componentDidMount() { if (document.location.href.includes('oauth')) { const parts = location.href.split('oauth/'); @@ -35,6 +45,12 @@ const HomePage = class extends React.Component { }); } } + const emailField = document.querySelector('input[type="text"]'); + if (emailField) { + emailField.focus(); + emailField.value = emailField.value; + } + if (document.location.href.includes('saml')) { const access_token = Utils.fromParam().code; if (access_token) { @@ -59,7 +75,7 @@ const HomePage = class extends React.Component { showForgotPassword = (e) => { e.preventDefault(); - openModal('Forgot password', { + openModal('Forgot password', { toast('Please check your email to reset your password.'); }} />, null, { className: 'alert fade expand' }); @@ -173,113 +189,118 @@ const HomePage = class extends React.Component { {!disableSignup && (
{!isSignup ? ( - - - {({ isLoading, isSaving, error }, { login }) => ( -
{ - Utils.preventDefault(e); - login({ email, password }); - }} - > - {!!oauths.length && ( - - {oauths} - - )} - - {isInvite - && ( -
- -

Login to accept your invite

-
- ) - } -
- {error && error.email ? ( - - {error.email} - - ) : null} - { - this.setState({ email: Utils.safeParseEventValue(e) }); - }} - className="input-default full-width mb-3 " - type="text" - name="email" id="email" - /> - {error && error.password ? ( - - {error.password} - - ) : null} - { - this.setState({ password: Utils.safeParseEventValue(e) }); - }} - className="input-default full-width mb-3" - type="password" - name="password" - data-test="password" - id="password" - /> -
- - + + + + {({ isLoading, isSaving, error }, { login }) => ( + { + Utils.preventDefault(e); + login({ email, password }); + }} + > + {!!oauths.length && ( + + {oauths} + + )} -
- - - - + +

Login to accept your invite

+
+ ) + } +
+ {error && error.email ? ( + + {error.email} + + ) : null} + { + this.setState({ email: Utils.safeParseEventValue(e) }); + }} + className="input-default full-width mb-3 " + type="email" + name="email" id="email" + /> + {error && error.password ? ( + - - + {error.password} + + ) : null} + { + this.setState({ password: Utils.safeParseEventValue(e) }); + }} + rightComponent={( + + + + )} + className="input-default full-width mb-3" + type="password" + name="password" + data-test="password" + id="password" + /> +
+ +
-
-
- {error && ( -
- {typeof AccountStore.error === 'string' ? AccountStore.error : 'Please check your details and try again'} -
- )} + + {error && ( +
+ {typeof AccountStore.error === 'string' ? AccountStore.error : 'Please check your details and try again'} +
+ )} -
- )} - - + + )} + + + + + Not got an account?{' '} + + + + + ) : ( @@ -319,7 +340,7 @@ const HomePage = class extends React.Component { -

Sign up to accept your +

Create an account to accept your invite

@@ -377,7 +398,7 @@ const HomePage = class extends React.Component { this.setState({ email: Utils.safeParseEventValue(e) }); }} className="input-default full-width" - type="text" + type="email" name="email" id="email" /> @@ -414,18 +435,22 @@ const HomePage = class extends React.Component { className="px-4 mt-3 full-width" type="submit" > - Sign Up + Create Account - - -
+ + Have an account?{' '} + + + + + )} diff --git a/frontend/web/styles/components/_input.scss b/frontend/web/styles/components/_input.scss index 1f9d462e67ba..80d0d54c7111 100644 --- a/frontend/web/styles/components/_input.scss +++ b/frontend/web/styles/components/_input.scss @@ -122,3 +122,17 @@ textarea { color: $body-text-dark; border-bottom-color: $dark-bg-5; } + +.input-container.password { + input { + padding-right: 38px; + + } +} + +.input-icon-right { + position: absolute; + font-size: 24px; + right:10px; + top:8px; +} diff --git a/frontend/web/styles/project/_forms.scss b/frontend/web/styles/project/_forms.scss index a5b5bb648f28..2d2106b04621 100644 --- a/frontend/web/styles/project/_forms.scss +++ b/frontend/web/styles/project/_forms.scss @@ -99,7 +99,9 @@ label, .icon-primary { border-radius: $default-border-radius; } - +.control-label { + display: block; +} .__react_component_tooltip { z-index: 99999999 !important; From 781b215077addaadaa1ea6085153482ce88b6a0d Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Tue, 23 Nov 2021 19:34:58 +0000 Subject: [PATCH 3/9] remove invalid email test --- frontend/tests/register-fail.test.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frontend/tests/register-fail.test.js b/frontend/tests/register-fail.test.js index bfd8ad526cc5..cf3385b29898 100644 --- a/frontend/tests/register-fail.test.js +++ b/frontend/tests/register-fail.test.js @@ -17,14 +17,6 @@ module.exports = { browser.expect.element('#error-alert').to.be.visible; browser.expect.element('#email-error').to.be.visible; }, - 'Registration should fail with invalid email address': function (browser) { - fillOutForm(browser) - .waitAndSet('[name="email"]', 'crap-email') - .click('button[name="signup-btn"]'); - - browser.expect.element('#error-alert').to.be.visible; - browser.expect.element('#email-error').to.be.visible; - }, 'Registration should fail with password too short error': function (browser) { fillOutForm(browser) .waitAndSet('[name="password"]', 'abc123') From bba51d06377a2e8547faf2a30aedde203db5f4d9 Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Tue, 23 Nov 2021 21:22:07 +0000 Subject: [PATCH 4/9] Styles --- frontend/common/project.js | 13 +++++--- frontend/tests/index.test.js | 16 ++++----- frontend/web/components/Aside.js | 21 ++++++------ .../web/components/ForgotPasswordModal.js | 15 +++++++-- frontend/web/components/base/forms/Button.js | 10 ++++-- frontend/web/components/pages/FeaturesPage.js | 2 +- frontend/web/components/pages/HomePage.js | 33 +++++++++++-------- .../web/styles/3rdParty/_react-select.scss | 22 +++++++++---- frontend/web/styles/_variables.scss | 33 ++++++++++--------- frontend/web/styles/components/_aside.scss | 1 - frontend/web/styles/components/_panel.scss | 14 ++++++-- 11 files changed, 114 insertions(+), 66 deletions(-) diff --git a/frontend/common/project.js b/frontend/common/project.js index 06c6d01e2dba..f06681c03323 100644 --- a/frontend/common/project.js +++ b/frontend/common/project.js @@ -1,15 +1,18 @@ module.exports = global.Project = { - api: 'https://api-dev.flagsmith.com/api/v1/', + api: 'https://api.flagsmith.com/api/v1/', flagsmithClientAPI: 'https://api.flagsmith.com/api/v1/', - flagsmith: '8KzETdDeMY7xkqkSkY3Gsg', // This is our Bullet Train API key - Bullet Train runs on Bullet Train! - debug: false, - env: 'dev', // This is used for Sentry tracking + flagsmith: '4vfqhypYjcPoGGu8ByrBaj', // This is our Bullet Train API key - Bullet Train runs on Bullet Train! + env: 'prod', // This is used for Sentry tracking + sentry: 'https://2f6eb58a3987406aaeee38d5f0c38005@o486744.ingest.sentry.io/5666694', maintenance: false, // trigger maintenance mode + cookieDomain: '.flagsmith.com', + excludeAnalytics: 'nightwatch@solidstategroup.com', demoAccount: { email: 'kyle+bullet-train@solidstategroup.com', password: 'demo_account', }, chargebee: { - site: 'flagsmith-test', + site: 'flagsmith', }, + assetUrl: 'https://cdn.flagsmith.com', // Location of the static files from build/, should contain a directory called static/ }; diff --git a/frontend/tests/index.test.js b/frontend/tests/index.test.js index 2c11375cd483..23860968267b 100644 --- a/frontend/tests/index.test.js +++ b/frontend/tests/index.test.js @@ -163,14 +163,14 @@ module.exports = Object.assign({ }, }, -require('./initialise.test'), // Register as the demo user -require('./features.test'), // Features tests -require('./segments.test'), // Segments tests -require('./segement-priorities.test'), // Segments tests -require('./users.test'), // Users tests -require('./project.test'), // Project/environment tests -require('./initial-cleanup.test'), // Cleanup initialisation -require('./invite.test'), // Invite user tests +// require('./initialise.test'), // Register as the demo user +// require('./features.test'), // Features tests +// require('./segments.test'), // Segments tests +// require('./segement-priorities.test'), // Segments tests +// require('./users.test'), // Users tests +// require('./project.test'), // Project/environment tests +// require('./initial-cleanup.test'), // Cleanup initialisation +// require('./invite.test'), // Invite user tests require('./register-fail.test'), // Registration failure tests require('./login-fail.test'), // Login failure tests ); diff --git a/frontend/web/components/Aside.js b/frontend/web/components/Aside.js index 11938d07f7c7..0735bf3ffed6 100644 --- a/frontend/web/components/Aside.js +++ b/frontend/web/components/Aside.js @@ -20,7 +20,7 @@ import FeaturesIcon from './svg/FeaturesIcon'; import UsersIcon from './svg/UsersIcon'; import SegmentsIcon from './svg/SegmentsIcon'; import EnvironmentSettingsIcon from './svg/EnvironmentSettingsIcon'; - +import ProjectStore from '../../common/stores/project-store' const Aside = class extends Component { static displayName = 'Aside'; @@ -176,6 +176,16 @@ const Aside = class extends Component { )} + + + + Segments + {({ permission, isLoading }) => permission && ( @@ -230,15 +240,6 @@ const Aside = class extends Component { /> Users - - - Segments - {environmentAdmin && ( { + const emailField = document.querySelector('input[name="forgotPasswordEmail"]'); + if (emailField) { + emailField.focus(); + emailField.value = emailField.value; + } + }, 1000); + } + handleSubmit = (e) => { e.preventDefault(); const { email } = this.state; @@ -29,7 +39,8 @@ const ForgotPassword = class extends React.Component {

Please enter your email address

- {this.props.buttonText}{this.props.children} + ); } diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js index 76fefbd50620..48575225f273 100644 --- a/frontend/web/components/pages/FeaturesPage.js +++ b/frontend/web/components/pages/FeaturesPage.js @@ -236,7 +236,7 @@ const FeaturesPage = class extends Component { ]} items={this.filter(projectFlags, this.state.tags)} header={( - + { + const emailField = document.querySelector('input[name="firstName"]') || document.querySelector('input[name="email"]'); + if (emailField) { + emailField.focus(); + emailField.value = emailField.value; + } + },1000) + if (document.location.href.includes('saml')) { const access_token = Utils.fromParam().code; @@ -75,9 +78,10 @@ const HomePage = class extends React.Component { showForgotPassword = (e) => { e.preventDefault(); - openModal('Forgot password', { - toast('Please check your email to reset your password.'); - }} + openModal('Forgot password', { + toast('Please check your email to reset your password.'); + }} />, null, { className: 'alert fade expand' }); } @@ -101,7 +105,7 @@ const HomePage = class extends React.Component { if (this.props.getValue('oauth_google')) { oauths.push(( { + key="google" className="btn btn__oauth btn__oauth--google" onClick={() => { Google.login().then((res) => { if (res) { document.location = `${document.location.origin}/oauth/google?code=${res}`; @@ -259,9 +263,9 @@ const HomePage = class extends React.Component { }} rightComponent={( @@ -300,6 +304,9 @@ const HomePage = class extends React.Component { + ) : ( diff --git a/frontend/web/styles/3rdParty/_react-select.scss b/frontend/web/styles/3rdParty/_react-select.scss index 9561f43b0832..e46f1435b26d 100644 --- a/frontend/web/styles/3rdParty/_react-select.scss +++ b/frontend/web/styles/3rdParty/_react-select.scss @@ -3,12 +3,21 @@ border: none !important; } &__control { + background: $input-bg-dark; height: $input-height !important; border-radius: $border-radius-default !important; } &__value-container { padding: 0px 8px; } + &__option { + color: $body-text !important; + background: white !important; + &:hover { + background: $bt-brand-primary !important; + color: white !important; + } + } } .dark { .react-select { @@ -27,9 +36,9 @@ color: $input-color-dark; } &__option { - background: $dark-bg-0; + background: $dark-bg-0 !important; &:hover { - background: darken($dark-bg-0,2); + background: darken($dark-bg-0,2) !important; } } } @@ -37,14 +46,15 @@ .select-sm { .react-select { &__control { - height: 30px !important; - min-height: 30px !important; + border: none; + height: 24px !important; + min-height: 24px !important; } &__value-container { - margin-top: -5px; + margin-top: -7px; } &__indicator { - margin-top: -3px; + margin-top: -6px; } &__indicator-separator { display: none; diff --git a/frontend/web/styles/_variables.scss b/frontend/web/styles/_variables.scss index 1f2ddee82fb5..31f8e265a52e 100644 --- a/frontend/web/styles/_variables.scss +++ b/frontend/web/styles/_variables.scss @@ -27,15 +27,17 @@ $bt-brand-primary: #7B51FB; $bt-brand-primary-light: lighten($bt-brand-primary,40); $bt-brand-primary-lighter: lighten($bt-brand-primary,70); -$bt-brand-primary-dark: #17103a; +$bt-brand-primary-dark: #1E0D26; +$bt-brand-primary-dark-alt: #17103A; $bt-brand-primary-dark-desaturated: #202040; $bt-brand-primary-dark-desaturated-light: #38386d; $bt-brand-primary-dark-desaturated-lighter: #5d60cc; $bt-brand-primary-dark-desaturated-lighter-dark: #131216; -$bt-brand-faint: #eff0ef; -$bt-brand-faint-alt: #eff0ef; +$bt-brand-faint: #F8F8F7; +$bt-brand-faint-alt: #F5F1ED; +$bt-brand-faint-alt-darken: #DFD8CC; $bt-brand-faint-alt-dark: #1b1924; $bt-brand-faint-hover: #eee7f6; $bt-brand-faint-hover-dark: #242230; @@ -58,7 +60,7 @@ $body-text-faint: #717186; $body-text-faint-dark: darken(#e3e3e3,10); $body-text: #43424f; $body-text-dark: $dark-color; -$header-color: #38386d; // for headers and labels +$header-color: #1E0D26; // for headers and labels $header-color-dark: #d2d2d2; // for headers and labels $bt-link-color: $bt-brand-primary-dark; // for headers and labels $bt-link-color-dark: $dark-highlight-color; // for headers and labels @@ -110,14 +112,14 @@ $bt-gradient-end: #fff; //Panel $panel-heading-height: 50px; -$panel-bg: #fff; +$panel-bg: white; $panel-bg-dark: $dark-bg-10; $panel-bg-darker: $dark-bg-5; -$panel-heading-bg: #f7f7f7; +$panel-heading-bg: $bt-brand-primary-dark; $panel-heading-bg-dark: $dark-bg-10; -$panel-heading-color: $header-color; +$panel-heading-color: white; $panel-heading-color-dark: $header-color-dark; -$panel-heading-border: 1px solid #f1f1f1; +$panel-heading-border: 1px solid $bt-brand-primary-dark; $panel-heading-border-dark: 1px solid transparent; @@ -132,9 +134,8 @@ $bt-switch-dark: $dark-bg-0; $panel-grey-background-dark: $dark-bg-0; $panel-grey-background: #f7f7f7; // -$panel-icon-color: $bt-brand-primary; -$panel-icon-color: $bt-brand-primary-dark-desaturated-light; -$panel-icon-border-color: #ddd; +$panel-icon-color: $bt-brand-primary-dark; +$panel-icon-border-color: #fff; $panel-icon-background-color: #fff; $panel-icon-border-color-dark: $dark-bg-20; @@ -243,6 +244,8 @@ $aside-base-background-dark: $dark-bg-0; $aside-logo: $bt-brand-primary-dark-desaturated-lighter; // active project and environment $aside-base-highlight: $bt-brand-primary-dark-desaturated-lighter; +$aside-base-highlight-alt: $bt-brand-faint-alt-darken; +$aside-base-highlight-alt-color: white; $aside-base-highlight-dark: $bt-brand-primary-dark-desaturated-lighter; $aside-base-highlight-color: white; $aside-base-highlight-color-dark: white; @@ -254,7 +257,7 @@ $aside-base-link-color-dark: $body-text-faint-dark; // Environment link $aside-nav-color:$body-text; $aside-nav-color-dark:$body-text-dark; -$aside-nav-inactive-color:transparentize($body-text, 0.25); +$aside-nav-inactive-color:transparentize($header-color,0.0); $aside-nav-inactive-color-dark:transparentize($body-text-dark, 0.25); $aside-nav-inactive-hover-color:transparentize($header-color, 0.25); $aside-nav-inactive-hover-color-dark:transparentize($header-color-dark, 0.25); @@ -281,7 +284,7 @@ $aside-project-link-active-box-shadow: none; // Backgrounds $aside-bg:$aside-base-background; // left aside menu $aside-bg-dark:$aside-base-background-dark; // left aside menu -$aside-left-bg:$bt-brand-primary-dark; // main aside menu +$aside-left-bg:$bt-brand-primary-dark-alt; // main aside menu $aside-left-bg-dark:$dark-bg-5; // main aside menu $aside-left-color:white; // main aside menu $aside-left-color-dark:white; // main aside menu @@ -305,9 +308,9 @@ $aside-project-link-color-active-dark:$aside-base-highlight-color-dark; // Active environment link $aside-nav-active:$aside-base-highlight; $aside-nav-active-dark:$aside-base-highlight-dark; -$aside-nav-active-color:$aside-base-highlight-color; +$aside-nav-active-color:$aside-base-highlight-alt-color; $aside-nav-active-color-dark:$aside-base-highlight-color-dark; -$aside-nav-collapse-border:$aside-base-highlight; +$aside-nav-collapse-border:$aside-base-highlight-alt; $aside-nav-collapse-border-dark:$aside-base-highlight-dark; diff --git a/frontend/web/styles/components/_aside.scss b/frontend/web/styles/components/_aside.scss index a881ada3eda6..e5253231cdca 100644 --- a/frontend/web/styles/components/_aside.scss +++ b/frontend/web/styles/components/_aside.scss @@ -422,7 +422,6 @@ $animation-timing-function: ease-in-out; } &__environments-wrapper { height: 55vh; - overflow-y: auto; @include customScroll; } &__environment-list-item { diff --git a/frontend/web/styles/components/_panel.scss b/frontend/web/styles/components/_panel.scss index ca7b11edcb89..5701314020a7 100644 --- a/frontend/web/styles/components/_panel.scss +++ b/frontend/web/styles/components/_panel.scss @@ -21,12 +21,14 @@ } .panel { + border: none !important; &.no-pad { .panel-content{ padding: 0; } } + box-shadow: 0 10px 30px rgba(30,13,38,.1),0 5px 10px rgba(30,13,38,.1) !important; .no-results { text-align: center; line-height: 44px; @@ -35,7 +37,7 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: $border-radius-default; .panel-heading { - h1, h2, h3 { + h1, h2, h3, h4, h5, h6 { color: $panel-heading-color; margin: 0; } @@ -57,7 +59,7 @@ color: $panel-heading-color; .title { - color: $header-color; + color: $panel-heading-color; font-family: $font-family-header; .subtitle { color: $body-text-faint; @@ -93,6 +95,12 @@ //color: $panel-heading-color; } + .icon { + color:$panel-icon-color; + &.ion-ios-information-circle { + color: $panel-icon-background-color; + } + } .panel-icon { display: inline-block; @include flexbox(); @@ -102,7 +110,7 @@ border-radius: 16px; justify-content: center; background-color: $panel-icon-background-color; - border: 1px solid $panel-icon-border-color; + border: none; margin-right: $input-padding-x/2; .icon { display: inline-block; From 8fa61e7c6b88db9695591932c9bd783be02a74f0 Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Tue, 23 Nov 2021 21:28:55 +0000 Subject: [PATCH 5/9] color change --- frontend/web/styles/_variables.scss | 1 + frontend/web/styles/components/_aside.scss | 3 +++ 2 files changed, 4 insertions(+) diff --git a/frontend/web/styles/_variables.scss b/frontend/web/styles/_variables.scss index 31f8e265a52e..ae9465e5b1de 100644 --- a/frontend/web/styles/_variables.scss +++ b/frontend/web/styles/_variables.scss @@ -256,6 +256,7 @@ $aside-base-link-color: $body-text-faint; $aside-base-link-color-dark: $body-text-faint-dark; // Environment link $aside-nav-color:$body-text; +$aside-nav-color-active:transparentize($header-color,0.0); $aside-nav-color-dark:$body-text-dark; $aside-nav-inactive-color:transparentize($header-color,0.0); $aside-nav-inactive-color-dark:transparentize($body-text-dark, 0.25); diff --git a/frontend/web/styles/components/_aside.scss b/frontend/web/styles/components/_aside.scss index e5253231cdca..184d3c3b2a61 100644 --- a/frontend/web/styles/components/_aside.scss +++ b/frontend/web/styles/components/_aside.scss @@ -261,6 +261,9 @@ $animation-timing-function: ease-in-out; } &.active { + .collapsible__header { + color:$aside-nav-color-active; + } &__header { color: $aside-nav-color; svg { From ecad735856bb7b126bebe353f4a56fffcfa2aad0 Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Tue, 23 Nov 2021 21:31:44 +0000 Subject: [PATCH 6/9] color change --- frontend/web/styles/_variables.scss | 2 +- frontend/web/styles/components/_aside.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/web/styles/_variables.scss b/frontend/web/styles/_variables.scss index ae9465e5b1de..bdc66992952f 100644 --- a/frontend/web/styles/_variables.scss +++ b/frontend/web/styles/_variables.scss @@ -251,7 +251,7 @@ $aside-base-highlight-color: white; $aside-base-highlight-color-dark: white; // active project and environment $aside-base-link: $bt-brand-faint-alt; -$aside-base-link-dark: $dark-bg-5; +$aside-base-link-dark: $dark-bg-10; $aside-base-link-color: $body-text-faint; $aside-base-link-color-dark: $body-text-faint-dark; // Environment link diff --git a/frontend/web/styles/components/_aside.scss b/frontend/web/styles/components/_aside.scss index 184d3c3b2a61..0593b488fa3d 100644 --- a/frontend/web/styles/components/_aside.scss +++ b/frontend/web/styles/components/_aside.scss @@ -72,6 +72,10 @@ $animation-timing-function: ease-in-out; } &.active { + + .collapsible__header { + color:$aside-nav-color-dark; + } &__header { color: $aside-nav-color-dark; svg { From 48433f2476db35604d6182714a5688e07038637a Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Tue, 23 Nov 2021 21:33:17 +0000 Subject: [PATCH 7/9] re-add tests --- frontend/tests/index.test.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/tests/index.test.js b/frontend/tests/index.test.js index 23860968267b..2c11375cd483 100644 --- a/frontend/tests/index.test.js +++ b/frontend/tests/index.test.js @@ -163,14 +163,14 @@ module.exports = Object.assign({ }, }, -// require('./initialise.test'), // Register as the demo user -// require('./features.test'), // Features tests -// require('./segments.test'), // Segments tests -// require('./segement-priorities.test'), // Segments tests -// require('./users.test'), // Users tests -// require('./project.test'), // Project/environment tests -// require('./initial-cleanup.test'), // Cleanup initialisation -// require('./invite.test'), // Invite user tests +require('./initialise.test'), // Register as the demo user +require('./features.test'), // Features tests +require('./segments.test'), // Segments tests +require('./segement-priorities.test'), // Segments tests +require('./users.test'), // Users tests +require('./project.test'), // Project/environment tests +require('./initial-cleanup.test'), // Cleanup initialisation +require('./invite.test'), // Invite user tests require('./register-fail.test'), // Registration failure tests require('./login-fail.test'), // Login failure tests ); From 7709cd977e8dbb48cf61d1e59bea4bfbc9626609 Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Tue, 23 Nov 2021 21:42:53 +0000 Subject: [PATCH 8/9] style fix --- frontend/web/styles/components/_panel.scss | 3 ++- frontend/web/styles/project/_panel.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/web/styles/components/_panel.scss b/frontend/web/styles/components/_panel.scss index 5701314020a7..789cd8e8b143 100644 --- a/frontend/web/styles/components/_panel.scss +++ b/frontend/web/styles/components/_panel.scss @@ -24,8 +24,9 @@ border: none !important; &.no-pad { + padding: 0 !important; .panel-content{ - padding: 0; + padding: 0 !important; } } box-shadow: 0 10px 30px rgba(30,13,38,.1),0 5px 10px rgba(30,13,38,.1) !important; diff --git a/frontend/web/styles/project/_panel.scss b/frontend/web/styles/project/_panel.scss index 83ed35c9d71a..e4b2f65062b2 100644 --- a/frontend/web/styles/project/_panel.scss +++ b/frontend/web/styles/project/_panel.scss @@ -63,6 +63,7 @@ } } &--nested { + box-shadow: none !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } From 03d8f5bd82895f131eacc3b571f802870447da38 Mon Sep 17 00:00:00 2001 From: kyle-ssg Date: Tue, 23 Nov 2021 21:47:03 +0000 Subject: [PATCH 9/9] integration card fix --- frontend/web/components/IntegrationList.js | 4 ++-- frontend/web/styles/components/_panel.scss | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/web/components/IntegrationList.js b/frontend/web/components/IntegrationList.js index 83e36f1039d0..52dbf3b341fe 100644 --- a/frontend/web/components/IntegrationList.js +++ b/frontend/web/components/IntegrationList.js @@ -24,7 +24,7 @@ class Integration extends Component { const showAdd = !(!perEnvironment && activeIntegrations && activeIntegrations.length); return ( @@ -39,7 +39,7 @@ class Integration extends Component { className="btn-lg btn-primary ml-4" id="show-create-segment-btn" data-test="show-create-segment-btn" onClick={this.add} > - + {' '} Add integration diff --git a/frontend/web/styles/components/_panel.scss b/frontend/web/styles/components/_panel.scss index 789cd8e8b143..6506c6504944 100644 --- a/frontend/web/styles/components/_panel.scss +++ b/frontend/web/styles/components/_panel.scss @@ -98,6 +98,9 @@ .icon { color:$panel-icon-color; + &.text-white { + color: white; + } &.ion-ios-information-circle { color: $panel-icon-background-color; }