From 3ec5519d7bdd73c24f88b6e49ec77b2ab86575d6 Mon Sep 17 00:00:00 2001
From: chrisklus <christopher.klusendorf@colorado.edu>
Date: Wed, 9 Feb 2022 01:51:13 -0700
Subject: [PATCH] Make Compare counting accordion boxes as tall as ten screen
 accordion counting accordion boxes, shrink Compare total accordion boxes to
 make room, see https://github.com/phetsims/number-play/issues/131

---
 js/common/view/WordAccordionBox.ts   |  1 -
 js/compare/view/CompareScreenView.ts | 15 +++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/js/common/view/WordAccordionBox.ts b/js/common/view/WordAccordionBox.ts
index d6e30046..77197d54 100644
--- a/js/common/view/WordAccordionBox.ts
+++ b/js/common/view/WordAccordionBox.ts
@@ -30,7 +30,6 @@ export type WordAccordionBoxOptions = WordAccordionBoxSelfOptions & NumberPlayAc
 // constants
 const TEXT_MARGIN = 5;
 
-
 class WordAccordionBox extends NumberPlayAccordionBox {
 
   constructor( currentNumberProperty: NumberProperty, isPrimaryLocaleProperty: BooleanProperty, height: number,
diff --git a/js/compare/view/CompareScreenView.ts b/js/compare/view/CompareScreenView.ts
index b9c569fd..692ed750 100644
--- a/js/compare/view/CompareScreenView.ts
+++ b/js/compare/view/CompareScreenView.ts
@@ -34,9 +34,8 @@ import CountingObjectType from '../../../../counting-common/js/common/model/Coun
 import SpeechSynthesisAnnouncer from '../../../../utterance-queue/js/SpeechSynthesisAnnouncer.js';
 
 // constants
-const UPPER_ACCORDION_BOX_CONTENT_HEIGHT = 90; // in screen coordinates
+const UPPER_ACCORDION_BOX_CONTENT_HEIGHT = 80; // in screen coordinates
 const LOWER_ACCORDION_BOX_CONTENT_WIDTH = 390; // in screen coordinates
-const LOWER_ACCORDION_BOX_CONTENT_HEIGHT = 437; // in screen coordinates
 
 // strings
 const lessThanString = '<';
@@ -61,12 +60,12 @@ class CompareScreenView extends ScreenView {
     // config for the left and right TotalAccordionBox
     const totalAccordionBoxOptions = {
       fill: NumberPlayColors.whiteBackgroundColorProperty,
-      font: new PhetFont( 90 ),
+      font: new PhetFont( 78 ),
       arrowButtonOptions: {
-        arrowWidth: 18, // empirically determined
-        arrowHeight: 18 // empirically determined
+        arrowWidth: 15, // empirically determined
+        arrowHeight: 15 // empirically determined
       },
-      arrowButtonSpacing: 7 // empirically determined
+      arrowButtonSpacing: 5 // empirically determined
     };
 
     // create and add the left TotalAccordionBox
@@ -92,7 +91,7 @@ class CompareScreenView extends ScreenView {
       model.leftPlayArea,
       model.leftCountingObjectTypeProperty,
       LOWER_ACCORDION_BOX_CONTENT_WIDTH,
-      LOWER_ACCORDION_BOX_CONTENT_HEIGHT, {
+      NumberPlayConstants.TWENTY_LOWER_ACCORDION_BOX_HEIGHT, {
         countingObjectTypes: CountingObjectType.enumeration.values,
         expandedProperty: this.leftCountingAccordionBoxExpandedProperty,
         fill: NumberPlayColors.mediumPurpleBackgroundColorProperty
@@ -106,7 +105,7 @@ class CompareScreenView extends ScreenView {
       model.rightPlayArea,
       model.rightCountingObjectTypeProperty,
       LOWER_ACCORDION_BOX_CONTENT_WIDTH,
-      LOWER_ACCORDION_BOX_CONTENT_HEIGHT, {
+      NumberPlayConstants.TWENTY_LOWER_ACCORDION_BOX_HEIGHT, {
         countingObjectTypes: CountingObjectType.enumeration.values,
         expandedProperty: this.rightCountingAccordionBoxExpandedProperty,
         fill: NumberPlayColors.lightOrangeBackgroundColorProperty