set message bar styles

Change-Id: Iecb869964b83a7582228f2577502392d1fe9943d
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index bd14ced..5f5dc35 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -20,6 +20,14 @@
     )
 }
 
+export const Arrow2Icon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 21.776 20.23">
+            <path style={{fill:"none", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:"1.75px"}} d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z" transform="translate(.903 .901)"/>
+        </SvgIcon>
+    )
+}
+
 export const CameraIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="2 3 20 19">
@@ -28,6 +36,15 @@
     )
 }
 
+export const CameraInBubbleIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 25 25">
+            <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z"/>
+            <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z"/>
+        </SvgIcon>
+    )
+}
+
 export const CancelIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="2 2 20 20">
@@ -62,6 +79,15 @@
     )
 }
 
+export const EmojiIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 25 25">
+            <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z"/>
+            <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z"/>
+        </SvgIcon>
+    )
+}
+
 export const EyeIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="0 0 15.931 10.568">
@@ -101,6 +127,33 @@
     )
 }
 
+export const MicroInBubbleIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 25 25">
+            <g transform="translate(-2 -2)">
+                <g transform="translate(2 2)">
+                    <path d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z" transform="translate(-2 -2)"/>
+                    <path d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z" transform="translate(-0.35 0.025)"/>
+                </g>
+                <g transform="translate(12.625 8.5)">
+                    <path d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z" transform="translate(-10.5 -7.2)"/>
+                </g>
+            </g>
+        </SvgIcon>
+    )
+}
+
+export const PaperClipIcon = (props) => {
+    return(
+        <SvgIcon {...props} viewBox="0 0 12.208 25.75">
+            <path 
+                style={{ fill:"#7e7e7e", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:".75px" }}
+                d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
+            />
+        </SvgIcon>
+    )
+}
+
 export const PenIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="0 0 14.863 14.863">