ui: replace high-contrast headerVariant with header border

gw2auth · Aug 10, 2024 · fc3fff4 · fc3fff4
1 parent 5ced054
commit fc3fff4
Show file tree

Hide file tree

Showing 20 changed files with 141 additions and 140 deletions.
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
@@ -1,7 +1,10 @@
+@use '@cloudscape-design/design-tokens' as cs;
+
 .gw2auth-header {
   position: sticky;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1999;
+  border-block-end: 1px solid cs.$color-border-divider-default;
 }
diff --git a/src/components/root.tsx b/src/components/root.tsx
@@ -133,7 +133,6 @@ export function RootLayout({
         navigationOpen={isNavigationOpen}
         onNavigationChange={(e) => setNavigationOpen(e.detail.open)}
         content={children}
-        headerVariant={'high-contrast'}
         {...appLayoutProps}
       />
       <CookiePreferences onDismiss={() => setCookiePrefVisible(false)} visible={cookiePrefVisible} />

diff --git a/src/components/verification/verification-wizard.tsx b/src/components/verification/verification-wizard.tsx
@@ -159,7 +159,7 @@ export function VerificationWizard({ onDismiss }: { onDismiss: () => void }) {
     );
   } if (activeChallenge === undefined) {
     return (
-      <ContentLayout headerVariant={'high-contrast'}>
+      <ContentLayout>
         <Container>
           <Box>{i18n.general.failedToLoad('')}</Box>
         </Container>

diff --git a/src/pages/account/applications-detail.tsx b/src/pages/account/applications-detail.tsx
@@ -101,7 +101,6 @@ export function ApplicationsDetail() {
             actions={<Button loading={revokeAccessLoading} onClick={() => setShowRevokeAccessModal(true)}>{i18n.pages.applicationsDetail.revokeAccess}</Button>}
           >{application?.displayName ?? id}</Header>
         }
-        headerVariant={'high-contrast'}
       >
         <ColumnLayout columns={1}>
           <Container variant={'stacked'}>{overview}</Container>

diff --git a/src/pages/account/applications.tsx b/src/pages/account/applications.tsx
@@ -93,7 +93,7 @@ export function Applications() {
   }, [apiClient, notification]);
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>{i18n.pages.applications.pageHeader}</Header>} headerVariant={'high-contrast'}>
+    <ContentLayout header={<Header variant={'h1'}>{i18n.pages.applications.pageHeader}</Header>}>
       <CustomTable
         items={items}
         loading={isLoading}

diff --git a/src/pages/account/gw2-accounts-detail.tsx b/src/pages/account/gw2-accounts-detail.tsx
@@ -129,7 +129,6 @@ export function Gw2AccountsDetail() {
           }
           >{gw2Account?.name ?? id}</Header>
         }
-        headerVariant={'high-contrast'}
       >
         <ColumnLayout columns={1}>
           <Container variant={'stacked'}>{overview}</Container>

diff --git a/src/pages/account/gw2-accounts.tsx b/src/pages/account/gw2-accounts.tsx
@@ -117,7 +117,7 @@ export function Gw2Accounts() {
   }, [apiClient, notification]);
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>{i18n.pages.gw2Accounts.pageHeader}</Header>} headerVariant={'high-contrast'}>
+    <ContentLayout header={<Header variant={'h1'}>{i18n.pages.gw2Accounts.pageHeader}</Header>}>
       <CustomTable
         items={items}
         loading={isLoading}

diff --git a/src/pages/account/settings.tsx b/src/pages/account/settings.tsx
@@ -52,7 +52,7 @@ export function Settings() {
   }, [notification, apiClient]);
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>{i18n.pages.settings.header}</Header>} headerVariant={'high-contrast'}>
+    <ContentLayout header={<Header variant={'h1'}>{i18n.pages.settings.header}</Header>}>
       <ColumnLayout columns={1}>
         <FederationsTable isLoading={isLoading} federations={federations} onUpdate={setFederations} />
         <SessionsTable isLoading={isLoading} sessions={sessions} onUpdate={setSessions} />

diff --git a/src/pages/account/verification.tsx b/src/pages/account/verification.tsx
@@ -18,7 +18,7 @@ export function Gw2AccountVerification() {
   const proceedHref = useHref('/verification/new');
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>Guild Wars 2 Account Verification</Header>} headerVariant={'high-contrast'}>
+    <ContentLayout header={<Header variant={'h1'}>Guild Wars 2 Account Verification</Header>}>
       <ColumnLayout columns={1}>
         <Container header={<Header>New Verification</Header>}>
           <VerificationSelection onContinue={() => navigate(proceedHref)} />

diff --git a/src/pages/developer/applications-clients-detail.tsx b/src/pages/developer/applications-clients-detail.tsx
@@ -126,7 +126,6 @@ export function DevApplicationsClientsDetail() {
             }
           >{devApplicationClient?.displayName ?? clientId}</Header>
         }
