Update logo and theme

Author: lorefnon

src/docs/assets/banner.png

@@ -4,13 +4,19 @@ import styled from "styled-components";
 export const LibHeader = () => (
     <Container>
         <ImgContainer>
-            <img src={logo} />{" "}
+            <img src={logo} style={{ height: "100px", width: "100px" }} />{" "}
         </ImgContainer>
         <HeaderText>
             <PrimaryHeader>GRelDAL</PrimaryHeader>{" "}
             <SecondaryHeader>
-                <SecondaryHeader.Section>(<strong>G</strong>raphQL ⇋ <strong>Rel</strong>ational DB)</SecondaryHeader.Section><SecondaryHeader.Section> <strong>D</strong>ata <strong>A</strong>
-                ccess <strong>L</strong>ayer</SecondaryHeader.Section>
+                <SecondaryHeader.Section>
+                    (<strong>G</strong>raphQL ⇋ <strong>Rel</strong>ational DB)
+                </SecondaryHeader.Section>
+                <SecondaryHeader.Section>
+                    {" "}
+                    <strong>D</strong>ata <strong>A</strong>
+                    ccess <strong>L</strong>ayer
+                </SecondaryHeader.Section>
             </SecondaryHeader>
         </HeaderText>
     </Container>
@@ -34,7 +40,7 @@ const HeaderText = styled.div`
 
 const PrimaryHeader = styled.h1`
     line-height: 25px;
-    color: #e535ab;
+    color: #8dd35f;
     font-size: 2.5rem;
     margin: 0 5px 0 0 !important;
 `;
@@ -57,7 +63,7 @@ SecondaryHeader.Section = styled.span`
         text-align: center;
         line-height: 2.5rem;
     }
-`
+`;
 
 const Container = styled.div`
     @media only screen and (max-width: 1000px) {

src/docs/assets/logo.png

@@ -21,7 +21,7 @@ export default function LibInfoBanner() {
                         fontSize: "2rem",
                         lineHeight: "50px",
                         paddingLeft: "10px",
-                        color: "#e535ab",
+                        color: "#8dd35f",
                     }}
                 >
                     GRelDAL

src/docs/assets/logo.svg

@@ -62,10 +62,11 @@ export const FixedSidebarContainer = styled(SidebarContainer)`
 
     border-right: 1px solid #bbb;
     box-shadow: 0 0 20px #ccc;
+    border-top: 4px solid #8dd35f;
 `;
 
 export const SectionHeader = styled.h1`
-    background: #ddd;
+    background: #dee9d8;
     padding: 5px 10px;
     text-transform: uppercase;
     border-radius: 4px;

src/docs/assets/logo_white.png

@@ -12,7 +12,7 @@ The project is hosted on [GitHub](https://github.com/gql-dal/greldal), and has a
 
 GRelDAL is available for use under the [MIT software license](https://github.com/gql-dal/greldal/blob/master/LICENSE).
 
-You can report bugs on the [GitHub issues page](https://github.com/gql-dal/greldal/issues). We also have a [Spectrum community](https://spectrum.chat/greldal) for general discussion.
+You can report bugs on the [GitHub issues page](https://github.com/gql-dal/greldal/issues).
 
 # Motive / Goals
 
@@ -65,10 +65,10 @@ To get started you can `git clone https://github.com/gql-dal/greldal-starter.git
 Using GRelDAL involves two steps:
 
 1. Configuring a Knex instance
-1. Defining data sources mappers
-2. Defining operations on these data sources
-3. Generating a GraphQL Schema from these operations
-4. Exposing this schema through a HTTP Server
+2. Defining data sources mappers
+3. Defining operations on these data sources
+4. Generating a GraphQL Schema from these operations
+5. Exposing this schema through a HTTP Server
 
 ### Configuring a Knex instance
 

src/docs/components/LibHeader.js

@@ -3,4 +3,5 @@ body {
     line-height: 22px;
     background: #fefffc;
     font-family: Helvetica Neue, Helvetica, Arial;
+    border-top: 4px solid #8dd35f;
 }