instill-ai · iamnamananand996 · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023
@@ -2,9 +2,8 @@ import * as React from "react";
 import { z } from "zod";
 import {
   BasicProgressMessageBox,
-  OutlineButton,
+  Button,
   ProgressMessageBoxState,
-  SolidButton,
 } from "@instill-ai/design-system";
 import {
   Nullable,
@@ -147,25 +146,25 @@ export const ConfigureProfileControl = (
         />
       </div>
       <div className="ml-auto flex flex-row gap-x-2">
-        <OutlineButton
+        <Button
+          size="lg"
           disabled={false}
-          onClickHandler={null}
-          position="my-auto"
+          variant="secondaryGrey"
+          className="my-auto px-10"
           type="button"
           color="secondary"
-          hoveredShadow={null}
         >
           Cancel
-        </OutlineButton>
-        <SolidButton
-          type="button"
-          color="primary"
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
           disabled={instillUser.isSuccess ? false : true}
-          position="my-auto"
-          onClickHandler={() => handleSubmit()}
+          className="my-auto"
+          onClick={() => handleSubmit()}
         >
           Save Changes
-        </SolidButton>
+        </Button>
       </div>
     </div>
   );

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { BasicTextField } from "@instill-ai/design-system";
+import { Label, Input } from "@instill-ai/design-system";
 import { shallow } from "zustand/shallow";
 import {
   useConfigureProfileFormStore,
@@ -29,18 +29,30 @@ export const FirstNameField = (props: FirstNameFieldProps) => {
 
   return (
     <div className="w-[287px]">
-      <BasicTextField
-        id="profile-firstname"
-        label="First Name"
-        additionalMessageOnLabel="(optional)"
-        key="firstName"
-        required={false}
-        value={firstName}
-        error={firstNameError}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          setFieldValue("firstName", event.target.value)
-        }
-      />
+      <div className="mb-2 flex flex-row gap-x-2">
+        <Label>First Name</Label>
+        <p className="my-auto font-sans text-xs font-normal text-instillGrey70">
+          (optional)
+        </p>
+      </div>
+      <Input.Root>
+        <Input.Core
+          disabled={false}
+          id="profile-firstname"
+          type="text"
+          placeholder=""
+          required={false}
+          value={firstName || ""}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            setFieldValue("firstName", event.target.value)
+          }
+        />
+      </Input.Root>
+      {firstNameError && (
+        <p className="my-2 font-sans text-xs font-normal text-instillRed">
+          {firstNameError}
+        </p>
+      )}
     </div>
   );
 };
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { BasicTextField } from "@instill-ai/design-system";
+import { BasicTextField, Label, Input } from "@instill-ai/design-system";
 import { shallow } from "zustand/shallow";
 import {
   useConfigureProfileFormStore,
@@ -29,18 +29,30 @@ export const LastNameField = (props: LastNameFieldProps) => {
 
   return (
     <div className="w-[287px]">
-      <BasicTextField
-        id="profile-lastname"
-        label="Last name"
-        key="lastName"
-        additionalMessageOnLabel="(optional)"
-        required={false}
-        value={lastName}
-        error={lastNameError}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          setFieldValue("lastName", event.target.value)
-        }
-      />
+      <div className="mb-2 flex flex-row gap-x-2">
+        <Label>Last Name</Label>
+        <p className="my-auto font-sans text-xs font-normal text-instillGrey70">
+          (optional)
+        </p>
+      </div>
+      <Input.Root>
+        <Input.Core
+          disabled={false}
+          id="profile-lastName"
+          type="text"
+          placeholder=""
+          required={false}
+          value={lastName || ""}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            setFieldValue("lastName", event.target.value)
+          }
+        />
+      </Input.Root>
+      {lastNameError && (
+        <p className="my-2 font-sans text-xs font-normal text-instillRed">
+          {lastNameError}
+        </p>
+      )}
     </div>
   );
 };
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { shallow } from "zustand/shallow";
-import { BasicToggleField } from "@instill-ai/design-system";
+import { Switch, Field, Label } from "@instill-ai/design-system";
 import {
   useConfigureProfileFormStore,
   type Nullable,
@@ -33,16 +33,25 @@ export const NewsletterSubscriptionField = (
 
   return (
     <div className="w-full">
-      <BasicToggleField
-        id="profile-newsletter-subscription"
-        label="Newsletter subscription"
-        value={newsletterSubscription || false}
-        required={true}
-        description="Receive the latest news from Instill AI for open source updates, community highlights, blog posts, useful tutorials and more! You can unsubscribe any time."
-        onChange={(event) =>
-          setFieldValue("newsletterSubscription", event.target.checked)
-        }
-      />
+      <Field.Root>
+        <Label htmlFor="profile-newsletter-subscription" className="mb-3">
+          Newsletter subscription *
+        </Label>
+        <Switch
+          id="profile-newsletter-subscription"
+          onCheckedChange={(checked) => {
+            console.log(checked);
+
+            setFieldValue("newsletterSubscription", checked);
+          }}
+          checked={newsletterSubscription || false}
+        />
+        <Field.Description className="m-3">
+          Receive the latest news from Instill AI for open source updates,
+          community highlights, blog posts, useful tutorials and more! You can
+          unsubscribe any time.
+        </Field.Description>
+      </Field.Root>
     </div>
   );
 };
@@ -5,7 +5,7 @@ import {
   type User,
   type ConfigureProfileFormStore,
 } from "../../../lib";
-import { BasicTextField } from "@instill-ai/design-system";
+import { Label, Input } from "@instill-ai/design-system";
 import { shallow } from "zustand/shallow";
 
 const selector = (state: ConfigureProfileFormStore) => ({
@@ -31,18 +31,30 @@ export const OrgNameField = (props: OrgNameFieldProps) => {
 
   return (
     <div className="w-[287px]">
-      <BasicTextField
-        id="profile-orgname"
-        label="Organisation Name"
-        additionalMessageOnLabel="Your company name"
-        key="orgName"
-        required={false}
-        value={orgName}
-        error={orgNameError}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-          setFieldValue("orgName", event.target.value)
-        }
-      />
+      <div className="mb-2 flex flex-row gap-x-2">
+        <Label>Organisation Name</Label>
+        <p className="my-auto font-sans text-xs font-normal text-instillGrey70">
+          Your company name
+        </p>
+      </div>
+      <Input.Root>
+        <Input.Core
+          disabled={false}
+          id="profile-orgname"
+          type="text"
+          placeholder=""
+          required={false}
+          value={orgName || ""}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            setFieldValue("orgName", event.target.value);
+          }}
+        />
+      </Input.Root>
+      {orgNameError && (
+        <p className="my-2 font-sans text-xs font-normal text-instillRed">
+          {orgNameError}
+        </p>
+      )}
     </div>
   );
 };
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { BasicTextField } from "@instill-ai/design-system";
+import { Label, Input } from "@instill-ai/design-system";
 import { shallow } from "zustand/shallow";
 import {
   useConfigureProfileFormStore,
@@ -31,27 +31,39 @@ export const UserNameField = (props: UserNameFieldProps) => {
 
   return (
     <div className="w-[287px]">
-      <BasicTextField
-        id="profile-username"
-        label="Username"
-        key="userName"
-        additionalMessageOnLabel="This will be your unique identifier"
-        required={true}
-        value={userName}
-        error={userNameError}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-          const value = event.target.value;
-          setFieldValue("userName", value);
-          if (!validateResourceId(value)) {
-            setFieldError(
-              "userName",
-              "Resource ID restricts to lowercase letters, numbers, and hyphen, with the first character a letter, the last a letter or a number, and a 63 character maximum."
-            );
-          } else {
-            setFieldError("userName", null);
-          }
-        }}
-      />
+      <div className="mb-2 flex flex-row gap-x-2">
+        <Label>Username *</Label>
+        <p className="my-auto font-sans text-xs font-normal text-instillGrey70">
+          This will be your unique identifier
+        </p>
+      </div>
+      <Input.Root>
+        <Input.Core
+          disabled={false}
+          id="profile-userName"
+          type="text"
+          placeholder=""
+          required={false}
+          value={userName || ""}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            const value = event.target.value;
+            setFieldValue("userName", value);
+            if (!validateResourceId(value)) {
+              setFieldError(
+                "userName",
+                "Resource ID restricts to lowercase letters, numbers, and hyphen, with the first character a letter, the last a letter or a number, and a 63 character maximum."
+              );
+            } else {
+              setFieldError("userName", null);
+            }
+          }}
+        />
+      </Input.Root>
+      {userNameError && (
+        <p className="my-2 font-sans text-xs font-normal text-instillRed">
+          {userNameError}
+        </p>
+      )}
     </div>
   );
 };
