Redesign user book actions in sidebar

[cdrini]

With the new share button changes down the pipeline, want a better way to organize these actions in the sidebar under the book cover.

We're running with this design:

New Icons:

• Notes: https://thenounproject.com/icon/note-4829658/
• Share: https://thenounproject.com/icon/share-2178964/

Stakeholders

@jimchamp

[cdrini]

Here's my sample html/css during designs:

<div class="actions"><a class="observations-modal-link" href="javascript:;" data-context="{&quot;username&quot;: &quot;ScarTissue&quot;, &quot;work&quot;: &quot;/works/OL1794950W&quot;, &quot;id&quot;: &quot;stats&quot;}">
        <img class="review-btn" src="/static/images/icons/review.png">
<div>Review</div>
      </a><a class="notes-modal-link" href="javascript:;" data-context="{&quot;id&quot;: &quot;cta&quot;}"><img class="review-btn" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8cGF0aCBkPSJtMjM0Ljk2IDU4MC44MmgxNTYuNjVjMS4zMTY0LTAuMDE1NjI1IDIuNjIxMS0wLjI2NTYyIDMuODQ3Ny0wLjczODI4IDEuMjI2Ni0wLjQ4NDM4IDIuMzU1NS0xLjE4NzUgMy4zMzItMi4wNzQybDEzMi42LTEyNS4zNWMxLjAzOTEtMC45NTcwMyAxLjg3MTEtMi4xMTcyIDIuNDQxNC0zLjQwNjIgMC41MjM0NC0xLjIxODggMC44MjQyMi0yLjUyMzQgMC44OTA2Mi0zLjg0Nzd2LTExMi45MmMwLTYuMTMyOC00Ljk3MjctMTEuMTAyLTExLjEwMi0xMS4xMDJzLTExLjA5OCA0Ljk2ODgtMTEuMDk4IDExLjEwMnYxMDFoLTY4LjIyN2MtMTYuOTE4IDAuMDM5MDYyLTMzLjEyOSA2Ljc4MTItNDUuMDg2IDE4Ljc1NC0xMS45NTcgMTEuOTY5LTE4LjY4IDI4LjE4OC0xOC42OTkgNDUuMTA1djYxLjI3aC0xNDUuNTVjLTExLjAzMSAwLTIxLjYwOS00LjM3ODktMjkuNDA2LTEyLjE4LTcuODAwOC03Ljc5NjktMTIuMTg0LTE4LjM3NS0xMi4xODQtMjkuNDA2di0yMzYuMTJjMC0xMS4wMzUgNC4zNzg5LTIxLjYyMSAxMi4xNzYtMjkuNDMgNy43OTY5LTcuODEyNSAxOC4zNzUtMTIuMjExIDI5LjQxNC0xMi4yM2gxODQuNTVjNi4xMjg5IDAgMTEuMDk4LTQuOTY4OCAxMS4wOTgtMTEuMDk4IDAtNi4xMzI4LTQuOTY4OC0xMS4xMDItMTEuMDk4LTExLjEwMmgtMTg0LjU1Yy0xNi45MTggMC4wMzkwNjItMzMuMTMzIDYuNzg1Mi00NS4wODYgMTguNzU0LTExLjk1NyAxMS45NjktMTguNjg0IDI4LjE4OC0xOC43MDMgNDUuMTA1djIzNi4xMmMwLjAxOTUzMSAxNi45MSA2Ljc0NjEgMzMuMTI1IDE4LjcwNyA0NS4wODIgMTEuOTU3IDExLjk1NyAyOC4xNjggMTguNjg0IDQ1LjA4MiAxOC43MDN6bTIwOS4zNC0xMjUuMTNoNTEuNzk3bC05My4zODMgODguMjgxdi00Ni42MjFjMC0xMS4wMzUgNC4zNzg5LTIxLjYyMSAxMi4xNzYtMjkuNDMgNy43OTY5LTcuODEyNSAxOC4zNzUtMTIuMjExIDI5LjQxLTEyLjIzeiIvPgogIDxwYXRoIGQ9Im01MDguMzEgMTkxLjQ1Yy0yLjk0MTQgMC4wMTk1MzEtNS43NTM5IDEuMTg3NS03Ljg0MzggMy4yNTM5bC0xNjguNDkgMTY4LjQ5Yy0xLjE5OTIgMS4yMzgzLTIuMTA5NCAyLjczMDUtMi42NjQxIDQuMzY3MmwtMTkuOTA2IDYxLjEyMWMtMS4yNSAzLjk2NDgtMC4xOTUzMSA4LjMwMDggMi43MzgzIDExLjI0NiAyLjk0OTIgMi45Mzc1IDcuMjgxMiAzLjk5MjIgMTEuMjUgMi43MzgzbDYxLjEyMS0xOS45OHYwLjAwMzkwNmMxLjYzMjgtMC41NTQ2OSAzLjEyNS0xLjQ2NDggNC4zNjMzLTIuNjY0MWwxNjguNDItMTY4LjQ5YzQuMjg5MS00LjM1MTYgNC4yODkxLTExLjMzNiAwLTE1LjY4OGwtNDEuMTQxLTQxLjE0NWMtMi4wODItMi4wODItNC45MDIzLTMuMjUtNy44NDM4LTMuMjUzOXptLTEzMy4yIDIxMC45Ni0zNy43MzggMTIuMzU5IDEyLjM1OS0zNy43MzggMTU4LjU3LTE1OC44IDI1LjQ1MyAyNS40NTN6Ii8+CiA8L2c+Cjwvc3ZnPgo="><div>Notes</div></a><a class="share-modal-link" href="javascript:;" style="">
      <img class="share-btn" style="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8Y2xpcFBhdGggaWQ9ImEiPgogICA8cGF0aCBkPSJtMTM5LjIxIDEzOS4yMWg0NzMuNTh2NDczLjU4aC00NzMuNTh6Ii8+CiAgPC9jbGlwUGF0aD4KIDwvZGVmcz4KIDxnIGNsaXAtcGF0aD0idXJsKCNhKSI+CiAgPHBhdGggZD0ibTUyOC4yMyAxMzkuMjFjLTQ2LjUgMC04NC41NjIgMzguMDYyLTg0LjU2MiA4NC41NjIgMCA3LjU3ODEgMS4wOTM4IDE0Ljg4NyAyLjk4ODMgMjEuODg3bC0xNTYuNDcgNzguMjQ2Yy0xNS41MjMtMTkuNzExLTM5LjUxNi0zMi40NjktNjYuNDA2LTMyLjQ2OS00Ni41IDAtODQuNTYyIDM4LjA2Mi04NC41NjIgODQuNTYyczM4LjA2MiA4NC41NjIgODQuNTYyIDg0LjU2MmMyNi44NTkgMCA1MC44NjctMTIuNzU4IDY2LjM5MS0zMi40NTdsMTU2LjQ5IDc4LjI0NmMtMS44Nzg5IDctMi45ODgzIDE0LjI5Ny0yLjk4ODMgMjEuODc1IDAgNDYuNSAzOC4wNjIgODQuNTYyIDg0LjU2MiA4NC41NjJzODQuNTYyLTM4LjA2MiA4NC41NjItODQuNTYyLTM4LjA2Mi04NC41NjItODQuNTYyLTg0LjU2MmMtMjYuODkxIDAtNTAuODc5IDEyLjc1OC02Ni40MDYgMzIuNDY5bC0xNTYuNDctNzguMjQ2YzEuODk0NS03IDIuOTg4My0xNC4zMTIgMi45ODgzLTIxLjg4NyAwLTcuNTc4MS0xLjA5MzgtMTQuODc1LTIuOTg4My0yMS44NzVsMTU2LjQ5LTc4LjI0NmMxNS41MjMgMTkuNjk5IDM5LjUxNiAzMi40NTcgNjYuMzkxIDMyLjQ1NyA0Ni41IDAgODQuNTYyLTM4LjA2MiA4NC41NjItODQuNTYycy0zOC4wNjItODQuNTYyLTg0LjU2Mi04NC41NjJ6bTAgMzMuODMyYzI4LjIyMyAwIDUwLjc0NiAyMi41MjMgNTAuNzQ2IDUwLjc0NiAwIDI4LjIyMy0yMi41MjMgNTAuNzQ2LTUwLjc0NiA1MC43NDYtMjguMjIzIDAtNTAuNzQ2LTIyLjUyMy01MC43NDYtNTAuNzQ2IDAtMjguMjIzIDIyLjUyMy01MC43NDYgNTAuNzQ2LTUwLjc0NnptLTMwNC40NSAxNTIuMjFjMjguMjIzIDAgNTAuNzQ2IDIyLjUyMyA1MC43NDYgNTAuNzQ2cy0yMi41MjMgNTAuNzQ2LTUwLjc0NiA1MC43NDZjLTI4LjIyMyAwLTUwLjc0Ni0yMi41MjMtNTAuNzQ2LTUwLjc0NnMyMi41MjMtNTAuNzQ2IDUwLjc0Ni01MC43NDZ6bTMwNC40NSAxNTIuMjNjMjguMjIzIDAgNTAuNzQ2IDIyLjUyMyA1MC43NDYgNTAuNzQ2IDAgMjguMjIzLTIyLjUyMyA1MC43NDYtNTAuNzQ2IDUwLjc0Ni0yOC4yMjMgMC01MC43NDYtMjIuNTIzLTUwLjc0Ni01MC43NDYgMC0yOC4yMjMgMjIuNTIzLTUwLjc0NiA1MC43NDYtNTAuNzQ2eiIvPgogPC9nPgo8L3N2Zz4K"><div>Share</div>
      
  </a></div>

.actions {
  display: flex;
  justify-content: space-around;
}

.actions > a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
  
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  
  transition: background-color 0.2s;
  /*! aspect-ratio: 1; */
  padding-bottom: 6px;
}

.actions > a:hover {
  background-color: rgba(0,0,0,0.1);
}

.actions > a > div {
  font-size: 12px;
  line-height: 12px;
}
.actions > a > img {
  width: 2em;
  height: 2em;
  object-fit: contain;
}

[mekarpeles]

closes #6575