From 9bfc76d03de680c1296e50f55864c1c2565d7052 Mon Sep 17 00:00:00 2001
From: EthanThatOneKid <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Wed, 6 Dec 2023 19:11:39 -0800
Subject: [PATCH] fix colors

---
 .../board-member/board-picture.svelte         |  9 +---
 src/lib/public/board/data/colors.ts           | 46 -------------------
 src/lib/public/board/data/index.ts            |  1 -
 src/routes/(site)/6/teams/members.svelte      |  6 +--
 src/routes/(site)/6/teams/team-section.svelte |  3 +-
 .../(site)/about/officer-profile-list.svelte  |  2 +-
 .../(site)/about/officer-profile.svelte       | 37 +++++++--------
 7 files changed, 24 insertions(+), 80 deletions(-)
 delete mode 100644 src/lib/public/board/data/colors.ts

diff --git a/src/lib/components/board-member/board-picture.svelte b/src/lib/components/board-member/board-picture.svelte
index 230447fa7..cd787248e 100644
--- a/src/lib/components/board-member/board-picture.svelte
+++ b/src/lib/components/board-member/board-picture.svelte
@@ -4,12 +4,7 @@
 </script>
 
 <!-- Create the viewBox of the image -->
-<svg
-  viewBox="-50 -50 1200 1200"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  style:--color={color}
->
+<svg viewBox="-50 -50 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <clipPath id="shape">
       <path
@@ -22,7 +17,7 @@
   <g transform="translate(-50, -50) scale(1.1)">
     <path
       d="M53.093 646.116C-17.6508 575.372 -17.6508 460.674 53.093 389.93L389.93 53.0929C460.674 -17.6509 575.372 -17.6509 646.116 53.093L982.954 389.93C1053.7 460.674 1053.7 575.372 982.954 646.116L646.116 982.953C575.372 1053.7 460.674 1053.7 389.93 982.953L53.093 646.116Z"
-      fill="rgba(var(--color, var(--acm-general-rgb))"
+      fill={color}
     />
   </g>
 
diff --git a/src/lib/public/board/data/colors.ts b/src/lib/public/board/data/colors.ts
deleted file mode 100644
index 346c3941e..000000000
--- a/src/lib/public/board/data/colors.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * COLORS maps team names to CSS color variables. We call Object.entries on
- * it to make it easier to iterate and search.
- */
-export const COLORS = {
-  General: {
-    class: 'acm-blue',
-    color: 'var(--acm-general-rgb)',
-  },
-  AI: {
-    class: 'acm-emerald',
-    color: 'var(--acm-ai-rgb)',
-  },
-  Algo: {
-    class: 'acm-purple',
-    color: 'var(--acm-algo-rgb)',
-  },
-  Create: {
-    class: 'acm-pink',
-    color: 'var(--acm-design-rgb)',
-  },
-  Design: {
-    class: 'acm-pink',
-    color: 'var(--acm-design-rgb)',
-  },
-  Dev: {
-    class: 'acm-bluer',
-    color: 'var(--acm-dev-rgb)',
-  },
-  'Game Dev': {
-    class: 'acm-redder',
-    color: 'var(--acm-gamedev-rgb)',
-  },
-  Marketing: {
-    class: 'acm-blush',
-    color: 'var(--acm-marketing-rgb)',
-  },
-  'Special Events': {
-    class: 'acm-lemon',
-    color: 'var(--acm-special-events-rgb)',
-  },
-  Nodebuds: {
-    class: 'acm-redder',
-    color: 'var(--acm-nodebuds-rgb)',
-  },
-};
diff --git a/src/lib/public/board/data/index.ts b/src/lib/public/board/data/index.ts
index 4398a49bd..83973dd81 100644
--- a/src/lib/public/board/data/index.ts
+++ b/src/lib/public/board/data/index.ts
@@ -2,6 +2,5 @@ export { default as TIERS_JSON } from './tiers.json';
 export { default as OFFICERS_JSON } from './officers.json' assert { type: 'json' };
 export { default as TEAMS_JSON } from './teams.json' assert { type: 'json' };
 
-export * from './colors';
 export * from './teams';
 export * from './terms';
diff --git a/src/routes/(site)/6/teams/members.svelte b/src/routes/(site)/6/teams/members.svelte
index 619efdcf4..a9e6fedf2 100644
--- a/src/routes/(site)/6/teams/members.svelte
+++ b/src/routes/(site)/6/teams/members.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import type { Officer, Term } from '$lib/public/board';
+  import type { Officer, Term, Team } from '$lib/public/board';
   import OfficerProfile from '../../about/officer-profile.svelte';
 
