From b69a4b77d2c356ef437bf9e7fcf66c6f8ad242c1 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Fri, 20 Aug 2021 21:04:50 +0200
Subject: [PATCH] added github icon and OSS subtitle

---
 frontend/pages/index.js                   |  3 +-
 frontend/src/components/SplitWithImage.js | 86 ++++++++++++-----------
 2 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index b31a3911..8623eb13 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -303,7 +303,7 @@ const Homepage = () => {
                   >
                     {` We believe in financial inclusion. Proprietary technologies
                     are not financially inclusive. That's why all our software
-                    is`}
+                    is `}
                     <chakra.span
                       display="inline-block"
                       textColor="secondary.900"
@@ -316,6 +316,7 @@ const Homepage = () => {
                 <Heading
                   {...HEADING_PROPS}
                   textAlign="center"
+                  mt={16}
                   pb={[12, 12, 12, null, 48]}
                 >
                   Data you can add to your stream:
diff --git a/frontend/src/components/SplitWithImage.js b/frontend/src/components/SplitWithImage.js
index 217e3438..1547dade 100644
--- a/frontend/src/components/SplitWithImage.js
+++ b/frontend/src/components/SplitWithImage.js
@@ -10,9 +10,7 @@ import {
   Icon,
   useColorModeValue,
   Button,
-  Center,
   useBreakpointValue,
-  Spacer,
 } from "@chakra-ui/react";
 import React, { useContext } from "react";
 import UIContext from "../core/providers/UIProvider/context";
@@ -71,15 +69,18 @@ const SplitWithImage = ({
   cta,
   socialButton,
 }) => {
-  const buttonSize = useBreakpointValue({
-    base: "md",
-    sm: "md",
-    md: "md",
-    lg: "lg",
-    xl: "lg",
-    "2xl": "lg",
+  var buttonSize = useBreakpointValue({
+    base: { single: "sm", double: "xs" },
+    sm: { single: "md", double: "sm" },
+    md: { single: "md", double: "sm" },
+    lg: { single: "lg", double: "lg" },
+    xl: { single: "lg", double: "lg" },
+    "2xl": { single: "lg", double: "lg" },
   });
 
+  //idk why but sometimes buttonSize gets undefined
+  if (!buttonSize) buttonSize = "lg";
+
   const ui = useContext(UIContext);
 
   const [isVisible, setVisible] = React.useState(true);
@@ -156,37 +157,42 @@ const SplitWithImage = ({
                 />
               );
             })}
-            <Container>
-              <Center>
-                <Flex w="100%" flexWrap="wrap">
-                  <Button
-                    colorScheme={colorScheme}
-                    variant="outline"
-                    mt={[0, 0, null, 16]}
-                    fontSize={["xs", "sm", "lg", null, "lg"]}
-                    size={buttonSize}
-                    onClick={cta.onClick}
-                  >
-                    {cta.label}
-                  </Button>
-                  <Spacer />
-                  {socialButton && (
-                    <RouteButton
-                      isExternal
-                      href={socialButton.url}
-                      mt={[0, 0, null, 16]}
-                      fontSize={["xs", "sm", "lg", null, "lg"]}
-                      size={buttonSize}
-                      variant="outline"
-                      colorScheme="primary"
-                      leftIcon={<FaGithubSquare />}
-                    >
-                      Check out our github
-                    </RouteButton>
-                  )}
-                </Flex>
-              </Center>
-            </Container>
+
+            <Flex
+              w="100%"
+              flexWrap="nowrap"
+              display={["column", "column", null, "row"]}
+            >
+              <Button
+                colorScheme={colorScheme}
+                w={["100%", "100%", "fit-content", null]}
+                maxW={["250px", null, "fit-content"]}
+                variant="outline"
+                mt={[0, 0, null, 16]}
+                // fontSize={["xs", "sm", "lg", null, "lg"]}
+                size={socialButton ? buttonSize.double : buttonSize.single}
+                onClick={cta.onClick}
+              >
+                {cta.label}
+              </Button>
+
+              {socialButton && (
+                <RouteButton
+                  isExternal
+                  w={["100%", "100%", "fit-content", null]}
+                  maxW={["250px", null, "fit-content"]}
+                  href={socialButton.url}
+                  mt={[0, 0, null, 16]}
+                  // fontSize={["xs", "sm", "lg", null, "lg"]}
+                  size={socialButton ? buttonSize.double : buttonSize.single}
+                  variant="outline"
+                  colorScheme="primary"
+                  leftIcon={<FaGithubSquare />}
+                >
+                  git clone moonstream
+                </RouteButton>
+              )}
+            </Flex>
           </Stack>
         </Stack>
         {(!mirror || ui.isMobileView) && (