Merge pull request #1 from VijiatJack/dev

Several minor fixes to release first stable version
VijiatJack · Dec 14, 2023 · dc9c268 · dc9c268
2 parents a15758a + 6fc842a
commit dc9c268
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-	"name": "@example/basics",
-	"version": "0.0.1",
+	"name": "nookoffice",
+	"version": "1.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -9,16 +9,16 @@
 		"preview": "astro preview"
 	},
 	"dependencies": {
-		"@astrojs/react": "^1.2.2",
-		"@types/node": "^18.11.9",
-		"@types/yt-player": "^3.5.1",
-		"astro": "^1.6.11",
-		"node": "^19.1.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"yt-player": "^3.6.1"
+		"@astrojs/react": "1.2.2",
+		"@types/node": "18.11.9",
+		"@types/yt-player": "3.5.1",
+		"astro": "1.6.11",
+		"node": "19.1.0",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"yt-player": "3.6.1"
 	},
 	"devDependencies": {
-		"@astrojs/partytown": "^1.0.2"
+		"@astrojs/partytown": "1.0.2"
 	}
 }
diff --git a/src/components/Controls.astro b/src/components/Controls.astro
@@ -50,7 +50,6 @@ import "./controls.css";
 		}
 	}
 	function refreshGIF() {
-		console.log("clicked");
 		var feed = document.getElementById("feed");
 
 		if (feed) {
@@ -62,11 +61,11 @@ import "./controls.css";
 	}
 
 	function layerRain() {
-		rainPlayer.load("bunZqTrXufI", true);
-		rainPlayer.setVolume(50);
+		rainPlayer.load("q76bMs-NwRk", true);
+		rainPlayer.setVolume(30);
 
 		if (feedback) {
-			feedback.innerHTML = "Layering Rain...";
+			feedback.innerHTML = "It started Raining...";
 		}
 
 		rainPlayer.on("ended", () => {
@@ -112,12 +111,12 @@ import "./controls.css";
 					) {
 						rainPlayer.play();
 						if (feedback) {
-							feedback.innerHTML = "Adding rain..";
+							feedback.innerHTML = "It started raining...";
 						}
 					} else {
 						rainPlayer.pause();
 						if (feedback) {
-							feedback.innerHTML = "No more rain..";
+							feedback.innerHTML = "The rain is gone...";
 						}
 					}
 					break;
@@ -132,25 +131,25 @@ import "./controls.css";
 				case "pause":
 					if (feedback) {
 						feedback.innerHTML =
-							"<span class='feedback'>Press to Pause..</span>";
+							"<span class='feedback'>Press to Pause...</span>";
 					}
 					break;
 				case "play":
 					if (feedback) {
 						feedback.innerHTML =
-							"<span class='feedback'>Press to Play..</span>";
+							"<span class='feedback'>Press to Play...</span>";
 					}
 					break;
 				case "refresh":
 					if (feedback) {
 						feedback.innerHTML =
-							"<span class='feedback'>Press to Refresh GIF..</span>";
+							"<span class='feedback'>Press to Shuffle GIF...</span>";
 					}
 					break;
 				case "layerRain":
 					if (feedback) {
 						feedback.innerHTML =
-							"<span class='feedback'>Press to Layer Rain..</span>";
+							"<span class='feedback'>Press to add Rain sound layer...</span>";
 					}
 					break;
 			}
@@ -242,7 +241,6 @@ import "./controls.css";
 			default:
 				null;
 		}
-		console.log("Updating...");
 	}
 
 	// Used for displaying a clock

diff --git a/src/components/Creds.astro b/src/components/Creds.astro
@@ -54,7 +54,6 @@ import Button from "./Button.astro";
 		width: 100%;
 		display: flex;
 		justify-content: flex-end;
-		margin-left: 10px;
 		align-items: flex-end;
 		height: 100%;
 	}
@@ -73,7 +72,7 @@ import Button from "./Button.astro";
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		margin-bottom: 10px;
+		margin-bottom: 20px !important;
 		width: 100%;
 		flex-wrap: wrap;
 

diff --git a/src/components/controls.css b/src/components/controls.css
@@ -10,17 +10,20 @@
 	background-color: #5baaab;
 	border-radius: 25px;
 }
+
 .player-controls img.control {
 	width: 35px;
 	height: 35px;
 
 	margin-right: 15px;
 	opacity: 1;
 }
+
 .player-controls img.control:hover {
 	cursor: pointer;
 	opacity: 0.75;
 }
+
 .hidden {
 	visibility: hidden;
 	position: absolute;
@@ -30,93 +33,90 @@
 	height: 1px;
 	/* pointer-events: none; */
 }
+
 #feedback {
 	font-size: 1rem;
 	color: #fffdf2;
 	margin: 0;
 	padding: 0;
 }
