feat: Refactor button styles to use accent color and improve padding

usepowershell · usepowershell · commit 3ba939ecc5bc · 2025-07-31T12:32:55.000-05:00
diff --git a/src/store-admin/src/assets/styles.scss b/src/store-admin/src/assets/styles.scss
@@ -165,48 +165,43 @@ nav a:hover {
 }
 
 /* Buttons */
-.btn {
-  background: var(--button-color);
+.button {
+  background: var(--accent-color);
   color: var(--secondary-color);
   border: none;
+  padding: 10px 15px;
   border-radius: var(--border-radius);
-  padding: 0.75rem 1.5rem;
-  font-size: 1rem;
   cursor: pointer;
-  transition: background-color 0.2s ease;
-  display: inline-block;
-  text-decoration: none;
-  text-align: center;
-  margin: 0.25rem;
+  transition: background 0.3s;
 }
 
-.btn:hover {
+.button:hover {
   background: var(--button-hover-color);
 }
 
-.btn-primary {
+.button-primary {
   background: var(--accent-color);
 }
 
-.btn-primary:hover {
+.button-primary:hover {
   background: var(--accent-color-dark);
 }
 
-.btn-secondary {
+.button-secondary {
   background: var(--border-color);
   color: var(--text-color);
 }
 
-.btn-secondary:hover {
+.button-secondary:hover {
   background: #ccc;
 }
 
-.btn-danger {
+.button-danger {
   background: #dc3545;
   color: white;
 }
 
-.btn-danger:hover {
+.button-danger:hover {
   background: #c82333;
 }
 
@@ -309,7 +304,7 @@ nav a:hover {
     font-size: 2rem;
   }
   
-  .btn {
+  .button {
     padding: 0.5rem 1rem;
     font-size: 0.875rem;
   }
diff --git a/src/store-front/src/assets/styles.scss b/src/store-front/src/assets/styles.scss
@@ -115,26 +115,25 @@ nav a:hover {
 }
 
 /* Button styles */
-.btn {
-  background: var(--button-color);
+.button {
+  background: var(--accent-color);
   color: var(--secondary-color);
   border: none;
+  padding: 10px 15px;
   border-radius: var(--border-radius);
-  padding: 0.75rem 1.5rem;
-  font-size: 1rem;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: background 0.3s;
 }
 
-.btn:hover {
+.button:hover {
   background: var(--button-hover-color);
 }
 
-.btn-primary {
+.button-primary {
   background: var(--accent-color);
 }
 
-.btn-primary:hover {
+.button-primary:hover {
   background: var(--accent-color-dark);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -165,48 +165,43 @@ nav a:hover {`
`165`	`165`	`}`
`166`	`166`
`167`	`167`	`/* Buttons */`
`168`		`-.btn {`
`169`		`- background: var(--button-color);`
	`168`	`+.button {`
	`169`	`+ background: var(--accent-color);`
`170`	`170`	`color: var(--secondary-color);`
`171`	`171`	`border: none;`
	`172`	`+ padding: 10px 15px;`
`172`	`173`	`border-radius: var(--border-radius);`
`173`		`- padding: 0.75rem 1.5rem;`
`174`		`- font-size: 1rem;`
`175`	`174`	`cursor: pointer;`
`176`		`- transition: background-color 0.2s ease;`
`177`		`- display: inline-block;`
`178`		`- text-decoration: none;`
`179`		`- text-align: center;`
`180`		`- margin: 0.25rem;`
	`175`	`+ transition: background 0.3s;`
`181`	`176`	`}`
`182`	`177`
`183`		`-.btn:hover {`
	`178`	`+.button:hover {`
`184`	`179`	`background: var(--button-hover-color);`
`185`	`180`	`}`
`186`	`181`
`187`		`-.btn-primary {`
	`182`	`+.button-primary {`
`188`	`183`	`background: var(--accent-color);`
`189`	`184`	`}`
`190`	`185`
`191`		`-.btn-primary:hover {`
	`186`	`+.button-primary:hover {`
`192`	`187`	`background: var(--accent-color-dark);`
`193`	`188`	`}`
`194`	`189`
`195`		`-.btn-secondary {`
	`190`	`+.button-secondary {`
`196`	`191`	`background: var(--border-color);`
`197`	`192`	`color: var(--text-color);`
`198`	`193`	`}`
`199`	`194`
`200`		`-.btn-secondary:hover {`
	`195`	`+.button-secondary:hover {`
`201`	`196`	`background: #ccc;`
`202`	`197`	`}`
`203`	`198`
`204`		`-.btn-danger {`
	`199`	`+.button-danger {`
`205`	`200`	`background: #dc3545;`
`206`	`201`	`color: white;`
`207`	`202`	`}`
`208`	`203`
`209`		`-.btn-danger:hover {`
	`204`	`+.button-danger:hover {`
`210`	`205`	`background: #c82333;`
`211`	`206`	`}`
`212`	`207`
`@@ -309,7 +304,7 @@ nav a:hover {`
`309`	`304`	`font-size: 2rem;`
`310`	`305`	`}`
`311`	`306`
`312`		`- .btn {`
	`307`	`+ .button {`
`313`	`308`	`padding: 0.5rem 1rem;`
`314`	`309`	`font-size: 0.875rem;`
`315`	`310`	`}`
Original file line number	Diff line number	Diff line change
`@@ -115,26 +115,25 @@ nav a:hover {`
`115`	`115`	`}`
`116`	`116`
`117`	`117`	`/* Button styles */`
`118`		`-.btn {`
`119`		`- background: var(--button-color);`
	`118`	`+.button {`
	`119`	`+ background: var(--accent-color);`
`120`	`120`	`color: var(--secondary-color);`
`121`	`121`	`border: none;`
	`122`	`+ padding: 10px 15px;`
`122`	`123`	`border-radius: var(--border-radius);`
`123`		`- padding: 0.75rem 1.5rem;`
`124`		`- font-size: 1rem;`
`125`	`124`	`cursor: pointer;`
`126`		`- transition: background-color 0.2s ease;`
	`125`	`+ transition: background 0.3s;`
`127`	`126`	`}`
`128`	`127`
`129`		`-.btn:hover {`
	`128`	`+.button:hover {`
`130`	`129`	`background: var(--button-hover-color);`
`131`	`130`	`}`
`132`	`131`
`133`		`-.btn-primary {`
	`132`	`+.button-primary {`
`134`	`133`	`background: var(--accent-color);`
`135`	`134`	`}`
`136`	`135`
`137`		`-.btn-primary:hover {`
	`136`	`+.button-primary:hover {`
`138`	`137`	`background: var(--accent-color-dark);`
`139`	`138`	`}`
`140`	`139`