From c69ba59668140aa255511eb5628dce6ccb22b6c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Sepp=C3=A4?= <joasep@utu.fi>
Date: Tue, 14 Mar 2023 19:52:26 +0200
Subject: [PATCH] Added better favicons, made a better looking new message
 -field

---
 .../public/apple-touch-icon.png               | Bin 0 -> 7278 bytes
 .../public/favicon-16x16.png                  | Bin 0 -> 392 bytes
 .../public/favicon-32x32.png                  | Bin 0 -> 719 bytes
 messages-app-frontend/public/favicon.ico      | Bin 0 -> 15406 bytes
 messages-app-frontend/public/index.html       |   4 +-
 messages-app-frontend/src/App.tsx             |  46 ++++++++++++++----
 messages-app-frontend/src/NewMessage.tsx      |  45 +++++++++++------
 7 files changed, 69 insertions(+), 26 deletions(-)
 create mode 100644 messages-app-frontend/public/apple-touch-icon.png
 create mode 100644 messages-app-frontend/public/favicon-16x16.png
 create mode 100644 messages-app-frontend/public/favicon-32x32.png
 create mode 100644 messages-app-frontend/public/favicon.ico

diff --git a/messages-app-frontend/public/apple-touch-icon.png b/messages-app-frontend/public/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b30e8071270ac254ca7ab54f296dfdfaf6732ba
GIT binary patch
literal 7278
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
O1B0ilpUXO@geCw8PYFH%

literal 0
HcmV?d00001

