[MM-108]

Changed the name of svg icons Added padding to different css removing unused dependancy
Brightscout · Sep 14, 2023 · ee44476 · ee44476
1 parent 369219f
commit ee44476
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 68 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -61,7 +61,6 @@
     "webpack-cli": "3.3.12"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.9.5",
     "core-js": "3.6.5",
     "js-cookie": "3.0.5",
     "mattermost-redux": "5.27.0",

diff --git a/webapp/src/api/api_wrapper.ts b/webapp/src/api/api_wrapper.ts
@@ -2,19 +2,23 @@ import Utils from 'utils';
 
 export const fetchChannels = async (mmSiteUrl: string) => {
     const url = Utils.getBaseUrls(mmSiteUrl).mattermostApiBaseUrl + '/channels?exclude_default_channels=true';
+
     const response = await fetch(url, {
         method: 'GET',
         headers: {Authentication: Utils.getAuthToken()},
     });
+
     return response.json();
 };
 
 export const fetchTeams = async (mmSiteUrl: string) => {
     const url = Utils.getBaseUrls(mmSiteUrl).mattermostApiBaseUrl + '/teams';
+
     const response = await fetch(url, {
         method: 'GET',
         headers: {Authentication: Utils.getAuthToken()},
     });
+
     return response.json();
 };
 
diff --git a/webapp/src/components/modals/configModal.tsx b/webapp/src/components/modals/configModal.tsx
@@ -15,7 +15,7 @@ import {GlobalState} from 'mattermost-redux/types/store';
 
 import {fetchChannels, fetchTeams} from 'api/api_wrapper';
 
-import {DeleteSvg, EditSvg} from '../svgIcons/svg';
+import {DeleteIcon, EditIcon} from '../svgIcons/svg';
 
 import './styles.scss';
 