+
 .right-ctrl {
 	flex-grow: 1;
 	display: flex;
 	justify-content: flex-end;
 }
-#range {
-	background-color: transparent;
-}
 
 /* slider */
+/*Range Reset*/
+input[type="range"] {
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	cursor: pointer;
+	width: 15rem;
+}
+
+/* Removes default focus */
 input[type="range"]:focus {
 	outline: none;
 }
+
+/***** Chrome, Safari, Opera and Edge Chromium styles *****/
+/* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
-	width: 100%;
-	height: 11px;
-	cursor: pointer;
-	animate: 0.2s;
-	background: #fff;
-	border-radius: 50px;
+	background-color: #fffdf2;
+	border-radius: 0.5rem;
+	height: 0.5rem;
 }
+
+/* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
-	border: 4px solid #5baaab;
-	height: 18px;
-	width: 18px;
-	border-radius: 4px;
-	background: #5baaab;
-	cursor: pointer;
+	-webkit-appearance: none;
+	/* Override default look */
+	appearance: none;
+	margin-top: -8px;
+	/* Centers thumb on the track */
+
+	/*custom styles*/
+	background-color: #5baaab;
+	height: 1.5rem;
+	width: 1.5rem;
+	border: 3px solid #fffdf2;
+	border-radius: 3px;
 }
-input[type="range"]:focus::-webkit-slider-runnable-track {
-	background: #fff;
+
+input[type="range"]:focus::-webkit-slider-thumb {
+	border: 3px solid #fffdf2;
+	outline: none;
+	/* outline-offset: 0.125rem; */
 }
+
+/******** Firefox styles ********/
+/* slider track */
 input[type="range"]::-moz-range-track {
-	width: 100%;
-	height: 11px;
-	cursor: pointer;
-	animate: 0.2s;
-	box-shadow: 0px 0px 0px #000000;
-	background: #fff;
-	border-radius: 50px;
-	border: 0px solid #000000;
+	background-color: #fffdf2;
+	border-radius: 0.5rem;
+	height: 0.5rem;
 }
+
+/* slider thumb */
 input[type="range"]::-moz-range-thumb {
-	border: 4px solid #fff;
-	height: 18px;
-	width: 18px;
-	border-radius: 4px;
-	background: #5baaab;
-	cursor: pointer;
-}
-input[type="range"]::-ms-track {
-	width: 100%;
-	height: 11px;
-	cursor: pointer;
-	animate: 0.2s;
-	background: transparent;
-	border-color: transparent;
-	color: transparent;
-}
-input[type="range"]::-ms-fill-lower {
-	background: #fff;
-	border-radius: 100px;
-}
-input[type="range"]::-ms-fill-upper {
-	background: #fff;
-	border-radius: 100px;
-}
-input[type="range"]::-ms-thumb {
-	margin-top: 1px;
-	border: 4px solid #fff;
-	height: 18px;
-	width: 18px;
-	border-radius: 4px;
-	background: #5baaab;
-	cursor: pointer;
-}
-input[type="range"]:focus::-ms-fill-lower {
-	background: #fff;
+	border: none;
+	/*Removes extra border that FF applies*/
+	border-radius: 0;
+	/*Removes default border-radius that FF applies*/
+
+	/*custom styles*/
+	background-color: #5cd5eb;
+	height: 2rem;
+	width: 1rem;
 }
-input[type="range"]:focus::-ms-fill-upper {
-	background: #fff;
+
+input[type="range"]:focus::-moz-range-thumb {
+	border: 3px solid #fffdf2;
+	outline: none;
+	/* outline-offset: 0.125rem; */
 }
 
 @media only screen and (max-width: 1100px) {
@@ -125,14 +125,15 @@ input[type="range"]:focus::-ms-fill-upper {
 		flex-direction: column !important;
 	}
 
-	.player-controls > * {
+	.player-controls>* {
 		margin-bottom: 1rem;
 		width: 100%;
 
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
+
 	.player-controls p {
 		text-align: left;
 		justify-content: flex-end;
@@ -144,6 +145,7 @@ input[type="range"]:focus::-ms-fill-upper {
 		position: absolute;
 		left: 0;
 	}
+
 	#range {
 		width: 100%;
 		margin: 1rem 0;
@@ -162,6 +164,7 @@ input[type="range"]:focus::-ms-fill-upper {
 	.player-controls p:before {
 		content: "";
 	}
+
 	.player-controls p {
 		text-align: left;
 		justify-content: flex-start;
@@ -174,7 +177,8 @@ input[type="range"]:focus::-ms-fill-upper {
 	.ctrl-wrapper {
 		margin-bottom: 0;
 	}
+
 	.right-ctrl {
 		max-height: 50px;
 	}
-}
+}