dandri/matrix-authentication-service
1
0 Fork 0
mirror of https://github.com/element-hq/matrix-authentication-service.git synced 2026-10-23 21:46:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the session back button use the <IconButton /> compound component

Browse Source
This commit is contained in:
Quentin Gliech committed 2023-09-14 11:34:15 +02:00
1 parent 17519846f3
commit aa5b91f3de
4 files changed
+44 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/SessionDetail/SessionHeader.module.css
-4
View File
@@ -19,8 +19,4 @@
justify-content: flex-start;
gap: var(--cpd-space-2x);
align-items: center;
}
.back-icon {
}
frontend/src/components/SessionDetail/SessionHeader.tsx
+17 -10
View File
@@ -12,23 +12,30 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import IconChevron from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
import { H3 } from "@vector-im/compound-web";
import IconArrowLeft from "@vector-im/compound-design-tokens/icons/arrow-left.svg";
import { H3, IconButton } from "@vector-im/compound-web";
import { PropsWithChildren } from "react";
import Link from "../../routing/Link";
import { useNavigationLink } from "../../routing";
import LoadingSpinner from "../LoadingSpinner";
import styles from "./SessionHeader.module.css";
const BackButton: React.FC = () => {
const { onClick, pending } = useNavigationLink({
type: "sessions-overview",
});
return (
<IconButton type="button" onClick={onClick}>
{pending ? <LoadingSpinner /> : <IconArrowLeft />}
</IconButton>
);
};
const SessionHeader: React.FC<PropsWithChildren> = ({ children }) => (
<header className={styles.header}>
<Link
kind="button"
route={{ type: "sessions-overview" }}
title="Back to sessions"
>
<IconChevron height="1.5em" width="1.5em" className={styles.backIcon} />
</Link>
<BackButton />
<H3>{children}</H3>
</header>
);
frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
+18 -18
View File
@@ -8,25 +8,25 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
<header
class="_header_92353c"
>
<a
class="_linkButton_b80ad8"
href="/sessions-overview"
title="Back to sessions"
<button
class="_icon-button_1segd_17"
style="--cpd-icon-button-size: 32px;"
type="button"
>
<svg
class="_backIcon_92353c"
class="cpd-icon"
fill="none"
height="1.5em"
height="1em"
viewBox="0 0 24 24"
width="1.5em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3 17.3L8.69999 12.7C8.59999 12.6 8.52915 12.4917 8.48749 12.375C8.44582 12.2584 8.42499 12.1334 8.42499 12C8.42499 11.8667 8.44582 11.7417 8.48749 11.625C8.52915 11.5084 8.59999 11.4 8.69999 11.3L13.3 6.70005C13.4833 6.51672 13.7167 6.42505 14 6.42505C14.2833 6.42505 14.5167 6.51672 14.7 6.70005C14.8833 6.88338 14.975 7.11672 14.975 7.40005C14.975 7.68338 14.8833 7.91672 14.7 8.10005L10.8 12L14.7 15.9C14.8833 16.0834 14.975 16.3167 14.975 16.6C14.975 16.8834 14.8833 17.1167 14.7 17.3C14.5167 17.4834 14.2833 17.575 14 17.575C13.7167 17.575 13.4833 17.4834 13.3 17.3Z"
d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
fill="currentColor"
/>
</svg>
</a>
</button>
<h3
class="_font-heading-md-semibold_1jx6b_121"
>
@@ -164,25 +164,25 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
<header
class="_header_92353c"
>
<a
class="_linkButton_b80ad8"
href="/sessions-overview"
title="Back to sessions"
<button
class="_icon-button_1segd_17"
style="--cpd-icon-button-size: 32px;"
type="button"
>
<svg
class="_backIcon_92353c"
class="cpd-icon"
fill="none"
height="1.5em"
height="1em"
viewBox="0 0 24 24"
width="1.5em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3 17.3L8.69999 12.7C8.59999 12.6 8.52915 12.4917 8.48749 12.375C8.44582 12.2584 8.42499 12.1334 8.42499 12C8.42499 11.8667 8.44582 11.7417 8.48749 11.625C8.52915 11.5084 8.59999 11.4 8.69999 11.3L13.3 6.70005C13.4833 6.51672 13.7167 6.42505 14 6.42505C14.2833 6.42505 14.5167 6.51672 14.7 6.70005C14.8833 6.88338 14.975 7.11672 14.975 7.40005C14.975 7.68338 14.8833 7.91672 14.7 8.10005L10.8 12L14.7 15.9C14.8833 16.0834 14.975 16.3167 14.975 16.6C14.975 16.8834 14.8833 17.1167 14.7 17.3C14.5167 17.4834 14.2833 17.575 14 17.575C13.7167 17.575 13.4833 17.4834 13.3 17.3Z"
d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
fill="currentColor"
/>
</svg>
</a>
</button>
<h3
class="_font-heading-md-semibold_1jx6b_121"
>
frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
+9 -9
View File
@@ -8,25 +8,25 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
<header
class="_header_92353c"
>
<a
class="_linkButton_b80ad8"
href="/sessions-overview"
title="Back to sessions"
<button
class="_icon-button_1segd_17"
style="--cpd-icon-button-size: 32px;"
type="button"
>
<svg
class="_backIcon_92353c"
class="cpd-icon"
fill="none"
height="1.5em"
height="1em"
viewBox="0 0 24 24"
width="1.5em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3 17.3L8.69999 12.7C8.59999 12.6 8.52915 12.4917 8.48749 12.375C8.44582 12.2584 8.42499 12.1334 8.42499 12C8.42499 11.8667 8.44582 11.7417 8.48749 11.625C8.52915 11.5084 8.59999 11.4 8.69999 11.3L13.3 6.70005C13.4833 6.51672 13.7167 6.42505 14 6.42505C14.2833 6.42505 14.5167 6.51672 14.7 6.70005C14.8833 6.88338 14.975 7.11672 14.975 7.40005C14.975 7.68338 14.8833 7.91672 14.7 8.10005L10.8 12L14.7 15.9C14.8833 16.0834 14.975 16.3167 14.975 16.6C14.975 16.8834 14.8833 17.1167 14.7 17.3C14.5167 17.4834 14.2833 17.575 14 17.575C13.7167 17.575 13.4833 17.4834 13.3 17.3Z"
d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
fill="currentColor"
/>
</svg>
</a>
</button>
<h3
class="_font-heading-md-semibold_1jx6b_121"
>