Endret på ikon og layout på TechniqueCard

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,48 +20,73 @@
 .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 ===== */
 
 .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;
 }

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

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",
   },