diff --git a/.gitignore b/.gitignore
index 4d29575d..1a8dfaea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,8 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# INTELIIJ
+
+.idea/
+
+# CREATE REACT APP
# dependencies
/node_modules
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 00000000..03d9549e
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..94a25f7f
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
new file mode 100644
index 00000000..fb0d65a4
--- /dev/null
+++ b/.idea/watcherTasks.xml
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b41d297c..00000000
--- a/src/App.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- animation: App-logo-spin infinite 20s linear;
- height: 40vmin;
- pointer-events: none;
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.scss b/src/App.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index a754b201..00000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c104..00000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/src/settings/_Settings.scss b/src/settings/_Settings.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/Editor/Editor.scss b/src/views/Editor/Editor.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/Editor/Editor.tsx b/src/views/Editor/Editor.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/Editor/TopNavigationBar/TopNavigationBar.scss b/src/views/Editor/TopNavigationBar/TopNavigationBar.scss
new file mode 100644
index 00000000..81a330fc
--- /dev/null
+++ b/src/views/Editor/TopNavigationBar/TopNavigationBar.scss
@@ -0,0 +1,8 @@
+@import '../../settings/_Settings';
+
+.TopNavigationBar {
+ align-self: stretch;
+ height: $topNavigationBarHeight;
+ background-color: $darkThemeSecondColor;
+ box-shadow: 0 0 6px 0 rgba(0,0,0,.2);
+}
\ No newline at end of file
diff --git a/src/views/Editor/TopNavigationBar/TopNavigationBar.tsx b/src/views/Editor/TopNavigationBar/TopNavigationBar.tsx
new file mode 100644
index 00000000..7209216f
--- /dev/null
+++ b/src/views/Editor/TopNavigationBar/TopNavigationBar.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import './TopNavigationBar.scss';
+
+export const TopNavigationBar: React.FC = () => {
+ return (
+
+ );
+};
\ No newline at end of file