Skip to content

Commit

Permalink
Add internal hotjarNPS.css (#222)
Browse files Browse the repository at this point in the history
  • Loading branch information
@annarhughes
annarhughes committed Nov 6, 2023
1 parent 766abdf commit ec6fd48
Show file tree
Hide file tree
Showing 3 changed files with 206 additions and 1 deletion.
205 changes: 205 additions & 0 deletions public/hotjarNPS.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
/* Hotjar CUSTOM styles to override default hotjar CSS */

._hj-widget-container ._hj-Pbej5__styles__resetStyles * {
font-family: 'Open Sans', 'Nunito', 'roboto', 'hotjar', 'sans-serif' !important;
}

._hj-PZjqr__styles__surveyBranding {
display: none !important;
}

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-5vKq2__styles__surveyContainer._hj-5vKq2__styles__surveyContainer {
width: 30rem !important;
max-width: 100vw;
border-radius: 1.25rem !important;
padding: 1.5rem !important;
}

@media (min-width: 480px) {
._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-5vKq2__styles__surveyContainer._hj-5vKq2__styles__surveyContainer {
bottom: 1.5rem;
}
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-kWRoL__styles__openStateToggle {
border-top-left-radius: 0.75rem !important;
border-top-right-radius: 0.75rem !important;
height: 1.25rem !important;
top: -1.25rem !important;
right: 2rem !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-8Lgv6__styles__surveyActions {
min-height: unset !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-XpAaA__styles__surveyFooter {
border: none !important;
justify-content: center !important;
}

._hj-widget-container._hj-widget-theme-light
._hj-s3UIi__styles__globalStyles
._hj-S9XKO__styles__surveyTitle,
._hj-widget-container._hj-widget-theme-light
._hj-s3UIi__styles__globalStyles
._hj-S9XKO__styles__surveyTitle
> span {
font-weight: 500 !important;
font-size: 1rem !important;
line-height: 1.4 !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-hTm4\+__styles__answersContentWrapper {
padding: 0.5rem 0 1rem !important;
}

/* Primary button styles */
._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton,
._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-XpAaA__styles__surveyFooter button {
background: #ffbfa4 !important;
color: #000000 !important;
font-weight: 500 !important;
border: 1px solid #ffbfa4 !important;
border-radius: 100rem !important;
min-width: 5rem !important;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton:hover,
._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-XpAaA__styles__surveyFooter
button:hover {
background: rgb(255, 203, 182) !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton:focus,
._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-XpAaA__styles__surveyFooter
button:focus {
background: rgb(255, 203, 182) !important;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton[disabled],
._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-XpAaA__styles__surveyFooter
button[disabled] {
border-color: transparent !important;
}
._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-SU8LU__styles__primaryButton[disabled]:hover,
._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-XpAaA__styles__surveyFooter
button[disabled]:hover {
background: rgb(255, 203, 182) !important;
}

/* Input styles */

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-P-UNr__styles__inputField._hj-Wk\+wZ__styles__light {
border-color: rgba(0, 0, 0, 0.12) !important;
}

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-P-UNr__styles__inputField._hj-Wk\+wZ__styles__light:hover {
border-color: #ffbfa4 !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-P-UNr__styles__inputField:focus {
outline: none !important;
border-color: #ffbfa4 !important;
}

/* Scales styles */

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-ILZpN__styles__scaleLabels {
padding-top: 0.5rem !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-CvVSY__styles__scaleOption span,
._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-CvVSY__styles__scaleOption._hj-V57HW__styles__selected
span {
background: none !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
border-radius: 2rem !important;
height: 2.125rem !important;
width: 2.125rem !important;
color: #ea0050 !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-CvVSY__styles__scaleOption span:hover {
border-color: rgba(0, 0, 0, 0.28) !important;
}

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-CvVSY__styles__scaleOption:focus-within
span {
outline: none !important;
border-color: #ff976a !important;
border-width: 1.5px !important;
}

/* Thank you page styles */

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-tHiZi__styles__finalStep {
padding: 0.75rem 0.5rem 0 !important;
}

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-2JZDx__styles__thankYouMessage._hj-iinO7__styles__withConsent {
margin-bottom: 0.75rem !important;
font-size: 1rem !important;
font-weight: 400 !important;
}

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-cK\+L-__styles__consentMessage._hj-N21Xh__styles__light,
._hj-widget-container
._hj_feedback_container
._hj-cK\+L-__styles__consentMessage._hj-N21Xh__styles__light {
margin-bottom: 0 !important;
color: #000000 !important;
font-size: 0.875rem !important;
}

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-SU8LU__styles__primaryButton._hj-oxtSd__styles__declineButton {
background-color: transparent !important;
color: #000000 !important;
margin-right: 0 !important;
box-shadow: none !important;
border-color: #ffbfa4 !important;
border: 1px solid #ffbfa4 !important;
}

._hj-widget-container
._hj-s3UIi__styles__globalStyles
._hj-SU8LU__styles__primaryButton._hj-oxtSd__styles__declineButton:hover {
background: rgb(255, 203, 182) !important;
color: #000000 !important;
box-shadow: none !important;
}

._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-B\+0X3__styles__consentButton i, ._hj_feedback_container ._hj-B\+0X3__styles__consentButton i {
font-size: 15px !important;
height: 17px !important;
}
1 change: 1 addition & 0 deletions src/pages/_app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import CookieConsent, { getCookieConsentValue } from 'react-cookie-consent';
import { useAuthState } from 'react-firebase-hooks/auth';
import { hotjar } from 'react-hotjar';
import { Provider } from 'react-redux';
import '../../public/hotjarNPS.css';
import Head from '../components/Head';
import Header from '../components/Header';
import Loading from '../components/Loading';
Expand Down
1 change: 0 additions & 1 deletion src/pages/_document.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export default class MyDocument extends Document {
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Nunito&display=swap"
/>
<link rel="stylesheet" href="https://bloom.chayn.co/hotjarNPS.css" />
</Head>
<body>
<Main />
Expand Down

0 comments on commit ec6fd48

Please sign in to comment.