Fix styles (#328)

* move and fix some styles

* fix assets

Author: YousefED

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

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Link, To } from "react-router-dom";
+import buttonStyles from "../../../styles/buttons.module.css";
 import { toProfilePage } from "../../routes/routes";
 import styles from "./NotebookOverviewItem.module.css";
 
@@ -38,7 +39,9 @@ export const NotebookOverviewItem = observer(
             <span className={styles.username}>{props.author.username}</span>
           </Link>
 
-          <Link className="button button-small inverted" to={props.to}>
+          <Link
+            className={`${buttonStyles.button} ${buttonStyles.buttonSmall} ${buttonStyles.inverted}`}
+            to={props.to}>
             View
           </Link>
         </div>

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

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Link, useNavigate } from "react-router-dom";
 import { getStoreService } from "../../../../store/local/stores";
+import buttonStyles from "../../../../styles/buttons.module.css";
 import {
   OpenNewPageDialog,
   toDocs,
@@ -52,12 +53,14 @@ export const StartScreen = observer(() => {
               </p>
             </div>
             <div className={styles.buttons}>
-              <Link className="button primary" to={toTutorial()}>
+              <Link
+                className={`${buttonStyles.button} ${buttonStyles.primary}`}
+                to={toTutorial()}>
                 Try interactive tutorial
               </Link>
 
               <a
-                className="button secondary"
+                className={`${buttonStyles.button} ${buttonStyles.secondary}`}
                 href="/"
                 onClick={onNewNotebookClick}>
                 Create new notebook
@@ -207,11 +210,11 @@ export const StartScreen = observer(() => {
             </p>
 
             <div className={styles.buttons}>
-              <Link to={toTutorial()} className="button">
+              <Link to={toTutorial()} className={`${buttonStyles.button}`}>
                 Try interactive tutorial
               </Link>
               <a
-                className="button secondary"
+                className={`${buttonStyles.button} ${buttonStyles.secondary}`}
                 onClick={onNewNotebookClick}
                 href="/">
                 Create new notebook

packages/editor/src/fonts-inter.css

@@ -10,12 +10,12 @@ import { createRoot } from "react-dom/client";
 import App from "./app/App";
 import { MATRIX_CONFIG } from "./config/config";
 import { validateHostDomain } from "./config/security";
-import "./index.css";
 import { setMonacoDefaults } from "./runtime/editor";
 import setupNpmTypeResolver from "./runtime/editor/languages/typescript/npmTypeResolver";
 import setupTypecellTypeResolver from "./runtime/editor/languages/typescript/typecellTypeResolver";
 import { MonacoContext } from "./runtime/editor/MonacoContext";
 import { initializeStoreService } from "./store/local/stores";
+import "./styles/index.css";
 
 // polyfills (mostly required for matrix-crdt)
 (window as any).Buffer = Buffer;

packages/editor/src/index.host.tsx

@@ -6,8 +6,8 @@ import {
   getMainDomainFromIframe,
   validateFrameDomain,
 } from "./config/security";
-import "./iframe.css";
 import Frame from "./runtime/executor/executionHosts/sandboxed/iframesandbox/Frame";
+import "./styles/iframe.css";
 
 if (import.meta.env.DEV) {
   // disables error overlays

packages/editor/src/index.iframe.tsx

@@ -0,0 +1,51 @@
+.button {
+    border-radius: 10px;
+    padding: 20px 30px;
+    background-color: #1e2328;
+    color: white;
+    font-weight: 600;
+    font-size: 18px;
+  
+    /* transition: 150ms all ease-in-out; */
+    box-shadow: rgb(0 0 0 / 18%) 0px 0.60323px 0.60323px -1.25px,
+      rgb(0 0 0 / 16%) 0px 2.29021px 2.29021px -2.5px,
+      rgb(0 0 0 / 6%) 0px 10px 10px -3.75px;
+  }
+  
+  .buttonSmall {
+    border-radius: 6px;
+    padding: 10px 14px;
+    font-size: 14px;
+  }
+  
+  .button:hover {
+    color: white;
+    background-color: #3e454b;
+    text-decoration: none;
+  }
+  
+  .button.primary {
+    background-color: #1fb597;
+  }
+  
+  .button.primary:hover {
+    background-color: #13cca7;
+  }
+  
+  .button.secondary {
+    background-color: #467ea1;
+  }
+  
+  .button.secondary:hover {
+    background-color: rgb(77, 154, 202);
+  }
+  
+  .button.inverted {
+    color: #676767;
+    background-color: transparent;
+    border: 1px solid #676767;
+  }
+  
+  .button.inverted:hover {
+    background-color: #f3f3f3;
+  }

packages/editor/src/styles/buttons.module.css

@@ -0,0 +1,94 @@
+/* Generated using https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin */
+
+/* inter-100 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-100.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-200 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-200.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-300 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-300.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-regular - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-regular.woff2")
+      format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-regular.woff")
+      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-500 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-500.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-600.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-700 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-700.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-800 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-800.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* inter-900 - latin */
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  src: local(""),
+    url("../assets/inter-v12-latin/inter-v12-latin-900.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("../assets/inter-v12-latin/inter-v12-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

packages/editor/src/styles/fonts-inter.css

@@ -1,5 +1,5 @@
 /* @import-normalize; */
-@import "../../../node_modules/@atlaskit/css-reset/dist/bundle.css";
+@import "../../../../node_modules/@atlaskit/css-reset/dist/bundle.css";
 @import "github-markdown.css";
 @import url("fonts-inter.css");