From cb9873e91a609907e1d1f18d889104d1ad96235c Mon Sep 17 00:00:00 2001
From: Janaka-Steph <kakobaba1212@protonmail.com>
Date: Fri, 14 Jul 2023 14:43:14 +0200
Subject: [PATCH] Change custom service editor palette

---
 src/assets/css/prismjs-prem.css               | 133 ++++++++++++++++++
 src/assets/css/styles.css                     |   9 ++
 .../service/components/CustomServiceModal.tsx |   2 +-
 3 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/css/prismjs-prem.css

diff --git a/src/assets/css/prismjs-prem.css b/src/assets/css/prismjs-prem.css
new file mode 100644
index 00000000..a454d9aa
--- /dev/null
+++ b/src/assets/css/prismjs-prem.css
@@ -0,0 +1,133 @@
+/**
+ * prism.js custom Prem theme for JavaScript, CSS and HTML
+ * Based on the slides of the talk “/Reg(exp){2}lained/”
+ */
+
+.custom-service__markdown code[class*="language-"],
+.custom-service__markdown pre[class*="language-"] {
+  color: white;
+  background: none;
+  text-shadow: 0 -0.1em 0.2em black;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+@media print {
+  .custom-service__markdown code[class*="language-"],
+  .custom-service__markdown pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+.custom-service__markdown pre[class*="language-"],
+.custom-service__markdown :not(pre) > code[class*="language-"] {
+  background: hsl(30, 20%, 25%);
+}
+
+/* Code blocks */
+.custom-service__markdown pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border: 0.3em solid hsl(30, 20%, 40%);
+  border-radius: 0.5em;
+  box-shadow: 1px 1px 0.5em black inset;
+}
+
+/* Inline code */
+.custom-service__markdown :not(pre) > code[class*="language-"] {
+  padding: 0.15em 0.2em 0.05em;
+  border-radius: 0.3em;
+  border: 0.13em solid hsl(30, 20%, 40%);
+  box-shadow: 1px 1px 0.3em -0.1em black inset;
+  white-space: normal;
+}
+
+.custom-service__markdown .token.comment,
+.custom-service__markdown .token.prolog,
+.custom-service__markdown .token.doctype,
+.custom-service__markdown .token.cdata {
+  color: hsl(30, 20%, 50%);
+}
+
+.custom-service__markdown .token.punctuation {
+  opacity: 0.7;
+  color: var(--info-color);
+}
+
+.custom-service__markdown .token.namespace {
+  opacity: 0.7;
+  color: var(--info-color);
+}
+
+.custom-service__markdown .token.property,
+.custom-service__markdown .token.tag,
+.custom-service__markdown .token.boolean,
+.custom-service__markdown .token.constant,
+.custom-service__markdown .token.symbol {
+  color: var(--primary-color);
+}
+
+.custom-service__markdown .token.number {
+  color: var(--success-color);
+}
+
+.custom-service__markdown .token.selector,
+.custom-service__markdown .token.attr-name,
+.custom-service__markdown .token.string,
+.custom-service__markdown .token.char,
+.custom-service__markdown .token.builtin,
+.custom-service__markdown .token.inserted {
+  color: var(--success-color);
+}
+
+.custom-service__markdown .token.operator,
+.custom-service__markdown .token.entity,
+.custom-service__markdown .token.url,
+.custom-service__markdown .language-css .token.string,
+.custom-service__markdown .style .token.string,
+.custom-service__markdown .token.variable {
+  color: var(--secondary-color);
+}
+
+.custom-service__markdown .token.atrule,
+.custom-service__markdown .token.attr-value,
+.custom-service__markdown .token.keyword {
+  color: hsl(350, 40%, 70%);
+}
+
+.custom-service__markdown .token.regex,
+.custom-service__markdown .token.important {
+  color: #e90;
+}
+
+.custom-service__markdown .token.important,
+.custom-service__markdown .token.bold {
+  font-weight: bold;
+}
+.custom-service__markdown .token.italic {
+  font-style: italic;
+}
+
+.custom-service__markdown .token.entity {
+  cursor: help;
+}
+
+.custom-service__markdown .token.deleted {
+  color: red;
+}
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index ec7abff4..400f8de4 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -9,6 +9,15 @@
   --plyr-audio-range-track-background: rgba(237, 237, 237, 0.1);
   --plyr-audio-progress-buffered-background: rgba(237, 237, 237, 0.1);
   --plyr-tooltip-background: rgba(237, 237, 237, 0.1);
+
+  /* COLOR THEME */
+  --primary-color: #e7a29a;
+  --secondary-color: #ebc19d;
+  --success-color: #4b9f81;
+  --danger-color: #b82d37;
+  --warning-color: #f8d4cf;
+  --info-color: #fbe9e7;
+  --gray-color: #353b3d;
 }
 
 @tailwind base;
diff --git a/src/modules/service/components/CustomServiceModal.tsx b/src/modules/service/components/CustomServiceModal.tsx
index 30e681c8..c983b69e 100644
--- a/src/modules/service/components/CustomServiceModal.tsx
+++ b/src/modules/service/components/CustomServiceModal.tsx
@@ -4,7 +4,7 @@ import cross from "assets/images/cross.svg";
 import Editor from "react-simple-code-editor";
 import { useState } from "react";
 import { highlight, languages } from "prismjs";
-import "prismjs/themes/prism-solarizedlight.css"; //Example style, you can use another
+import "assets/css/prismjs-prem.css";
 import OutlineCircleButton from "shared/components/OutlineCircleButton";
 import PrimaryButton from "shared/components/PrimaryButton";
 import { useMutation } from "@tanstack/react-query";