From 283a2043e5e08a41677389c3afa468644a12e0ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Sepp=C3=A4?= <joasep@utu.fi>
Date: Tue, 14 Mar 2023 16:09:06 +0200
Subject: [PATCH] Fixing colors when editing a message
---
messages-app-frontend/src/App.tsx | 12 +++++++-----
messages-app-frontend/src/Message.tsx | 4 ++--
messages-app-frontend/src/Welcome.tsx | 6 +++---
messages-app-frontend/src/index.tsx | 5 ++---
4 files changed, 14 insertions(+), 13 deletions(-)
diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx
index 56296aa..a9bb053 100644
--- a/messages-app-frontend/src/App.tsx
+++ b/messages-app-frontend/src/App.tsx
@@ -5,7 +5,7 @@ import NewMessage from "./NewMessage";
import Welcome from "./Welcome";
import Message from "./Message";
-export const outsideColors = {
+const outsideColors = {
discordMessageBox: "#313339",
discordOutside: "#2b2d31",
discordOutside2: "#232428",
@@ -17,8 +17,9 @@ export const outsideColors = {
}
export const appColors = {
- //messageColor: "#008B8B"
- messageColor: "#A5A6A8"
+ outsideColor: outsideColors.discordOutside,
+ outsideBoxColor: outsideColors.discordMessageBox,
+ singleMessageBoxColor: "#A5A6A8"
}
export type messageType = {
@@ -48,7 +49,7 @@ const api = axios.create({
});
const messageBox = {
- bgcolor: outsideColors.discordMessageBox,
+ bgcolor: appColors.outsideBoxColor,
marginX: 10,
padding: 3,
display: "grid",
@@ -117,7 +118,8 @@ export class App extends React.Component{
sx={{
padding: 1,
margin: 1.5,
- width: "fit-content"
+ width: "fit-content",
+ backgroundColor: appColors.singleMessageBoxColor
}}
>
diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx
index 5e340d0..0d7beb4 100644
--- a/messages-app-frontend/src/Message.tsx
+++ b/messages-app-frontend/src/Message.tsx
@@ -3,7 +3,7 @@ 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";
+import {appColors} from "./App";
type IProps = {
@@ -63,7 +63,7 @@ export default class Message extends React.Component<IProps>{
padding: 1,
margin: 1.5,
width: "fit-content",
- bgcolor: appColors.messageColor
+ bgcolor: appColors.singleMessageBoxColor
}}
>
{this.props.singleMessage.message}
diff --git a/messages-app-frontend/src/Welcome.tsx b/messages-app-frontend/src/Welcome.tsx
index cefc14d..1c9515f 100644
--- a/messages-app-frontend/src/Welcome.tsx
+++ b/messages-app-frontend/src/Welcome.tsx
@@ -1,13 +1,13 @@
import React from 'react';
import {Typography, Box} from '@mui/material';
-import {outsideColors, appColors} from "./App";
+import {appColors} from "./App";
export default class Welcome extends React.Component{
render(): React.ReactNode {
return(
<Box
sx={{
- bgcolor: outsideColors.discordMessageBox,
+ bgcolor: appColors.outsideBoxColor,
//color: "white",
marginX: 10,
padding: 1,
@@ -16,7 +16,7 @@ export default class Welcome extends React.Component{
boxShadow: 20
}}
>
- <Typography variant="h3" sx={{textAlign: "center", margin: 3, color: appColors.messageColor}}>
+ <Typography variant="h3" sx={{textAlign: "center", margin: 3, color: appColors.singleMessageBoxColor}}>
Welcome to my Messaging Application!
</Typography>
</Box>
diff --git a/messages-app-frontend/src/index.tsx b/messages-app-frontend/src/index.tsx
index 451e5db..e57cf79 100644
--- a/messages-app-frontend/src/index.tsx
+++ b/messages-app-frontend/src/index.tsx
@@ -1,9 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import {App} from './App';
+import {App, appColors} from './App';
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";
-import {outsideColors} from "./App";
/*
export const colors = {
@@ -30,7 +29,7 @@ const myTheme = createTheme({
palette: {
background: {
//default: "lightgrey"
- default: outsideColors.discordOutside
+ default: appColors.outsideColor
}
}
});
--
GitLab