Styling & add docs to footer

Author: niklaskors

packages/editor/src/app/main/components/Navigation.module.css

@@ -1,7 +1,8 @@
 .sub {
-  font-weight: bold;
-  margin: 3px 0 0 10px;
+  font-weight: 600;
+  margin: 3px 0 0 7px;
   font-size: 0.9em;
+  color: #8a9db3;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -12,6 +13,37 @@
   height: 70%;
   width: 1px;
   background-color: #f3f3f3;
-  margin-left: 1.6em;
-  margin-right: 1em;
+  margin-left: 2.1em;
+  margin-right: 0.8em;
+}
+
+.link {
+  align-items: center;
+  display: inline-flex;
+  text-decoration: none !important;
+  color: #2b4869;
+  position: relative;
+  padding: 0 1em;
+  font-weight: 500;
+  font-size: 0.95em;
+}
+
+.link:after {
+  transition: 150ms ease-in-out all;
+  content: "";
+  display: block;
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  bottom: 0;
+  background-color: transparent;
+  left: 0;
+}
+
+.link:hover {
+  color: #2b4869;
+}
+
+.link:hover.link:after {
+  background-color: #2b4869;
 }

packages/editor/src/app/main/components/Navigation.tsx

@@ -15,7 +15,7 @@ const ProductHome = () => {
   return (
     <>
       <Logo></Logo>
-      <span className={styles.sub}> Alpha community preview</span>
+      <span className={styles.sub}> Alpha preview</span>
       <div className={styles.separator}></div>
     </>
   );
@@ -31,9 +31,18 @@ export const Navigation = observer(() => {
     <AN
       renderProductHome={ProductHome}
       primaryItems={[
-        <PrimaryButton onClick={navigationStore.navigateToDocs}>
+        <a
+          href="/docs"
+          className={styles.link}
+          onClick={(e) => {
+            e.preventDefault();
+            navigationStore.navigateToDocs();
+          }}>
           Documentation
-        </PrimaryButton>,
+        </a>,
+        // <PrimaryButton onClick={navigationStore.navigateToDocs}>
+        //   Documentation
+        // </PrimaryButton>,
       ]}
       renderProfile={observer(() => (
         <>

packages/editor/src/app/main/components/startscreen/StartScreen.tsx

@@ -24,11 +24,16 @@ export const StartScreen = observer(() => {
     }
   }
 
-  function onDocsClick(e: any) {
+  function onTutorialClick(e: any) {
     e.preventDefault();
     navigationStore.navigateToTutorial();
   }
 
+  function onDocsClick(e: any) {
+    e.preventDefault();
+    navigationStore.navigateToDocs();
+  }
+
   return (
     <>
       <div className="page centered">
@@ -60,7 +65,7 @@ export const StartScreen = observer(() => {
               <a
                 className="button primary"
                 href="/docs/interactive-introduction.md"
-                onClick={onDocsClick}>
+                onClick={onTutorialClick}>
                 Try interactive tutorial
               </a>
 
@@ -216,7 +221,7 @@ export const StartScreen = observer(() => {
               <div>
                 <a
                   href="/docs/interactive-introduction.md"
-                  onClick={onDocsClick}
+                  onClick={onTutorialClick}
                   className="button">
                   Try interactive tutorial
                 </a>
@@ -240,10 +245,16 @@ export const StartScreen = observer(() => {
                 <li>
                   <a
                     href="/docs/interactive-introduction.md"
-                    onClick={onDocsClick}>
+                    onClick={onTutorialClick}>
                     <span>Interactive introduction</span>
                   </a>
                 </li>
+                <li>
+                  <a href="/docs" onClick={onDocsClick}>
+                    <span>Documentation</span>
+                  </a>
+                </li>
+
                 {/* <li>
                   <a
                     target="_blank"

packages/editor/src/index.css

@@ -21,6 +21,10 @@ a:focus {
   outline: none;
 }
 
+a {
+  color: #2c73c5;
+}
+
 /* @import "~react-resizable/css/styles.css"; */
 body {
   margin: 0;