port button styles, add danger variant

kitsune-soc · Nov 7, 2024 · c8501ac · c8501ac
1 parent 00911f0
commit c8501ac
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 77 deletions.
diff --git a/kitsune-fe/package.json b/kitsune-fe/package.json
@@ -17,8 +17,8 @@
 	},
 	"devDependencies": {
 		"@iconify-json/eos-icons": "^1.2.1",
-		"@sveltejs/adapter-static": "^3.0.5",
-		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/kit": "^2.8.0",
 		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
@@ -34,16 +34,16 @@
 		"prettier": "^3.3.3",
 		"prettier-plugin-css-order": "^2.1.2",
 		"prettier-plugin-svelte": "^3.2.7",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier-plugin-tailwindcss": "^0.6.8",
 		"sass": "^1.80.6",
 		"svelte": "^5.1.12",
 		"svelte-check": "^4.0.5",
-		"tailwindcss": "^3.4.9",
+		"tailwindcss": "^3.4.14",
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.13.0",
 		"unplugin-icons": "^0.20.1",
 		"vite": "^5.4.10",
 		"vitest": "^2.1.4",
 		"zod": "^3.23.8"
 	}
-}
+}
diff --git a/kitsune-fe/pnpm-lock.yaml b/kitsune-fe/pnpm-lock.yaml
diff --git a/kitsune-fe/src/lib/components/Button.svelte b/kitsune-fe/src/lib/components/Button.svelte
@@ -14,14 +14,16 @@
 		 *
 		 * @default 'primary'
 		 */
-		buttonType?: 'primary' | 'secondary';
+		buttonType?: 'primary' | 'secondary' | 'danger';
 		children: Snippet;
 	} & HTMLButtonAttributes = $props();
 
 	if (buttonType === 'primary') {
-		classNames += ` primary`; // ToDo: Port styles to tailwind
+		classNames += ` text-dark-1 bg-shade1-dark hover:enabled:bg-shade2-dark`; // ToDo: Port styles to tailwind
 	} else if (buttonType === 'secondary') {
 		classNames += ` border-solid border-2 bg-transparent`;
+	} else if (buttonType === 'danger') {
+		classNames += ` bg-red-700 text-white`;
 	}
 </script>
 
@@ -31,19 +33,3 @@
 >
 	{@render children()}
 </button>
-
-<style lang="scss">
-	@use '../../styles/colours' as *;
-
-	button:global(.primary) {
-		background-color: $shade1dark;
-
-		&:not(:hover) {
-			color: $dark1;
-		}
-
-		&:hover:not([disabled]) {
-			background-color: $shade2dark;
-		}
-	}
-</style>
diff --git a/kitsune-fe/src/routes/+page.svelte b/kitsune-fe/src/routes/+page.svelte
@@ -162,7 +162,7 @@
 			</p>
 		</form>
 
-		<Button class="w-full" buttonType="secondary" onclick={initiateLogin}>
+		<Button class="w-full" buttonType="danger" onclick={initiateLogin}>
 			Already have an account? Sign in
 		</Button>
 	</div>

diff --git a/kitsune-fe/tailwind.config.ts b/kitsune-fe/tailwind.config.ts
@@ -13,8 +13,15 @@ export default {
 					'1': '#1c1626',
 					'2': '#2b233a',
 					'3': '#042f40'
+				},
+				shade1: {
+					dark: '#ff9e55',
+					light: '#afd7fa'
+				},
+				shade2: {
+					dark: '#935d7e',
+					light: '#d68fbc'
 				}
-				// ToDo: Port rest of colour palette over
 			}
 		}
 	},