update style

src/components/EventSelector.vue

@@ -6,7 +6,7 @@
 				v-for="item in props.eventList"
 				:key="item.id || item.name"
 				type="button"
-				class="item"
+				class="item bg-white"
 				:class="{selected: isSelected(item.id)}"
 				:title="item.name"
 				:disabled="props.disabled || !item.id"
@@ -85,15 +85,15 @@ const toggleEvent = (eventId?: string) => {
 	}
 
 	.item {
-		gap: .25rem;
+		gap: .5rem;
 		width: 100%;
 		margin: 0;
-		border: 1px solid gray;
+		border: 1px solid #CCC;
 		display: flex;
 		padding: .5rem;
 		position: relative;
 		overflow: hidden;
-		background: #F8FBFF;
+		font-size: 1rem;
 		text-align: left;
 		align-items: center;
 		border-radius: .5rem;
@@ -111,6 +111,7 @@ const toggleEvent = (eventId?: string) => {
 		.swatch {
 			width: 1.5rem;
 			height: 1.5rem;
+			min-width: 1.5rem;
 			border-radius: .25rem;
 		}
 
@@ -118,8 +119,8 @@ const toggleEvent = (eventId?: string) => {
 			top: -2px;
 			left: -2px;
 			color: #fff;
-			width: 1.5rem;
-			height: 1.5rem;
+			width: 1.75rem;
+			height: 1.75rem;
 			position: absolute;
 			clip-path: polygon(0 0, 100% 0, 0 100%);
 			background: var(--td-brand-color, #2F88FF);