From 1e14586b19ec685d6cc92bba2b8708ee613f11a4 Mon Sep 17 00:00:00 2001
From: danieltruong <aduy1122@gmail.com>
Date: Sat, 23 Oct 2021 16:13:52 -0700
Subject: [PATCH 1/4] Modify acm-select.svelte to create a custom select
 dropdown

---
 src/lib/components/utils/acm-select.svelte | 96 +++++++++++++++++-----
 1 file changed, 74 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/utils/acm-select.svelte b/src/lib/components/utils/acm-select.svelte
index a016f118a..c83ff416c 100644
--- a/src/lib/components/utils/acm-select.svelte
+++ b/src/lib/components/utils/acm-select.svelte
@@ -1,37 +1,89 @@
 <script lang="ts">
-	export let defaultValue: string = '';
+	export let defaultValue: string | HTMLInputElement = '';
 	export let options: string[] = [];
+
+	let option: HTMLDivElement;
+	let dropTitle: HTMLDivElement;
+
+	const setDrop = () => {
+		option.classList.toggle('active');
+	};
+
+	const handleOption = (term) => {
+		dropTitle.innerHTML = term;
+		option.classList.remove('active');
+		defaultValue = term;
+	};
 </script>
 
-<select name="school-year" bind:value={defaultValue}>
-	{#each options as optionValue (optionValue)}
-		<option value={optionValue}>{optionValue}</option>
-	{/each}
-</select>
+<div class="term" name="school-year">
+	<div class="option-box">
+		<div class="selected" bind:this={dropTitle} on:click={setDrop}>{defaultValue}</div>
+		<div class="option active" bind:this={option}>
+			{#each options as optionValue (optionValue)}
+				<div>
+					<input
+						value={optionValue}
+						on:click={() => handleOption(optionValue)}
+						type="radio"
+						class="radio"
+						id={optionValue} />
+					<label for={optionValue}> {optionValue} </label>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
 
-<style>
-	select {
-		text-align: center;
-		font-size: 18px;
+<style lang="scss">
+	.term {
 		font-weight: 600;
-		padding: 8px 20px;
-		border: none;
-		border-radius: 8px;
+		.option-box {
+			flex-direction: column;
+			display: flex;
+			justify-content: center;
+		}
+	}
+
+	label,
+	.selected {
+		color: white;
+	}
+	.selected {
 		background-color: var(--acm-dark);
-		color: var(--acm-light);
-		outline: none;
-		appearance: none;
-		transition: background-color 0.25s ease-in-out;
+		padding: 8px 24px;
+		cursor: pointer;
+		border-radius: 6px 6px 0px 0px;
+		&:hover {
+			color: var(--acm-blue);
+		}
 	}
 
-	select:hover {
+	.option {
 		cursor: pointer;
-		background-color: var(--acm-blue);
+		visibility: hidden;
+		margin-bottom: 0.5rem;
+		transition: all 300ms;
+		label {
+			cursor: pointer;
+			&:hover {
+				color: transparent;
+			}
+		}
+	}
+	.radio {
+		display: none;
 	}
 
-	option {
+	.option.active {
+		visibility: visible;
 		background-color: var(--acm-dark);
-		color: var(--acm-light);
-		font-weight: 500;
+		padding: 8px 24px;
+		margin-top: 0.2rem;
+		border-radius: 0 0 6px 6px;
+		transition: all 200ms;
+		label:hover {
+			color: var(--acm-blue);
+		}
 	}
 </style>

From a823821e81a000f8ad8ea2efdbd7b4866cee1cf9 Mon Sep 17 00:00:00 2001
From: danieltruong <aduy1122@gmail.com>
Date: Sat, 23 Oct 2021 21:08:21 -0700
Subject: [PATCH 2/4] code clean up + refactor

---
 src/lib/components/utils/acm-select.svelte | 35 ++++++++++------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/utils/acm-select.svelte b/src/lib/components/utils/acm-select.svelte
index c83ff416c..8d7198583 100644
--- a/src/lib/components/utils/acm-select.svelte
+++ b/src/lib/components/utils/acm-select.svelte
@@ -1,34 +1,29 @@
 <script lang="ts">
-	export let defaultValue: string | HTMLInputElement = '';
+	export let defaultValue: string = '';
 	export let options: string[] = [];
 
-	let option: HTMLDivElement;
+	let currentValue: string = defaultValue;
 	let dropTitle: HTMLDivElement;
+	let active: boolean = false;
 
-	const setDrop = () => {
-		option.classList.toggle('active');
+	const openDropdown = () => {
+		active = !active;
 	};
 
 	const handleOption = (term) => {
-		dropTitle.innerHTML = term;
-		option.classList.remove('active');
-		defaultValue = term;
+		currentValue = term;
+		defaultValue = currentValue;
+		active = false;
 	};
 </script>
 
 <div class="term" name="school-year">
 	<div class="option-box">
-		<div class="selected" bind:this={dropTitle} on:click={setDrop}>{defaultValue}</div>
-		<div class="option active" bind:this={option}>
+		<div class="selected" bind:this={dropTitle} on:click={openDropdown}>{currentValue}</div>
+		<div class="option" class:active>
 			{#each options as optionValue (optionValue)}
-				<div>
-					<input
-						value={optionValue}
-						on:click={() => handleOption(optionValue)}
-						type="radio"
-						class="radio"
-						id={optionValue} />
-					<label for={optionValue}> {optionValue} </label>
+				<div class="option-choice" on:click={() => handleOption(optionValue)}>
+					{optionValue}
 				</div>
 			{/each}
 		</div>
@@ -45,7 +40,7 @@
 		}
 	}
 
-	label,
+	.option-choice,
 	.selected {
 		color: white;
 	}
@@ -64,7 +59,7 @@
 		visibility: hidden;
 		margin-bottom: 0.5rem;
 		transition: all 300ms;
-		label {
+		.option-choice {
 			cursor: pointer;
 			&:hover {
 				color: transparent;
@@ -82,7 +77,7 @@
 		margin-top: 0.2rem;
 		border-radius: 0 0 6px 6px;
 		transition: all 200ms;
-		label:hover {
+		.option-choice:hover {
 			color: var(--acm-blue);
 		}
 	}

From 0e3f7d13abce7460dcd0597f00f2a993423e85b0 Mon Sep 17 00:00:00 2001
From: danieltruong <aduy1122@gmail.com>
Date: Sun, 24 Oct 2021 10:28:31 -0700
Subject: [PATCH 3/4] code clean up

---
 src/lib/components/utils/acm-select.svelte | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/utils/acm-select.svelte b/src/lib/components/utils/acm-select.svelte
index 8d7198583..0cc9eff1c 100644
--- a/src/lib/components/utils/acm-select.svelte
+++ b/src/lib/components/utils/acm-select.svelte
@@ -3,10 +3,9 @@
 	export let options: string[] = [];
 
 	let currentValue: string = defaultValue;
-	let dropTitle: HTMLDivElement;
 	let active: boolean = false;
 
-	const openDropdown = () => {
+	const toggleDropdown = () => {
 		active = !active;
 	};
 
@@ -19,7 +18,7 @@
 
 <div class="term" name="school-year">
 	<div class="option-box">
-		<div class="selected" bind:this={dropTitle} on:click={openDropdown}>{currentValue}</div>
+		<div class="selected" on:click={toggleDropdown}>{currentValue}</div>
 		<div class="option" class:active>
 			{#each options as optionValue (optionValue)}
 				<div class="option-choice" on:click={() => handleOption(optionValue)}>
@@ -42,7 +41,7 @@
 
 	.option-choice,
 	.selected {
-		color: white;
+		color: var(--acm-light);
 	}
 	.selected {
 		background-color: var(--acm-dark);
@@ -62,13 +61,10 @@
 		.option-choice {
 			cursor: pointer;
 			&:hover {
-				color: transparent;
+				color: var(--acm-light);
 			}
 		}
 	}
-	.radio {
-		display: none;
-	}
 
 	.option.active {
 		visibility: visible;

From 87c2fdde580eb999409f1e232a38d0ac93584ed7 Mon Sep 17 00:00:00 2001
From: danieltruong <aduy1122@gmail.com>
Date: Sun, 24 Oct 2021 18:18:36 -0700
Subject: [PATCH 4/4] code clean up 2p

---
 src/lib/components/utils/acm-select.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/utils/acm-select.svelte b/src/lib/components/utils/acm-select.svelte
index 0cc9eff1c..59bafcfa9 100644
--- a/src/lib/components/utils/acm-select.svelte
+++ b/src/lib/components/utils/acm-select.svelte
@@ -17,9 +17,9 @@
 </script>
 
 <div class="term" name="school-year">
-	<div class="option-box">
+	<div class="option-box" class:active>
 		<div class="selected" on:click={toggleDropdown}>{currentValue}</div>
-		<div class="option" class:active>
+		<div class="option">
 			{#each options as optionValue (optionValue)}
 				<div class="option-choice" on:click={() => handleOption(optionValue)}>
 					{optionValue}
@@ -47,11 +47,14 @@
 		background-color: var(--acm-dark);
 		padding: 8px 24px;
 		cursor: pointer;
-		border-radius: 6px 6px 0px 0px;
+		border-radius: 6px;
 		&:hover {
 			color: var(--acm-blue);
 		}
 	}
+	.active > .selected {
+		border-radius: 6px 6px 0 0;
+	}
 
 	.option {
 		cursor: pointer;
@@ -66,7 +69,7 @@
 		}
 	}
 
-	.option.active {
+	.active > .option {
 		visibility: visible;
 		background-color: var(--acm-dark);
 		padding: 8px 24px;