Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Step Progress Bar Bug #661

Merged
merged 3 commits into from Jan 20, 2021
+32 −13
Merged

Step Progress Bar Bug #661

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34b4513
Fix cross browser progress bar lines and reduce size of progress bar …
benstrumeyer Jan 19, 2021
6216f42
Keep ghosty steps in place and fix the line lengths
benstrumeyer Jan 19, 2021
489ebb7
Fix navigation
benstrumeyer Jan 20, 2021
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

3 app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js
View file
Open in desktop
@@ -11,6 +11,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import { withRouter } from 'react-router-dom';
import BlockSettingsView from './BlockSettingsView';
import { buildReduxHOC } from '../../../../shared-hub/utils';
import { logout } from '../../../../Account/AccountActions';
@@ -29,4 +30,4 @@ const actionCreators = {
setSetupStep,
};

export default buildReduxHOC(null, actionCreators, BlockSettingsView);
export default withRouter(buildReduxHOC(null, actionCreators, BlockSettingsView));
3 app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js
View file
Open in desktop
@@ -11,6 +11,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import { withRouter } from 'react-router-dom';
import ChooseDefaultSearchView from './ChooseDefaultSearchView';
import { buildReduxHOC } from '../../../../shared-hub/utils';
import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
@@ -19,4 +20,4 @@ const actionCreators = {
setSetupStep,
};

