Add secondary features to the calling interface UI
GitLab: #58
Change-Id: I86c813e63f74e5a36b92a2f4af8ca61a72381040
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index d300aa7..9e560dc 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -257,12 +257,16 @@
export const ExtensionIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 24 24">
- <path
- stroke="#ffffff"
- strokeWidth="1.5"
- fill="none"
- d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
- />
+ <g id="Icons_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+ <g id="Plugin" fill="#000000" fillRule="nonzero" stroke="#ffffff" strokeWidth="1">
+ <g id="noun_add-on-plugin_2469914" transform="translate(2.000000, 2.000000)">
+ <path
+ d="M7.95454545,-2.58379177e-14 C6.07714045,-2.58379177e-14 4.54545455,1.53168636 4.54545455,3.40909091 C4.54545455,3.81146364 4.63639864,4.18709545 4.765625,4.54545455 L0.454545455,4.54545455 C0.203517329,4.54547964 -3.28047432e-07,4.74897187 -3.28047432e-07,5 L-3.28047432e-07,9.54545909 C-3.28047432e-07,9.69805849 0.0762260247,9.84056553 0.20341697,9.92488084 C0.330607915,10.0091961 0.49161786,10.0240699 0.632102273,9.96448182 C0.928123182,9.84116364 1.2500475,9.77273182 1.59090909,9.77273182 C2.977005,9.77273182 4.09090909,10.8866409 4.09090909,12.2727318 C4.09090909,13.6588227 2.977005,14.7727318 1.59090909,14.7727318 C1.2500475,14.7727318 0.928123182,14.7043 0.632102273,14.5809591 C0.491614149,14.5213694 0.330599681,14.5362456 0.203407479,14.6205663 C0.0762152768,14.704887 -3.28047432e-07,14.8474011 -3.28047432e-07,15 L-3.28047432e-07,19.5454591 C-3.28047432e-07,19.7964872 0.203517329,20 0.454545455,20 L15.4545455,20 C15.7055736,20 15.9090658,19.7964872 15.9090909,19.5454591 L15.9090909,15.6108 C16.1285164,15.6553682 16.3589991,15.6818227 16.5909091,15.6818227 C18.4683141,15.6818227 19.9999997,14.1501409 19.9999997,12.2727318 C19.9999997,10.3953227 18.4683141,8.86363636 16.5909091,8.86363636 C16.3589991,8.86363636 16.1285164,8.89009545 15.9090909,8.93465909 L15.9090909,5 C15.9090658,4.74897187 15.7055736,4.54547964 15.4545455,4.54545455 L11.1434659,4.54545455 C11.2726923,4.18709545 11.3636364,3.81146364 11.3636364,3.40909091 C11.3636364,1.53168636 9.83195045,-2.58379177e-14 7.95454545,-2.58379177e-14 L7.95454545,-2.58379177e-14 Z M7.95454545,0.909090909 C9.34064136,0.909090909 10.4545455,2.02299545 10.4545455,3.40909091 C10.4545455,3.90517045 10.3070727,4.36090227 10.0568182,4.75142045 C9.96529803,4.89157836 9.95820859,5.07069263 10.0383647,5.21764558 C10.1185209,5.36459852 10.272952,5.45561067 10.4403409,5.45454545 L15,5.45454545 L15,9.54545909 C14.9998246,9.69805849 15.076226,9.84056553 15.203417,9.92488084 C15.3306079,10.0091961 15.4916179,10.0240699 15.6321023,9.96448182 C15.928123,9.84116364 16.2500475,9.77273182 16.5909091,9.77273182 C17.977005,9.77273182 19.0909091,10.8866409 19.0909091,12.2727318 C19.0909091,13.6588227 17.977005,14.7727318 16.5909091,14.7727318 C16.2500475,14.7727318 15.928123,14.7043 15.6321023,14.5809591 C15.4916141,14.5213694 15.3305997,14.5362456 15.2034075,14.6205663 C15.0762153,14.704887 14.999817,14.8474011 15,15.0000045 L15,19.0909136 L0.909090909,19.0909136 L0.909090909,15.6108 C1.12851636,15.6553682 1.35899909,15.6818227 1.59090909,15.6818227 C3.46831409,15.6818227 5,14.1501409 5,12.2727318 C5,10.3953227 3.46831409,8.86363636 1.59090909,8.86363636 C1.35899909,8.86363636 1.12851636,8.89009545 0.909090909,8.93465909 L0.909090909,5.45454545 L5.46875,5.45454545 C5.6361389,5.45561067 5.79057002,5.36459852 5.87072617,5.21764558 C5.95088232,5.07069263 5.94379288,4.89157836 5.85227273,4.75142045 C5.60201818,4.36090227 5.45454545,3.90517045 5.45454545,3.40909091 C5.45454545,2.02299545 6.56844955,0.909090909 7.95454545,0.909090909 L7.95454545,0.909090909 Z"
+ id="Shape"
+ ></path>
+ </g>
+ </g>
+ </g>
</SvgIcon>
);
};
@@ -276,6 +280,14 @@
);
};
+export const ExpandLessIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 25 25">
+ <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+ </SvgIcon>
+ );
+};
+
export const EyeIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 15.931 10.568">
@@ -289,6 +301,18 @@
);
};
+export const FileIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <path
+ d="M14.2,2.3C14,2.1,13.7,2,13.4,2H5.5C4.8,2,4.3,2.5,4.3,3.2v6.3v1.6v9.7c0,0.7,0.5,1.2,1.2,1.2h13.1c0.7,0,1.2-0.5,1.2-1.2
+ V18V8.4c0-0.3-0.1-0.6-0.3-0.8L14.2,2.3z M18,7.7H14c0,0,0,0,0,0V3.7L18,7.7z M18.6,20.9C18.6,20.9,18.6,20.9,18.6,20.9l-13.1,0
+ c0,0,0,0,0,0v-9.7V9.5V3.2c0,0,0,0,0,0h7.4v4.5c0,0.7,0.5,1.2,1.2,1.2h4.5v9.2V20.9z"
+ />
+ </SvgIcon>
+ );
+};
+
export const FolderIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 17.504 14.812">
@@ -297,7 +321,7 @@
);
};
-export const FullscreenIcon = (props: SvgIconProps) => {
+export const FullScreenIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 24 24">
<g>
@@ -387,6 +411,18 @@
);
};
+export const MoreVerticalIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <g>
+ <circle cx="12" cy="4.3" r="2.3" />
+ <circle cx="12" cy="12" r="2.3" />
+ <circle cx="12" cy="19.7" r="2.3" />
+ </g>
+ </SvgIcon>
+ );
+};
+
export const MicroIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 24 24">
@@ -567,7 +603,32 @@
);
};
-export const ScreenShareIcon = (props: SvgIconProps) => {
+export const ScreenShareArrowIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <path id="Path" d="M12.6,8.9V7.7l2.6,2.2l-2.6,2.2V11c-3.4,0.1-4.3,2.6-4.3,2.6C8.5,9.6,11.7,9,12.6,8.9z" />
+ <g id="Icons_Outline">
+ <g id="Laptop_Black_24dp">
+ <g transform="translate(2.000000, 5.000000)">
+ <g id="Shape">
+ <path
+ d="M17.1,12.1H2.7c-0.5,0-0.9-0.2-1.2-0.5c-0.4-0.4-0.6-0.8-0.6-1.3v-9c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5h14.5
+ c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v9c0,0.5-0.2,0.9-0.5,1.2C18,11.8,17.6,12.1,17.1,12.1z M2.7,0.8
+ c-0.1,0-0.2,0.1-0.3,0.1c0,0.1-0.1,0.2-0.1,0.3v9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1h14.4c0.1,0,0.2-0.1,0.3-0.1
+ c0.1-0.1,0.1-0.2,0.1-0.3v-9c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17.1,0.8,2.7,0.8,2.7,0.8z"
+ />
+ </g>
+ <g id="Line-2">
+ <path d="M19.6,14.5H0.4c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h19.3c0.4,0,0.7,0.3,0.7,0.7S20,14.5,19.6,14.5z" />
+ </g>
+ </g>
+ </g>
+ </g>
+ </SvgIcon>
+ );
+};
+
+export const ScreenShareRegularIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 24 24">
<g id="Icons_Outline">
@@ -591,6 +652,38 @@
);
};
+export const ScreenShareScreenAreaIcon = (props: SvgIconProps) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 24 24">
+ <path
+ d="M19.7,16.4V7.6C21,7.4,22,6.2,22,4.9C22,3.3,20.7,2,19.1,2c-1.4,0-2.5,1-2.8,2.3H7.6C7.4,3,6.2,2,4.9,2C3.3,2,2,3.3,2,4.9
+ c0,1.4,1,2.5,2.3,2.8v8.7C3,16.6,2,17.8,2,19.1C2,20.7,3.3,22,4.9,22c1.4,0,2.5-1,2.8-2.2h8.7c0.3,1.3,1.4,2.2,2.8,2.2
+ c1.6,0,2.9-1.3,2.9-2.9C22,17.8,21,16.6,19.7,16.4z M18.5,11v2.9l-4.7,4.7H11L18.5,11z M5.5,13v-2.9l4.7-4.7H13L5.5,13z M19.1,17.5
+ c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C17.5,18.2,18.2,17.5,19.1,17.5z M4.9,17.5
+ c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6s-1.6-0.7-1.6-1.6C3.2,18.2,3.9,17.5,4.9,17.5z M5.8,16.8C5.8,16.8,5.8,16.8,5.8,16.8
+ L5.8,16.8L5.8,16.8z M6.3,17C6.3,17,6.3,17,6.3,17L6.3,17L6.3,17z M16.8,5.9L16.8,5.9L16.8,5.9L16.8,5.9z M16.7,6.4L6.4,16.7
+ c0,0-0.1-0.1-0.1-0.1l-0.1,0c0,0-0.1,0-0.2-0.1l-0.3-0.1c-0.1,0-0.1,0-0.2-0.1v-1.6l9.3-9.3h1.6c0,0.1,0,0.2,0.1,0.2
+ c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1l0,0.1c0,0.1,0,0.1,0.1,0.2l0,0.1C16.7,6.3,16.7,6.3,16.7,6.4L16.7,6.4z M18.2,7.2L18.2,7.2
+ L18.2,7.2L18.2,7.2z M7.1,17.9L7.1,17.9L7.1,17.9C7.1,17.9,7.1,17.9,7.1,17.9z M7.2,17.6L17.6,7.3c0,0,0.1,0.1,0.1,0.1l0.1,0
+ c0,0,0.1,0,0.2,0.1l0.3,0.1c0.1,0,0.1,0,0.2,0.1v1.6c0,0,0,0,0,0l-9.3,9.3H7.6c0-0.1,0-0.2-0.1-0.2l0-0.1c0,0,0-0.1,0-0.1l0-0.1
+ c0-0.1,0-0.1-0.1-0.1l0-0.1C7.3,17.7,7.3,17.7,7.2,17.6L7.2,17.6z M19.1,6.5c-0.4,0-0.8-0.2-1.1-0.4L18,6c0,0-0.1-0.1-0.1-0.1
+ c-0.3-0.3-0.4-0.7-0.4-1.1c0-0.9,0.7-1.6,1.6-1.6c0.9,0,1.6,0.7,1.6,1.6C20.8,5.8,20,6.5,19.1,6.5z M16.7,5.7L16.7,5.7
+ C16.7,5.7,16.7,5.7,16.7,5.7L16.7,5.7z M4.9,6.5c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.6,1.6-1.6S6.5,4,6.5,4.9
+ C6.5,5.8,5.8,6.5,4.9,6.5z M6.3,7L6.3,7L6.3,7L6.3,7z M6.1,7.1L6.1,7.1L6.1,7.1L6.1,7.1z M5.9,7.2L5.9,7.2L5.9,7.2L5.9,7.2z
+ M5.7,7.3L5.7,7.3L5.7,7.3C5.7,7.3,5.7,7.3,5.7,7.3z M5.3,7.4L5.3,7.4L5.3,7.4L5.3,7.4z M5.5,8.4V7.6c0.1,0,0.2,0,0.2-0.1l0.1,0
+ c0,0,0.1,0,0.1,0l0.1,0c0.1,0,0.1,0,0.1-0.1l0.1,0c0,0,0.1,0,0.1-0.1l0.1-0.1c0,0,0.1-0.1,0.1-0.1l0.1,0C6.7,7,6.8,6.9,6.9,6.9
+ C6.9,6.8,7,6.7,7,6.7l0.2-0.3c0,0,0.1-0.1,0.1-0.1l0-0.1c0,0,0-0.1,0.1-0.2c0,0,0-0.1,0-0.1l0.1-0.2c0-0.1,0-0.1,0.1-0.2h0.8
+ L5.5,8.4z M6.9,6.4L6.9,6.4L6.9,6.4C6.9,6.4,6.9,6.4,6.9,6.4z M7.3,18.3L7.3,18.3C7.3,18.3,7.3,18.3,7.3,18.3L7.3,18.3z M17.7,17
+ L17.7,17L17.7,17L17.7,17z M18.3,16.7L18.3,16.7L18.3,16.7C18.3,16.7,18.3,16.7,18.3,16.7z M18.5,15.6v0.8c-0.1,0-0.2,0-0.2,0.1
+ c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0l-0.1,0c-0.1,0-0.1,0-0.1,0.1l-0.1,0c0,0-0.1,0.1-0.2,0.1l-0.1,0c0,0-0.1,0.1-0.1,0.1l-0.1,0
+ c-0.1,0.1-0.1,0.1-0.2,0.2c-0.1,0.1-0.1,0.1-0.2,0.2l-0.2,0.2l0.2,0.2l-0.3-0.1c0,0-0.1,0.1-0.1,0.1l0,0.1c0,0-0.1,0.1-0.1,0.2
+ l-0.1,0.3c0,0.1,0,0.1-0.1,0.2h-0.8L18.5,15.6z M17.1,17.6L17.1,17.6L17.1,17.6L17.1,17.6z M16.8,18.2L16.8,18.2
+ C16.8,18.2,16.8,18.2,16.8,18.2L16.8,18.2z"
+ />
+ </SvgIcon>
+ );
+};
+
export const TrashBinIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props} viewBox="0 0 15.44 16">