Enhance the search bar ui

[Haile-08]

Fixed Issue #3804

Behavior Before Fix

Currently , on clicking the search bar in the website , a new search box is created which is slightly larger than the original search box and overlaps with the pre-existing one , which does not look very useful or necessary in the UI.

orginal.webm

Behavior After Fix

Remove the current functionality of creating a new search box and use the existing default search box to search blocks. If the size doesn't seem sufficient , the increase of the size of the entire left palette can be proposed.

fix.webm

Edited File Location

MUSICBLOCKS
├── CSS
│   ├── activities.css

Edited Code

#search[type="text"] {
  width: 80px;
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  background-repeat: no-repeat;
  padding: 6px 10px 6px 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  font-size: 16px;
  margin-top: 4px;
  color: black;
}

#search:focus {
  border: 1px solid #87cefa;
  border-radius: 1px;
}

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

[pikurasa]

The search doesn't seem to work for me. And it is more important that the search works than having it look nice...

Are you able to make it both look nice and work?

[Haile-08]

the functionality was not implemented but i will work on it :)

[Haile-08]

@pikurasa should I create an issue or work on this branch?

[pikurasa]

Whereas work for this is continuing on #3829, I am closing this PR. Reopen if I am mistaken.