diff --git a/public/images/sketch.svg b/public/images/sketch.svg deleted file mode 100644 index d1ecb12..0000000 --- a/public/images/sketch.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/App.res b/src/components/App.res index 3ce619b..d4b298a 100644 --- a/src/components/App.res +++ b/src/components/App.res @@ -79,7 +79,7 @@ let make = (
- +

{React.string("Personas")}

{React.string("Avatar Generator")}
@@ -96,7 +96,7 @@ let make = (
{React.string("Built by")}
- +
@@ -104,8 +104,8 @@ let make = (
diff --git a/src/components/AvatarGenerator.css b/src/components/AvatarGenerator.css index 7fd0986..6c355a7 100644 --- a/src/components/AvatarGenerator.css +++ b/src/components/AvatarGenerator.css @@ -10,6 +10,7 @@ justify-content: space-between; align-items: center; padding-top: 110px; + padding-bottom: 32px; } .AvatarGenerator-pngContainer { @@ -39,6 +40,18 @@ top: -75px; } +/* On small screens the styler list is a long scroll; keep the avatar + preview pinned so changes stay visible (community request, #34) */ +@media (max-width: 767px) { + .AvatarGenerator-avatar { + position: sticky; + top: 20px; + margin-top: -185px; + margin-bottom: 35px; + z-index: 1; + } +} + .AvatarGenerator-faceFeature { position: absolute; top: 0; @@ -75,31 +88,3 @@ } } -.AvatarGenerator-footer { - width: 100%; - background-color: #f9fafc; - padding-top: 28px; - padding-bottom: 28px; - border-radius: 8px; - text-align: center; - margin-top: 24px; -} - -@media (min-width: 768px) { - .AvatarGenerator-footerTop { - margin-right: 48px; - margin-left: 24px; - } - - .AvatarGenerator-footer { - width: 100%; - background-color: #f9fafc; - padding-top: 28px; - padding-bottom: 28px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 8px; - margin-top: 32px; - } -} diff --git a/src/components/AvatarGenerator.res b/src/components/AvatarGenerator.res index 5956865..1801a5b 100644 --- a/src/components/AvatarGenerator.res +++ b/src/components/AvatarGenerator.res @@ -97,16 +97,5 @@ let make = (~randomize, ~settings: array, ~onChange, ~onExport) = -
- -
- {React.string("Want to make your own?")} -
- - {React.string("Get the Sketch file on Gumroad.")} - -
- -
} diff --git a/src/components/SvgLoader.res b/src/components/SvgLoader.res index c819567..b2e535a 100644 --- a/src/components/SvgLoader.res +++ b/src/components/SvgLoader.res @@ -105,8 +105,8 @@ let getBuncurls = (fill, size) => `` let getBuzzcut = (fill, size) => `` -let getCurlybun = (_, size) => - `` +let getCurlybun = (fill, size) => + `` let getCurlyhightop = (fill, size) => `` let getHightopcurly = (fill, size) => diff --git a/src/components/Wordmark.res b/src/components/Wordmark.res index c632675..627d647 100644 --- a/src/components/Wordmark.res +++ b/src/components/Wordmark.res @@ -1,5 +1,10 @@ +let utmHref = (placement: string) => + `https://draftbit.com?utm_source=personas&utm_medium=referral&utm_campaign=avatar-generator&utm_content=${placement}` + @react.component -let make = () => - +let make = (~placement: string) => + diff --git a/src/data/config.json b/src/data/config.json index dc7c2b0..9b1baf0 100644 --- a/src/data/config.json +++ b/src/data/config.json @@ -9,6 +9,7 @@ "Bobcut", "Buncurls", "Buzzcut", + "Curlybun", "Hightopcurly", "Long", "Pigtails", @@ -17,7 +18,6 @@ "Bunundercut", "Extralong", "Fade", - "Hat", "Mohawk", "Shortcomboverchops", "Sidebuzz", @@ -63,34 +63,45 @@ "bgStyles": ["Background"], "skinColors": [ "FFCC22", + "FFDFC4", "FBD2C7", "F2AD9B", "E58F7B", "E4A070", "B16A5B", "92594B", + "7A4536", "623D36", - "C9E6DC" + "C9E6DC", + "C4B5F2" ], "hairColors": [ "362C47", "675E97", + "4E7DE0", "5AC4D4", + "58B368", "DEE1F5", "6C4545", "F29C65", + "F2C94C", "E16381", - "E15C66" + "E15C66", + "979FB0" ], "facialHairColors": [ "362C47", "675E97", + "4E7DE0", "5AC4D4", + "58B368", "DEE1F5", - "6c4545", + "6C4545", "F29C65", + "F2C94C", "E16381", - "E15C66" + "E15C66", + "979FB0" ], "bodyColors": [ "456DFF", @@ -100,7 +111,11 @@ "7555CA", "E24553", "54D7C7", - "F3B63A" + "F3B63A", + "FF8A5C", + "3E4E7C", + "C866D9", + "68C9F2" ], "bgColors": [ "93A7FF", @@ -110,6 +125,10 @@ "FF6674", "89E6E4", "FFCC65", + "FFB27A", + "B8EBC5", + "D9CCFF", + "6C7BC4", "F8FBFF" ], "disabledColors": [ diff --git a/src/pages/Index.res b/src/pages/Index.res index a318454..02a1361 100644 --- a/src/pages/Index.res +++ b/src/pages/Index.res @@ -4,22 +4,6 @@ external config: Types.config = "default" @module("../helpers/exportImage.js") external exportImageAsync: unit => unit = "default" -let defaultStyles: Types.styles = { - skin: "Skin", - skinColor: "B16A5B", - hair: "Balding", - hairColor: "E16381", - facialHair: "Mustache", - facialHairColor: "6C4545", - body: "Square", - bodyColor: "5A45FF", - eyes: "Glasses", - mouth: "Pacifier", - nose: "Smallround", - bgColor: "FFCC65", - head: "Head", -} - let randomizeStyles = (config: Types.config): Types.styles => { let getRandom = _list => { let len = Array.length(_list) @@ -45,7 +29,7 @@ let randomizeStyles = (config: Types.config): Types.styles => { @react.component let make = () => { - let (styles, setStyles) = React.useState(_ => defaultStyles) + let (styles, setStyles) = React.useState(_ => randomizeStyles(config)) let (showModal, setShowModal) = React.useState(_ => false) let onChange = (key: Types.key, value) =>