fix colors

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>
 

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';

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>

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 {

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>

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);
     }
   }