@@ -49,7 +49,7 @@ export const ModelHubListPageMainView = (
             router.push(`/${entity}/model-hub/create`);
           }}
         >
-          <Icons.Plus className="h-5 w-5 stroke-semantic-bg-primary" />
+          <Icons.Plus className="h-4 w-4 stroke-semantic-bg-primary" />
           Add Model
         </Button>
       </div>

@@ -195,7 +195,7 @@ export const ResourcesTable = (props: ResourcesTableProps) => {
         primaryText="Resources"
         secondaryText="Check your resources"
       >
-        <div className="flex min-h-[300px] w-full flex-row items-center justify-center border border-semantic-bg-line bg-semantic-bg-primary px-[9px] py-[18px]">
+        <div className="flex min-h-[300px] w-full flex-row items-center justify-center bg-semantic-bg-primary px-[9px] py-[18px]">
           <h3 className="text-semantic-fg-primary product-headings-heading-3">
             Set up your first resource
           </h3>

@@ -49,7 +49,7 @@ export const ProfileTab = (props: ProfileTabProps) => {
 
   return (
     <TabBase title="Profile" description="Update your details here.">
-      <div className="w-full min-w-[720px] border border-[#E4E4E4] bg-white p-10">
+      <div className="w-full min-w-[720px] rounded-sm border border-[#E4E4E4] bg-white p-10">
         <ConfigureProfileForm
           user={user.isSuccess ? user.data : null}
           roles={mgmtRoleOptions}

@@ -27,7 +27,7 @@ export const BillingCard = (props: BillingCardProps) => {
   } = props;
 
   return (
-    <div className="flex w-full flex-col border border-[#EAECF0] bg-white">
+    <div className="flex w-full flex-col border border-[#EAECF0] bg-white rounded-sm">
       <div className="grid grid-flow-row grid-cols-2 gap-x-8 border-b border-b-[#EAECF0] p-6">
         <div className="flex flex-col">
           <div className="mb-2 flex flex-row gap-x-2">