Replaced BottomBar with BottomToolBar

[Wck-iipi]

Summary

Description of the change(s) you made

Replaced BottomBar with BottomToolBar and removed BottomBar

Manual verification steps performed

I tested the EditModal.vue page, it runs as expected. Also, I ran tests and all passed.

Screenshots (if applicable)

Does this introduce any tech-debt items?

---

Reviewer guidance

How can a reviewer test these changes?

Please check if StagingTreePage works, I tried finding BottomBar here but couldn't.

Are there any risky areas that deserve extra testing?

References

Fixes #2008

Comments

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[MisRob]

Hi @Wck-iipi, thank you for the contribution. I'm sorry for confusion but it's the other bottom bar component that needs to be removed. You can see more here #4351 (comment) and I've just updated the issue description to reflect that #2008

[Wck-iipi]

@MisRob I have made the desired changes. I'm sorry I should've looked at previous PR more carefully. I'll be more careful in future.

[MisRob]

Oh no, @Wck-iipi, that's on me, this should definitely be mentioned in the issue. We really do not expect anyone to study previous PRs, unless we recommend it for a specific reason. Thank you for your patience and flexibility.

[LianaHarris360]

Hi @Wck-iipi it looks like the linting check is failing. Could you run pre-commit as described in the Kolibri dev docs?

[Wck-iipi]

@LianaHarris360 I have fixed the linting issue

[AlexVelezLl]

Thanks for your contribution! In general, code looks good to me, but I have found a couple of things we can improve 👐.

[AlexVelezLl]

This height prop isnt working now, and this is happening on mobile screens, the bottom bar now doesnt have an appropiate height:

Before:

After:

One thing we can do is that the BottomBar component receives an appearanceOverrides, where we can pass overrides styles to the bar, and we can end with something like:
<BottomBar :appearanceOverrides=" { height: ... } ">

[Wck-iipi]

I have made the desired changes and tested it on the screen above.

[AlexVelezLl]

Lets have this a little more generic, instead of setting the specific property, we can have this css rule with 64px, but we can pass the appearanceOverrides object to the wrapper div like this:

  <div class="bottom-bar pa-2" :style="appearanceOverrides">
    <slot></slot>
  </div>

This way if the implementers wants to override any other property apart fromm the height can do it without having to update the component.

[AlexVelezLl]

With the proposed change on the style bellow, this default value will not be required. And this eslint-disable line can be erased too 👐

[Wck-iipi]

@AlexVelezLl I have generalized appearanceOverrides

[AlexVelezLl]

Thanks @Wck-iipi! LGTM!