From ff4c29f91e05d62aad27fce67f0328ac29e041f0 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Wed, 22 Apr 2020 01:29:07 -0700
Subject: [PATCH] use the Delicious font for more character!

---
 app/dev-todos.txt       |  1 +
 app/src/WardrobePage.js | 72 ++++++++++++++++++++++++-----------------
 2 files changed, 43 insertions(+), 30 deletions(-)
 create mode 100644 app/dev-todos.txt

diff --git a/app/dev-todos.txt b/app/dev-todos.txt
new file mode 100644
index 00000000..354cf42a
--- /dev/null
+++ b/app/dev-todos.txt
@@ -0,0 +1 @@
+* Embed Delicious font, right now it just uses the locally installed one!
\ No newline at end of file
diff --git a/app/src/WardrobePage.js b/app/src/WardrobePage.js
index abfbfcb9..43bda2ca 100644
--- a/app/src/WardrobePage.js
+++ b/app/src/WardrobePage.js
@@ -63,35 +63,7 @@ function ItemsPanel() {
 
   return (
     <Box color="green.800">
-      <PseudoBox role="group" d="inline-block">
-        <Heading size="xl" mb="6" wordBreak="break-word">
-          <Editable defaultValue="roopal27">
-            {({ isEditing, onRequestEdit }) => (
-              <>
-                <EditablePreview d="inline" />
-                <EditableInput />
-                {!isEditing && (
-                  <PseudoBox
-                    d="inline-block"
-                    opacity="0"
-                    transition="opacity 0.5s"
-                    _groupHover={{ opacity: "1" }}
-                    onClick={onRequestEdit}
-                  >
-                    <IconButton
-                      icon="edit"
-                      variant="link"
-                      color="green.600"
-                      aria-label="Edit outfit name"
-                      title="Edit outfit name"
-                    />
-                  </PseudoBox>
-                )}
-              </>
-            )}
-          </Editable>
-        </Heading>
-      </PseudoBox>
+      <OutfitHeading />
       <Stack spacing="10">
         {zonesAndItems.map(({ zoneName, items, wornItemId }) => (
           <Box key={zoneName}>
@@ -108,10 +80,50 @@ function ItemsPanel() {
   );
 }
 
+function OutfitHeading() {
+  return (
+    <PseudoBox role="group" d="inline-block">
+      <Heading
+        size="2xl"
+        mb="6"
+        wordBreak="break-word"
+        fontFamily="Delicious"
+        fontWeight="800"
+      >
+        <Editable defaultValue="roopal27">
+          {({ isEditing, onRequestEdit }) => (
+            <>
+              <EditablePreview d="inline" />
+              <EditableInput />
+              {!isEditing && (
+                <PseudoBox
+                  d="inline-block"
+                  opacity="0"
+                  transition="opacity 0.5s"
+                  _groupHover={{ opacity: "1" }}
+                  onClick={onRequestEdit}
+                >
+                  <IconButton
+                    icon="edit"
+                    variant="link"
+                    color="green.600"
+                    aria-label="Edit outfit name"
+                    title="Edit outfit name"
+                  />
+                </PseudoBox>
+              )}
+            </>
+          )}
+        </Editable>
+      </Heading>
+    </PseudoBox>
+  );
+}
+
 function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
   return (
     <Box>
-      <Heading size="lg" color="green.900" mb="3">
+      <Heading size="xl" color="green.800" mb="3" fontFamily="Delicious">
         {zoneName}
       </Heading>
       <Stack spacing="3">