Use icons for edit/download.

Continues #33
mattermost · Feb 5, 2024 · e292051 · e292051
1 parent 343e0e8
commit e292051
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/webapp/src/components/legal_hold_table/legal_hold_row/download-outline_F0B8F.svg b/webapp/src/components/legal_hold_table/legal_hold_row/download-outline_F0B8F.svg
diff --git a/webapp/src/components/legal_hold_table/legal_hold_row/legal_hold_row.tsx b/webapp/src/components/legal_hold_table/legal_hold_row/legal_hold_row.tsx
@@ -4,6 +4,9 @@ import {UserProfile} from 'mattermost-redux/types/users';
 import {LegalHold} from '@/types';
 import Client from '@/client';
 
+import DownloadIcon from './download-outline_F0B8F.svg';
+import EditIcon from './pencil-outline_F0CB6.svg';
+
 interface LegalHoldRowProps {
     legalHold: LegalHold;
     users: UserProfile[];
@@ -35,19 +38,45 @@ const LegalHoldRow = (props: LegalHoldRowProps) => {
             <div>{startsAt}</div>
             <div>{endsAt}</div>
             <div>{props.users.length} {'users'}</div>
-            <div>
+            <div
+                style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                }}
+            >
                 <a
                     href='#'
                     onClick={() => props.showUpdateModal(lh)}
+                    style={{
+                        marginRight: "10px",
+                        height: "24px",
+                    }}
                 >
-                    {'Edit'}
+                    <span style={{
+                        fill: "rgba(0, 0, 0, 0.5)",
+                    }}>
+                        <EditIcon/>
+                    </span>
                 </a>
                 {' '}
-                <a href={downloadUrl}>{'Download'}</a>
+                <a
+                    href={downloadUrl}
+                    style={{
+                        marginRight: "10px",
+                        height: "24px",
+                    }}
+                >
+                    <span style={{
+                        fill: "rgba(0, 0, 0, 0.5)",
+                    }}>
+                        <DownloadIcon/>
+                    </span>
+                </a>
                 {' '}
                 <a
                     href='#'
                     onClick={release}
+                    className={"btn btn-danger"}
                 >{'Release'}</a>
             </div>
         </React.Fragment>

diff --git a/webapp/src/components/legal_hold_table/legal_hold_row/pencil-outline_F0CB6.svg b/webapp/src/components/legal_hold_table/legal_hold_row/pencil-outline_F0CB6.svg
diff --git a/webapp/src/components/legal_hold_table/legal_hold_table.tsx b/webapp/src/components/legal_hold_table/legal_hold_table.tsx
@@ -35,6 +35,7 @@ const LegalHoldTable = (props: LegalHoldTableProps) => {
                     gridTemplateColumns: 'auto auto auto auto auto',
                     columnGap: '10px',
                     rowGap: '10px',
+                    alignItems: "center",
                 }}
             >
                 <div style={{fontWeight: 'bold'}}>{'Name'}</div>