feat: tailwind-css support added, login button added to UI

client/package.json

@@ -20,14 +20,17 @@
 		"@sveltejs/kit": "next",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.8",
 		"eslint": "^8.16.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.16",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
-		"svelte-preprocess": "^4.10.6",
+		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.8",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
 		"vite": "^3.0.0"

client/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/src/app.html

@@ -11,7 +11,7 @@
 			rel="stylesheet"
 		/>
 		<link
-			href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&family=Roboto:wght@300;400&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&family=Roboto:wght@300;400;500&display=swap"
 			rel="stylesheet"
 		/>
 		%sveltekit.head%

client/src/components/header.svelte

@@ -1,5 +1,7 @@
 <script>
 	import Icon from '@iconify/svelte';
+
+	let loggedIn = false;
 </script>
 
 <header class="header">
@@ -29,11 +31,19 @@
 		<div class="end">
 			<img class="svg" src="icons/videocam-outline.svg" alt="video create" />
 			<img class="svg" src="icons/notifications-outline.svg" alt="notifications" />
-			<img class="profile" src="https://picsum.photos/id/237/50/50" alt="profile pic" />
+
+			{#if !loggedIn}
+				<button class="login__button flex justify-around items-center	">
+					<img class="h-4/5" src="./icons/nav/login.svg" alt="login" />
+					<p class="font-medium text-base">SIGN IN</p>
+				</button>
+			{:else}
+				<img class="profile" src="https://picsum.photos/id/237/50/50" alt="profile pic" />
+			{/if}
 		</div>
 	</div>
 
-	<div class="header__tags">
+	<div class="header__tags no-scrollbar">
 		<!-- <p>Hello</p> -->
 		{#each Array(4) as _}
 			<button class="header__tags-btn">All</button>
@@ -99,7 +109,7 @@
 	}
 
 	.svg {
-		height: 30px;
+		height: 25px;
 	}
 
 	.logo {
@@ -122,7 +132,14 @@
 	.search__query {
 		width: 30vw;
 		border: 1px solid #ccc;
+		font-size: 14px;
+		padding: 0px 10px;
 	}
+
+	.search__query::placeholder {
+		font-size: 14px;
+	}
+
 	.search__icon {
 		height: 40px;
 		width: 60px;
@@ -152,14 +169,24 @@
 		gap: 25px;
 		justify-content: center;
 		align-items: center;
-		margin-right: 20px;
+		margin-right: 30px;
+	}
+	.login__button {
+		height: 40px;
+		width: 120px;
+		font-size: 12px;
+		border: 1px solid black;
+		padding: 5px 10px;
+		box-sizing: border-box;
+
+		font-family: Roboto;
 	}
 
 	.header__tags {
 		display: flex;
 		gap: 15px;
 		margin-left: 12vw;
-		overflow: scroll;
+		overflow-x: scroll;
 		width: 88vw;
 		height: 50%;
 		align-items: center;

client/src/components/login.svelte

@@ -0,0 +1,5 @@
+<div>
+	<input type="text" />
+	<input type="password" />
+	<button>Login</button>
+</div>

client/src/routes/__layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

client/src/routes/index.svelte

@@ -2,6 +2,7 @@
 	import Home from '../components/home.svelte';
 </script>
 
+<!-- <p class="text-3xl ">Hello world!</p> -->
 <Home />
 
 <style>
@@ -10,6 +11,7 @@
 		margin: 0px;
 
 		font-family: 'Open Sans', sans-serif;
+		overflow-x: hidden;
 	}
 
 	:global(button) {
@@ -21,4 +23,15 @@
 		cursor: pointer;
 		outline: inherit;
 	}
+
+	:global(.no-scrollbar::-webkit-scrollbar) {
+		display: none;
+	}
+	/* Hide scrollbar for Chrome, Safari and Opera */
+
+	/* Hide scrollbar for IE, Edge and Firefox */
+	.no-scrollbar {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
 </style>

client/svelte.config.js

@@ -5,7 +5,9 @@ import preprocess from 'svelte-preprocess';
 const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	preprocess: preprocess(),
+	preprocess: preprocess({
+		postcss: true
+	}),
 
 	kit: {
 		adapter: adapter()

client/tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		extend: {}
+	},
+	plugins: []
+};