-        headerVariant={'high-contrast'}
       >
         <ColumnLayout columns={1}>
           <Container variant={'stacked'}>{overview}</Container>

diff --git a/src/pages/developer/applications-detail.tsx b/src/pages/developer/applications-detail.tsx
@@ -129,7 +129,6 @@ export function DevApplicationsDetail() {
             actions={<Button loading={deleteLoading} onClick={() => setShowDeleteModal(true)}>Delete</Button>}
           >{devApplication?.displayName ?? id}</Header>
         }
-        headerVariant={'high-contrast'}
       >
         <ColumnLayout columns={1}>
           <Container variant={'stacked'}>{overview}</Container>

diff --git a/src/pages/developer/applications.tsx b/src/pages/developer/applications.tsx
@@ -82,7 +82,7 @@ export function DevApplications() {
   }, [apiClient]);
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>Applications</Header>} headerVariant={'high-contrast'}>
+    <ContentLayout header={<Header variant={'h1'}>Applications</Header>}>
       <CustomTable
         items={items}
         loading={isLoading}

diff --git a/src/pages/developer/test/client-test-callback.tsx b/src/pages/developer/test/client-test-callback.tsx
@@ -2,7 +2,7 @@ import { CodeView } from '@cloudscape-design/code-view';
 import jsonHighlight from '@cloudscape-design/code-view/highlight/json';
 import {
   Button,
-  Container, ContentLayout, Form, FormField, Header, Input, SpaceBetween,
+  Container, Form, FormField, Header, Input, SpaceBetween,
 } from '@cloudscape-design/components';
 import React, { useMemo, useState } from 'react';
 import { useHref, useParams, useSearchParams } from 'react-router-dom';
@@ -72,70 +72,72 @@ function SuccessContent({
   }
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>Test Client {clientId} Callback</Header>} headerVariant={'high-contrast'}>
-      <Form
-        actions={
-          <SpaceBetween direction={'horizontal'} size={'xs'}>
-            <CancelButton applicationId={applicationId} clientId={clientId} />
-            <Button variant={'primary'} loading={isLoading} onClick={onRetrieveTokenClick}>Retrieve Token</Button>
-          </SpaceBetween>
-        }
-      >
-        <Container>
-          <SpaceBetween direction={'vertical'} size={'l'}>
-            <FormField label={'Client Secret'} description={'Paste your client secret here'}>
-              <Input value={clientSecret} type={'password'} disableBrowserAutocorrect={true} onChange={(e) => setClientSecret(e.detail.value)} />
-            </FormField>
-
-            <FormField label={'Raw Response'}>
-              <CodeView content={JSON.stringify(tokenResponse ?? null, null, 2)} highlight={jsonHighlight} />
-            </FormField>
-
-            <FormField label={'Access Token Header'}>
-              <CodeView content={JSON.stringify(jwt[0], null, 2)} highlight={jsonHighlight} />
-            </FormField>
-
-            <FormField label={'Access Token Payload'}>
-              <CodeView content={JSON.stringify(jwt[1], null, 2)} highlight={jsonHighlight} />
-            </FormField>
-
-            <FormField label={'Access Token Signature'}>
-              <Input value={jwt[2]} disabled={true} />
-            </FormField>
-
-            <FormField label={'Refresh Token'}>
-              <Input value={tokenResponse?.refresh_token ?? ''} disabled={true} />
-            </FormField>
-
-            <FormField label={'Expires In'} description={'Time until the access token expires, in seconds'}>
-              <Input value={tokenResponse?.expires_in?.toString() ?? ''} type={'number'} disabled={true} />
-            </FormField>
-          </SpaceBetween>
-        </Container>
-      </Form>
-    </ContentLayout>
+    <Form
+      variant={'full-page'}
+      header={<Header variant={'h1'}>Test Client {clientId} Callback</Header>}
+      actions={
+        <SpaceBetween direction={'horizontal'} size={'xs'}>
+          <CancelButton applicationId={applicationId} clientId={clientId} />
+          <Button variant={'primary'} loading={isLoading} onClick={onRetrieveTokenClick}>Retrieve Token</Button>
+        </SpaceBetween>
+      }
+    >
+      <Container>
+        <SpaceBetween direction={'vertical'} size={'l'}>
+          <FormField label={'Client Secret'} description={'Paste your client secret here'}>
+            <Input value={clientSecret} type={'password'} disableBrowserAutocorrect={true} onChange={(e) => setClientSecret(e.detail.value)} />
+          </FormField>
+
+          <FormField label={'Raw Response'}>
+            <CodeView content={JSON.stringify(tokenResponse ?? null, null, 2)} highlight={jsonHighlight} />
+          </FormField>
+
+          <FormField label={'Access Token Header'}>
+            <CodeView content={JSON.stringify(jwt[0], null, 2)} highlight={jsonHighlight} />
+          </FormField>
+
+          <FormField label={'Access Token Payload'}>
+            <CodeView content={JSON.stringify(jwt[1], null, 2)} highlight={jsonHighlight} />
+          </FormField>
+
+          <FormField label={'Access Token Signature'}>
+            <Input value={jwt[2]} disabled={true} />
+          </FormField>
+
+          <FormField label={'Refresh Token'}>
+            <Input value={tokenResponse?.refresh_token ?? ''} disabled={true} />
+          </FormField>
+
+          <FormField label={'Expires In'} description={'Time until the access token expires, in seconds'}>
+            <Input value={tokenResponse?.expires_in?.toString() ?? ''} type={'number'} disabled={true} />
+          </FormField>
+        </SpaceBetween>
+      </Container>
+    </Form>
   );
 }
 
 function ErrorContent({
   applicationId, clientId, error, errorDescription, 
 }: { applicationId: string; clientId: string; error: string; errorDescription: string }) {
   return (
-    <ContentLayout header={<Header variant={'h1'}>Test Client {clientId} Callback</Header>} headerVariant={'high-contrast'}>
-      <Form actions={<CancelButton applicationId={applicationId} clientId={clientId} />}>
-        <Container>
-          <SpaceBetween direction={'vertical'} size={'l'}>
-            <FormField label={'Error'}>
-              <Input value={error} type={'text'} disabled={true} />
-            </FormField>
-
-            <FormField label={'Error Description'}>
-              <Input value={errorDescription} type={'text'} disabled={true} />
-            </FormField>
-          </SpaceBetween>
-        </Container>
-      </Form>
-    </ContentLayout>
+    <Form
+      variant={'full-page'}
+      header={<Header variant={'h1'}>Test Client {clientId} Callback</Header>}
+      actions={<CancelButton applicationId={applicationId} clientId={clientId} />}
+    >
+      <Container>
+        <SpaceBetween direction={'vertical'} size={'l'}>
+          <FormField label={'Error'}>
+            <Input value={error} type={'text'} disabled={true} />
+          </FormField>
+
+          <FormField label={'Error Description'}>
+            <Input value={errorDescription} type={'text'} disabled={true} />
+          </FormField>
+        </SpaceBetween>
+      </Container>
+    </Form>
   );
 }
 

