gbowne1/codebooker

[BUG] Minor Search bar CSS issue

gbowne1 opened this issue · 10 comments

In the browser console, I am getting Expected declaration but found ‘&’. Skipped to next declaration. localhost:3000:19:5
Elements matching selector: .search-input
NodeList [ input.search-input
]

0:

I couldn't figure out where the & was located, easily but it actually may be describing this portion of BookSearch.css:

.search-input {
    width: 300px;
    padding: 0.563rem;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    letter-spacing: 0.5px;

    &:focus,
    &:active,
    &:hover {
        box-shadow: 2px 4px 16px rgba(28, 32, 36, 0.6);
    }
}

I am not certain how to fix this, but it's a minor issue.

Hii @gbowne1
I am not getting such errors🥴
image

6th console line down.. Screenshot_2023-08-27_21-09-18

I do get the same MUI errors though

I can't get any warnings in console of any browser, but in styling i got warning symbol,its showing to you may be because of using React dev tools
image
image
image

I don't always use React Dev Tools. It could very well be a browser issue. Some browsers I know don't like using &

@BlackBond06 can you tell if this issue still exists?

@gbowne1 I did not get this error in the console for the home page using Chrome and Microsoft Edge. Is there any other way to check for this error ?

There is also a UI/UX designer that wants to contribute but he is experiencing difficulty setting up the backend of the project. I think we really need to have a clear and easy-to-understand documentation on setting up the backend of the project.

@BlackBond06 I haven't got this error in a while.

If it's not in Firefox or Chrome anymore I think it's safe and ok to cancel this. I do not have access to Edge so I don't know about that. Maybe try the Chromium browser since that's what its based on these days.

Let me know and we can cancel this issue.

I also agree about the documentation