add markdown viewer

styles/inputs.scss

@@ -0,0 +1,73 @@
+@import "variables_colors.scss";
+@import "variables.scss";
+
+input {
+  border: 2px solid rgba(95, 95, 95, 0.5);
+  background-color: transparent;
+  height: 30px;
+  padding: 5px 5px 5px 5px;
+  color: var(--color-font);
+  border-radius: 3px;
+  outline: none;
+  transition: all 50ms linear;
+
+  &::placeholder {
+    font-weight: bold;
+  }
+
+  &:hover {
+    border-color: rgba(177, 177, 177, 0.608);
+  }
+
+  &:focus {
+    border-color: var(--color-accent);
+  }
+  &.error {
+    border-color: var(--color-error);
+  }
+  &.success {
+    border-color: var(--color-success);
+  }
+
+  &.warning {
+    border-color: var(--color-warning);
+  }
+
+  &.info {
+    border-color: var(--color-info);
+  }
+}
+
+.react-select-container {
+  .react-select__control {
+    background-color: var(--color-background-secondary);
+    border-color: rgba(95, 95, 95, 0.5);
+    transition: none;
+
+    &:hover {
+      border-color: rgba(95, 95, 95, 0.5);
+    }
+  }
+
+  .react-select__menu {
+    background-color: var(--color-background-secondary);
+    border: 1px solid rgba(95, 95, 95, 0.5);
+  }
+
+  .react-select__option {
+    background-color: var(--color-background-secondary);
+
+    &:hover {
+      background-color: var(--bg-primary);
+    }
+  }
+
+  .react-select__indicator-separator {
+    background-color: rgba(95, 95, 95, 0.5);
+  }
+
+  .react-select__placeholder,
+  .react-select__single-value {
+    color: var(--font-color);
+  }
+}

styles/modules/AdminArticlesCreate.module.scss

@@ -9,14 +9,26 @@
     max-width: 1800px;
     padding: 0px 24px;
 
-    .content {
+    .articleEditor {
       display: flex;
       flex-direction: column;
-      textarea {
-        color: var(--font-color);
-        background-color: rgba(16, 16, 16, 0.234);
-        width: 100%;
-        min-height: 500px;
+      .markdown {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px 10px;
+        textarea {
+          color: var(--font-color);
+          border: 2px solid rgba(59, 59, 59, 0.434);
+          background-color: transparent;
+          min-height: 700px;
+          resize: none;
+          display: block;
+          border-radius: 0px;
+          outline: 0;
+          resize: vertical;
+          font-family: inherit;
+          font-size: inherit;
+        }
       }
     }
   }

styles/variables_colors.scss

@@ -6,10 +6,16 @@
   /*! By default colors are in DARK mode */
   /* Colors: General */
   --color-background-body: #181a1b;
+  --color-background-secondary: #2c3032;
   --color-font: #ffffff;
   --color-font-muted: #929292;
   --color-shadow-nav: #00000033;
 
+  --color-error: #cf000f;
+  --color-success: #009944;
+  --color-info: #63c0df;
+  --color-warning: #f0541e;
+
   --color-overlay-mix: var(--color-font);
   --color-background-nav: transparent;
   --color-svg-nav: #bfbfbf;