Updated branding

EvanBacon · Aug 18, 2020 · e2bf4ea · e2bf4ea
1 parent 4e573da
commit e2bf4ea
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 28 deletions.
diff --git a/.expo-shared/assets.json b/.expo-shared/assets.json
@@ -1,4 +1,5 @@
 {
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+  "98910ba792c568650b506bbebb992a3834faa93c89aa9aef9edcf8965f76f7a8": true,
+  "263fa85f5b70bc44a737bdcfcb9d9a3bc87ba5ee3d72e36a2ffc532e3d0dd8c2": true,
+  "36ad7852cff1e635842175ee4434a05d8e3781f868ab298b59a9605c2d162031": true
 }
diff --git a/app.config.js b/app.config.js
@@ -1,5 +1,5 @@
 export default {
-  name: "Make Icon",
+  name: "Expo Icon Builder",
   primaryColor: "#fff",
   orientation: "portrait",
   icon: "./assets/icon.png",

diff --git a/assets/favicon.png b/assets/favicon.png
diff --git a/assets/icon.png b/assets/icon.png
diff --git a/assets/splash.png b/assets/splash.png
diff --git a/src/screens/CreateScreen.tsx b/src/screens/CreateScreen.tsx
@@ -1,4 +1,4 @@
-import { P } from "@expo/html-elements";
+import { P, Footer, H3, A, Section, Main } from "@expo/html-elements";
 import { FontAwesome } from "@expo/vector-icons";
 import { useTheme } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
@@ -158,32 +158,52 @@ export default React.forwardRef(
     );
 
     return (
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: theme.colors.background,
-          paddingVertical: isMobile ? 18 : 0,
-          flexDirection: isMobile ? "column" : "row",
-        }}
-      >
-        <View
-          style={[
-            styles.rowItem,
-            {
-              paddingVertical: isMobile ? 18 : 0,
-            },
-          ]}
+      <View style={{ flex: 1 }}>
+        <Main
+          style={{
+            flex: 1,
+            backgroundColor: theme.colors.background,
+            paddingVertical: isMobile ? 18 : 0,
+            flexDirection: isMobile ? "column" : "row",
+          }}
         >
-          {renderAppIcon()}
-          <ColorPicker
-            onValueChanged={(hex) => {
-              setColorAndUpdateURL(hex);
+          <Section
+            style={[
+              styles.rowItem,
+              {
+                paddingVertical: isMobile ? 18 : 0,
+              },
+            ]}
+          >
+            {renderAppIcon()}
+            <ColorPicker
+              onValueChanged={(hex) => {
+                setColorAndUpdateURL(hex);
+              }}
+            />
+          </Section>
+          <Section style={styles.rowItem}>
+            <EmojiPicker isMobile={isMobile} onSelect={setEmojiAndUpdateURL} />
+          </Section>
+        </Main>
+        <Footer style={{ justifyContent: "center", alignItems: "center" }}>
+          <H3
+            style={{
+              fontSize: 14,
+              paddingBottom: isMobile ? 18 : 0,
+              color: theme.dark ? "#ABB8C3" : "#607d8b",
             }}
-          />
-        </View>
-        <View style={styles.rowItem}>
-          <EmojiPicker isMobile={isMobile} onSelect={setEmojiAndUpdateURL} />
-        </View>
+          >
+            Made with{" "}
+            <A
+              style={{ color: theme.dark ? "white" : "black" }}
+              target="_blank"
+              href="http://expo.io/"
+            >
+              Expo
+            </A>
+          </H3>
+        </Footer>
       </View>
     );
   }