feedback changes

Author: ashleysmithTTD

src/web/components/ApiKeyManagement/KeyCreationDialog.tsx

@@ -99,9 +99,10 @@ function ShowApiKeySecrets({ keySecrets, closeDialog }: ApiKeySecretsProps) {
     <div>
       <h1>API Key {keySecrets.name} Credentials</h1>
       <p>
-        Copy the key and secret, store them in a secure location, and do not share them. When you
-        close the window, these values are not saved and are no longer available to you. If they are
-        lost, you&apos;ll need to create a new key.
+        Copy the key and secret.{' '}
+        <b> You must store them in a secure location, and do not share them.</b> When you close the
+        window, these values are not saved and are no longer available to you. If they are lost,
+        you&apos;ll need to create a new key.
       </p>
       {secrets.map((secret) => (
         <div key={secret.valueName}>

src/web/components/KeyPairs/KeyPairsTable.scss

@@ -41,7 +41,7 @@
 
   .key-pair-header {
     display: flex;
-    gap: 5px;
+    gap: 10px;
 
     .key-pair-tool-tip {
       margin-top: 0.4rem;

src/web/components/KeyPairs/KeyPairsTable.tsx

@@ -70,22 +70,16 @@ function KeyPairsTableContent({
         <thead>
           <tr>
             <SortableTableHeader<KeyPairModel> className='name' sortKey='name' header='Name' />
-            <SortableTableHeader<KeyPairModel>
-              className='subscription-id'
-              sortKey='subscriptionId'
-              header={
-                <div className='key-pair-header'>
-                  <Tooltip>
-                    Identifies your site to the UID2 service. Can be shared publicly.
-                  </Tooltip>
-                  Subscription ID
-                </div>
-              }
-            />
             <th>
               <div className='key-pair-header'>
-                <Tooltip>Used for encryption. Can be shared publicly.</Tooltip>
+                Subscription ID
+                <Tooltip>Identifies your site to the UID2 service. Can be shared publicly.</Tooltip>
+              </div>
+            </th>
+            <th>
+              <div className='key-pair-header'>
                 Public Key
+                <Tooltip>Used for encryption. Can be shared publicly.</Tooltip>
               </div>
             </th>
             <SortableTableHeader<KeyPairModel>

src/web/screens/apiKeyManagement.tsx

@@ -79,7 +79,8 @@ function ApiKeyManagement() {
     <>
       <h1>API Keys</h1>
       <p className='heading-details'>
-        View and manage your API keys. For more information, see{' '}
+        View and manage your API keys for client-server or server-side integrations. For more
+        information, see{' '}
         <a
           target='_blank'
           className='outside-link'
@@ -91,9 +92,7 @@ function ApiKeyManagement() {
         .
       </p>
       <div>
-        The values you generate on this page are for client-server or server-side integrations.{' '}
-        <b>They must be stored securely and kept secret.</b> For an implementation option that
-        generates UID2 tokens on the client side, go to{' '}
+        For an implementation option that generates UID2 tokens on the client side, go to{' '}
         <NavLink
           to={`/participant/${participant?.id}/clientSideIntegration`}
           className='outside-link'

src/web/screens/clientSideIntegration.tsx

@@ -166,8 +166,7 @@ function ClientSideIntegration() {
         .
       </p>
       <div>
-        The values you generate on this page are public and do not need to be kept secret. For
-        client-server or server-side integrations, go to{' '}
+        For client-server or server-side integrations, go to{' '}
         <NavLink to={`/participant/${participant?.id}/apiKeys`} className='outside-link'>
           API Keys
         </NavLink>
@@ -186,8 +185,8 @@ function ClientSideIntegration() {
             {(loadedData) => (
               <>
                 <ClientSideCompletion
-                  domainNames={loadedData.domainNames}
                   appIds={loadedData.appIds}
+                  domainNames={loadedData.domainNames}
                   keyPairData={loadedData.keyPairs}
                 />
                 <KeyPairsTable