diff --git a/messages-app-frontend/public/favicon-16x16.png b/messages-app-frontend/public/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..15bdaef400811d4c95f0807e80598f91a6d78781
GIT binary patch
literal 392
zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s77>k44ofy`glX=O&!06=Z
z;uvD#zjU&%_hAQtw)=*@uN)Vyb@jA22^INb|HA(DO8djz<@)zT@|!AFJ#bv&;<IS2
zr*3Z41@F%fPv!Y^gk(5>-*V>M=QD3|oFa-YPO>?%fnEJl*Oin5RbrBi^B<PqSTy_F
z;<Z;pOu1#AN7)`<xVbxfS!k%qtEoPGo3jsBl{=L4%Pxz~KcUq5u=$wTioahD+1zi>
z(^K<2+@<5rbnmy)B#w8@;bBka>?l$a5IXOEyy9ryUL#{+KIvHL_G+mo@fB_cQvMg@
zcO~?6&dk{QqHxVTWi4UG=%+%bjyf5ASknBkqN#tO_N~WEc9XBx#Hsi#pV!f>@F=rW
zU`e8-_+4ENrw<nKPlFgOJ%y_6IsSRP`1Ea`xx~)UIK{T-wE`PciWg^Ge);q2$BX~`
xf&-sytxWiJ=kp=`zc+Jq{~M>S{1yL>KVk7oDXtAxjSLJ744$rjF6*2Ung9<wt=#|s

literal 0
HcmV?d00001

diff --git a/messages-app-frontend/public/favicon-32x32.png b/messages-app-frontend/public/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..3518af3ca65715dfdbc381d6b2bdc9791c19be44
GIT binary patch
literal 719
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}jKx9jP7LeL$-HD>VCwXA
zaSVxYe>;6|{w)WI_WRdeytp!tq#LNQE;2GHIeX;BKjGeA)3<t0U)6bI^3p8pl8mKp
zrve;TiLtPz7|6FZD7qeuDQ)ZKxv|5=H1b2*{L=Hq`@ip<+*@#7{GPG=HKr)0=Zju^
znS55cY4LKF!o%k_DJVKW*-^6C#=_1<<kt+%E6(S9|8#WtzhOCl&X?ooMR|?$A6|c-
ze|%xX`=eS9dqP*5`+q2X<zw059xK=wztTBy$^)bDfDfUsrUVoz$u)<122`lczAo02
zK7aqjpry<1u5ohW?{8^pcs^5RrD=*r=*%N_E-edmpU!AyubH=zL6Ifvtk{&?DKnb5
z9XTp&9}5LAZo3l|%w~Nmk!`;40{$g!f8r-cu$YT1c)H@WZmdxG`_4=Ye#Z6H>$WfR
zS|C4H@AxMn)xf4NDXTBO&1Et7Y4FVOG>I<1C0kVy^59_phN5GJz72Z=L{<k(zdgD5
zkQJwG&GqMv?hB7bS1oi1f9d$GT+;1H*<uH!JiWkG9uxkV+C6-6RPoT`7jkcMcKe(c
z4Q}ka)O?3!-+uK20ilgdH#$AT+bsUgTljQQ^2{8^-TiHq4<<C%L~fa4ATp!1`mXh@
zBVRTo3DxyWm(@OAx6btTg^b?QE)Pq3;)-@BYZ|I2u%%00I;P_{X~tPov1bR(8#fzj
zcWN?fTg={aH`HOutAfAj3v7$*ZZs7bBt*S-723}9pX>Vis8DwY`)pa6^jj%mo&k-k
z`!3zSXfCsQ=hHRb`wV6uIh>m=e!qTaMYKkE+@-Z{yYK4l2o#!F@IrQ<=iE=`Cu%!d
zf41B$*y|FwCQWAX#o}D$`cu!h$NZhG%$_GB;3VU%w)@KKjuop~V))iCnVe!&x%Z!O
dl==s8xBCkl1%9qM%D}+D;OXk;vd$@?2>_;JN|FEo

literal 0
HcmV?d00001

diff --git a/messages-app-frontend/public/favicon.ico b/messages-app-frontend/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f72be261832dfcc0ce393116647288074759f7d5
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/messages-app-frontend/public/index.html b/messages-app-frontend/public/index.html
index 699c64f..aa7ea84 100644
--- a/messages-app-frontend/public/index.html
+++ b/messages-app-frontend/public/index.html
@@ -3,7 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <title>Messages Application</title>
-    <link rel="icon" type="image/png" href="https://e7.pngegg.com/pngimages/198/585/png-clipart-chatbox-icon-computer-icons-message-sms-icon-message-miscellaneous-grass.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx
index 357fcf6..aa5fb7c 100644
--- a/messages-app-frontend/src/App.tsx
+++ b/messages-app-frontend/src/App.tsx
@@ -134,6 +134,7 @@ export class App extends React.Component{
           <Input 
             value={this.state.editedMessage} 
             onChange={(e) => this.setState({editedMessage: e.target.value})}
+            //multiline={true}
           /> 
           
           <Button 
@@ -179,11 +180,23 @@ export class App extends React.Component{
             {this.state.messages.map((p) => this.updatingMessage(p))}
           </Box>
 
-          <NewMessage 
-            inputValue={this.state.newMessage} 
-            createMessage={this.createMessage} 
-            onChangeValue={this.inputValueChanged}
-          />
+          <Box 
+            sx={{
+              bgcolor: appColors.outsideBoxColor,
+              //color: "white",
+              marginX: 30, 
+              padding: 1, 
+              marginY: 3, 
+              borderRadius: 5, 
+              boxShadow: 20
+            }}
+          >
+            <NewMessage 
+              inputValue={this.state.newMessage} 
+              createMessage={this.createMessage} 
+              onChangeValue={this.inputValueChanged}
+            />
+          </Box>
         </Container>
       )
     }
@@ -204,11 +217,24 @@ export class App extends React.Component{
             )}
           </Box>  
           
-          <NewMessage 
-            inputValue={this.state.newMessage} 
-            createMessage={this.createMessage} 
-            onChangeValue={this.inputValueChanged}
-          />
+          <Box 
+            sx={{
+              bgcolor: appColors.outsideBoxColor,
+              //color: "white",
+              marginX: 30, 
+              padding: 1, 
+              marginY: 3, 
+              borderRadius: 5, 
+              boxShadow: 20
+            }}
+          >
+            <NewMessage 
+              inputValue={this.state.newMessage} 
+              createMessage={this.createMessage} 
+              onChangeValue={this.inputValueChanged}
+            />
+                
+          </Box>
         </Container>
 
       )
diff --git a/messages-app-frontend/src/NewMessage.tsx b/messages-app-frontend/src/NewMessage.tsx
index d235a0e..0021465 100644
--- a/messages-app-frontend/src/NewMessage.tsx
+++ b/messages-app-frontend/src/NewMessage.tsx
@@ -1,32 +1,47 @@
 import React from 'react';
-import {Button, Box, Input} from '@mui/material';
+import {Button, Box, TextField} from '@mui/material';
 import SendIcon from '@mui/icons-material/Send';
 
+
 type IProps = {
     inputValue: string,
     createMessage: Function,
     onChangeValue: Function
 }
 
+const buttonMinWidth = 90;
+
 export default class NewMessage extends React.Component<IProps>{
 
+
     render(){
         return(
-            <Box sx={{textAlign: "center", paddingTop: 5}}>
-
-                <Input 
-                    value={this.props.inputValue} 
-                    onChange={(p) => this.props.onChangeValue(p.target.value)}
-                />
+            <Box sx={{textAlign: "center", paddingY: 3, display: "flex", flexDirection: "row"}}>
+                    
+                    <TextField
+                        label="Tell me something interesting!"
+                        multiline={true}
+                        //fullWidth={true}
+                        variant="outlined"
+                        color="secondary"
+                        //color="white"
+                        value={this.props.inputValue} 
+                        onChange={(p) => this.props.onChangeValue(p.target.value)}
+                        sx={{width: "100%", marginLeft: 3, marginRight: 1}}
+                        //type=""
+                    />
 
-                <Button 
-                    sx={{margin: 1.5}} 
-                    variant="contained" 
-                    endIcon={<SendIcon />} 
-                    onClick={() => this.props.createMessage()}
-                >
-                    Send
-                </Button>
+                    <Button
+                        color="secondary" 
+                        sx={{margin: 1.5, marginX: 3, minWidth: buttonMinWidth + "px"}} 
+                        variant="contained" 
+                        endIcon={<SendIcon />} 
+                        onClick={() => this.props.createMessage()}
+                        //type="submit"
+                        //disabled={submitting}
+                    >
+                        Send
+                    </Button>
                 
             </Box>
         )
-- 
GitLab