@@ -585,15 +585,15 @@ const ConfigModal = ({visibility, setVisibility, configIndex, config, onChange,
                                                             overlay={<Tooltip>{'Edit action'}</Tooltip>}
                                                         >
                                                             <Button onClick={() => handleEditAction(i)}>
-                                                                <EditSvg/>
+                                                                <EditIcon/>
                                                             </Button>
                                                         </OverlayTrigger>
                                                         <OverlayTrigger
                                                             placement='top'
                                                             overlay={<Tooltip>{'Delete action'}</Tooltip>}
                                                         >
                                                             <Button onClick={() => handleActionDelete(i, val.actionName)}>
-                                                                <DeleteSvg/>
+                                                                <DeleteIcon/>
                                                             </Button>
                                                         </OverlayTrigger>
                                                     </ButtonGroup>

diff --git a/webapp/src/components/modals/styles.scss b/webapp/src/components/modals/styles.scss
@@ -32,10 +32,12 @@
 	.modal-header {
 		display: flex;
 	}
+
 	.modal-body {
 		display: flex;
 		flex-direction: column;
 	}
+
 	width: 615px;
 	max-width: 615px;
 }
@@ -58,14 +60,17 @@
 .btn-group {
 	display: flex;
 	justify-content: space-between;
+
 	.btn.btn-default {
 		background: none;
 		border-color: transparent;
 		border: transparent;
+
 		&:hover {
 			background: transparent;
 			color: #000000;
 		}
+
 		&:focus {
 			background: transparent;
 			color: #000000;
@@ -89,7 +94,7 @@
 }
 
 .radio-form {
-	margin-bottom: 0px;
+	margin-bottom: 0;
 }
 
 .add-actions {
@@ -122,6 +127,7 @@
 .warning {
 	margin-bottom: 27px;
 	color: #000000;
+
 	.form-group {
 		position: relative;
 	}
@@ -138,6 +144,7 @@
 
 .warnings {
 	margin-bottom: 25px;
+
 	.form-group {
 		position: relative;
 	}
@@ -231,6 +238,7 @@
 				}
 			}
 		}
+
 		thead {
 			tr {
 				th {
@@ -241,27 +249,33 @@
 					}
 				}
 			}
+
 			border: 1px solid #dddddd;
 			vertical-align: middle;
 			width: 100%;
 		}
+
 		td {
 			text-align: center;
 			vertical-align: middle;
 		}
+
 		th {
 			text-align: center;
 			vertical-align: bottom;
 		}
+
 		width: 100%;
 		margin-top: 0;
 		margin-bottom: 0;
 		table-layout: fixed;
+
 		tr {
 			display: flex;
 			width: 100%;
 		}
 	}
+
 	th {
 		text-align: center;
 	}

diff --git a/webapp/src/components/svgIcons/svg.tsx b/webapp/src/components/svgIcons/svg.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const EditSvg = () => (
+const EditIcon = () => (
     <svg
         className='svg'
         xmlns='http://www.w3.org/2000/svg'
@@ -18,7 +18,7 @@ const EditSvg = () => (
     </svg>
 );
 
-const DeleteSvg = () => (
+const DeleteIcon = () => (
     <svg
         className='svg'
         xmlns='http://www.w3.org/2000/svg'
@@ -48,7 +48,7 @@ const DeleteSvg = () => (
     </svg>
 );
 
-const ViewSvg = () => (
+const ViewIcon = () => (
     <svg
         xmlns='http://www.w3.org/2000/svg'
         width='16'
@@ -69,4 +69,4 @@ const ViewSvg = () => (
     </svg>
 );
 
-export {EditSvg, DeleteSvg, ViewSvg};
+export {EditIcon, DeleteIcon, ViewIcon};
diff --git a/webapp/src/components/tables/existingConfigTable.tsx b/webapp/src/components/tables/existingConfigTable.tsx
@@ -6,7 +6,7 @@ import ActionModal from '../modals/actionModal';
 import DeleteModal from '../modals/deleteModal';
 import ConfigModal from '../modals/configModal';
 
-import {DeleteSvg, EditSvg, ViewSvg} from '../svgIcons/svg';
+import {DeleteIcon, EditIcon, ViewIcon} from '../svgIcons/svg';
 
 import './styles.scss';
 
@@ -80,6 +80,7 @@ const ExistingConfigTable = ({value, onChange}: Props) => {
                     modalHeader='Add Config'
                 />
             }
+
             <FormGroup>
                 <div className='name'>
                     {'Existing Configs'}
@@ -137,7 +138,7 @@ const ExistingConfigTable = ({value, onChange}: Props) => {
                                                                 className='svg-buttons'
                                                                 onClick={() => handleView(i)}
                                                             >
-                                                                <ViewSvg/>
+                                                                <ViewIcon/>
                                                             </Button>
                                                         </OverlayTrigger>
                                                         <OverlayTrigger
@@ -148,7 +149,7 @@ const ExistingConfigTable = ({value, onChange}: Props) => {
                                                                 className='svg-buttons'
                                                                 onClick={() => handleEdit(i)}
                                                             >
-                                                                <EditSvg/>
+                                                                <EditIcon/>
                                                             </Button>
                                                         </OverlayTrigger>
                                                         <OverlayTrigger
@@ -159,7 +160,7 @@ const ExistingConfigTable = ({value, onChange}: Props) => {
                                                                 className='svg-buttons'
                                                                 onClick={() => handleDelete(i)}
                                                             >
-                                                                <DeleteSvg/>
+                                                                <DeleteIcon/>
                                                             </Button>
                                                         </OverlayTrigger>
                                                     </ButtonGroup>

diff --git a/webapp/src/components/tables/styles.scss b/webapp/src/components/tables/styles.scss
@@ -3,6 +3,7 @@
 	justify-content: space-between;
 	gap: 10px;
 	gap: 1px;
+
 	.btn.btn-default {
 		background: none;
 		border-color: transparent;
@@ -19,6 +20,7 @@
 			}
 		}
 	}
+
 	thead {
 		tr {
 			th {
@@ -39,12 +41,15 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+
 	th {
 		text-align: center;
 		vertical-align: bottom;
 	}
+
 	width: 100%;
 	table-layout: fixed;
+
 	thead {
 		tr {
 			th {
@@ -54,6 +59,7 @@
 			}
 		}
 	}
+
 	.messageValue {
 		text-align: left;
 		vertical-align: middle;
@@ -88,7 +94,7 @@
 
 .config {
 	.form-group {
-		margin-left: 0px;
+		margin-left: 0;
 	}
 }
 
@@ -143,6 +149,7 @@
 		outline: none;
 		box-shadow: none;
 	}
+
 	&:active {
 		outline: none;
 		box-shadow: none;