fix: input styling and chevrons

jesperorb · Mar 9, 2024 · cbc2050 · cbc2050
1 parent 3d73b95
commit cbc2050
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 41 deletions.
diff --git a/src/lib/components/ui/ComboBox/ComboBox.svelte b/src/lib/components/ui/ComboBox/ComboBox.svelte
@@ -5,6 +5,7 @@
   import { onMount } from "svelte";
 
   import { uid, onClickOutside } from "./ComboBoxContext.svelte";
+  import ChevronUp from "../icons/ChevronUp.svelte";
 
   export let disabled: boolean | undefined = undefined;
   export let error: string | undefined = undefined;
@@ -191,33 +192,33 @@
 
   <div class="input-container" use:onClickOutside={hideList}>
     <slot name="icon-start" />
-
-    <input
-      bind:this={inputElement}
-      on:focus
-      on:blur
-      on:input
-      on:keyup={onInputKeyup}
-      on:keydown={onInputKeydown}
-      on:mousedown={onInputClick}
-      class="combobox__input"
-      {id}
-      {name}
-      type="text"
-      {disabled}
-      value={selectedOption?.label}
-      autocapitalize="none"
-      autocomplete="off"
-      {readonly}
-      {placeholder}
-      spellcheck="false"
-			role="combobox"
-			aria-autocomplete="list"
-			aria-expanded={isListOpen}
-      aria-controls=""
-      aria-required={required ? "true" : undefined}
-    />
-
+    <span class="input-wrapper">
+      <input
+        bind:this={inputElement}
+        on:focus
+        on:blur
+        on:input
+        on:keyup={onInputKeyup}
+        on:keydown={onInputKeydown}
+        on:mousedown={onInputClick}
+        class="combobox__input"
+        {id}
+        {name}
+        type="text"
+        {disabled}
+        value={selectedOption?.label}
+        autocapitalize="none"
+        autocomplete="off"
+        {readonly}
+        {placeholder}
+        spellcheck="false"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-expanded={isListOpen}
+        aria-controls=""
+        aria-required={required ? "true" : undefined}
+      /><div class="chevron"><ChevronUp /></div>
+    </span>
     <ul
       class="combobox__list"
       role="listbox"
@@ -265,16 +266,14 @@
 		--accent-color: #06113C;
 		--background-color: white;
 		--border-radius: 1em;
-		
-		--option-border: ;
 		--option-padding: 0.5rem;
 		
 		display: flex;
 		flex-direction: column;
     margin-bottom: 0.5rem;
 	}
 	
-  .input-container {
+  .input-container, .input-wrapper {
     position: relative;
   }
 	
@@ -283,9 +282,21 @@
 		width: 100%;
     max-width: 30rem;
 		padding: 0.5rem;
-		border: 1px solid gray;
+		border: 1px solid var(--lightgray);
 		border-radius: 0.3rem;
 	}
