Merge pull request #198 from dekart-xyz/oss-logo-and-copy-update

Oss logo and copy update

package.json

@@ -69,6 +69,7 @@
     "standard": "^17.0.0"
   },
   "overrides": {
+    "react-error-overlay": "6.0.9",
     "@deck.gl/aggregation-layers": "8.6.5",
     "@deck.gl/core": "8.6.5",
     "@deck.gl/extensions": "8.6.5",

public/browserconfig.xml

@@ -1,2 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2C323A</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/index.html

@@ -7,22 +7,14 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Analytical tool for large scale geo-spatial data"
+      content="Create Kepler.gl maps with SQL"
     />
-    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="%PUBLIC_URL%/android-icon-192x192.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
+    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
     <title>Dekart</title>
     %REACT_APP_CUSTOM_CODE%
   </head>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Dekart",
+    "short_name": "Dekart",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/client/DekartMenu.js

@@ -5,6 +5,9 @@ import { getUrlRef } from './lib/ref'
 import { MenuOutlined, MessageOutlined } from '@ant-design/icons'
 import { Link } from 'react-router-dom/cjs/react-router-dom'
 import { createReport } from './actions/report'
+import Tooltip from 'antd/es/tooltip'
+
+const popupOffset = [-10, 0]
 
 export default function DekartMenu () {
   const env = useSelector(state => state.env)
@@ -17,6 +20,7 @@ export default function DekartMenu () {
     <div className={styles.dekartMenu}>
       <Menu mode='horizontal' theme='dark'>
         <Menu.SubMenu
+          popupOffset={popupOffset}
           popupClassName={styles.subMenu} title={<MenuOutlined />} key='home' active='yes'
         >
           {authEnabled
@@ -26,7 +30,7 @@ export default function DekartMenu () {
                   <Link to='/'>My Reports</Link>
                 </Menu.Item>
                 <Menu.Item key='shared'>
-                  <Link to='/shared'>Shared reports</Link>
+                  <Link to='/shared'>Shared Reports</Link>
                 </Menu.Item>
               </>
               )
@@ -39,16 +43,19 @@ export default function DekartMenu () {
           <Menu.Divider />
           <Menu.Item key='create' onClick={() => dispatch(createReport())}>New Report</Menu.Item>
         </Menu.SubMenu>
-        <Menu.SubMenu popupClassName={styles.subMenu} title={<MessageOutlined />} key='community' active='yes'>
+        <Menu.SubMenu popupClassName={styles.subMenu} popupOffset={popupOffset} title={<MessageOutlined />} key='community' active='yes'>
           <Menu.Item key='slack'>
             <a target='_blank' rel='noopener noreferrer' href='https://slack.dekart.xyz'>Ask in Slack</a>
           </Menu.Item>
           <Menu.Item key='issues'>
             <a target='_blank' rel='noopener noreferrer' href={'https://github.com/dekart-xyz/dekart/issues?ref=' + ref}>Report Issue</a>
           </Menu.Item>
+          <Menu.Item key='examples'>
+            <a target='_blank' rel='noopener noreferrer' href={'https://dekart.xyz/docs/about/kepler-gl-map-examples?ref=' + ref}>Map Examples</a>
+          </Menu.Item>
         </Menu.SubMenu>
         <Menu.Item key='contribute'>
-          <a target='_blank' title='Contribute' rel='noopener noreferrer' href={'https://dekart.xyz/support-project/?ref=' + ref}>🩵</a>
+          <Tooltip color='#328EB2' title={<>Loving Dekart?<br />Help community find it.<br />Give us ⭐️ on GitHub!</>}><a target='_blank' rel='noopener noreferrer' href='https://github.com/dekart-xyz/dekart'>🩵</a></Tooltip>
         </Menu.Item>
       </Menu>
     </div>

src/client/DekartMenu.module.css

@@ -27,4 +27,14 @@
 
 .dekartMenu {
     flex: 1;
+}
+
+.dekartIcon {
+    position: relative;
+    top: 3px;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    background-size: contain;
+    background-image: url('./dekart-icon.svg');
 }

src/client/Header.js

@@ -80,7 +80,7 @@ export function Header ({ buttons, title }) {
       <div className={styles.top}>
         <DekartMenu />
         <div className={styles.middle}>
-          <div className={styles.dekartLinkHolder}><a target='_blank' rel='noopener noreferrer' className={styles.dekartLink} href={homePage}>Dekart</a></div>
+          <div className={styles.dekartLinkHolder}><a target='_blank' rel='noopener noreferrer' className={styles.dekartLink} href={homePage}><span className={styles.dekartTitle} /></a></div>
         </div>
         <div className={styles.buttons}>{buttons || null}</div>
         <User buttonDivider={Boolean(buttons)} />

src/client/Header.module.css

@@ -47,6 +47,7 @@
 }
 
 .dekartLinkHolder {
+    width: 76px;
     height: 46px;
     display: flex;
     align-items: center;
@@ -59,9 +60,15 @@
 }
 
 a.dekartLink {
-    color: #57B7D3 !important;
-    font-size: 22px;
-    font-weight: bold;
-    line-height: 32px;
-    cursor: pointer;
+    display: block;
+    width: 76px;
+    height: 18px;
+}
+.dekartTitle {
+    width: 76px;
+    height: 18px;
+    display: block;
+    background-size: contain;
+    background-image: url('./dekart-title.svg');
+    background-repeat: no-repeat;
 }