minor fixes on font

spacebarchat · Aug 28, 2023 · c4f5568 · c4f5568
1 parent a41e338
commit c4f5568
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 29 deletions.
diff --git a/src/components/AuthComponents.tsx b/src/components/AuthComponents.tsx
@@ -38,7 +38,7 @@ export const HeaderContainer = styled.div`
 export const Header = styled.h1`
 	margin-bottom: 3px;
 	color: var(--text);
-	font-weight: var(--font-weight-semibold);
+	font-weight: var(--font-weight-bold);
 	font-size: 24px;
 `;
 
@@ -75,7 +75,7 @@ export const InputErrorText = styled.label`
 
 export const InputLabel = styled.label`
 	font-size: 14px;
-	font-weight: var(--font-weight-semibold);
+	font-weight: var(--font-weight-bold);
 `;
 
 export const InputWrapper = styled.div`

diff --git a/src/components/HCaptcha.tsx b/src/components/HCaptcha.tsx
@@ -37,7 +37,7 @@ export const HeaderContainer = styled.div`
 `;
 
 export const Header = styled.h1`
-	font-weight: var(--font-weight-semibold);
+	font-weight: var(--font-weight-bold);
 	margin-bottom: 8px;
 	font-size: 24px;
 	color: var(--text);

diff --git a/src/components/messaging/Message.tsx b/src/components/messaging/Message.tsx
@@ -57,7 +57,7 @@ const MessageTimestamp = styled.div`
 
 const MessageContent = styled.div<{ sending?: boolean; failed?: boolean }>`
 	font-size: 16px;
-	font-weight: var(--font-weight-thin);
+	font-weight: var(--font-weight-light);
 	white-space: pre-wrap;
 	word-wrap: anywhere;
 	opacity: ${(props) => (props.sending ? 0.5 : undefined)};

diff --git a/src/components/modals/ModalComponents.tsx b/src/components/modals/ModalComponents.tsx
@@ -51,7 +51,7 @@ export const ModalCloseWrapper = styled.div`
 
 export const ModalHeaderText = styled.h1`
 	font-size: 24px;
-	font-weight: var(--font-weight-black);
+	font-weight: var(--font-weight-bold);
 	color: var(--text-header);
 	text-align: center;
 	margin: 0;

diff --git a/src/contexts/Theme.tsx b/src/contexts/Theme.tsx
@@ -2,6 +2,17 @@ import { observer } from "mobx-react-lite";
 import { createGlobalStyle } from "styled-components";
 import { useAppStore } from "../stores/AppStore";
 
+const font: ThemeFont["font"] = {
+	weight: {
+		thin: 100,
+		light: 300,
+		regular: 400,
+		medium: 500,
+		bold: 700,
+		black: 900,
+	},
+};
+
 export type ThemeVariables =
 	| "backgroundPrimary"
 	| "backgroundPrimaryAlt"
@@ -47,18 +58,22 @@ export type Overrides = {
 	[variable in ThemeVariables]: string;
 };
 
-export type OverridesWithFont = Overrides & {
+export type ThemeFont = {
 	font: {
 		weight: {
-			thin: number;
-			regular: number;
-			medium: number;
-			semibold: number;
-			black: number;
+			thin?: number;
+			light?: number;
+			regular?: number;
+			medium?: number;
+			bold?: number;
+			semibold?: number;
+			black?: number;
 		};
 	};
 };
 
+export type OverridesWithFont = Overrides & ThemeFont;
+
 export type Theme = OverridesWithFont & {
 	light?: boolean;
 };
@@ -104,15 +119,7 @@ export const ThemePresets: Record<string, Theme> = {
 		warningContrastText: "",
 		scrollbarTrack: "",
 		scrollbarThumb: "",
-		font: {
-			weight: {
-				thin: 300,
-				regular: 400,
-				medium: 500,
-				semibold: 700,
-				black: 900,
-			},
-		},
+		font: font,
 	},
 	dark: {
 		backgroundPrimary: "#2e2e2e",
@@ -154,15 +161,7 @@ export const ThemePresets: Record<string, Theme> = {
 		warningContrastText: "#040404",
 		scrollbarTrack: "#232323",
 		scrollbarThumb: "#171717",
-		font: {
-			weight: {
-				thin: 300,
-				regular: 400,
-				medium: 500,
-				semibold: 700,
-				black: 900,
-			},
-		},
+		font: font,
 	},
 };