Implement feedback from QA

owid · Dec 12, 2024 · a139612 · a139612
1 parent 9546d6a
commit a139612
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 15 deletions.
diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
@@ -293,7 +293,12 @@ export { Url, setWindowUrl, getWindowUrl } from "./urls/Url.js"
 
 export { type UrlMigration, performUrlMigrations } from "./urls/UrlMigration.js"
 
-export { camelCaseProperties, titleCase, toAsciiQuotes } from "./string.js"
+export {
+    camelCaseProperties,
+    titleCase,
+    toAsciiQuotes,
+    removeDiacritics,
+} from "./string.js"
 
 export { serializeJSONForHTML, deserializeJSONFromHTML } from "./serializers.js"
 

diff --git a/packages/@ourworldindata/utils/src/string.ts b/packages/@ourworldindata/utils/src/string.ts
@@ -35,3 +35,8 @@ export const titleCase = (str: string): string => {
 export function toAsciiQuotes(str: string): string {
     return str.replace(/[“”]/g, '"').replace(/[‘’]/g, "'")
 }
+
+// https://stackoverflow.com/a/37511463/9846837
+export function removeDiacritics(str: string): string {
+    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+}
diff --git a/site/gdocs/components/Donors.tsx b/site/gdocs/components/Donors.tsx
@@ -1,12 +1,14 @@
 import * as React from "react"
-import { groupBy } from "@ourworldindata/utils"
+import { groupBy, removeDiacritics } from "@ourworldindata/utils"
 import { useDonors } from "../utils.js"
 
 export default function Donors({ className }: { className?: string }) {
     const donors = useDonors()
     if (!donors) return null
 
-    const donorsByLetter = groupBy(donors, (donor) => donor[0])
+    const donorsByLetter = groupBy(donors, (donor) =>
+        removeDiacritics(donor[0].toUpperCase())
+    )
     return (
         <div className={className}>
             <div className="col-start-2 span-cols-12">

diff --git a/site/gdocs/components/People.scss b/site/gdocs/components/People.scss
@@ -1,5 +1,11 @@
 .people {
     row-gap: 16px;
+
+    .article-block__text,
+    .article-block__list,
+    .article-block__numbered-list {
+        font-size: 16px;
+    }
 }
 
 .people-cols-2 {

diff --git a/site/gdocs/components/Person.scss b/site/gdocs/components/Person.scss
@@ -21,6 +21,10 @@
 }
 
 .person-image {
+    picture {
+        display: flex; // Fix extra padding at the bottom.
+    }
+
     img {
         border-radius: 50%;
     }

diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
@@ -464,14 +464,11 @@ h3.article-block__heading {
     }
 }
 
-.image--has-outline + .article-block__image-caption {
-    margin-top: 8px;
-}
-
 .article-block__image-caption {
     @include body-3-medium-italic;
     color: $blue-60;
     text-align: center;
+    margin-top: 16px;
 }
 
 .article-block__chart + .article-block__heading {

diff --git a/site/gdocs/pages/AboutPage.scss b/site/gdocs/pages/AboutPage.scss
@@ -54,10 +54,6 @@
         @include h1-semibold;
         color: $blue-60;
         margin-top: 0;
-
-        &:has(+ .article-block__side-by-side) {
-            margin-bottom: 8px;
-        }
     }
 
     h3.article-block__heading {
@@ -97,18 +93,19 @@
         margin-bottom: 24px;
     }
 
-    .article-block__chart {
-        margin-bottom: 24px;
-    }
-
     .article-block__code-snippet {
         margin-bottom: 16px;
     }
 
+    .article-block__chart,
     .article-block__image {
         margin: 0 0 24px;
     }
 
+    .article-block__people + .article-block__heading {
+        margin-top: 40px;
+    }
+
     .article-block__prominent-link {
         margin-bottom: 24px;
     }
@@ -122,6 +119,12 @@
         }
     }
 
+    .article-block__side-by-side {
+        :first-child {
+            margin-top: 0;
+        }
+    }
+
     .article-block__donors {
         margin-top: 32px;
         padding-top: 40px;