From 8fa2247899d7037fa256a028fc76bb75e19693b8 Mon Sep 17 00:00:00 2001
From: alea <camillarc1996@gmail.com>
Date: Thu, 1 Oct 2026 14:45:34 +0200
Subject: [PATCH] =?UTF-8?q?Endret=20p=C3=A5=20ikon=20og=20layout=20p=C3=A5?=
 =?UTF-8?q?=20TechniqueCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TechniqueCard/TechniqueCard.css           | 152 +++++++++++++++---
 .../TechniqueCard/TechniqueCard.tsx           |  17 +-
 .../TechniqueCard/getTechniqueCardVisual.tsx  |   4 +-
 3 files changed, 144 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.css b/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.css
index 54152b6..39035ef 100644
--- a/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.css
+++ b/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.css
@@ -1,14 +1,13 @@
 /* ===== Technique card ===== */
 
 .technique-card {
-  min-width: 190px;
-  min-height: 200px;
+  min-height: 175px;
 
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 4px;
 
-  padding: 16px;
+  padding: 14px;
 
   background: var(--surface);
 
@@ -21,19 +20,42 @@
 .technique-card-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 16px;
 }
 
 .technique-mitre-id {
-  padding: 4px 8px;
+  display: inline-flex;
+  align-self: flex-start;
 
-  background: var(--accent-soft);
-  color: var(--accent);
+  padding: 3px 12px;
 
-  border-radius: 6px;
+  background: rgba(137, 177, 237, 0.18);
+  color: #c0d8ff;
+
+  border-radius: 999px;
 
   font-size: 11px;
   font-weight: 700;
+
+  height: fit-content;
+}
+
+.technique-card-icon-wrapper {
+  width: 60px;
+  height: 60px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+
+  border-radius: 8px;
+}
+
+.technique-card-icon {
+  width: 32px;
+  height: 32px;
 }
 
 /* ===== Content ===== */
@@ -41,28 +63,30 @@
 .technique-card-content {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  flex: 1;
 }
 
 .technique-card-content h2 {
-  font-size: 15px;
-  font-weight: 700;
+font-size: 18px;
+font-weight: 700;
 }
 
 .technique-card-content p {
   color: var(--text-muted);
 
-  font-size: 12px;
-  line-height: 1.4;
+  font-size: 13px;
+  line-height: 1.45;
 }
 
 /* ===== Tags ===== */
 
 .technique-card-tags {
+  margin-top: auto;
+  margin-bottom: 12px;
+
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 4px;
 }
 
 .technique-tag {
@@ -72,10 +96,20 @@
   background: var(--accent-soft);
   color: var(--accent);
 
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
 }
 
+.technique-tactic-tag {
+background: rgba(181, 108, 255, 0.18);
+color: #d58cff;
+}
+ 
+.technique-platform-tag {
+background: rgba(59, 130, 246, 0.18);
+color: #a5d4ff;
+}
+
 /* ===== Footer ===== */
 
 .technique-card-footer {
@@ -88,13 +122,13 @@
   color: var(--accent);
   text-decoration: none;
 
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 600;
 }
 
 .technique-card-footer svg {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
 
   flex-shrink: 0;
 }
@@ -119,4 +153,84 @@
   .technique-card-content h2 {
     font-size: 14px;
   }
+}
+
+/* ===== Colors for each icon ===== */
+
+.technique-phishing .technique-card-icon {
+  color: #b56cff;
+}
+
+.technique-phishing .technique-card-icon-wrapper {
+  background: rgba(181, 108, 255, 0.12);
+}
+
+.technique-execution .technique-card-icon {
+  color: #3df0b3;
+}
+
+.technique-execution .technique-card-icon-wrapper {
+  background: rgba(61, 240, 179, 0.12);
+}
+
+.technique-defense-evasion .technique-card-icon {
+  color: #ff5d73;
+}
+
+.technique-defense-evasion .technique-card-icon-wrapper {
+  background: rgba(255, 93, 115, 0.12);
+}
+
+.technique-credential-access .technique-card-icon {
+  color: #56b6ff;
+}
+
+.technique-credential-access .technique-card-icon-wrapper {
+  background: rgba(86, 182, 255, 0.12);
+}
+
+.technique-exfiltration .technique-card-icon {
+  color: #35f0d2;
+}
+
+.technique-exfiltration .technique-card-icon-wrapper {
+  background: rgba(53, 240, 210, 0.12);
+}
+
+.technique-lateral-movement .technique-card-icon {
+  color: #ff5ccf;
+}
+
+.technique-lateral-movement .technique-card-icon-wrapper {
+  background: rgba(255, 92, 207, 0.12);
+}
+
+.technique-default .technique-card-icon {
+  color: var(--accent);
+}
+
+.technique-default .technique-card-icon-wrapper {
+  background: var(--accent-soft);
+}
+
+/* ===== Colors for each tactic-tag ===== */
+
+.technique-phishing .technique-tactic-tag {
+  background: rgba(181, 108, 255, 0.18);
+  color: #d58cff;
+}
+
+.technique-execution .technique-tactic-tag {
+  background: rgba(61, 240, 179, 0.18);
+  color: #6fffc6;
+}
+
+.technique-defense-evasion .technique-tactic-tag {
+  background: rgba(255, 93, 115, 0.18);
+  color: #ff96a6;
+}
+
+.technique-credential-access .technique-tactic-tag {
+  background: rgba(86, 182, 255, 0.18);
+  color: #8fd3ff;
 }
\ No newline at end of file
diff --git a/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.tsx b/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.tsx
index d4f48db..4d60d0e 100644
--- a/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.tsx
+++ b/frontend/src/components/techniques/allTechniques/TechniqueCard/TechniqueCard.tsx
@@ -30,25 +30,26 @@ function TechniqueCard({
                 <TechniqueIcon className="technique-card-icon" />
             </div>
             
-            <span className="technique-mitre-id">
-            {mitreId}
-            </span>
+            <div className="technique-card-title-group">
+                <span className="technique-mitre-id">
+                    {mitreId}
+                </span>
+            </div>
         </header>
 
         <section className="technique-card-content">
             <h2>{name}</h2>
-
             <p>{description}</p>
+        </section>
 
-            <section className="technique-card-tags">
-            <span className="technique-tag">
+        <section className="technique-card-tags">
+            <span className="technique-tag technique-tactic-tag">
                 {tactic}
             </span>
 
-            <span className="technique-tag">
+            <span className="technique-tag platform-tag">
                 {platform}
             </span>
-            </section>
         </section>
 
         <Link
diff --git a/frontend/src/components/techniques/allTechniques/TechniqueCard/getTechniqueCardVisual.tsx b/frontend/src/components/techniques/allTechniques/TechniqueCard/getTechniqueCardVisual.tsx
index 248c204..8a13b8f 100644
--- a/frontend/src/components/techniques/allTechniques/TechniqueCard/getTechniqueCardVisual.tsx
+++ b/frontend/src/components/techniques/allTechniques/TechniqueCard/getTechniqueCardVisual.tsx
@@ -1,5 +1,5 @@
 import {
-  FileText,
+  Mail,
   TerminalSquare,
   Shield,
   Database,
@@ -18,7 +18,7 @@ type TechniqueVisual = {
 
 const techniqueVisualMap: Record<string, TechniqueVisual> = {
   T1566: {
-    icon: FileText,
+    icon: Mail,
     colorClass: "technique-phishing",
   },