Bug: Интерфейс приложения отображается неправильно

[faciledictu]

Summary

В некоторых случаях не происходит загрузка необходимых css-стилей в интерфейсе приложения, поэтому оно отображается не так, как задумано. Замечено, что это происходит в сценарии, когда пользователь переходи из лендинга в приложение.

Reproduction steps

1. Открыть лендинг.
2. Любым способом перейти в инерфейс приложения: залогиниться, зарегистрироваться или начать в гостевом режиме.

Дополнительно
3. Перезагрузить сраницу в браузере.
4. Сравнить отображение до и после перезагрузки страницы.

Expected result

Интерфейс отображается как задумано в обоих случаях

Actual result

Вы увидите интерфейс с проблемами. Обратите внимание на цвета фона и цвета карточек со сниппетами, обратите внимание на скругления у кнопок, на оформление модальных окон и прочее.

После перегрузки страницы проблемы исчезают

Browsers

Safari

OS

Mac

[bobrov-site]

Нашел проблему. Сделаю пуллреквест сейчас.

P.S. Задачка была от Жака Фреско блин)))

[bobrov-site]

@faciledictu Проблема была в неправильно расположении переписанных переменных в scss. Как я понял, вы ранее писали эти стили и они были не корректно расположены (по vs Code по крайней мере). Я думаю это так шалит компилятор scss, который собрал сначала сборку бутстрапа, а потом по какой-то причине подгружает наши новые переменные. Если не ошибаюсь, даже в доке bs5 указано, что нужно делать перепись после импорта бутстрап компонентов

Передвинул их вниз, думаю что теперь работает корректно.

[faciledictu]

@bobrov-site Переменные нужно обязательно указывать до импорта модулей, потому что модули используют значения этих переменных для генерации стилей. В коде модулей Bootstrap они указаны с флагом !default на тот случай, если они не были явно заданы перед импортом модулей. Можете глянуть, как это делается, например, тут: https://github.com/twbs/examples/blob/main/color-modes/scss/styles.scss

Про VSCode не понял, что вы имеете в виду?

Со стилями приложения должно быть все в порядке, оно работает хорошо, если загрузить, например, сразу страницу /signin. Проблема в стилях лендинга. Я рискну предположить, что какая-то проблема в том, что делает со стилями лендинг. Лендинг должен брать те же стили, которые уже определены в приложении (например, стили кнопок). А вместо этого он импортирует дефолтные стили бутстрапа (в компоненте Header) — этого быть не должно.

[bobrov-site]

Упс, некорректно предоставил информацию. Да, все верно вы расписали.

[bobrov-site]

Пока что закрою свой пуллреквест, так как нужно детальнее изучить проблему. Если кто-то может уже решить проблему, то вперед)

[faciledictu]

@bobrov-site смотри, там не должно быть особо сложно. При беглом взгляде — проблема в в этой строчке https://github.com/hexlet-rus/runit/blob/53d1680b2bb5644a2513ce1c5f8554344e0c3041/frontend/src/pages/landing/Header.jsx#L13 Тут происходит импорт стилей бутстрапа при рендеренге лендинга. И эти стили перезаписывают те стили, которые были настроены и импортированы на верхнем уровне приложения. Импорт стилей надо удалить и оставить только импорт стилей чисто для лендинга (там есть два файла). После этого посмотреть, ничего ли не сломалось. По идее, это минимальная работа, которая закроет эту задачу.

[bobrov-site]

@faciledictu похоже, что действительно проблема в импорте этих стилей. Но нужна оценка по корректности работы. С первого взгляда вроде все работает

[faciledictu]

Проблема не решена.

Возможно, нужно убирать в стилях лендинга кастомизацию цветов. В светлой теме она влияет на интерфейс.

Если заходить с лендинга (неправильное отображение)

Если обновить страницу (правильное отображение)

[bobrov-site]

@faciledictu попробую еще посмотреть.

[bobrov-site]

Если честно, не могу сообразить в чем проблема. Я пытался разными способами убирать стили, но все равно не получается довести до нужного результата. Поэтому требуется помощь.

У меня есть предположение, что проблема точно в файле Application.scss. Я пытался убирать стили с Лендинга, но результат тот же.