[Staging] Country 3W - Legend style changed
szabozoltan69 opened this issue · 5 comments
Issue
If we compare https://go-stage.ifrc.org/countries/82#3w with a production page, e.g. https://go.ifrc.org/countries/1#3w – it turns out that the legend (on the right side of the map) style has been changed. On production the (H4) items are smaller than the title (which is nice), but on staging the item(s) are huge.
The change is also known, which caused this.
On 13ʳᵈ of April these commits happened on develop:
95659a 2023-04-13 (HEAD -> test2) Fix dref export title width [frozenhelium]
a6c6d2 2023-04-13 Merge pull request #2730 from IFRCGo/hotfix/2728-change-url [GitHub]
b3e1ae 2023-04-13 (tag: v6.5.4) Increase version to v6.5.4 [Szabo, Zoltan]
05fc25 2023-04-13 Change referred URL in operational toolbox [Szabo, Zoltan]
If I roll back the branch until b3e1ae, it is already fine. But on a6c6d2 there were a lot of css changes, and at that point the lookout changed to the recent (Stage) style.
git diff a6c6d2 b3e1ae – this shows the changes at the important point.
If you have a bit of time, @frozenhelium or @tnagorra, please find a way to set some new CSS declarations (or revert the old ones) to have a nicer view for that part of the 3W page.
(@tovari)
E.g. these changes happened (in src/styles/settings/_variables.scss) when these styles were changed:
-// --------------------------------------------------------
-// New variables: Updated from UI component design library
-// --------------------------------------------------------
-
-$color-go-red: #f5333f;
-$color-go-black: #000000;
-$color-go-grey-10: #f4f4f4;
-$color-go-grey-50: #8d8d8d;
-$color-go-grey-60: #6f6f6f;
...
-$font-size-ultra-large: 2.5rem;
-$font-size-super-large: 1.875rem;
-$font-size-extra-large: 1.5rem;
-$font-size-large: 1.25rem;
-$font-size-medium: 1.125rem;
-$font-size-small: 0.875rem;
-$font-size-extra-small:0.75rem;
-
-$font-size-h1: $font-size-ultra-large;
-$font-size-h2: $font-size-super-large;
-$font-size-h3: $font-size-extra-large;
-$font-size-h4: $font-size-large;
-$font-size-h5: $font-size-medium;
-
-$font-weight-bold: 600;
-$font-weight-medium: 500;
-$font-weight-regular: 400;
-$font-weight-light: 300;
(Maybe we could also change the plural showing, so instead of 1 Projects we could say 1 Project.)
It seems to be a "font-size: .875rem;" enough to "styles - heading - small" of the related H4 items.
Ankit's #2759 solution solves this.
