diff --git a/frontend/components/forms/packs/EditPackForm/_styles.scss b/frontend/components/forms/packs/EditPackForm/_styles.scss index f84825b5d0..571e28af19 100644 --- a/frontend/components/forms/packs/EditPackForm/_styles.scss +++ b/frontend/components/forms/packs/EditPackForm/_styles.scss @@ -1,6 +1,6 @@ .edit-pack-form { h1 { - margin: 0 0 20px; + margin: $pad-medium 0; } &__pack-title { diff --git a/frontend/components/forms/packs/PackForm/PackForm.tsx b/frontend/components/forms/packs/PackForm/PackForm.tsx index c1a7be4a64..5c41c21a5e 100644 --- a/frontend/components/forms/packs/PackForm/PackForm.tsx +++ b/frontend/components/forms/packs/PackForm/PackForm.tsx @@ -1,15 +1,18 @@ import React, { useState } from "react"; +import { Link } from "react-router"; import classnames from "classnames"; import Button from "components/buttons/Button"; import { IQuery } from "interfaces/query"; import { ITarget, ITargetsAPIResponse } from "interfaces/target"; import { IEditPackFormData } from "interfaces/pack"; +import PATHS from "router/paths"; // @ts-ignore import InputField from "components/forms/fields/InputField"; // @ts-ignore import SelectTargetsDropdown from "components/forms/fields/SelectTargetsDropdown"; +import BackChevron from "../../../../../assets/images/icon-chevron-down-9x6@2x.png"; const baseClass = "pack-form"; @@ -67,43 +70,53 @@ const EditPackForm = ({ const packFormClass = classnames(baseClass, className); return ( -
-

New pack

- - -
- + + back chevron + Back to packs + + +

New pack

+ -
-
- -
- + +
+ +
+
+ +
+ + ); }; diff --git a/frontend/components/forms/packs/PackForm/_styles.scss b/frontend/components/forms/packs/PackForm/_styles.scss index 95ea764cad..c6412422b4 100644 --- a/frontend/components/forms/packs/PackForm/_styles.scss +++ b/frontend/components/forms/packs/PackForm/_styles.scss @@ -1,6 +1,6 @@ .pack-form { h1 { - margin: 0 0 20px; + margin: $pad-medium 0; } label { @@ -29,4 +29,17 @@ margin: 25px 0; text-align: right; } + + &__back-link { + font-size: $x-small; + color: $core-vibrant-blue; + font-weight: $bold; + text-decoration: none; + + #back-chevron { + width: 16px; + margin-right: $pad-small; + vertical-align: text-top; + } + } } diff --git a/frontend/pages/packs/EditPackPage/EditPackPage.tsx b/frontend/pages/packs/EditPackPage/EditPackPage.tsx index b873ea2865..4e15e592c3 100644 --- a/frontend/pages/packs/EditPackPage/EditPackPage.tsx +++ b/frontend/pages/packs/EditPackPage/EditPackPage.tsx @@ -1,4 +1,5 @@ import React, { useState, useCallback, useContext } from "react"; +import { Link } from "react-router"; import { useQuery } from "react-query"; import { InjectedRouter, Params } from "react-router/lib/Router"; @@ -24,6 +25,7 @@ import EditPackForm from "components/forms/packs/EditPackForm"; import MainContent from "components/MainContent"; import PackQueryEditorModal from "./components/PackQueryEditorModal"; import RemovePackQueryModal from "./components/RemovePackQueryModal"; +import BackChevron from "../../../../assets/images/icon-chevron-down-9x6@2x.png"; interface IEditPacksPageProps { router: InjectedRouter; // v3 @@ -225,6 +227,10 @@ const EditPacksPage = ({ return (
+ + back chevron + Back to packs + {storedPack && storedPackQueries && ( &__content { display: flex; flex-direction: column; diff --git a/frontend/router/paths.ts b/frontend/router/paths.ts index 10a418d918..c339b8bd36 100644 --- a/frontend/router/paths.ts +++ b/frontend/router/paths.ts @@ -19,7 +19,6 @@ export default { ADMIN_SETTINGS_STATISTICS: `${URL_PREFIX}/settings/organization/statistics`, ADMIN_SETTINGS_ADVANCED: `${URL_PREFIX}/settings/organization/advanced`, ADMIN_SETTINGS_FLEET_DESKTOP: `${URL_PREFIX}/settings/organization/fleet-desktop`, - ALL_PACKS: `${URL_PREFIX}/packs/all`, EDIT_PACK: (packId: number): string => { return `${URL_PREFIX}/packs/${packId}/edit`; },