feat: upgraded to tw v4

frontend/src/pages/kms/OverviewPage/components/CmekDecryptModal.tsx

@@ -89,7 +89,7 @@ const DecryptForm = ({ cmek }: FormProps) => {
       {plaintext ? (
         <FormControl label="Decrypted Data (plaintext)">
           <TextArea
-            className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-w-full"
             isDisabled
             value={plaintext}
           />
@@ -102,7 +102,7 @@ const DecryptForm = ({ cmek }: FormProps) => {
         >
           <TextArea
             {...register("ciphertext")}
-            className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-w-full"
           />
         </FormControl>
       )}

frontend/src/pages/kms/OverviewPage/components/CmekEncryptModal.tsx

@@ -81,7 +81,7 @@ const EncryptForm = ({ cmek }: FormProps) => {
       {ciphertext ? (
         <FormControl label="Encrypted Data (Ciphertext)">
           <TextArea
-            className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-w-full"
             isDisabled
             value={cmekEncrypt.data?.ciphertext}
           />
@@ -95,7 +95,7 @@ const EncryptForm = ({ cmek }: FormProps) => {
           >
             <TextArea
               {...register("plaintext")}
-              className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+              className="max-h-80 min-h-40 max-w-full min-w-full"
             />
           </FormControl>
           <Controller

frontend/src/pages/kms/OverviewPage/components/CmekModal.tsx

@@ -211,7 +211,7 @@ const CmekForm = ({ onComplete, cmek }: FormProps) => {
         isError={Boolean(errors.description?.message)}
       >
         <TextArea
-          className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+          className="max-h-80 min-h-40 max-w-full min-w-full"
           {...register("description")}
         />
       </FormControl>

frontend/src/pages/kms/OverviewPage/components/CmekSignModal.tsx

@@ -93,7 +93,7 @@ const SignForm = ({ cmek }: FormProps) => {
       {signature ? (
         <FormControl label="Data Signature">
           <TextArea
-            className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+            className="max-h-80 min-h-40 max-w-full min-w-full"
             isDisabled
             value={signature}
           />
@@ -105,10 +105,7 @@ const SignForm = ({ cmek }: FormProps) => {
             errorText={errors.data?.message}
             isError={Boolean(errors.data)}
           >
-            <TextArea
-              {...register("data")}
-              className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
-            />
+            <TextArea {...register("data")} className="max-h-80 min-h-40 max-w-full min-w-full" />
           </FormControl>
 
           <div className="mb-6 flex w-full items-center justify-between gap-2">

frontend/src/pages/kms/OverviewPage/components/CmekTable.tsx

@@ -216,7 +216,7 @@ export const CmekTable = () => {
     >
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
-          <p className="whitespace-nowrap text-xl font-semibold text-mineshaft-100">Keys</p>
+          <p className="text-xl font-medium whitespace-nowrap text-mineshaft-100">Keys</p>
           <div className="flex w-full justify-end pr-4">
             <a
               target="_blank"

frontend/src/pages/kms/OverviewPage/components/CmekVerifyModal.tsx

@@ -139,7 +139,7 @@ const VerifyForm = ({ cmek }: FormProps) => {
           </div>
           <div className="mt-3">
             <span className="text-sm opacity-60">Signature:</span>{" "}
-            <div className="whitespace-pre-wrap break-words rounded-md border border-mineshaft-700 bg-mineshaft-900 p-2 text-sm">
+            <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 p-2 text-sm break-words whitespace-pre-wrap">
               {signature}
             </div>
           </div>
@@ -157,10 +157,7 @@ const VerifyForm = ({ cmek }: FormProps) => {
             errorText={errors.data?.message}
             isError={Boolean(errors.data)}
           >
-            <TextArea
-              {...register("data")}
-              className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
-            />
+            <TextArea {...register("data")} className="max-h-80 min-h-40 max-w-full min-w-full" />
           </FormControl>
 
           <FormControl
@@ -171,7 +168,7 @@ const VerifyForm = ({ cmek }: FormProps) => {
           >
             <TextArea
               {...register("signature")}
-              className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
+              className="max-h-80 min-h-40 max-w-full min-w-full"
             />
           </FormControl>