From 3a9bbe71840d8e0ac3091670e03648da6a4cc3a6 Mon Sep 17 00:00:00 2001 From: Caden Buckhalt Date: Thu, 11 Jan 2024 10:54:53 -0800 Subject: [PATCH 1/4] fix: error on navigation from catbin to other interface nodeVariables is null on some non-categorical bin interfaces. navigating back to those after being on a categorical bin threw an error. this fix is to use the optional chaining operator to return early if null before accessing nested properties. --- lib/interviewer/selectors/interface.js | 95 +++++++++++++++----------- 1 file changed, 56 insertions(+), 39 deletions(-) diff --git a/lib/interviewer/selectors/interface.js b/lib/interviewer/selectors/interface.js index bdc5b3f5..7aaec5d8 100644 --- a/lib/interviewer/selectors/interface.js +++ b/lib/interviewer/selectors/interface.js @@ -1,7 +1,14 @@ import { filter, includes, intersection } from 'lodash'; import { getProtocolCodebook } from './protocol'; import { getNetwork, getNetworkEdges, getNetworkNodes } from './network'; -import { getPromptOtherVariable, getStageSubject, stagePromptIds, getPropPromptId, getPromptVariable, getSubjectType } from './prop'; +import { + getPromptOtherVariable, + getStageSubject, + stagePromptIds, + getPropPromptId, + getPromptVariable, + getSubjectType, +} from './prop'; import { createSelector } from '@reduxjs/toolkit'; // Selectors that are generic between interfaces @@ -19,35 +26,38 @@ export const getNodeVariables = createSelector( const nodeInfo = codebook.node; return nodeInfo && nodeInfo[nodeType] && nodeInfo[nodeType].variables; }, -) +); export const makeGetNodeVariables = () => getNodeVariables; -export const makeGetVariableOptions = (includeOtherVariable = false) => createSelector( - getNodeVariables, getPromptVariable, getPromptOtherVariable, - ( - nodeVariables, - promptVariable, - [promptOtherVariable, promptOtherOptionLabel, promptOtherVariablePrompt], - ) => { - const optionValues = nodeVariables[promptVariable].options || []; - const otherValue = { - label: promptOtherOptionLabel, - value: null, - otherVariablePrompt: promptOtherVariablePrompt, - otherVariable: promptOtherVariable, - }; - - return includeOtherVariable && promptOtherVariable - ? [...optionValues, otherValue] - : optionValues; - }, -); +export const makeGetVariableOptions = (includeOtherVariable = false) => + createSelector( + getNodeVariables, + getPromptVariable, + getPromptOtherVariable, + ( + nodeVariables, + promptVariable, + [promptOtherVariable, promptOtherOptionLabel, promptOtherVariablePrompt], + ) => { + const optionValues = nodeVariables[promptVariable]?.options || []; + const otherValue = { + label: promptOtherOptionLabel, + value: null, + otherVariablePrompt: promptOtherVariablePrompt, + otherVariable: promptOtherVariable, + }; + + return includeOtherVariable && promptOtherVariable + ? [...optionValues, otherValue] + : optionValues; + }, + ); /** * makeNetworkEdgesForType() * Get the current prompt/stage subject, and filter the network by this edge type. -*/ + */ export const getNetworkEdgesForType = createSelector( getNetworkEdges, @@ -60,7 +70,7 @@ export const makeNetworkEdgesForType = () => getNetworkEdgesForType; /** * makeNetworkEntitiesForType() * Get the current prompt/stage subject, and filter the network by this entity type. -*/ + */ export const getNetworkEntitiesForType = createSelector( getNetwork, getStageSubject, @@ -83,7 +93,7 @@ export const makeNetworkEntitiesForType = () => getNetworkEntitiesForType; /** * makeNetworkNodesForType() * Get the current prompt/stage subject, and filter the network by this node type. -*/ + */ export const getNetworkNodesForType = createSelector( getNetworkNodes, @@ -97,17 +107,20 @@ export const makeNetworkNodesForType = () => getNetworkNodesForType; export const getStageNodeCount = createSelector( getNetworkNodesForType, stagePromptIds, - (nodes, promptIds) => filter( - nodes, (node) => intersection(node.promptIDs, promptIds).length > 0, - ).length, + (nodes, promptIds) => + filter(nodes, (node) => intersection(node.promptIDs, promptIds).length > 0) + .length, ); export const makeGetStageNodeCount = () => { return createSelector( - getNetworkNodesForType, stagePromptIds, - (nodes, promptIds) => filter( - nodes, (node) => intersection(node.promptIDs, promptIds).length > 0, - ).length, + getNetworkNodesForType, + stagePromptIds, + (nodes, promptIds) => + filter( + nodes, + (node) => intersection(node.promptIDs, promptIds).length > 0, + ).length, ); }; @@ -115,13 +128,14 @@ export const makeGetStageNodeCount = () => { * makeNetworkNodesForPrompt * * Return a filtered node list containing only nodes where node IDs contains the current promptId. -*/ + */ export const getNetworkNodesForPrompt = createSelector( getNetworkNodesForType, getPropPromptId, - (nodes, promptId) => filter(nodes, (node) => includes(node.promptIDs, promptId)), -) + (nodes, promptId) => + filter(nodes, (node) => includes(node.promptIDs, promptId)), +); export const makeNetworkNodesForPrompt = () => getNetworkNodesForPrompt; @@ -130,11 +144,14 @@ export const makeNetworkNodesForPrompt = () => getNetworkNodesForPrompt; * * Same as above, except returns a filtered node list that **excludes** nodes that match the current * prompt's promptId. -*/ + */ export const getNetworkNodesForOtherPrompts = createSelector( - getNetworkNodesForType, getPropPromptId, - (nodes, promptId) => filter(nodes, (node) => !includes(node.promptIDs, promptId)), + getNetworkNodesForType, + getPropPromptId, + (nodes, promptId) => + filter(nodes, (node) => !includes(node.promptIDs, promptId)), ); -export const makeNetworkNodesForOtherPrompts = () => getNetworkNodesForOtherPrompts; +export const makeNetworkNodesForOtherPrompts = () => + getNetworkNodesForOtherPrompts; From 45be307127ddf393ee63a0667410d803bf5ce097 Mon Sep 17 00:00:00 2001 From: Caden Buckhalt Date: Thu, 11 Jan 2024 12:21:30 -0800 Subject: [PATCH 2/4] fix: boolean negative choice missing color color var needed nc prefix. there may be other instances of this issue. --- lib/ui/styles/components/form/fields/_boolean.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/ui/styles/components/form/fields/_boolean.scss b/lib/ui/styles/components/form/fields/_boolean.scss index 51e2d2a2..93ab6cee 100644 --- a/lib/ui/styles/components/form/fields/_boolean.scss +++ b/lib/ui/styles/components/form/fields/_boolean.scss @@ -84,7 +84,7 @@ border-color: var(--nc-input-accent); &.boolean-option--negative { - border-color: var(--error); + border-color: var(--nc-error); } } } @@ -120,7 +120,7 @@ border-color: transparent; &.round-checkbox--negative { - background-color: var(--error); + background-color: var(--nc-error); } svg { From 0e4bcae7291a75f02fcd154b28eac314e72dfc54 Mon Sep 17 00:00:00 2001 From: Caden Buckhalt Date: Thu, 11 Jan 2024 13:05:04 -0800 Subject: [PATCH 3/4] fix: error colors, date picker input bg color --- .../components/_pairing-code-input.scss | 8 +++--- .../styles/containers/_dyad-census.scss | 25 +++++++++++-------- .../containers/_tie-strength-census.scss | 21 ++++++++++------ lib/ui/styles/components/_dialog.scss | 3 +-- .../components/cards/_protocol-card.scss | 13 +++++----- .../components/cards/_session-card.scss | 17 ++++--------- .../components/form/fields/_boolean.scss | 4 +-- .../form/fields/_checkbox-group.scss | 10 ++++---- .../components/form/fields/_date-picker.scss | 6 ++--- .../components/form/fields/_radio-group.scss | 10 ++++---- .../components/form/fields/_rich-text.scss | 4 +-- .../components/form/fields/_slider.scss | 4 +-- .../styles/components/form/fields/_text.scss | 4 +-- .../form/fields/_toggle-button-group.scss | 9 +++---- .../components/form/fields/_toggle.scss | 4 +-- lib/ui/styles/components/toasts/_toasts.scss | 8 +++--- 16 files changed, 76 insertions(+), 74 deletions(-) diff --git a/lib/interviewer/styles/components/_pairing-code-input.scss b/lib/interviewer/styles/components/_pairing-code-input.scss index 7be14821..dc0acf3f 100644 --- a/lib/interviewer/styles/components/_pairing-code-input.scss +++ b/lib/interviewer/styles/components/_pairing-code-input.scss @@ -16,10 +16,10 @@ } &__character { - --character-padding: .75rem; + --character-padding: 0.75rem; appearance: none; - border-radius: .25rem; + border-radius: 0.25rem; font-family: var(--code-font); font-size: 2rem; font-weight: medium; @@ -27,7 +27,7 @@ text-align: center; width: calc(1rem + var(--character-padding) * 2); border: 0; - margin: .25rem; + margin: 0.25rem; &:nth-of-type(4n) { margin-right: 1rem; @@ -38,7 +38,7 @@ } &--error { - background-color: var(--error); + background-color: var(--nc-error); } } } diff --git a/lib/interviewer/styles/containers/_dyad-census.scss b/lib/interviewer/styles/containers/_dyad-census.scss index dcf5f6c3..c82bf5f7 100644 --- a/lib/interviewer/styles/containers/_dyad-census.scss +++ b/lib/interviewer/styles/containers/_dyad-census.scss @@ -13,23 +13,23 @@ @keyframes shake { 10%, 90% { - transform: translate3d(-.1rem, 0, 0); + transform: translate3d(-0.1rem, 0, 0); } 20%, 80% { - transform: translate3d(+.2rem, 0, 0); + transform: translate3d(+0.2rem, 0, 0); } 30%, 50%, 70% { - transform: translate3d(-.4rem, 0, 0); + transform: translate3d(-0.4rem, 0, 0); } 40%, 60% { - transform: translate3d(+.4rem, 0, 0); + transform: translate3d(+0.4rem, 0, 0); } } @@ -106,9 +106,9 @@ padding: units.unit(2); &--invalid { - border-color: var(--error); + border-color: var(--nc-error); outline-offset: 0.75rem; - animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; + animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } } @@ -136,9 +136,14 @@ z-index: 1; width: 11rem; margin: 0 -1.5rem; - background: linear-gradient(to right, transparent 50%, var(--nc-background) 50%); + background: linear-gradient( + to right, + transparent 50%, + var(--nc-background) 50% + ); background-size: 200% 100%; - transition: background var(--animation-duration-standard) var(--animation-easing); + transition: background var(--animation-duration-standard) + var(--animation-easing); } &__options-step { @@ -157,10 +162,10 @@ .boolean-option--selected { &.boolean-option { &--no { - border-color: var(--error); + border-color: var(--nc-error); .round-checkbox--checked { - background-color: var(--error); + background-color: var(--nc-error); } } } diff --git a/lib/interviewer/styles/containers/_tie-strength-census.scss b/lib/interviewer/styles/containers/_tie-strength-census.scss index 308a948a..ee5bb063 100644 --- a/lib/interviewer/styles/containers/_tie-strength-census.scss +++ b/lib/interviewer/styles/containers/_tie-strength-census.scss @@ -1,23 +1,23 @@ @keyframes shake { 10%, 90% { - transform: translate3d(-.1rem, 0, 0); + transform: translate3d(-0.1rem, 0, 0); } 20%, 80% { - transform: translate3d(+.2rem, 0, 0); + transform: translate3d(+0.2rem, 0, 0); } 30%, 50%, 70% { - transform: translate3d(-.4rem, 0, 0); + transform: translate3d(-0.4rem, 0, 0); } 40%, 60% { - transform: translate3d(+.4rem, 0, 0); + transform: translate3d(+0.4rem, 0, 0); } } @@ -95,9 +95,9 @@ min-width: 65vmin; &--invalid { - border-color: var(--error); + border-color: var(--nc-error); outline-offset: 0.75rem; - animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; + animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } } @@ -125,9 +125,14 @@ z-index: 1; width: 11rem; margin: 0 -1.5rem; - background: linear-gradient(to right, transparent 50%, var(--nc-background) 50%); + background: linear-gradient( + to right, + transparent 50%, + var(--nc-background) 50% + ); background-size: 200% 100%; - transition: background var(--animation-duration-standard) var(--animation-easing); + transition: background var(--animation-duration-standard) + var(--animation-easing); } &__options-step { diff --git a/lib/ui/styles/components/_dialog.scss b/lib/ui/styles/components/_dialog.scss index 8df83e7e..e68b2507 100644 --- a/lib/ui/styles/components/_dialog.scss +++ b/lib/ui/styles/components/_dialog.scss @@ -90,7 +90,7 @@ } &--error { - border-color: var(--error); + border-color: var(--nc-error); .error__stack-trace { padding: unit(2); @@ -99,5 +99,4 @@ word-break: break-word; } } - } diff --git a/lib/ui/styles/components/cards/_protocol-card.scss b/lib/ui/styles/components/cards/_protocol-card.scss index 1aee8afd..a12088ba 100644 --- a/lib/ui/styles/components/cards/_protocol-card.scss +++ b/lib/ui/styles/components/cards/_protocol-card.scss @@ -17,10 +17,10 @@ $component: 'protocol-card'; &--selected { &:before { content: ''; - position:absolute; - top:0; - bottom:0; - left:0; + position: absolute; + top: 0; + bottom: 0; + left: 0; right: 0; border: 0.4rem solid var(--color-mustard); border-radius: var(--nc-border-radius); @@ -158,10 +158,11 @@ $component: 'protocol-card'; &--obsolete { .#{$component}__icon-section { color: #ff9dbb; - background: var(--error); + background: var(--nc-error); } - .protocol-name, .protocol-description { + .protocol-name, + .protocol-description { opacity: 0.35; } } diff --git a/lib/ui/styles/components/cards/_session-card.scss b/lib/ui/styles/components/cards/_session-card.scss index 880f0253..1e41d7d2 100644 --- a/lib/ui/styles/components/cards/_session-card.scss +++ b/lib/ui/styles/components/cards/_session-card.scss @@ -1,4 +1,3 @@ - .session-card { background-color: var(--color-platinum); border-radius: var(--nc-border-radius); @@ -18,10 +17,10 @@ &--selected { &:before { content: ''; - position:absolute; - top:0; - bottom:0; - left:0; + position: absolute; + top: 0; + bottom: 0; + left: 0; right: 0; border: 0.4rem solid var(--color-mustard); border-radius: var(--nc-border-radius); @@ -45,7 +44,7 @@ width: 50%; .highlight { - color: var(--error); + color: var(--nc-error); } h6 { @@ -61,7 +60,6 @@ height: unit(2); margin-right: unit(1); } - } .progress-wrapper { @@ -93,7 +91,6 @@ } } } - } .main-wrapper { @@ -104,7 +101,6 @@ justify-content: center; .card { - &__label { flex: 0 0 auto; margin: 0; @@ -124,9 +120,6 @@ text-overflow: ellipsis; width: 100%; } - - } } - } diff --git a/lib/ui/styles/components/form/fields/_boolean.scss b/lib/ui/styles/components/form/fields/_boolean.scss index 93ab6cee..e970b152 100644 --- a/lib/ui/styles/components/form/fields/_boolean.scss +++ b/lib/ui/styles/components/form/fields/_boolean.scss @@ -3,7 +3,7 @@ &__error { opacity: 0; - background: var(--error); + background: var(--nc-error); color: var(--nc-text); transition: opacity var(--animation-easing) var(--animation-duration-standard), @@ -24,7 +24,7 @@ .form-field { margin-bottom: 0; - border: 0.125rem solid var(--error); + border: 0.125rem solid var(--nc-error); } } } diff --git a/lib/ui/styles/components/form/fields/_checkbox-group.scss b/lib/ui/styles/components/form/fields/_checkbox-group.scss index 0d32b25b..5eee27b6 100644 --- a/lib/ui/styles/components/form/fields/_checkbox-group.scss +++ b/lib/ui/styles/components/form/fields/_checkbox-group.scss @@ -12,10 +12,11 @@ $component-name: form-field-checkbox-group; &__error { opacity: 0; - background: var(--error); + background: var(--nc-error); color: var(--nc-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; @@ -32,8 +33,7 @@ $component-name: form-field-checkbox-group; .form-field { margin-bottom: 0; - border: 0.125rem solid var(--error); + border: 0.125rem solid var(--nc-error); } - } } diff --git a/lib/ui/styles/components/form/fields/_date-picker.scss b/lib/ui/styles/components/form/fields/_date-picker.scss index 1d428ac6..81782dd3 100644 --- a/lib/ui/styles/components/form/fields/_date-picker.scss +++ b/lib/ui/styles/components/form/fields/_date-picker.scss @@ -14,7 +14,7 @@ $darken: rgba(0, 0, 0, 0.2); &__error-message { color: var(--form-error-text); - background: var(--error); + background: var(--nc-error); padding: 0.5rem 0.25rem; svg { @@ -25,7 +25,7 @@ $darken: rgba(0, 0, 0, 0.2); &--has-error { border-width: 0.1rem; border-style: solid; - border-color: var(--error); + border-color: var(--nc-error); border-top-left-radius: 1rem; border-top-right-radius: 1rem; @@ -50,7 +50,7 @@ $darken: rgba(0, 0, 0, 0.2); &__preview { font-size: 1rem; - background-color: var(--nc-background); + background-color: var(--nc-input-background); border-radius: 1rem 1rem 0 0; padding: 0 1rem; line-height: 4rem; diff --git a/lib/ui/styles/components/form/fields/_radio-group.scss b/lib/ui/styles/components/form/fields/_radio-group.scss index b9a52ccd..2dc4c466 100644 --- a/lib/ui/styles/components/form/fields/_radio-group.scss +++ b/lib/ui/styles/components/form/fields/_radio-group.scss @@ -5,10 +5,11 @@ $component-name: form-field-radio-group; &__error { opacity: 0; - background: var(--error); + background: var(--nc-error); color: var(--nc-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; @@ -24,9 +25,8 @@ $component-name: form-field-radio-group; } .#{$component-name} { - border: 0.125rem solid var(--error); + border: 0.125rem solid var(--nc-error); margin-bottom: 0; } - } } diff --git a/lib/ui/styles/components/form/fields/_rich-text.scss b/lib/ui/styles/components/form/fields/_rich-text.scss index b3db7317..a52ac82e 100644 --- a/lib/ui/styles/components/form/fields/_rich-text.scss +++ b/lib/ui/styles/components/form/fields/_rich-text.scss @@ -93,13 +93,13 @@ $module-name: form-field-rich-text; } .rich-text { - border: 0.125rem solid var(--error); + border: 0.125rem solid var(--nc-error); } } &__error { opacity: 0; - background: var(--error); + background: var(--nc-error); color: var(--form-error-text); transition: opacity var(--animation-easing) var(--animation-duration-standard), diff --git a/lib/ui/styles/components/form/fields/_slider.scss b/lib/ui/styles/components/form/fields/_slider.scss index 4e6379f5..d5dca619 100644 --- a/lib/ui/styles/components/form/fields/_slider.scss +++ b/lib/ui/styles/components/form/fields/_slider.scss @@ -217,7 +217,7 @@ $module-name: form-field-slider; &__error { opacity: 0; - background: var(--error); + background: var(--nc-error); color: var(--form-error-text); transition: opacity var(--animation-easing) var(--animation-duration-standard), @@ -235,7 +235,7 @@ $module-name: form-field-slider; .form-field { border-width: 0.1rem; border-style: solid; - border-color: var(--error); + border-color: var(--nc-error); margin-bottom: 0; } diff --git a/lib/ui/styles/components/form/fields/_text.scss b/lib/ui/styles/components/form/fields/_text.scss index 48d52fa0..db043f6e 100644 --- a/lib/ui/styles/components/form/fields/_text.scss +++ b/lib/ui/styles/components/form/fields/_text.scss @@ -60,7 +60,7 @@ $module-name: form-field-text; &__error { opacity: 0; - background: var(--error); + background: var(--nc-error); color: var(--form-error-text); transition: opacity var(--animation-easing) var(--animation-duration-standard), @@ -102,7 +102,7 @@ $module-name: form-field-text; .#{$module-name}__input { margin-bottom: 0; - border: 0.125rem solid var(--error); + border: 0.125rem solid var(--nc-error); } } } diff --git a/lib/ui/styles/components/form/fields/_toggle-button-group.scss b/lib/ui/styles/components/form/fields/_toggle-button-group.scss index b6ab066a..2143084e 100644 --- a/lib/ui/styles/components/form/fields/_toggle-button-group.scss +++ b/lib/ui/styles/components/form/fields/_toggle-button-group.scss @@ -8,13 +8,13 @@ $component-name: form-field-togglebutton-group; margin: unit(0.5); } - &__error { opacity: 0; background: var(--error); color: var(--nc-text); - transition: opacity var(--animation-easing) var(--animation-duration-standard), - max-height var(--animation-easing) var(--animation-duration-standard); + transition: + opacity var(--animation-easing) var(--animation-duration-standard), + max-height var(--animation-easing) var(--animation-duration-standard); padding: 0.5rem 0.25rem; display: flex; align-items: center; @@ -31,8 +31,7 @@ $component-name: form-field-togglebutton-group; .form-field__inline { margin-bottom: 0; - border: 0.125rem solid var(--error); + border: 0.125rem solid var(--nc-error); } - } } diff --git a/lib/ui/styles/components/form/fields/_toggle.scss b/lib/ui/styles/components/form/fields/_toggle.scss index 907fb9e1..6442d46a 100644 --- a/lib/ui/styles/components/form/fields/_toggle.scss +++ b/lib/ui/styles/components/form/fields/_toggle.scss @@ -54,7 +54,7 @@ $component-name: form-field-toggle; &__error { opacity: 0; - background: var(--error); + background: var(--nc-error); color: var(--nc-text); transition: opacity var(--animation-easing) var(--animation-duration-standard), @@ -74,7 +74,7 @@ $component-name: form-field-toggle; } .#{$component-name} { - border: 0.125rem solid var(--error); + border: 0.125rem solid var(--nc-error); margin-bottom: 0; } } diff --git a/lib/ui/styles/components/toasts/_toasts.scss b/lib/ui/styles/components/toasts/_toasts.scss index 2153d4dc..ca0c4b86 100644 --- a/lib/ui/styles/components/toasts/_toasts.scss +++ b/lib/ui/styles/components/toasts/_toasts.scss @@ -17,7 +17,7 @@ z-index: var(--z-modal); } } - + .toast { width: 40rem; background: var(--color-platinum); @@ -40,7 +40,7 @@ } &--error { - border-color: var(--error); + border-color: var(--nc-error); } &--success { @@ -58,7 +58,7 @@ width: 100% !important; height: 100% !important; - &[name="info"] { + &[name='info'] { .cls-3 { fill: var(--color-platinum--dark); } @@ -68,7 +68,7 @@ } } - &[name="warning"] { + &[name='warning'] { .cls-1 { fill: var(--color-platinum--dark); } From dcbc1475441bc683f2440e41d776bf3379a1d3f9 Mon Sep 17 00:00:00 2001 From: Caden Buckhalt Date: Thu, 11 Jan 2024 13:25:17 -0800 Subject: [PATCH 4/4] fix: protocol screen overflow issues fixes content overflowing interface and navigation stretching to entire length of interface --- lib/interviewer/containers/ProtocolScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/interviewer/containers/ProtocolScreen.js b/lib/interviewer/containers/ProtocolScreen.js index 9676aa3f..9619c367 100644 --- a/lib/interviewer/containers/ProtocolScreen.js +++ b/lib/interviewer/containers/ProtocolScreen.js @@ -22,7 +22,7 @@ const ProtocolScreen = () => { return (