From 120b7b0b96a1145be6b2367a7a359da55a6bb293 Mon Sep 17 00:00:00 2001
From: Scott Bishel <scott.bishel@mattermost.com>
Date: Tue, 9 Nov 2021 13:30:57 -0700
Subject: [PATCH] updated icons

---
 config.json                           |  3 +-
 webapp/src/components/viewMenu.tsx    |  1 +
 webapp/src/widgets/icons/board.tsx    | 57 +++++++++++-------
 webapp/src/widgets/icons/calendar.tsx | 84 ++++++++++++++++++++++-----
 webapp/src/widgets/icons/table.tsx    | 58 ++++++++++++++----
 5 files changed, 156 insertions(+), 47 deletions(-)

diff --git a/config.json b/config.json
index 0b806822f..12e8e5620 100644
--- a/config.json
+++ b/config.json
@@ -21,5 +21,6 @@
 	"authMode": "native",
 	"logging_cfg_file": "",
 	"audit_cfg_file": "",
-	"enablepublicsharedboards": false
+	"enablepublicsharedboards": false,
+	"featureflags": [{"CalendarView": "true"}]
 }
diff --git a/webapp/src/components/viewMenu.tsx b/webapp/src/components/viewMenu.tsx
index 6cb433be5..f9cbd7343 100644
--- a/webapp/src/components/viewMenu.tsx
+++ b/webapp/src/components/viewMenu.tsx
@@ -235,6 +235,7 @@ const ViewMenu = React.memo((props: Props) => {
         case 'board': return <BoardIcon/>
         case 'table': return <TableIcon/>
         case 'gallery': return <GalleryIcon/>
+        case 'calendar': return <CalendarIcon/>
         default: return <div/>
         }
     }
diff --git a/webapp/src/widgets/icons/board.tsx b/webapp/src/widgets/icons/board.tsx
index d01409227..4011beb39 100644
--- a/webapp/src/widgets/icons/board.tsx
+++ b/webapp/src/widgets/icons/board.tsx
@@ -10,28 +10,43 @@ export default function BoardIcon(): JSX.Element {
         <svg
             xmlns='http://www.w3.org/2000/svg'
             className='BoardIcon Icon'
-            viewBox='0 0 100 100'
+            width='24'
+            height='24'
+            viewBox='0 0 24 24'
+            fill='none'
         >
-            <rect
-                x='10'
-                y='10'
-                width='80'
-                height='80'
-                rx='5'
-                ry='5'
-            />
-            <polyline
-                points='28,25 28,55'
-                style={{strokeWidth: '15px'}}
-            />
-            <polyline
-                points='50,25 50,70'
-                style={{strokeWidth: '15px'}}
-            />
-            <polyline
-                points='72,25 72,45'
-                style={{strokeWidth: '15px'}}
-            />
+            <g opacity='0.64'>
+                <rect
+                    x='3'
+                    y='3'
+                    width='18'
+                    height='18'
+                    rx='1'
+                    stroke='white'
+                    strokeWidth='2'
+                />
+                <rect
+                    x='6'
+                    y='6'
+                    width='2'
+                    height='6'
+                    fill='white'
+                />
+                <rect
+                    x='11'
+                    y='6'
+                    width='2'
+                    height='10'
+                    fill='white'
+                />
+                <rect
+                    x='16'
+                    y='6'
+                    width='2'
+                    height='3'
+                    fill='white'
+                />
+            </g>
         </svg>
     )
 }
diff --git a/webapp/src/widgets/icons/calendar.tsx b/webapp/src/widgets/icons/calendar.tsx
index aeb79a627..cf922ff77 100644
--- a/webapp/src/widgets/icons/calendar.tsx
+++ b/webapp/src/widgets/icons/calendar.tsx
@@ -8,21 +8,79 @@ import './calendar.scss'
 export default function CalendarIcon(): JSX.Element {
     return (
         <svg
-            xmlns='http://www.w3.org/2000/svg'
+            width='24'
+            height='24'
+            viewBox='0 0 24 24'
+            fill='none'
             className='CalendarIcon Icon'
-            viewBox='0 0 100 100'
+            xmlns='http://www.w3.org/2000/svg'
         >
-            <rect
-                x='10'
-                y='10'
-                width='80'
-                height='80'
-                rx='5'
-                ry='5'
-            />
-            <polyline points='37,10 37,90'/>
-            <polyline points='10,37 90,37'/>
-            <polyline points='10,63 90,63'/>
+            <g opacity='0.64'>
+                <rect
+                    x='3'
+                    y='3'
+                    width='18'
+                    height='18'
+                    rx='1'
+                    stroke='white'
+                    strokeWidth='2'
+                />
+                <rect
+                    x='20'
+                    y='7'
+                    width='2'
+                    height='16'
+                    transform='rotate(90 20 7)'
+                    fill='white'
+                />
+                <rect
+                    x='6'
+                    y='11'
+                    width='2'
+                    height='2'
+                    fill='white'
+                />
+                <rect
+                    x='8'
+                    y='15'
+                    width='2'
+                    height='2'
+                    transform='rotate(90 8 15)'
+                    fill='white'
+                />
+                <rect
+                    x='13'
+                    y='11'
+                    width='2'
+                    height='2'
+                    transform='rotate(90 13 11)'
+                    fill='white'
+                />
+                <rect
+                    x='13'
+                    y='15'
+                    width='2'
+                    height='2'
+                    transform='rotate(90 13 15)'
+                    fill='white'
+                />
+                <rect
+                    x='18'
+                    y='11'
+                    width='2'
+                    height='2'
+                    transform='rotate(90 18 11)'
+                    fill='white'
+                />
+                <rect
+                    x='18'
+                    y='15'
+                    width='2'
+                    height='2'
+                    transform='rotate(90 18 15)'
+                    fill='white'
+                />
+            </g>
         </svg>
     )
 }
diff --git a/webapp/src/widgets/icons/table.tsx b/webapp/src/widgets/icons/table.tsx
index 006bc31be..351eabf65 100644
--- a/webapp/src/widgets/icons/table.tsx
+++ b/webapp/src/widgets/icons/table.tsx
@@ -8,21 +8,55 @@ import './table.scss'
 export default function TableIcon(): JSX.Element {
     return (
         <svg
+            width='24'
+            height='24'
+            viewBox='0 0 24 24'
+            fill='none'
             xmlns='http://www.w3.org/2000/svg'
             className='TableIcon Icon'
-            viewBox='0 0 100 100'
         >
-            <rect
-                x='10'
-                y='10'
-                width='80'
-                height='80'
-                rx='5'
-                ry='5'
-            />
-            <polyline points='37,10 37,90'/>
-            <polyline points='10,37 90,37'/>
-            <polyline points='10,63 90,63'/>
+            <g opacity='0.64'>
+                <rect
+                    x='3'
+                    y='3'
+                    width='18'
+                    height='18'
+                    rx='1'
+                    stroke='white'
+                    strokeWidth='2'
+                />
+                <rect
+                    x='8'
+                    y='4'
+                    width='2'
+                    height='16'
+                    fill='white'
+                />
+                <rect
+                    x='20'
+                    y='8'
+                    width='2'
+                    height='16'
+                    transform='rotate(90 20 8)'
+                    fill='white'
+                />
+                <rect
+                    x='20'
+                    y='8'
+                    width='2'
+                    height='16'
+                    transform='rotate(90 20 8)'
+                    fill='white'
+                />
+                <rect
+                    x='20'
+                    y='14'
+                    width='2'
+                    height='16'
+                    transform='rotate(90 20 14)'
+                    fill='white'
+                />
+            </g>
         </svg>
     )
 }