Started to refactor css

kopia · Sep 27, 2023 · 2263cdc · 2263cdc
1 parent 24feeda
commit 2263cdc
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 105 deletions.
diff --git a/src/DirectoryBreadcrumbs.jsx b/src/DirectoryBreadcrumbs.jsx
@@ -20,15 +20,15 @@ export function DirectoryBreadcrumbs() {
                 breadcrumbs.map((state, i) => {
                     const index = breadcrumbs.length - i - 1 // revert index
                     return <Breadcrumb.Item key={index} size="sm" variant="outline-secondary"
-                                            onClick={() => {
-                                                if (index) history.go(-index);
-                                            }}
-                                            active={!index}>
+                        onClick={() => {
+                            if (index) history.go(-index);
+                        }}
+                        active={!index}>
                         {state.label}
                         {state.oid && !index && <>&nbsp;<OverlayTrigger placement="top"
-                                               trigger="click"
-                                               overlay={<Tooltip
-                                                   className={"wide-tooltip"}>OID: {state.oid}</Tooltip>}
+                            trigger="click"
+                            overlay={<Tooltip
+                                className={"wide-tooltip"}>OID: {state.oid}</Tooltip>}
                         >
                             <FontAwesomeIcon icon={faInfoCircle} />
                         </OverlayTrigger></>}

diff --git a/src/PoliciesTable.jsx b/src/PoliciesTable.jsx
@@ -149,7 +149,7 @@ export class PoliciesTable extends Component {
         }
         for (let pol in policies.policy) {
             if (!isEmpty(policies.policy[pol])) {
-                bits.push(<Badge className="policy-badge" key={pol}>{pol}</Badge>);
+                bits.push(<Badge bg="policy-badge" key={pol}>{pol}</Badge>);
             }
         }
         return bits;

diff --git a/src/SnapshotsTable.jsx b/src/SnapshotsTable.jsx
@@ -249,8 +249,8 @@ export class SnapshotsTable extends Component {
                 originalSnapshotDescription: x.description,
             })
         }}
-                  title={x.description + " - Click to update snapshot description."}
-                  className={x.description ? "text-warning" : "text-muted"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
+            title={x.description + " - Click to update snapshot description."}
+            className={x.description ? "text-warning" : "snapshot-description"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
     }
 
     newPinFor(x) {
@@ -353,16 +353,16 @@ export class SnapshotsTable extends Component {
             Header: 'Root',
             width: "",
             accessor: x => x.rootID,
-            Cell: x => <><span className="hash-value">{x.cell.value}</span>
-            {x.row.original.description && <div className='text-muted'><small>{x.row.original.description}</small></div>}</>,
+            Cell: x => <><span className="snapshot-hash">{x.cell.value}</span>
+                {x.row.original.description && <div className='snapshot-description'><small>{x.row.original.description}</small></div>}</>,
         }, {
             Header: 'Retention',
             accessor: 'retention',
             width: "",
             Cell: x => <span>
-                {x.cell.value.map(l => <React.Fragment key={l}><Badge bg={pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)}
+                {x.cell.value.map(l => <React.Fragment key={l}><Badge bg={"retention-badge-"+pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)}
                 {x.row.original.pins.map(l => <React.Fragment key={l}>
-                    <Badge bg="dark" text="warning" onClick={() => this.editPin(x.row.original, l)}><FontAwesomeIcon icon={faThumbtack} /> {l}</Badge>{' '}
+                    <Badge bg="snapshot-pin" onClick={() => this.editPin(x.row.original, l)}><FontAwesomeIcon icon={faThumbtack} /> {l}</Badge>{' '}
                 </React.Fragment>)}
                 {this.newPinFor(x.row.original)}
             </span>
@@ -471,9 +471,9 @@ export class SnapshotsTable extends Component {
                     <Form.Group>
                         <Form.Label>Enter new description</Form.Label>
                         <Form.Control as="textarea"
-                                      size="sm"
-                                      value={this.state.updatedSnapshotDescription}
-                                      onChange={e => this.setState({ updatedSnapshotDescription: e.target.value })} />
+                            size="sm"
+                            value={this.state.updatedSnapshotDescription}
+                            onChange={e => this.setState({ updatedSnapshotDescription: e.target.value })} />
                     </Form.Group>
                 </Modal.Body>
 

diff --git a/src/Table.jsx b/src/Table.jsx
@@ -128,14 +128,15 @@ export default function MyTable({ columns, data }) {
         </thead>
         <tbody {...getTableBodyProps()}>
           {page.map((row, i) => {
-              prepareRow(row);
-              return (
+            prepareRow(row);
+            return (
               <tr {...row.getRowProps()} key={i}>
                 {row.cells.map(cell => {
                   return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                 })}
               </tr>
-              )}
+            )
+          }
           )}
         </tbody>
       </Table>