added some style

src/styles/core/colors.scss

@@ -0,0 +1,90 @@
+$white: #ffffff;
+$black: #181818;
+
+$gray-01: #ebeaea;
+$gray-02: #d6d4d4;
+$gray-03: #c5c5c5;
+$gray-04: #aeacac;
+$gray-05: #979696;
+$gray-06: #8f8f8f;
+$gray-07: #7e7e7e;
+$gray-08: #6b6b6b;
+$gray-09: #4d4d4d;
+$gray-10: #303030;
+
+$red-01: #fcb0b0;
+$red-02: #f88282;
+$red-03: #ea5656;
+$red-04: #df2424;
+$red-05: #d60909;
+$red-06: #bd0000;
+$red-07: #a61010;
+$red-08: #970202;
+$red-09: #840c0c;
+$red-10: #630101;
+
+$orange-01: #fecc91;
+$orange-02: #fdc17b;
+$orange-03: #fbb563;
+$orange-04: #f6a13c;
+$orange-05: #f6a13c;
+$orange-06: #ff971e;
+$orange-07: #fb9145;
+$orange-08: #f68533;
+$orange-09: #e96607;
+$orange-10: #d4620f;
+
+$yellow-01: #fff59e;
+$yellow-02: #f8eb7e;
+$yellow-03: #feed56;
+$yellow-04: #fce93c;
+$yellow-05: #f8e221;
+$yellow-06: #edd606;
+$yellow-07: #e9d521;
+$yellow-08: #e5d114;
+$yellow-09: #dec802;
+$yellow-10: #c1ae00;
+
+$green-01: #adff87;
+$green-02: #7ffd43;
+$green-03: #7ffd43;
+$green-04: #64f91e;
+$green-05: #43eb0c;
+$green-06: #53d914;
+$green-07: #44c307;
+$green-08: #3caf06;
+$green-09: #389c08;
+$green-10: #287c00;
+
+$blue-01: #9bedff;
+$blue-02: #61e3ff;
+$blue-03: #1bd4fd;
+$blue-04: #09c1ea;
+$blue-05: #08b1d7;
+$blue-06: #2c80ff;
+$blue-07: #0a62e7;
+$blue-08: #004fc7;
+$blue-09: #0549b0;
+$blue-10: #043581;
+
+$purple-01: #cab1ff;
+$purple-02: #b295f0;
+$purple-03: #a47df8;
+$purple-04: #7f49f2;
+$purple-05: #6f2cff;
+$purple-06: #4e0dd7;
+$purple-07: #4e0dd7;
+$purple-08: #3a0a9f;
+$purple-09: #2b0679;
+$purple-10: #210362;
+
+$pink-01: #fda5ff;
+$pink-02: #f87cfb;
+$pink-03: #f151f4;
+$pink-04: #ea10ee;
+$pink-05: #d213d6;
+$pink-06: #be07c1;
+$pink-07: #a40fa7;
+$pink-08: #97069a;
+$pink-09: #820c85;
+$pink-10: #600362;

src/styles/core/index.scss

@@ -0,0 +1,2 @@
+@import "./colors.scss";
+@import "./main.scss";

src/styles/main.scss

@@ -1,3 +1,5 @@
+@import "./core//index.scss";
 @import "./thorn/index.scss";
+@import "./menu-item/index.scss";
 @import "./sidebar/index.scss";
 @import "./modal/index.scss";

src/styles/menu-item/index.scss

@@ -0,0 +1 @@
+@import "./menu-item.scss"

src/styles/menu-item/menu-item.scss

@@ -0,0 +1,24 @@
+menu-item {
+    [data-target="menu-item.itemEl"] {
+        app-link {
+            [data-target="app-link.main"] {
+                width: 100%;
+                background-color: $black;
+                color: $gray-01;
+                border-radius: 0;
+                padding: 15px 0;
+                &:hover {
+                    color: $white;
+                    background-color: $gray-10;
+                }
+            }
+        }
+        &.selected {
+            app-link {
+                [data-target="app-link.main"] {
+                    background-color: $gray-09;
+                }
+            }
+        }
+    }
+}

src/styles/modal/modal.scss

@@ -11,14 +11,20 @@ app-modal {
         overflow-y: auto;
 
         [data-target="app-modal.modalContent"] {
+            position: absolute;
             z-index: 1005;
-            top: 5%;
-            width: 1080px;
+            width: 960px;
+            min-height: 320px;
+            max-height: 560px;
             padding-bottom: 10px;
-            margin: 25px auto;
-            background: #ffffff;
+            margin: 0;
+            top: 50%;
+            left: 50%;
+            -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+            background: $gray-08;
             box-shadow: 1px 1px 5px -5px #868686;
-            border-radius: 0.5em;
+            border-radius: 3px;
         }
     }
 }

src/styles/sidebar/sidebar.scss

@@ -1,47 +1,29 @@
-app-menu {
-    [data-target="app-menu.sidebar"] {
-        margin: 0;
-        padding: 0;
-        width: 200px;
-        background-color: #f1f1f1;
-        position: fixed;
-        height: 100%;
-        overflow: auto;
-        top: 0;
-        left: 0;
+menu-layout {
+    [data-target="menu-layout.appPage"] {
+        display: grid;
+        width: 100%;
+        min-height: 100vh;
+        grid-template-columns: 301px auto;
+        grid-template-areas: "sidebar content";
 
-        menu-item {
-            [data-target="menu-item.itemEl"] {
-                app-link {
-                    [data-target="app-link.main"] {
-                        width: 100%;
-                        height: 25px;
-                        background-color: #828282;
-                        color: #d5d5d5;
-                        border-radius: 0;
-                        padding-bottom: 25px;
-                        margin: 1px auto;
-                        &:hover {
-                            background-color: #82878a;
-                        }
-                    }
-                }
-                &.selected {
-                    app-link {
-                        [data-target="app-link.main"] {
-                            color: #1a1a1a;
-                            background-color: #6e838d;
-                        }
-                    }
-                }
+        app-menu {
+            [data-target="app-menu.sidebar"] {
+                grid-area: sidebar;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                width: 301px;
+                border-right: 1px solid $gray-08;
+                background-color: $black;
+            }
+        }
+
+        app-slot {
+            [data-target="base-layout.content"] {
+                grid-area: content;
+                margin: 15px;
             }
         }
     }
 }
-
-app-slot {
-    [data-target="base-layout.content"] {
-        margin-left: 200px;
-        padding: 1px 16px;
-    }
-}