export default buildReduxHOC(null, actionCreators, ChooseDefaultSearchView);
export default withRouter(buildReduxHOC(null, actionCreators, ChooseDefaultSearchView));
1 app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss
View file
Open in desktop
@@ -121,6 +121,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
&:hover {
background-position: 0% 50%;
transition: 0.25s all;
color: $white;
}
&:focus {
color: $white;
6 app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx
View file
Open in desktop
@@ -57,6 +57,10 @@ const StepProgressBar = (props) => {
const currentStepNumber = parseInt(currentStep, 10);
const totalSteps = steps.length;

const progressBarContainerClasses = ClassNames('StepProgressBarContainer', {
step4: currentStepNumber === 4
});

const logoutIfStepOne = (stepId) => {
const { actions } = props;
const { logout } = actions;
@@ -121,7 +125,7 @@ const StepProgressBar = (props) => {
);

return (
<div className="StepProgressBarContainer">
<div className={progressBarContainerClasses}>
{(currentStep !== WELCOME) && renderProgressBar()}
</div>
);
16 app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss
View file
Open in desktop
@@ -18,7 +18,12 @@
align-items: center;
max-width: 800px;
margin: auto;
padding-top: 10px;
padding-top: 10px;

&.step4 {
max-width: 724px;
padding: 10px 20px 0 20px;
}
}

.StepProgressBar__Step {
@@ -40,6 +45,8 @@
&.incomplete {
background: url('/app/images/hub/step-progress-bar/step-2-incomplete.svg');
background-repeat: no-repeat;
margin: 0 2px 3px 0;
height: 32px;
}
}
&.step-3 {
@@ -50,6 +57,8 @@
&.incomplete {
background: url('/app/images/hub/step-progress-bar/step-3-incomplete.svg');
background-repeat: no-repeat;
margin: 0 2px 3px 0;
height: 32px;
}
}
&.step-4 {
@@ -60,6 +69,8 @@
&.incomplete {
background: url('/app/images/hub/step-progress-bar/step-4-incomplete.svg');
background-repeat: no-repeat;
margin: 0 2px 3px 0;
height: 32px;
}
}
&.step-completed {
@@ -89,9 +100,10 @@
width: 100%;
&.completed {
border: solid 2px $ghosty-blue;
width: 110%;
}
&.incompleted {
padding: 1em;
padding: 13px;
background-image:
radial-gradient(circle at 2.5px, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px),
radial-gradient(circle, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px),
2 app/images/hub/step-progress-bar/step-1-current.svg
View file
Open in desktop
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M26.117 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C8.08 0 2.878 5.014 2.878 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(.5)"><tspan x="10" y="20">1</tspan></text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 35"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M26.117 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C8.08 0 2.878 5.014 2.878 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(.5)"><tspan x="10" y="20">1</tspan></text></g></svg>
2 app/images/hub/step-progress-bar/step-2-current.svg
View file
Open in desktop
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">2</tspan></text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 35"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">2</tspan></text></g></svg>
2 app/images/hub/step-progress-bar/step-2-incomplete.svg
View file
Open in desktop
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="35"><g fill="none" fill-rule="evenodd"><path fill="#FFF" stroke="#00AEF0" stroke-width="2.1" d="M28.117 21.298V13.2c0-6.186-5.202-11.2-11.619-11.2-6.418 0-11.62 5.014-11.62 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(2.5 2)"><tspan x="10" y="20">2</tspan></text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 35"><g fill="none" fill-rule="evenodd"><path fill="#FFF" stroke="#00AEF0" stroke-width="2.1" d="M28.117 21.298V13.2c0-6.186-5.202-11.2-11.619-11.2-6.418 0-11.62 5.014-11.62 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(2.5 2)"><tspan x="10" y="20">2</tspan></text></g></svg>
2 app/images/hub/step-progress-bar/step-3-current.svg
View file
Open in desktop
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">3</tspan></text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 35"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">3</tspan></text></g></svg>
2 app/images/hub/step-progress-bar/step-3-incomplete.svg
View file
Open in desktop
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="35" viewBox="0 0 33 35">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 35">
<g fill="none" fill-rule="evenodd">
<g>
<g>
2 app/images/hub/step-progress-bar/step-4-current.svg
View file
Open in desktop
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="31"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">4</tspan></text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 35"><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400"><tspan x="10" y="20">4</tspan></text></g></svg>
2 app/images/hub/step-progress-bar/step-4-incomplete.svg
View file
Open in desktop
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="35"><g fill="none" fill-rule="evenodd"><path fill="#FFF" stroke="#00AEF0" stroke-width="2.1" d="M28.117 21.298V13.2c0-6.186-5.202-11.2-11.619-11.2-6.418 0-11.62 5.014-11.62 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(2.5 2)"><tspan x="10" y="20">4</tspan></text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 35"><g fill="none" fill-rule="evenodd"><path fill="#FFF" stroke="#00AEF0" stroke-width="2.1" d="M28.117 21.298V13.2c0-6.186-5.202-11.2-11.619-11.2-6.418 0-11.62 5.014-11.62 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><text fill="#4A4A4A" font-family="Roboto-Medium, Roboto" font-size="12.6" font-weight="400" transform="translate(2.5 2)"><tspan x="10" y="20">4</tspan></text></g></svg>
2 app/images/hub/step-progress-bar/step-completed.svg
View file
Open in desktop
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="31"><defs><path id="a" d="M16.387 6.096L7.68 14.804a.717.717 0 01-.554.238.72.72 0 01-.554-.238l-3.958-3.958a.764.764 0 010-1.108.764.764 0 011.108 0l3.404 3.404 8.154-8.155a.766.766 0 011.108 0 .766.766 0 010 1.109z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><g transform="translate(5 8)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#000" fill-rule="nonzero" xlink:href="#a"/><g fill="#4A4A4A" mask="url(#b)"><path d="M0 0h19v19H0z"/></g></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33 35"><defs><path id="a" d="M16.387 6.096L7.68 14.804a.717.717 0 01-.554.238.72.72 0 01-.554-.238l-3.958-3.958a.764.764 0 010-1.108.764.764 0 011.108 0l3.404 3.404 8.154-8.155a.766.766 0 011.108 0 .766.766 0 010 1.109z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#00AEF0" d="M25.617 19.298V11.2c0-6.186-5.202-11.2-11.619-11.2C7.58 0 2.378 5.014 2.378 11.2v8.215c-.05 1.059-.31 3.487-1.586 6.328-1.715 3.818-.296 3.363.975 3.049 1.271-.313 4.11-1.54 4.997-.029.886 1.51 1.626 2.821 3.695 1.966 2.07-.854 3.045-1.139 3.34-1.139h.402c.295 0 1.27.285 3.34 1.14 2.07.854 2.81-.457 3.696-1.967.886-1.51 3.725-.284 4.996.029 1.271.314 2.69.769.975-3.049-1.327-2.956-1.555-5.46-1.59-6.445z"/><g transform="translate(5 8)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#000" fill-rule="nonzero" xlink:href="#a"/><g fill="#4A4A4A" mask="url(#b)"><path d="M0 0h19v19H0z"/></g></g></g></svg>
ProTip! Use n and p to navigate between commits in a pull request.