-  export let data: { members: Officer[]; term: Term };
+  export let data: { members: Officer[]; term: Term; team: Team };
 </script>
 
 <section class="team">
   <ul>
     {#each data.members as member (member.fullName + data.term)}
       <li>
-        <OfficerProfile info={member} />
+        <OfficerProfile info={member} team={data.team} />
       </li>
     {/each}
   </ul>
diff --git a/src/routes/(site)/6/teams/team-section.svelte b/src/routes/(site)/6/teams/team-section.svelte
index 36f3f97d6..0592b29ba 100644
--- a/src/routes/(site)/6/teams/team-section.svelte
+++ b/src/routes/(site)/6/teams/team-section.svelte
@@ -59,7 +59,7 @@
       </div>
     </section>
 
-    <Members data={{ members, term }} />
+    <Members data={{ members, term, team: info }} />
   </div>
 {/if}
 
@@ -72,6 +72,7 @@
     display: grid;
     grid-template-columns: 1fr;
     margin: 0 1rem;
+    scroll-margin-top: 100px;
   }
 
   section img {
diff --git a/src/routes/(site)/about/officer-profile-list.svelte b/src/routes/(site)/about/officer-profile-list.svelte
index 18dfcebf0..0caa517c7 100644
--- a/src/routes/(site)/about/officer-profile-list.svelte
+++ b/src/routes/(site)/about/officer-profile-list.svelte
@@ -76,7 +76,7 @@
 
     <div class="officer-list">
       {#each filteredOfficers as officer ($termIndex + officer.fullName)}
-        <OfficerProfile info={officer} {placeholderPicture} />
+        <OfficerProfile info={officer} {team} {placeholderPicture} />
       {/each}
     </div>
   </div>
diff --git a/src/routes/(site)/about/officer-profile.svelte b/src/routes/(site)/about/officer-profile.svelte
index 0bcdaa2b6..f2247db66 100644
--- a/src/routes/(site)/about/officer-profile.svelte
+++ b/src/routes/(site)/about/officer-profile.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-  import type { Officer } from '$lib/public/board/types';
+  import type { Officer, Team } from '$lib/public/board/types';
   import { Term } from '$lib/public/board/types';
   import { onMount } from 'svelte';
   import { termIndex, getPositionByTermIndex } from '$lib/public/board/utils';
   import { copy } from '$lib/public/copy/copy';
   import BwIcon from '$lib/components/bw-icon/bw-icon.svelte';
   import BoardMember from '$lib/components/board-member/board-member.svelte';
-  import { COLORS } from '$lib/public/board/data';
+  import { TEAMS } from '$lib/public/board/data/teams';
 
   export let info: Officer;
+  export let team: Team | undefined = undefined;
   export let placeholderPicture = 'placeholder.webp';
   export let hasBuggyAnimations = false;
 
@@ -42,23 +43,19 @@
       ?.map((p) => p.title)
       .join(', ') ?? '';
 
-  $: [teamName, { class: teamClass, color: teamColor }] = Object.entries<{
-    class: string;
-    color: string;
-  }>(COLORS).find(([candidateTeamName]) => officerPosition.startsWith(candidateTeamName)) || [
-    null,
-    { class: COLORS.General.class, color: COLORS.General.color },
-  ];
+  $: titleHTML = Object.values(TEAMS).reduce((s, t) => {
+    if (t.id === 'dev' && team?.id === 'gamedev') {
+      return s;
+    }
 
-  $: titleHTML = teamName
-    ? officerPosition.replace(teamName, `<b class="${teamClass}">${teamName}</b>`)
-    : officerPosition;
+    return s.replace(t.title, `<a style="color:${t.color}" href="#${t.id}">${t.title}</a>`);
+  }, officerPosition);
 
   function copyDiscord() {
     copy(
       officerSocials.discord || '',
       `Copied ${officerName}'s Discord tag to clipboard!`,
-      'Error occured while copy Discord tag to clipboard.'
+      'Error occurred while copy Discord tag to clipboard.'
     );
   }
 
@@ -76,12 +73,16 @@
   class="officer-container"
   class:officer-has-socials={info.socials !== undefined}
   class:has-buggy-animations={hasBuggyAnimations}
-  style:--accent="rgb({teamColor})"
+  style:--accent={team?.color ?? 'var(--acm-blue)'}
 >
   <input type="checkbox" id="{officerID}-flipcard" />
   <div class="officer-3d-flipcard">
     <div class="officer-flipcard">
-      <BoardMember {alt} src={`/assets/authors/${officerPicture}`} color={teamColor} />
+      <BoardMember
+        {alt}
+        src={`/assets/authors/${officerPicture}`}
+        color={team?.color ?? 'var(--acm-blue)'}
+      />
       <div class="officer-socials-box">
         <div class="officer-socials">
           <h3>Socials</h3>
@@ -213,12 +214,6 @@
 
     .officer-placard {
       padding-bottom: 4px;
-      border-bottom: 2px solid transparent;
-    }
-
-    &:hover .officer-placard,
-    input:checked[type='checkbox'] ~ .officer-placard {
-      border-bottom: 2px solid var(--accent);
     }
   }