From e350230474c535ee44abab52ad9d55c52023ab6b Mon Sep 17 00:00:00 2001
From: Rebecca Shoptaw <rebecca.shoptaw@gmail.com>
Date: Fri, 9 Aug 2024 16:14:55 -0400
Subject: [PATCH] Switch out loading indicator and check mark for new SVGs

---
 openlibrary/i18n/messages.pot             | 12 ++----------
 openlibrary/templates/account/create.html |  4 ++--
 static/images/bubble-loader.svg           |  1 +
 static/images/icons/icon_check-circle.svg |  1 +
 4 files changed, 6 insertions(+), 12 deletions(-)
 create mode 100644 static/images/bubble-loader.svg
 create mode 100644 static/images/icons/icon_check-circle.svg

diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
index 5d95836dd7e..9856311dbde 100644
--- a/openlibrary/i18n/messages.pot
+++ b/openlibrary/i18n/messages.pot
@@ -429,7 +429,8 @@ msgstr ""
 msgid "Library Explorer"
 msgstr ""
 
-#: books/custom_carousel.html login.html search/work_search_facets.html
+#: account/create.html books/custom_carousel.html login.html
+#: search/work_search_facets.html
 msgid "Loading..."
 msgstr ""
 
@@ -1033,15 +1034,6 @@ msgid ""
 "nonprofit Internet Archive"
 msgstr ""
 
-#: account/create.html
-msgid "Toggle Password Visibility"
-msgstr ""
-
-#: account/create.html books/custom_carousel.html
-#: search/work_search_facets.html
-msgid "Loading..."
-msgstr ""
-
 #: account/create.html
 msgid "Loading spinner"
 msgstr ""
diff --git a/openlibrary/templates/account/create.html b/openlibrary/templates/account/create.html
index c54bdd8b07f..3029dcfb32d 100644
--- a/openlibrary/templates/account/create.html
+++ b/openlibrary/templates/account/create.html
@@ -44,8 +44,8 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
                     </a>
                 $else:
                     <div class="ol-signup-form__icon-wrap">
-                        <img src="/static/images/ajax-loader.gif" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
-                        <img src="/static/images/icons/icon_check.png" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
+                        <img src="/static/images/bubble-loader.svg" class="ol-signup-form__icon ol-signup-form__icon--loading" title="$_('Loading...')" alt="$_('Loading spinner')" style="display:none"/>
+                        <img src="/static/images/icons/icon_check-circle.svg" class="ol-signup-form__icon ol-signup-form__icon--success" title="$_('Success!')" alt="$_('Checkmark')" style="display:none" />
                     </div>
             </div>
             <div class="ol-signup-form__suffix">$:suffix</div>
diff --git a/static/images/bubble-loader.svg b/static/images/bubble-loader.svg
new file mode 100644
index 00000000000..3dd35191723
--- /dev/null
+++ b/static/images/bubble-loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="0 12 12;90 12 12;180 12 12;270 12 12"/><animate attributeName="opacity" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" begin="0.1s" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="30 12 12;120 12 12;210 12 12;300 12 12"/><animate attributeName="opacity" begin="0.1s" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle><circle cx="12" cy="3.5" r="1.5" fill="currentColor" opacity="0"><animateTransform attributeName="transform" begin="0.2s" calcMode="discrete" dur="1.2s" repeatCount="indefinite" type="rotate" values="60 12 12;150 12 12;240 12 12;330 12 12"/><animate attributeName="opacity" begin="0.2s" dur="0.3s" keyTimes="0;0.5;1" repeatCount="indefinite" values="1;1;0"/></circle></svg>
\ No newline at end of file
diff --git a/static/images/icons/icon_check-circle.svg b/static/images/icons/icon_check-circle.svg
new file mode 100644
index 00000000000..3c1c2b8ca81
--- /dev/null
+++ b/static/images/icons/icon_check-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 256 256"><g fill="hsl(130, 61%, 33%)"><path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity="0.2"/><path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"/></g></svg>
\ No newline at end of file