From 6d7da9c04c1e04549811b420f346faad8965a378 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 22 Oct 2022 15:38:02 +0300
Subject: [PATCH] Removed prism and added cosmetics

---
 angular.json                                  |  4 --
 package.json                                  |  1 -
 .../demo/components/code/code.component.scss  | 44 -------------------
 .../demo/components/code/code.component.ts    | 24 ++--------
 .../layout/styles/layout/_responsive.scss     |  2 +-
 .../layout/styles/layout/_typography.scss     |  2 +-
 src/styles.scss                               |  3 --
 7 files changed, 6 insertions(+), 74 deletions(-)
 delete mode 100644 src/app/demo/components/code/code.component.scss

diff --git a/angular.json b/angular.json
index 5674e55..cf04de0 100644
--- a/angular.json
+++ b/angular.json
@@ -30,10 +30,6 @@
                         "styles": [
                             "src/styles.scss"
                         ],
-                        "scripts": [
-                            "node_modules/prismjs/prism.js",
-                            "node_modules/prismjs/components/prism-typescript.js"
-                        ],
                         "allowedCommonJsDependencies": ["chart.js"]
                     },
                     "configurations": {
diff --git a/package.json b/package.json
index 97a61d1..10eb66d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
         "primeflex": "^3.2.0",
         "primeicons": "6.0.1",
         "primeng": "14.1.2",
-        "prismjs": "1.9.0",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "web-animations-js": "^2.3.2",
diff --git a/src/app/demo/components/code/code.component.scss b/src/app/demo/components/code/code.component.scss
deleted file mode 100644
index fb883e7..0000000
--- a/src/app/demo/components/code/code.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-pre[class*="language-"] {
-    border-radius: 12px !important;
-
-    &:before,
-    &:after {
-        display: none !important;
-    }
-
-    code {
-        border-left: .5rem solid transparent !important;
-        box-shadow: none !important;
-        background: var(--surface-ground) !important;
-        margin: 0 !important;
-        color: var(--surface-900);
-        font-size: 14px;
-        border-radius: 10px !important;
-
-        .token {
-
-            &.tag,
-            &.keyword {
-                color: #2196F3 !important;
-            }
-
-            &.attr-name,
-            &.attr-string {
-                color: #2196F3 !important;
-            }
-
-            &.attr-value {
-                color: #4CAF50 !important;
-            }
-
-            &.punctuation {
-                color: var(--text-color);
-            }
-
-            &.operator,
-            &.string {
-                background: transparent;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/app/demo/components/code/code.component.ts b/src/app/demo/components/code/code.component.ts
index 6e702e8..87e35bf 100644
--- a/src/app/demo/components/code/code.component.ts
+++ b/src/app/demo/components/code/code.component.ts
@@ -1,30 +1,14 @@
-import { Component, ElementRef, AfterViewInit, Input, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'app-code',
     template: `
-        <pre [ngClass]="'language-' + lang"><code #code><ng-content></ng-content>
-</code></pre>
-    `,
-    styleUrls: ['./code.component.scss'],
-    encapsulation: ViewEncapsulation.None
+        <pre class="surface-ground p-5 border-round mb-3 overflow-auto"><code class="-mt-4 p-0 line-height-3 block" [ngStyle]="{'font-family': 'monaco, Consolas, monospace'}"><ng-content></ng-content></code></pre>
+    `
 })
-export class AppCodeComponent implements AfterViewInit {
+export class AppCodeComponent {
 
-    @Input() lang = 'markup';
-
-    @ViewChild('code') codeViewChild!: ElementRef;
-
-    constructor(public el: ElementRef) { }
-
-    ngAfterViewInit() {
-        // @ts-ignore
-        if (window['Prism']) {
-            // @ts-ignore
-            window['Prism'].highlightElement(this.codeViewChild.nativeElement);
-        }
-    }
 }
 
 @NgModule({
diff --git a/src/assets/layout/styles/layout/_responsive.scss b/src/assets/layout/styles/layout/_responsive.scss
index 77f86b5..4678f3d 100644
--- a/src/assets/layout/styles/layout/_responsive.scss
+++ b/src/assets/layout/styles/layout/_responsive.scss
@@ -1,4 +1,4 @@
-@media screen and (min-width: 1729px) {
+@media screen and (min-width: 1960px) {
     .layout-main, .landing-wrapper {
         width: 1504px;
         margin-left: auto !important;
diff --git a/src/assets/layout/styles/layout/_typography.scss b/src/assets/layout/styles/layout/_typography.scss
index 5cd89d2..b9a0c8f 100644
--- a/src/assets/layout/styles/layout/_typography.scss
+++ b/src/assets/layout/styles/layout/_typography.scss
@@ -3,7 +3,7 @@ h1, h2, h3, h4, h5, h6 {
     font-family: inherit;
     font-weight: 500;
     line-height: 1.2;
-    color: inherit;
+    color: var(--surface-900);
 
     &:first-child {
         margin-top: 0;
diff --git a/src/styles.scss b/src/styles.scss
index 979f57d..2f6ce18 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,9 +8,6 @@ $gutter: 1rem; //for primeflex grid system
 @import "../node_modules/primeflex/primeflex.scss";
 @import "../node_modules/primeicons/primeicons.css";
 
-/* Code Highlight */
-@import "../node_modules/prismjs/themes/prism-coy.css";
-
 /* Demos */
 @import "assets/demo/styles/flags/flags.css";
 @import "assets/demo/styles/badges.scss";
\ No newline at end of file