fix api calls for contacts CRUD and start adding styles for dropdown in conversation list

Change-Id: I7874ddef22e95a26b4ab99b3ae974b204e678c59
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index 5f5dc35..839a6d1 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -146,7 +146,7 @@
 export const PaperClipIcon = (props) => {
     return(
         <SvgIcon {...props} viewBox="0 0 12.208 25.75">
-            <path 
+            <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"
             />
@@ -173,10 +173,162 @@
 }
 
 export const RoundCrossIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 16 16">
-            <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
-            <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
+      <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
+    </SvgIcon>
+  );
+};
+
+export const MessageIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 14.554">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="14.554"
+        viewBox="0 0 16 14.554"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-3.7 -4.4)">
+          <g transform="translate(3.7 4.4)">
+            <g transform="translate(0 0)">
+              <path
+                class="a"
+                d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
+                transform="translate(-0.7 -0.4)"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const AudioCallIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 15.338 16">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="15.338"
+        height="16"
+        viewBox="0 0 15.338 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-2.404 -1.956)">
+          <g transform="translate(2.404 1.956)">
+            <g transform="translate(0)">
+              <path
+                class="a"
+                d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
+                transform="translate(0.596 1.044)"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const VideoCallIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 12">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="12"
+        viewBox="0 0 16 12"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-4.4 -6)">
+          <g transform="translate(4.4 6)">
+            <path
+              class="a"
+              d="M12.485,13H2.759C1.923,13,1.4,12.5,1.4,11.9V2.1A1.166,1.166,0,0,1,2.655,1H12.38a1.073,1.073,0,0,1,1.15,1.1V3.6l2.2-1.3a1.173,1.173,0,0,1,1.15,0,.993.993,0,0,1,.523.9v7.7a.842.842,0,0,1-.523.9.832.832,0,0,1-1.046-.1l-2.2-1.3v1.5A1.073,1.073,0,0,1,12.485,13ZM2.55,11.9Zm0,0H12.59V9.4c-.1-.2-.1-.3.209-.4a.485.485,0,0,1,.523,0l2.824,1.7V3.4L13.322,5A.485.485,0,0,1,12.8,5a.537.537,0,0,1-.314-.4V2.1H2.759c-.209,0-.209.1-.209.1Z"
+              transform="translate(-1.4 -1)"
+            />
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const ContactDetailsIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 14.647 16">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14.647"
+        height="16"
+        viewBox="0 0 14.647 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <path
+          class="a"
+          d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
+          transform="translate(-2.9 -2)"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const BlockContactIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 15.52">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-2 -2.3)">
+          <path
+            class="a"
+            d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
+            transform="translate(-1.96 -1.84)"
+          />
+          <path
+            class="a"
+            d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const RemoveContactIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-2 -2)">
+          <g transform="translate(2 2)">
+            <path
+              class="a"
+              d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
+            />
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};