Managed application colors

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", 

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}

messages-app-frontend/src/Welcome.tsx

 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>

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
     }
   }
 });