+
+  .chevron {
+		font-size: 0.85rem;
+		color: var(--gray);
+    top: -1px;
+    right: 0.5rem;
+		position: absolute;
+	}
+
+  .icon {
+    color: var(--lightgray);
+  }
 	
 	.combobox__input:focus {
 		outline: none;
@@ -313,8 +324,8 @@
     
     background-color: var(--background-color);
     border-radius: 0.3em;
-		border: 1px solid var(--accent-color);
-    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;    
+		border: 1px solid var(--lightgray);
+    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;    
   }
 	
 	.list__no-results {

diff --git a/src/lib/components/ui/DateTime.svelte b/src/lib/components/ui/DateTime.svelte
@@ -34,7 +34,7 @@
 		gap: 1rem;
 	}
 	input {
-		border: 1px solid grey;
+		border: 1px solid var(--lightgray);
 		border-radius: 4px;
 		background-color: white;
 		padding: 0.5rem;

diff --git a/src/lib/components/ui/Input.svelte b/src/lib/components/ui/Input.svelte
@@ -23,7 +23,7 @@
 
 <style>
 	input {
-		border: 1px solid var(--gray);
+		border: 1px solid var(--lightgray);
 		border-radius: 4px;
 		background-color: white;
 		padding: 0.5rem;

diff --git a/src/lib/components/ui/Main.svelte b/src/lib/components/ui/Main.svelte
@@ -22,8 +22,8 @@
 	.wrapper {
 		position: relative;
 		background-color: var(--white);
+		border: 1px solid hsl(0, 0%, 90%);
 		padding: 1rem;
-		box-shadow: -2px -2px 8px 2px hsla(276, 100%, 10%, 0.03);
 		overflow-x: auto;
 	}
 </style>
diff --git a/src/lib/components/ui/Select.svelte b/src/lib/components/ui/Select.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import ChevronUp from "./icons/ChevronUp.svelte";
+
 	// eslint-disable-next-line no-undef
 	type Type = $$Generic;
 	interface $$Slots {
@@ -21,24 +23,39 @@
 	{#if label}
 		<label for={`${name}Select`}>{label}</label>
 	{/if}
-	<select {name} bind:value id={`${name}Select`} on:change={onChange} class:fullWidth={fullWidth}>
+	<div class="wrapper">
+	<select {name} bind:value id={`${name}Select`} on:change={onChange} class:fullWidth>
 		{#if !removeEmpty}
-			<option value="">{placeholder ?? "undefined"}</option>
+			<option value="">{placeholder ?? 'undefined'}</option>
 		{/if}
 		{#each items as [key, value]}
 			{#if value !== undefined}
 				<option value={key}>{value}</option>
 			{/if}
 		{/each}
 	</select>
+	<div class="icon"><ChevronUp /></div>
+	</div>
 </div>
 
 <style>
+	.wrapper {
+		position: relative;
+	}
 	select {
-		border: 1px solid grey;
+		border: 1px solid var(--lightgray);
 		border-radius: 4px;
 		background-color: white;
 		padding: 0.5rem;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+	.icon {
+		font-size: 0.85rem;
+		color: var(--gray);
+		top: 5px;
+		right: 0.5rem;
+		position: absolute;
 	}
 	.fullWidth {
 		width: 100%;

diff --git a/src/lib/components/ui/icons/ChevronUp.svelte b/src/lib/components/ui/icons/ChevronUp.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	class="{$$restProps.class || ''}"
+	stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg
+>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -19,7 +19,12 @@
 
 <svelte:head>
 	<title>{routeId ?? 'Intl Explorer'}</title>
-	<script async src="https://umami-jesperorb.vercel.app/script.js" data-website-id="1a2d166c-93b7-4f2b-b61f-ae3e221cf760" data-do-not-track="true"></script>
+	<script
+		async
+		src="https://umami-jesperorb.vercel.app/script.js"
+		data-website-id="1a2d166c-93b7-4f2b-b61f-ae3e221cf760"
+		data-do-not-track="true"
+	></script>
 </svelte:head>
 
 <SkipLink />
@@ -39,11 +44,12 @@
 <!-- Ignore -->
 <style global>
 	:root {
-		--black: hsl(276, 100%, 10%);
+		--black: hsl(276, 100%, 12%);
 		--white: hsl(0, 100%, 100%);
 		--dark-blue: hsl(207, 95%, 8%);
 		--light-blue: hsl(221, 100%, 75%);
 		--gray: hsl(0, 0%, 60%);
+		--lightgray: hsl(0, 0%, 80%);
 		--purple: hsl(276, 67%, 74%);
 		--teal: hsl(169, 56%, 68%);
 		--green: hsl(114, 31%, 68%);
@@ -133,4 +139,8 @@
 		text-decoration: none;
 		border-bottom: 2px solid var(--purple);
 	}
+
+	details > summary {
+		cursor: pointer;
+	}
 </style>