From 17c1b311bd3b4b5ca57f4297a0e9137c869d297f Mon Sep 17 00:00:00 2001
From: Andy Pack <andy@sarsoo.xyz>
Date: Fri, 11 Oct 2024 22:11:05 +0100
Subject: [PATCH] matching selector ui styles

---
 music/templates/login.html       |  7 +++--
 src/js/Playlist/PlaylistsList.js |  6 ++---
 src/js/Playlist/View/Count.js    |  2 +-
 src/js/Playlist/View/Edit.js     |  2 +-
 src/js/Tag/TagList.js            |  2 +-
 src/js/Tag/View.js               |  2 +-
 src/scss/style.scss              | 44 ++++++++++++--------------------
 7 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/music/templates/login.html b/music/templates/login.html
index fa6733a..675b7ec 100644
--- a/music/templates/login.html
+++ b/music/templates/login.html
@@ -5,14 +5,13 @@
 <div class="card">
     <form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()" style="display: grid; gap: 30px;">
 
+        <h1 style="margin:0; text-align: center">Login</h1>
         <div>
-            <p>Username</p>
-            <input type="text" name="username" class="full-width" />
+            <input type="text" name="username" class="full-width" placeholder="Username" />
         </div>
 
         <div>
-            <p>Password</p>
-            <input type="password" name="password" class="full-width" />
+            <input type="password" name="password" class="full-width" placeholder="Password" />
         </div>
 
         <p id="status" style="display: none; color: red" class="center-text"></p>
diff --git a/src/js/Playlist/PlaylistsList.js b/src/js/Playlist/PlaylistsList.js
index b4ee9cf..9f6c60a 100644
--- a/src/js/Playlist/PlaylistsList.js
+++ b/src/js/Playlist/PlaylistsList.js
@@ -137,8 +137,8 @@ function PlaylistGrid(props){
         <Grid container 
                 spacing={3} 
                 direction="row"
-                justifyContent="flex-start"
-                alignItems="flex-start"
+                justifyContent="center"
+                alignItems="stretch"
                 style={{padding: 24}}>
 
             {/* BUTTON BLOCK (NEW/RUN ALL) */}
@@ -175,7 +175,7 @@ function PlaylistGrid(props){
 function PlaylistCard(props){
     return (
         <Grid item xs>
-            <Card>
+            <Card className="card">
 
                 {/* NAME TITLE */}
                 <CardContent>
diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js
index b3e1cd8..ac8e299 100644
--- a/src/js/Playlist/View/Count.js
+++ b/src/js/Playlist/View/Count.js
@@ -77,7 +77,7 @@ export class Count extends Component {
     render() {
         return (
             <div style={{margin: 'auto', marginTop: '20px'}}>
-            <Card align="center">
+            <Card align="center" className="card">
                 <CardContent>
                     <Grid container>
 
diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js
index 526c09d..2c781c4 100644
--- a/src/js/Playlist/View/Edit.js
+++ b/src/js/Playlist/View/Edit.js
@@ -367,7 +367,7 @@ export class Edit extends Component{
 
         const table = (
             <div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
-            <Card align="center">
+            <Card align="center" className="card">
                 <CardContent>
 
                     {/* PLAYLIST NAME TITLE */}
diff --git a/src/js/Tag/TagList.js b/src/js/Tag/TagList.js
index c573c53..cf40cb5 100644
--- a/src/js/Tag/TagList.js
+++ b/src/js/Tag/TagList.js
@@ -118,7 +118,7 @@ function TagGrid(props){
 function TagCard(props){
     return (
         <Grid item xs>
-            <Card>
+            <Card className="card">
                 <CardContent>
 
                     {/* TAG NAME */}
diff --git a/src/js/Tag/View.js b/src/js/Tag/View.js
index f898f8e..2e19e74 100644
--- a/src/js/Tag/View.js
+++ b/src/js/Tag/View.js
@@ -371,7 +371,7 @@ class TagView extends Component{
 
         const table = (
             <div style={{maxWidth: '1000px', margin: 'auto', marginTop: '20px'}}>
-            <Card align="center">
+            <Card align="center" className="card">
                 <CardContent>
 
                     {/* TAG NAME TITLE */}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 6c57aa1..d9ed0d8 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,6 +1,6 @@
 $font-stack: 'Roboto', arial; 
-$background-colour: #202124;
-$ui-colour: #131313;
+$background-colour: #2b2b2b;
+$ui-colour: #3c3c3c;
 $light-ui: #575757;
 $text-colour: white;
 $ui-element: #505050;
@@ -48,7 +48,7 @@ p {
 }
 
 .button {
-	background-color: $ui-element;
+	background-color: #907FA4;
 	color: $text-colour;
 
 	display: inline-block;
@@ -79,7 +79,7 @@ p {
 input[type=text], input[type=password], input[type=number], select {
 	padding: 15px;
 	background-color: $ui-element;
-	border: black;
+	border-color: #907FA4;
 	border-radius: 3px;
 	color: white;
 }
@@ -193,31 +193,19 @@ input[type=text], input[type=password], input[type=number], select {
 }
 
 .card {
-	/*background-color: grey;*/
-	background-color: $ui-colour;
-	box-shadow: 4px 4px 8px black;
-	padding: 20px;
-	//margin: calc($pad-px / 2);
-	/*border-radius: 3px;*/
+	background-color: $ui-colour !important;
+	box-shadow: 5px 5px 0 #0f0f0f !important;
+	padding: 15px !important;
+	margin: 5px !important;
+	transition: box-shadow 0.5s;
+	border-style: solid !important;
+	border-color: black !important;
+	border-width: 5px !important;
+}
 
-	h1 {
-		text-align: center;
-		color: $text-colour;
-		text-shadow: 1px 1px 2px #4f4f4f;
-	}
-
-	img {
-		width: 100%;
-		border-radius: 3px;
-		margin-bottom: 8px;	
-		box-shadow: 2px 2px 2px black;
-		margin-left: auto;
-    	margin-right: auto;
-	}
-
-	p {
-		margin-top: 20px;
-	}
+.card:hover {
+	box-shadow: none;
+	offset: 4px 4px;
 }
 
 ul.navbar {