message: adjust to better suite application styling
diff: import React from 'react';
  const AtomSelectorLegend = ({
  - filteredSnapshot,
  - componentAtomTree,
  setSelectedRecoilValue,
  atoms,
  selectors,
  + selectedRecoilValue,
  }) => {
  const selectorList = [];
  const atomList = [];
  Object.entries(selectors).forEach(([selectorName, value], i) => {
  selectorList.push(
  - <li
  - className={'selectorLi'}
  + <div
  + style={
  + selectorName === selectedRecoilValue[0]
  + ? {color: '#E6E6E6', backgroundColor: '#212121'}
  + : {color: '#989898'}
  + }
  + className="atomLi"
  onClick={() => setSelectedRecoilValue([selectorName, 'selector'])}
  key={`${selectorName}${i}`}>
  {selectorName}: {JSON.stringify(value)}
  - </li>,
  + </div>,
  );
  });
  Object.entries(atoms).forEach(([atomName, value], i) => {
  atomList.push(
  - <li
  - className={'atomLi'}
  + <div
  + style={
  + atomName === selectedRecoilValue[0]
  + ? {color: '#E6E6E6', backgroundColor: '#212121'}
  + : {color: '#989898'}
  + }
  + className="selectorLi"
  onClick={() => setSelectedRecoilValue([atomName, 'atom'])}
  key={`${atomName}${i}`}>
  {atomName}: {JSON.stringify(value)}
  - </li>,
  + </div>,
  );
  });
  @@ -34,11 +43,11 @@ const AtomSelectorLegend = ({
  <div className="AtomSelectorLegend">
  <div>
  <h4>Atoms</h4>
  - <ul>{atomList}</ul>
  + {atomList}
  </div>
  <div>
  <h4>Selectors</h4>
  - <ul>{selectorList}</ul>
  + {selectorList}
  </div>
  </div>
  );
  