diff --git a/src/pages/developer/test/client-test.tsx b/src/pages/developer/test/client-test.tsx
@@ -1,6 +1,6 @@
 import {
   Button, Checkbox,
-  Container, ContentLayout,
+  Container,
   Form,
   FormField,
   Header,
@@ -128,70 +128,70 @@ export function ClientTest() {
   }, [authorizationBaseURL, redirectURI, clientId, authorizationName, scopes, forceConsent, codeChallengeMethod, codeChallenge, state]);
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>Test Client {clientId}</Header>} headerVariant={'high-contrast'}>
-      <Form
-        actions={
-          <SpaceBetween direction={'horizontal'} size={'xs'}>
-            <RouterInlineLink to={clientHref} variant={'link'}>Cancel</RouterInlineLink>
-            <Button variant={'primary'} href={authorizationRequestURL}>Test</Button>
-          </SpaceBetween>
-        }
-      >
-        <Container>
-          <SpaceBetween direction={'vertical'} size={'l'}>
-            <FormField label={'Authorization Name'} description={'A custom name for this authorization - optional'}>
-              <Input value={authorizationName} type={'text'} onChange={(e) => setAuthorizationName(e.detail.value)} />
-            </FormField>
-
-            <FormField label={'Scopes'} description={'The scopes to request for this authorization'} errorText={scopesErrorText}>
-              <Multiselect
-                filteringType={'auto'}
-                options={scopeOptions}
-                selectedOptions={scopes}
-                onChange={(e) => setScopes(e.detail.selectedOptions)}
-                keepOpen={true}
-              />
-            </FormField>
-
-            <FormField label={'Force Consent'} description={'Whether to force the consent prompt to be shown even if the consent was already given'}>
-              <Checkbox checked={forceConsent} onChange={(e) => setForceConsent(e.detail.checked)}>Force consent prompt</Checkbox>
-            </FormField>
-
-            <FormField label={'Code Challenge Method'} description={'Adds an additional layer of trust'}>
-              <Tiles
-                value={codeChallengeMethod}
-                onChange={(e) => setCodeChallengeMethod(e.detail.value)}
-                items={[
-                  { label: 'none', value: '' },
-                  { label: OAuth2Params.CodeChallengeMethod.S256, value: OAuth2Params.CodeChallengeMethod.S256 },
-                  { label: OAuth2Params.CodeChallengeMethod.PLAIN, value: OAuth2Params.CodeChallengeMethod.PLAIN, disabled: true },
-                ]}
-              />
-            </FormField>
-
-            <FormField label={'Code Challenge'} description={'Managed by this UI. You would need to generate this on your side'}>
-              <Input value={codeChallenge} type={'text'} disabled={true} />
-            </FormField>
-
-            <FormField label={'State'} description={'Managed by this UI. You would need to generate this on your side'}>
-              <Input value={state} type={'text'} disabled={true} />
-            </FormField>
-
-            <FormField label={'Client ID'} description={'Managed by this UI'}>
-              <Input value={clientId} type={'text'} disabled={true} />
-            </FormField>
-
-            <FormField label={'Redirect URI'} description={'Managed by this UI'}>
-              <Input value={redirectURI} type={'url'} disabled={true} />
-            </FormField>
-
-            <FormField label={'Authorization URL'} description={'The resulting authorization URL'}>
-              <Textarea value={authorizationRequestURL} rows={10} disabled={true} />
-            </FormField>
-          </SpaceBetween>
-        </Container>
-      </Form>
-    </ContentLayout>
+    <Form
+      variant={'full-page'}
+      header={<Header variant={'h1'}>Test Client {clientId}</Header>}
+      actions={
+        <SpaceBetween direction={'horizontal'} size={'xs'}>
+          <RouterInlineLink to={clientHref} variant={'link'}>Cancel</RouterInlineLink>
+          <Button variant={'primary'} href={authorizationRequestURL}>Test</Button>
+        </SpaceBetween>
+      }
+    >
+      <Container>
+        <SpaceBetween direction={'vertical'} size={'l'}>
+          <FormField label={'Authorization Name'} description={'A custom name for this authorization - optional'}>
+            <Input value={authorizationName} type={'text'} onChange={(e) => setAuthorizationName(e.detail.value)} />
+          </FormField>
+
+          <FormField label={'Scopes'} description={'The scopes to request for this authorization'} errorText={scopesErrorText}>
+            <Multiselect
+              filteringType={'auto'}
+              options={scopeOptions}
+              selectedOptions={scopes}
+              onChange={(e) => setScopes(e.detail.selectedOptions)}
+              keepOpen={true}
+            />
+          </FormField>
+
+          <FormField label={'Force Consent'} description={'Whether to force the consent prompt to be shown even if the consent was already given'}>
+            <Checkbox checked={forceConsent} onChange={(e) => setForceConsent(e.detail.checked)}>Force consent prompt</Checkbox>
+          </FormField>
+
+          <FormField label={'Code Challenge Method'} description={'Adds an additional layer of trust'}>
+            <Tiles
+              value={codeChallengeMethod}
+              onChange={(e) => setCodeChallengeMethod(e.detail.value)}
+              items={[
+                { label: 'none', value: '' },
+                { label: OAuth2Params.CodeChallengeMethod.S256, value: OAuth2Params.CodeChallengeMethod.S256 },
+                { label: OAuth2Params.CodeChallengeMethod.PLAIN, value: OAuth2Params.CodeChallengeMethod.PLAIN, disabled: true },
+              ]}
+            />
+          </FormField>
+
+          <FormField label={'Code Challenge'} description={'Managed by this UI. You would need to generate this on your side'}>
+            <Input value={codeChallenge} type={'text'} disabled={true} />
+          </FormField>
+
+          <FormField label={'State'} description={'Managed by this UI. You would need to generate this on your side'}>
+            <Input value={state} type={'text'} disabled={true} />
+          </FormField>
+
+          <FormField label={'Client ID'} description={'Managed by this UI'}>
+            <Input value={clientId} type={'text'} disabled={true} />
+          </FormField>
+
+          <FormField label={'Redirect URI'} description={'Managed by this UI'}>
+            <Input value={redirectURI} type={'url'} disabled={true} />
+          </FormField>
+
+          <FormField label={'Authorization URL'} description={'The resulting authorization URL'}>
+            <Textarea value={authorizationRequestURL} rows={10} disabled={true} />
+          </FormField>
+        </SpaceBetween>
+      </Container>
+    </Form>
   );
 }
 

diff --git a/src/pages/error-page.tsx b/src/pages/error-page.tsx
@@ -88,7 +88,7 @@ export function ErrorLayout({ backendError }: { backendError?: boolean }) {
   }, [quaggan, isMobile]);
 
   return (
-    <ContentLayout header={<Header variant={'h1'}>Oops!</Header>} headerVariant={'high-contrast'}>
+    <ContentLayout header={<Header variant={'h1'}>Oops!</Header>}>
       <Container media={media}>
         <SpaceBetween direction={'vertical'} size={'s'}>
           <Box variant={'h2'}>{error.error ?? 'Sorry, an unexpected error has occurred.'}</Box>