# UAIM Laboratorium UWP
## Wstęp
Niestety, aplikacja którą otrzymaliśmy była w stanie nieużywalnym.


W przypadku włączonego trybu ciemnego (z ang. dark theme), który według badania firmy apple jest wyborem ponad 80% użytkowników, aplikacja użyła nieprawidłowego kloru tła, ponieważ został on w niej zhardkodowany.
Tekst oraz ikonki w przypadku niepsrecyzowania explicite koloru zostały wykorzystane domyślne systemowe kolory (w przypadku dark theme - jasne), co zlało się z kolorem tła powodując niekompatybilność aplikacji dla większości użytkowników.

## Themes

Po szybkim googlu udało nam się znaleźć [cudowną dokumentację Microsoft'u](https://docs.microsoft.com/en-us/windows/uwp/design/style/color), która w wyśmienity sposób opisała jak rozwiązać nasz problem:
- Wymusić na systemie operacyjnym załadowanie naszej aplikacji w trybie jasnym, poprzez dodanie atrybtu `RequestedTheme` do głównego xamla naszej aplikacji
- Prawdiłowo obsłużyć oba motywy wykorzystując [XAML theme resources](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-theme-resources).

Zdecydowaliśmy się na drugą opcję, gdyż szanujemy oczy swoje i swoich potencjalnych użytkowników.

Aplikacja po poprawkach w trybie ciemnym.


Aplikacja po poprawkach w trybie jasnym.


## Poprawki desgin

Dodatkowo postanowiliśmy wprowadzić 5 poprawek w designie aplikacji.

1. Uzyta wcześniej ikonka filtru wydała się naszym zdaniem nieodpowiednia do akcji, za która odpowiada. Zastąpiłismy ją bardziej popularną ikonką lupy. Ikonka filtru sugeruję jakieś dodatkowe opcje (filtry) związane z wyszkiwaniem, które w naszej aplikacji nie są obecne.

2. Wyrównaliśmy ikonke wyszukiwania tak, by znajdywała się naturalnie obok paska, oraz powiększyliśmy pasek, by zajął całe dostępne miejsce.

3. Usuneliśmy tekst z pod ikonek, gdyż naszym zdaniem, gdy ikonki są prawdiłowo dobrane to nie potrzeba dodatkowo ich podpisywać.

4. Zwiększyliśmy marginesy/padding wokół kilku elementów, gdyż oryginalny wydał nam się zbyt mały.

5. Wycentrowaliśmy ikonki na dolnym panelu

Przed:


Po: