robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

accessibility amends misc

Browse Source
This commit is contained in:
robbond
2024-02-19 16:54:56 +00:00
parent cf04ceba50
commit c98e05d549
15 changed files with 569 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/account/personaldetails.js
+11 -15
View File
@@ -161,14 +161,11 @@ const RenderPickList = ({
: "govuk-form-group " : "govuk-form-group "
} }
> >
<label className="govuk-label" htmlFor="sort"> <label className="govuk-label" htmlFor={datafieldname}>
{label} {label}
</label> </label>
{touched && error && ( {touched && error && (
<span <span id={name + "-error"} className="govuk-error-message">
id="passport-issued-error"
className="govuk-error-message"
>
<span className="govuk-visually-hidden">Error:</span>{" "} <span className="govuk-visually-hidden">Error:</span>{" "}
{errorMsg} {errorMsg}
</span> </span>
@@ -178,8 +175,8 @@ const RenderPickList = ({
<select <select
{...input} {...input}
className="govuk-select " className="govuk-select "
id={name} id={datafieldname}
name={name} name={datafieldname}
> >
<option>Select...</option> <option>Select...</option>
{Object.keys(optionsArr).map((key, index) => { {Object.keys(optionsArr).map((key, index) => {
@@ -237,7 +234,8 @@ let PersonalDetails = (props) => {
setPersonalDetailsComplete(true); setPersonalDetailsComplete(true);
}; };
return <> return (
<>
{props.accountUpdatedComplete == false ? ( {props.accountUpdatedComplete == false ? (
props.personalDetailsComplete == false ? ( props.personalDetailsComplete == false ? (
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
@@ -258,11 +256,10 @@ let PersonalDetails = (props) => {
} }
</span> </span>
</div> </div>
<Field <Field
name="pinswg_preferredlanguage" name="pinswg_preferredlanguage"
component={RenderPickList} component={RenderPickList}
datafieldname="pinswg_preferredlanguage" datafieldname={"pinswg_preferredlanguage"}
optionsArr={["English", "Welsh"]} optionsArr={["English", "Welsh"]}
className="govuk-input govuk-input--width-20 govuk-radios--inline" className="govuk-input govuk-input--width-20 govuk-radios--inline"
validate={[required]} validate={[required]}
@@ -311,7 +308,6 @@ let PersonalDetails = (props) => {
validate={[required, phoneNumber]} validate={[required, phoneNumber]}
label={t("account:account-telephone-label")} label={t("account:account-telephone-label")}
/> />
<Field <Field
name="company" name="company"
id="company" id="company"
@@ -396,10 +392,9 @@ let PersonalDetails = (props) => {
"/myportal?q=" + "/myportal?q=" +
props.props.accountDetails.loggedinUserId props.props.accountDetails.loggedinUserId
} }
className="govuk-link"> className="govuk-link"
>
{t("common:cancel-link")} {t("common:cancel-link")}
</Link> </Link>
</div> </div>
</form> </form>
@@ -419,7 +414,8 @@ let PersonalDetails = (props) => {
) : ( ) : (
<PersonalDetailsComplete props={props} /> <PersonalDetailsComplete props={props} />
)} )}
</>; </>
);
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
components/elements/index.js
+1 -8
View File
@@ -251,11 +251,10 @@ export function MultiLinefield(props) {
{parentField != false ? ( {parentField != false ? (
showIfHasParentShowValue && ( showIfHasParentShowValue && (
<div> <div>
<h1 className="govuk-label-wrapper">
<label className="govuk-label" htmlFor={props.name}> <label className="govuk-label" htmlFor={props.name}>
{FieldsTranslations(props.label)} {FieldsTranslations(props.label)}
</label> </label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
@@ -277,11 +276,9 @@ export function MultiLinefield(props) {
) )
) : ( ) : (
<div className="govuk-form-group"> <div className="govuk-form-group">
<h1 className="govuk-label-wrapper">
<label className="govuk-label" htmlFor={props.name}> <label className="govuk-label" htmlFor={props.name}>
{FieldsTranslations(props.label)} {FieldsTranslations(props.label)}
</label> </label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
@@ -390,11 +387,9 @@ export function RichMultiLinefield(props) {
{parentField != false ? ( {parentField != false ? (
showIfHasParentShowValue && ( showIfHasParentShowValue && (
<div> <div>
<h1 className="govuk-label-wrapper">
<label className="govuk-label" htmlFor={props.name}> <label className="govuk-label" htmlFor={props.name}>
{FieldsTranslations(props.label)} {FieldsTranslations(props.label)}
</label> </label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
@@ -416,11 +411,9 @@ export function RichMultiLinefield(props) {
) )
) : ( ) : (
<div className="govuk-form-group"> <div className="govuk-form-group">
<h1 className="govuk-label-wrapper">
<label className="govuk-label" htmlFor={props.name}> <label className="govuk-label" htmlFor={props.name}>
{FieldsTranslations(props.label)} {FieldsTranslations(props.label)}
</label> </label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
components/footer.js
+23 -19
View File
@@ -13,7 +13,10 @@ export default function Footer(props) {
const linksBlock = Object.keys(linksArr).map((key) => ( const linksBlock = Object.keys(linksArr).map((key) => (
<li className="govuk-footer__inline-list-item" key={key}> <li className="govuk-footer__inline-list-item" key={key}>
<Link href={linksArr[key].path || "/"} className="govuk-footer__link"> <Link
href={linksArr[key].path || "/"}
className="govuk-footer__link"
>
{linksArr[key].title} {linksArr[key].title}
</Link> </Link>
</li> </li>
@@ -34,8 +37,14 @@ export default function Footer(props) {
" " + " " +
t("common:gov-wales-label").toLowerCase(); t("common:gov-wales-label").toLowerCase();
return <> return (
<div className="sharebar" id="sharebar"> <>
<div
className="sharebar"
id="sharebar"
role="complementary"
aria-label="Share this page"
>
<div className="sharebar__components container-fluid"> <div className="sharebar__components container-fluid">
<div className="main__sharebar"> <div className="main__sharebar">
<div <div
@@ -173,12 +182,11 @@ export default function Footer(props) {
: "/accessibility" : "/accessibility"
} }
className="govuk-footer__link" className="govuk-footer__link"
id="aAccessibility"> id="aAccessibility"
>
{t( {t(
"common:footer-accessibility-link-label" "common:footer-accessibility-link-label"
)} )}
</Link> </Link>
</li> </li>
@@ -190,12 +198,9 @@ export default function Footer(props) {
: "/help/cookies" : "/help/cookies"
} }
id="aCookies" id="aCookies"
className="govuk-footer__link"> className="govuk-footer__link"
>
{t( {t("common:footer-cookies-link")}
"common:footer-cookies-link"
)}
</Link> </Link>
</li> </li>
<li className="govuk-footer__inline-list-item"> <li className="govuk-footer__inline-list-item">
@@ -218,12 +223,11 @@ export default function Footer(props) {
"common:footer-privacy-link" "common:footer-privacy-link"
)} )}
id="aPrivacy" id="aPrivacy"
className="govuk-footer__link"> className="govuk-footer__link"
>
{t( {t(
"common:footer-privacy-link-label" "common:footer-privacy-link-label"
)} )}
</Link> </Link>
</li> </li>
@@ -233,12 +237,11 @@ export default function Footer(props) {
"common:footer-terms-conditions-link" "common:footer-terms-conditions-link"
)} )}
id="aTermsConds" id="aTermsConds"
className="govuk-footer__link"> className="govuk-footer__link"
>
{t( {t(
"common:footer-terms-conditions-link-label" "common:footer-terms-conditions-link-label"
)} )}
</Link> </Link>
</li> </li>
{/* <li className="govuk-footer__inline-list-item"> {/* <li className="govuk-footer__inline-list-item">
@@ -276,5 +279,6 @@ export default function Footer(props) {
</div> </div>
</div> </div>
</footer> </footer>
</>; </>
);
} }
components/homepage/casesearch.js
+8 -7
View File
@@ -94,13 +94,14 @@ let CaseSearch = (props) => {
}); });
}; };
return <> return (
<>
<div className="card" id="casesearch-card"> <div className="card" id="casesearch-card">
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
<div className="card-body"> <div className="card-body">
<h3 className="heading-small card-heading"> <h2 className="heading-small card-heading">
{t("home:casesearch-card-title")} {t("home:casesearch-card-title")}
</h3> </h2>
<Field <Field
validate={[ validate={[
@@ -141,15 +142,15 @@ let CaseSearch = (props) => {
? "/chwiliouwch" ? "/chwiliouwch"
: "/advancedsearch" : "/advancedsearch"
} }
className="govuk-link--no-underline"> className="govuk-link--no-underline"
>
{t("home:casesearch-card-advanced-link")} {t("home:casesearch-card-advanced-link")}
</Link> </Link>
</div> </div>
</form> </form>
</div> </div>
</>; </>
);
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
components/homepage/dns.js
+3 -4
View File
@@ -16,7 +16,7 @@ export default function Dns() {
// : setShowSpinnerState(true); // : setShowSpinnerState(true);
// }; // };
return ( return (
<div className="card" id="casesearch-card"> <div className="card" id="dns-card">
<div className="card-body"> <div className="card-body">
<h3 className="heading-small card-heading"> <h3 className="heading-small card-heading">
{t("home:dns-card-title")} {t("home:dns-card-title")}
@@ -36,10 +36,9 @@ export default function Dns() {
// onClick={() => { // onClick={() => {
// spinnerState(); // spinnerState();
// }} // }}
className="govuk-button withChevron govuk-button-cta"> className="govuk-button withChevron govuk-button-cta"
>
{t("home:dns-card-button")} {t("home:dns-card-button")}
</Link> </Link>
</div> </div>
</div> </div>
components/search/advancedsearch.js
+2 -5
View File
@@ -94,10 +94,7 @@ const RenderCaseStatusList = ({
{name} {name}
</label> </label>
{touched && error && ( {touched && error && (
<span <span id={name + "-error"} className="govuk-error-message">
id="passport-issued-error"
className="govuk-error-message"
>
<span className="govuk-visually-hidden">Error:</span>{" "} <span className="govuk-visually-hidden">Error:</span>{" "}
{errormsg} {errormsg}
</span> </span>
@@ -290,7 +287,7 @@ let AdvancedSearch = (props) => {
</label> </label>
{touched && error && ( {touched && error && (
<span <span
id="passport-issued-error" id={name + "-error"}
className="govuk-error-message" className="govuk-error-message"
> >
<span className="govuk-visually-hidden"> <span className="govuk-visually-hidden">
components/search/pagination.js
+6 -6
View File
@@ -91,7 +91,7 @@ const PaginationControl = (props) => {
<div className="govuk-grid-row paginationWrapper"> <div className="govuk-grid-row paginationWrapper">
<div className="govuk-grid-column-one-quarter paginationPrevious"> <div className="govuk-grid-column-one-quarter paginationPrevious">
{props.currentView.currentPage != 1 ? ( {props.currentView.currentPage != 1 ? (
<span <button
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => { onClick={() => {
spinnerState(), spinnerState(),
@@ -108,7 +108,7 @@ const PaginationControl = (props) => {
}} }}
> >
{t("common:previous-link-button")} {t("common:previous-link-button")}
</span> </button>
) : ( ) : (
<span className="govuk-body leftTextButton govuk-!-font-weight-bold"> <span className="govuk-body leftTextButton govuk-!-font-weight-bold">
{t("common:previous-link-button")} {t("common:previous-link-button")}
@@ -132,7 +132,7 @@ const PaginationControl = (props) => {
{e} {e}
</span> </span>
) : ( ) : (
<span <button
className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem" className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i} key={i}
onClick={() => { onClick={() => {
@@ -146,13 +146,13 @@ const PaginationControl = (props) => {
}} }}
> >
{e} {e}
</span> </button>
) )
)} )}
</div> </div>
<div className="govuk-grid-column-one-quarter paginationNext"> <div className="govuk-grid-column-one-quarter paginationNext">
{props.currentView.currentPage < pagesCount ? ( {props.currentView.currentPage < pagesCount ? (
<span <button
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => { onClick={() => {
spinnerState(), spinnerState(),
@@ -169,7 +169,7 @@ const PaginationControl = (props) => {
}} }}
> >
{t("common:next-link-button")} {t("common:next-link-button")}
</span> </button>
) : ( ) : (
<span className="govuk-body rightTextButton govuk-!-font-weight-bold"> <span className="govuk-body rightTextButton govuk-!-font-weight-bold">
{" "} {" "}
components/search/searchresults.js
+4 -4
View File
@@ -497,7 +497,7 @@ const SearchResults = (props) => {
.length > .length >
0 == 0 ==
true ? ( true ? (
<span <button
className="govuk-summary-list__actionLink watched_link" className="govuk-summary-list__actionLink watched_link"
onClick={() => { onClick={() => {
confirm( confirm(
@@ -521,9 +521,9 @@ const SearchResults = (props) => {
)} )}
> >
<span className="eye"></span> <span className="eye"></span>
</span> </button>
) : ( ) : (
<span <button
className="govuk-summary-list__actionLink watchLink" className="govuk-summary-list__actionLink watchLink"
onClick={() => { onClick={() => {
confirm( confirm(
@@ -546,7 +546,7 @@ const SearchResults = (props) => {
)} )}
> >
<span className="eye"></span> <span className="eye"></span>
</span> </button>
)} )}
</dd> </dd>
)} )}
pages/auth/error.js
+5 -1
View File
@@ -45,7 +45,11 @@ const Error = (props) => {
<div className="govuk-width-container govuk-!-padding-bottom-9"> <div className="govuk-width-container govuk-!-padding-bottom-9">
<Breadcrumbs /> <Breadcrumbs />
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"> <main
className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
id="main-content"
role="main"
>
<div className="govuk-grid-row "> <div className="govuk-grid-row ">
<div className="govuk-grid-column-two-thirds "> <div className="govuk-grid-column-two-thirds ">
<h1>{t("auth:auth-error-heading")}</h1> <h1>{t("auth:auth-error-heading")}</h1>
pages/auth/signin.js
+5 -1
View File
@@ -33,7 +33,11 @@ const SignIn = (props) => {
<Header courseName={t("common:service-name")} /> <Header courseName={t("common:service-name")} />
<div className="govuk-width-container govuk-!-padding-bottom-9"> <div className="govuk-width-container govuk-!-padding-bottom-9">
<Breadcrumbs /> <Breadcrumbs />
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"> <main
className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
id="main-content"
role="main"
>
<div className="govuk-grid-row "> <div className="govuk-grid-row ">
<div className="govuk-grid-column-two-thirds "> <div className="govuk-grid-column-two-thirds ">
<h1>{t("auth:auth-page-title")} </h1> <h1>{t("auth:auth-page-title")} </h1>
pages/auth/verify-request.js
+5 -1
View File
@@ -26,7 +26,11 @@ const SignIn = (props) => {
<div className="govuk-width-container govuk-!-padding-bottom-9"> <div className="govuk-width-container govuk-!-padding-bottom-9">
<Breadcrumbs /> <Breadcrumbs />
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"> <main
className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
id="main-content"
role="main"
>
<div className="govuk-grid-row "> <div className="govuk-grid-row ">
<div className="govuk-grid-column-two-thirds "> <div className="govuk-grid-column-two-thirds ">
<h1>{t("auth:auth-check-email-page-title")}</h1> <h1>{t("auth:auth-check-email-page-title")}</h1>
pages/logout.js
+7 -2
View File
@@ -88,14 +88,19 @@ const LogOut = (props) => {
<div id="page_wrapper"> <div id="page_wrapper">
<CookieBanner /> <CookieBanner />
<Header courseName="Appeals Casework Portal" /> <Header courseName="Appeals Casework Portal" />
<main>
<div className="govuk-width-container"> <div className="govuk-width-container">
<h2>{t("common:logged-out-title")}</h2> <h1>{t("common:logged-out-title")}</h1>
<div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9"> <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
<Link href={locale == "cy" ? "/cy" : "/"} legacyBehavior> <Link
href={locale == "cy" ? "/cy" : "/"}
legacyBehavior
>
{t("common:logged-out-link")} {t("common:logged-out-link")}
</Link> </Link>
</div> </div>
</div> </div>
</main>
<Footer footerLinks={footerLinks} /> <Footer footerLinks={footerLinks} />
</div> </div>
</div> </div>
pages/myportal/index.js
+3 -22
View File
@@ -264,12 +264,12 @@ export const getServerSideProps = wrapper.getServerSideProps(
const [ const [
myCasesDetails, myCasesDetails,
watchedCasesDetails, watchedCasesDetails,
awaitingSubmissionDetails, //awaitingSubmissionDetails,
myRepresentationsDetails, myRepresentationsDetails,
] = await Promise.all([ ] = await Promise.all([
await getDetails(myCases, "myCases"), await getDetails(myCases, "myCases"),
await getDetails(watchedCases, "myWatchedCases"), await getDetails(watchedCases, "myWatchedCases"),
await getDetails(awaitingSubmission, "awaitingSubmission"), //await getDetails(awaitingSubmission, "awaitingSubmission"),
await getDetails(myRepresentations, "myRepresentations"), await getDetails(myRepresentations, "myRepresentations"),
]); ]);
@@ -386,25 +386,7 @@ const getDetails = (resultsObj, detailsType) => {
//console.log(detailsType, " case id : ", caseID); //console.log(detailsType, " case id : ", caseID);
if (searchDetail.pinswg_appealcasetype == null) { searchDetail.pinswg_appealcasetype != null &&
// console.log(
// "detailsObj:",
// detailsType,
// detailsType == "myCases" && searchDetail.pinswg_title,
// detailsType == "myWatchedCases" &&
// searchDetail[
// "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
// ],
// detailsType == "awaitingSubmission" &&
// searchDetail.ticketnumber,
// detailsType == "myRepresentations" && searchDetail.casereference
// );
console.log(
"=====================================\n",
detailsType + "\n",
"=====================================\n"
);
} else {
detailsArr.push( detailsArr.push(
getPortalModuleDetails( getPortalModuleDetails(
getFormCollectionByID(searchDetail.pinswg_appealcasetype) getFormCollectionByID(searchDetail.pinswg_appealcasetype)
@@ -417,7 +399,6 @@ const getDetails = (resultsObj, detailsType) => {
// ] // ]
) )
); );
}
}); });
let detArr = Promise.all(detailsArr); let detArr = Promise.all(detailsArr);
styles/sass/patterns/_card.scss
+2 -1
View File
@@ -81,6 +81,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
.card-heading { .card-heading {
margin-top: 0; margin-top: 0;
font-size: 1.17rem;
} }
.card-body { .card-body {
@@ -266,7 +267,7 @@ div.cardModuleItem:last-of-type {
margin-right: 10px; margin-right: 10px;
} }
a {}
} }
.cardModuleRemoveCase { .cardModuleRemoveCase {
styles/sass/welshgov/_application.scss
+62 -5
View File
@@ -200,6 +200,19 @@ a.longLinkBreak {
letter-spacing: 1px; letter-spacing: 1px;
padding: 5px 8px 4px; padding: 5px 8px 4px;
} }
.govuk-phase-banner__content {
line-height: 1.5;
}
.govuk-tag.govuk-phase-banner__content__tag {
line-height: 1.5;
}
.govuk-phase-banner__text {
line-height: 1.5;
}
} }
} }
} }
@@ -1140,8 +1153,10 @@ textarea,
} }
&:focus { &:focus {
border: none; // border: none;
// box-shadow: none;
box-shadow: none; box-shadow: none;
border: #ffd530 solid 3px
} }
} }
} }
@@ -1903,10 +1918,22 @@ ul#sharePageLinks.active {
&.activePaginationItem { &.activePaginationItem {
color: #b80d0d; color: #b80d0d;
background-color: transparent;
border: none;
cursor: pointer;
// &:before { // &:before {
// content: ""; // content: "";
// background-image: url(/assets/images/arrow-left--active.svg); // background-image: url(/assets/images/arrow-left--active.svg);
// } // }
&:focus {
background-color: #ffd530 !important;
border-color: transparent !important;
color: #1f1f1f !important;
outline: 2px solid #1f1f1f;
text-decoration: none !important;
box-shadow: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -1942,6 +1969,19 @@ ul#sharePageLinks.active {
.activePaginationItem { .activePaginationItem {
color: #b80d0d; color: #b80d0d;
border: none;
background: none;
cursor: pointer;
&:focus {
background-color: #ffd530 !important;
border-color: transparent !important;
color: #1f1f1f !important;
outline: 2px solid #1f1f1f;
text-decoration: none !important;
box-shadow: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -1966,11 +2006,23 @@ ul#sharePageLinks.active {
&.activePaginationItem { &.activePaginationItem {
color: #b80d0d; color: #b80d0d;
background-color: transparent;
border: none;
cursor: pointer;
&:after { &:after {
content: ""; content: "";
background-image: url(/assets/images/arrow-right--active.svg); background-image: url(/assets/images/arrow-right--active.svg);
} }
&:focus {
background-color: #ffd530 !important;
border-color: transparent !important;
color: #1f1f1f !important;
outline: 2px solid #1f1f1f;
text-decoration: none !important;
box-shadow: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -2047,13 +2099,18 @@ ul#sharePageLinks.active {
color: #0b0c0c; color: #0b0c0c;
background-color: #ffdd00; background-color: #ffdd00;
-webkit-box-shadow: 0 2px 0 #0b0c0c; -webkit-box-shadow: 0 2px 0 #0b0c0c;
box-shadow: 0 2px 0 #0b0c0c; box-shadow: 0 0px 0 #0b0c0c;
& .eye:before {
background-color: #ffdd00;
border: solid 1px #ffdd00;
}
} }
&.watched_link { &.watched_link {
color: $black !important; color: $black !important;
background-color: $white; background-color: $white;
width: 13px; width: 24px;
display: block; display: block;
.eye { .eye {
@@ -2068,7 +2125,7 @@ ul#sharePageLinks.active {
&.watchLink { &.watchLink {
width: 13px; width: 24px;
display: block; display: block;
} }
@@ -2081,7 +2138,7 @@ ul#sharePageLinks.active {
position: relative; position: relative;
transform: rotate(45deg); transform: rotate(45deg);
display: block; display: block;
top: 3.5px; top: 0.5px;
background-color: white; background-color: white;
} }