Merge pull request #84 from the-collab-lab/mf-global-colors-btn

[MF] Creates global color, btn, font styling

Author: krsnamara

src/components/Dialog.css

@@ -1,7 +1,7 @@
 .Dialog {
 	--button-alignment: 'center';
 
-	border-radius: 20px;
+	border-radius: 15px;
 	max-width: min(68ch, 95vw);
 	padding: 0;
 	animation:
@@ -39,29 +39,22 @@
 	}
 }
 
-.Dialog .c-button {
+.Dialog button {
 	min-width: 25ch;
 	min-height: 5ch;
 	cursor: pointer;
 	font-size: 1em;
 	font-weight: 500;
 	border-radius: 8px;
-	border: 1px solid #aaa;
 	padding: 0.8em 1.6em;
 }
 
-c-button-cancel:hover {
-	background-color: #918f8f;
+.Dialog--button-group :first-child {
+	background-color: var(--btn-bg-color-cancel);
 }
 
-.c-button-confirm {
-	background-color: #4caf50;
-	border-radius: 8px;
-	border: 1px solid #0f0f0f;
-}
-
-.c-button-confirm:hover {
-	background-color: rgb(69, 167, 72);
+.Dialog--button-group :first-child:hover {
+	background-color: var(--btn-bg-color-cancel-hover);
 }
 
 .Dialog--button-group > * {
@@ -70,7 +63,7 @@ c-button-cancel:hover {
 
 @keyframes slideInFromRight {
 	from {
-		transform: translateX(100%);
+		transform: translateX(200%);
 	}
 	to {
 		transform: translateX(0);

src/index.css

@@ -9,11 +9,24 @@
 	--color-pastel-blue: hsla(215, 100%, 73%, 1);
 	--color-red: hsl(0, 68%, 42%);
 
+	--color-branding: #5a23b3;
 	--color-accent: var(--color-pastel-blue);
 	--color-bg: var(--color-black);
 	--color-border: hsla(220, 13%, 32%, 1);
 	--color-error: var(--color-red);
 	--color-text: var(--color-white);
+	--color-btn-bg-cancel: #cdcdcd;
+	--color-btn-bg-confirm-hover: #3f0f7f;
+	--color-btn-bg-cancel-hover: #989797;
+	--color-btn-bg-delete-hover: #a80000;
+
+	/* Button Styling Variables */
+	--btn-bg-color-confirm: var(--color-branding);
+	--btn-bg-color-confirm-hover: var(--color-btn-bg-confirm-hover);
+	--btn-bg-color-cancel: var(--color-btn-bg-cancel);
+	--btn-bg-color-cancel-hover: var(--color-btn-bg-cancel-hover);
+	--btn-bg-color-delete: var(--color-red);
+	--btn-bg-color-delete-hover: var(--color-btn-bg-delete-hover);
 }
 
 @media screen and (prefers-color-scheme: light) {
@@ -73,6 +86,7 @@ body {
 	font-size: 1.8rem;
 	line-height: 1.4;
 	margin: 0;
+	margin-left: 10px;
 
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -107,7 +121,36 @@ code {
 	--color-bg: var(--color-gray-light);
 }
 
-h5 {
-	margin-top: 0px;
-	margin-bottom: 0px;
+/* GLOBAL STYLES FOR HTML ELEMENTS */
+
+h1 {
+	font-family: 'Righteous', sans-serif;
+}
+
+h5,
+p {
+	margin: 0;
+	padding: 0;
+}
+
+ul {
+	list-style-type: none;
+	padding: 0;
+}
+
+button {
+	background-color: var(--btn-bg-color-confirm);
+	border: 0;
+	border-radius: 20px;
+	color: var(--color-bg);
+	cursor: pointer;
+	font-size: 1.6rem;
+	font-family: 'Righteous', sans-serif;
+	font-weight: 700;
+	padding: 0.5em 1em;
+	margin: 0.5em 0;
+}
+
+button:hover {
+	background-color: var(--btn-bg-color-confirm-hover);
 }

src/views/ManageList.jsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
-import { Navigate, useNavigate } from 'react-router-dom';
-import { Dialog, SortedItemsMap, AddItem } from '../components';
-
 import { addItem, shareList } from '../api';
-import './List.css';
+import { AddItem, Dialog, SortedItemsMap } from '../components';
 import { filteredData } from '../utils';
+import './List.css';
 
 export function ManageList({ data, listPath, currentUserId }) {
 	const [searchString, setSearchString] = useState('');
@@ -152,18 +150,8 @@ export function ManageList({ data, listPath, currentUserId }) {
 						/>
 					</label>
 					<div className="Dialog--button-group">
-						<button
-							className="c-button c-button-cancel"
-							onClick={handleShareCancelClick}
-						>
-							Cancel
-						</button>
-						<button
-							className="c-button c-button-confirm"
-							onClick={handleShareConfirmClick}
-						>
-							Confirm
-						</button>
+						<button onClick={handleShareCancelClick}>Cancel</button>
+						<button onClick={handleShareConfirmClick}>Confirm</button>
 					</div>
 				</div>
 			</Dialog>
@@ -177,18 +165,8 @@ export function ManageList({ data, listPath, currentUserId }) {
 					<div className="List-modal-inner">
 						<AddItem formData={formData} setFormData={setFormData} />
 						<div className="Dialog--button-group">
-							<button
-								className="c-button c-button-cancel"
-								onClick={handleAddItemCancelClick}
-							>
-								Cancel
-							</button>
-							<button
-								className="c-button c-button-confirm"
-								onClick={handleAddItemConfirmClick}
-							>
-								Add Item
-							</button>
+							<button onClick={handleAddItemCancelClick}>Cancel</button>
+							<button onClick={handleAddItemConfirmClick}>Add Item</button>
 						</div>
 					</div>
 				</div>