UI tweaks & colors (#1255)

* Start most colors the same as in docs, fixed navigation issue and blurry logo * Remove unused rule * Add some navbar colors * Add gp2040-ce primary color * Make dropdown default size, and improve mobile version * Remove unused variables, format and tidy up macro rows ui * Tidy up hotkeys ui a bit and format settingsPage * Fix a background issue on language selector and color selector mobile navigation
OpenStickCommunity · Jan 4, 2025 · 4b088bc · 4b088bc
1 parent da0f83b
commit 4b088bc
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 193 deletions.
diff --git a/www/public/images/logo.png b/www/public/images/logo.png
diff --git a/www/src/Components/Navigation.jsx b/www/src/Components/Navigation.jsx
@@ -50,23 +50,19 @@ const Navigation = () => {
 	let eventKey = 0;
 
 	return (
-		<Navbar
-			collapseOnSelect
-			bg="primary"
-			variant="dark"
-			expand="md"
-			fixed="top"
-		>
-			<Navbar.Brand href="/" title={`GP2040-CE ${t('Navigation:home-label')}`}>
-				<img
-					src="images/logo.png"
-					className="title-logo"
-					alt="GP2040-CE logo"
-				/>{' '}
+		<Navbar collapseOnSelect expand="md" fixed="top">
+			<Navbar.Brand title={`GP2040-CE ${t('Navigation:home-label')}`}>
+				<Nav.Link as={NavLink} to="/" eventKey={eventKey++}>
+					<img
+						src="images/logo.png"
+						className="title-logo"
+						alt="GP2040-CE logo"
+					/>
+				</Nav.Link>
 			</Navbar.Brand>
 			<Navbar.Toggle aria-controls="responsive-navbar-nav" />
 			<Navbar.Collapse id="basic-navbar-nav">
-				<Nav className="me-auto">
+				<Nav className="me-auto nav-menu">
 					<Nav.Link as={NavLink} to="/settings" eventKey={eventKey++}>
 						{t('Navigation:settings-label')}
 					</Nav.Link>

diff --git a/www/src/Components/Navigation.scss b/www/src/Components/Navigation.scss
@@ -6,6 +6,8 @@ $nav-outer-margin: 0.75rem;
 
 nav.navbar {
 	padding: 0;
+	background-color: white;
+	box-shadow: 0 1px 2px 0 #0000001a;
 
 	.navbar-brand {
 		margin-right: $nav-outer-margin;
@@ -30,17 +32,17 @@ nav.navbar {
 		color: #ff0000;
 	}
 }
+[data-bs-theme="dark"] {
+	nav.navbar {
+		background-color: #242526;
+	}
+}
 
 .title-logo {
 	height: 40px;
 	margin: 0.25rem 0rem 0.25rem $nav-outer-margin;
 }
 
-.nav-link,
-.nav-item * {
-	font-size: 0.875rem;
-}
-
 @media (max-width: 767.98px) {
 	nav.navbar {
 		.navbar-actions {
@@ -51,5 +53,14 @@ nav.navbar {
 		.nav-link {
 			margin-left: $nav-outer-margin;
 		}
+		.nav-menu {
+			.dropdown-menu {
+				background-color: transparent;
+				border: none;
+				.dropdown-item {
+					padding-left: 1.5rem;
+				}
+			}
+		}
 	}
 }
diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
@@ -1,23 +1,21 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { AppContext } from '../Contexts/AppContext';
 import {
 	Badge,
 	Button,
 	Col,
 	Form,
 	InputGroup,
 	Nav,
-	OverlayTrigger,
 	Row,
 	Tab,
 	Table,
-	Tooltip,
 } from 'react-bootstrap';
 import { Formik, useFormikContext } from 'formik';
 import * as yup from 'yup';
 import { Trans, useTranslation } from 'react-i18next';
 import omit from 'lodash/omit';
 
+import { AppContext } from '../Contexts/AppContext';
 import Section from '../Components/Section';
 import WebApi from '../Services/WebApi';
 import {
@@ -83,11 +81,8 @@ const defaultValues = {
 const ONE_FRAME_US = 16666;
 
 const FormContext = () => {
-	const { values, setValues } = useFormikContext();
-	const { buttonLabels, setLoading } = useContext(AppContext);
-	const { buttonLabelType, swapTpShareLabels } = buttonLabels;
-
-	const CURRENT_BUTTONS = getButtonLabels(buttonLabelType, swapTpShareLabels);
+	const { setValues } = useFormikContext();
+	const { setLoading } = useContext(AppContext);
 
 	useEffect(() => {
 		async function fetchData() {
@@ -132,8 +127,6 @@ const ButtonMasksComponent = (props) => {
 	);
 };
 
-const tooltip = <Tooltip id="tooltip">Double click to delete.</Tooltip>;
-
 const MacroInputComponent = (props) => {
 	const {
 		value: { duration, buttonMask, waitDuration },
@@ -147,8 +140,8 @@ const MacroInputComponent = (props) => {
 	} = props;
 
 	return (
-		<Row className="align-content-start align-items-center row-gap-2 pb-2">
-			<Col xs="auto" style={{ width: 180 }}>
+		<Row className="align-content-start align-items-center row-gap-2 gx-2 pb-2">
+			<Col xs="auto" style={{ width: 150 }}>
 				<InputGroup size="sm">
 					<Form.Control
 						className="text-center"
@@ -244,19 +237,9 @@ const MacroInputComponent = (props) => {
 				</InputGroup>
 			</Col>
 			<Col xs="auto">
-				<OverlayTrigger
-					placement="right"
-					overlay={tooltip}
-					delay={{ show: 500, hide: 100 }}
-				>
-					<Button
-						variant="transparent"
-						size="sm"
-						onDoubleClick={deleteMacroInput}
-					>
-						💥
-					</Button>
-				</OverlayTrigger>
+				<Button size="sm" onClick={deleteMacroInput}>
+					{'✕'}
+				</Button>
 			</Col>
 		</Row>
 	);
@@ -437,22 +420,20 @@ const MacroComponent = (props) => {
 					/>
 				</Col>
 			</Row>
-			<Row>
-				{macroInputs.map((macroInput, a) => (
-					<MacroInputComponent
-						key={`${key}.macroInputs[${a}]`}
-						id={`${key}.macroInputs[${a}]`}
-						value={macroInput}
-						errors={errors?.macroInputs?.at(a)}
-						showFrames={showFrames}
-						translation={t}
-						buttonLabelType={buttonLabelType}
-						deleteMacroInput={() => deleteMacroInput(a)}
-						handleChange={handleChange}
-						setFieldValue={setFieldValue}
-					/>
-				))}
-			</Row>
+			{macroInputs.map((macroInput, a) => (
+				<MacroInputComponent
+					key={`${key}.macroInputs[${a}]`}
+					id={`${key}.macroInputs[${a}]`}
+					value={macroInput}
+					errors={errors?.macroInputs?.at(a)}
+					showFrames={showFrames}
+					translation={t}
+					buttonLabelType={buttonLabelType}
+					deleteMacroInput={() => deleteMacroInput(a)}
+					handleChange={handleChange}
+					setFieldValue={setFieldValue}
+				/>
+			))}
 			<Row>
 				<Col sm={3}>
 					{macroInputs.length < MACRO_INPUTS_MAX ? (