From 3581559f9439e97503388cbb92c334b0cd8e4850 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Sepp=C3=A4?= <joasep@utu.fi>
Date: Tue, 14 Mar 2023 15:50:44 +0200
Subject: [PATCH] Managed application colors
---
messages-app-frontend/src/App.tsx | 18 +++++++++++++++++-
messages-app-frontend/src/Message.tsx | 5 ++++-
messages-app-frontend/src/Welcome.tsx | 6 ++++--
messages-app-frontend/src/index.tsx | 24 +++++++++++++++++++++++-
4 files changed, 48 insertions(+), 5 deletions(-)
diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx
index 49df6b4..56296aa 100644
--- a/messages-app-frontend/src/App.tsx
+++ b/messages-app-frontend/src/App.tsx
@@ -5,6 +5,22 @@ import NewMessage from "./NewMessage";
import Welcome from "./Welcome";
import Message from "./Message";
+export const outsideColors = {
+ discordMessageBox: "#313339",
+ discordOutside: "#2b2d31",
+ discordOutside2: "#232428",
+ discordMessage: "#2e3034",
+ discordTextColor: "#f3f4f5",
+ vsCode: "#1e1e1e",
+ vsCode2: "#252526",
+ yt: "#0f0f0f"
+}
+
+export const appColors = {
+ //messageColor: "#008B8B"
+ messageColor: "#A5A6A8"
+}
+
export type messageType = {
message: string,
__v: Number,
@@ -32,7 +48,7 @@ const api = axios.create({
});
const messageBox = {
- bgcolor: "darkgreen",
+ bgcolor: outsideColors.discordMessageBox,
marginX: 10,
padding: 3,
display: "grid",
diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx
index 18de699..5e340d0 100644
--- a/messages-app-frontend/src/Message.tsx
+++ b/messages-app-frontend/src/Message.tsx
@@ -3,6 +3,8 @@ import {IconButton, Paper, Typography} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import type {messageType} from "./App";
+import {outsideColors, appColors} from "./App";
+
type IProps = {
singleMessage: messageType,
@@ -60,7 +62,8 @@ export default class Message extends React.Component<IProps>{
sx={{
padding: 1,
margin: 1.5,
- width: "fit-content"
+ width: "fit-content",
+ bgcolor: appColors.messageColor
}}
>
{this.props.singleMessage.message}
diff --git a/messages-app-frontend/src/Welcome.tsx b/messages-app-frontend/src/Welcome.tsx
index a53143d..cefc14d 100644
--- a/messages-app-frontend/src/Welcome.tsx
+++ b/messages-app-frontend/src/Welcome.tsx
@@ -1,12 +1,14 @@
import React from 'react';
import {Typography, Box} from '@mui/material';
+import {outsideColors, appColors} from "./App";
export default class Welcome extends React.Component{
render(): React.ReactNode {
return(
<Box
sx={{
- bgcolor: 'white',
+ bgcolor: outsideColors.discordMessageBox,
+ //color: "white",
marginX: 10,
padding: 1,
marginY: 2,
@@ -14,7 +16,7 @@ export default class Welcome extends React.Component{
boxShadow: 20
}}
>
- <Typography variant="h3" sx={{textAlign: "center", margin: 3}}>
+ <Typography variant="h3" sx={{textAlign: "center", margin: 3, color: appColors.messageColor}}>
Welcome to my Messaging Application!
</Typography>
</Box>
diff --git a/messages-app-frontend/src/index.tsx b/messages-app-frontend/src/index.tsx
index 2922a97..451e5db 100644
--- a/messages-app-frontend/src/index.tsx
+++ b/messages-app-frontend/src/index.tsx
@@ -3,12 +3,34 @@ import ReactDOM from 'react-dom/client';
import {App} from './App';
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";
+import {outsideColors} from "./App";
+
+/*
+export const colors = {
+ discord: "#313339",
+ discord2: "#2b2d31",
+ discord3: "#232428",
+ discord4: "#2e3034",
+ vsCode: "#1e1e1e",
+ vsCode2: "#252526",
+ yt: "#0f0f0f"
+}
+*/
+/*
+const discord = "#313339";
+const discord2 = "#2b2d31";
+const discord3 = "#232428";
+const vsCode = "#1e1e1e";
+const vsCode2 = "#252526";
+const yt = "#0f0f0f";
+*/
const myTheme = createTheme({
palette: {
background: {
- default: "grey"
+ //default: "lightgrey"
+ default: outsideColors.discordOutside
}
}
});
--
GitLab