profile styles

app-view/components/modules/ProfilePopover.tsx

@@ -17,9 +17,6 @@ const settings_link_styles = {
   justifyContent: 'flex-start',
   width: '100%',
   transition: 'font-weight 200ms',
-  '&:hover': {
-    fontWeight: 'bold',
-  },
   '& svg:first-child': {
     mr: '$small',
   },

pages/profile.tsx

@@ -40,28 +40,100 @@ const FormInput = styled(Input, {
 })
 
 const FormLabel = styled('label', {
+  color: '#404467',
   fontSize: 14,
-  left: 24,
-  m: 0,
+  mb: '$x-small',
+  mt: 0,
   p: 0,
 })
 
-
-export const FormTextarea = styled('textarea', {
+const FormTextarea = styled('textarea', {
   backgroundColor: 'transparent',
   border: '1px solid $neutral-100',
   display: 'block',
   fontSize: 16,
   fontWeight: 600,
   p: '$x-small $regular',
+  minHeight: 140,
   width: '100%',
   '&:hover, &:focus': {
     outline: 'none',
   },
 })
 
+const ProfileTabs = styled(Tabs.List, {
+  borderBottom: '1px solid #E7E9ED',
+  '& button': {
+    bg: 'transparent',
+    border: 'none',
+    borderBottom: '2px solid transparent',
+    cursor: 'pointer',
+    fontSize: 16,
+    px: '$small',
+    pb: '$small',
+    transition: 'border 400ms',
+    '&[data-state="active"]': {
+      borderBottomColor: '$044-bff',
+      color: '$044-bff',
+      fontWeight: 700,
+    }
+  }
+})
+
 const FormStatusMessage = styled('p', { color: '$error' })
 
+const Title = styled('h2', {
+  fontSize: 24,
+  mb: '$large',
+  mt: 0,
+})
+
+const TabContent = styled(Tabs.Content, {
+  py: '$large'
+})
+
+const Badge = styled('div', {
+  alignItems: 'center',
+  display: 'flex',
+  columnGap: '$small',
+  mb: '$large',
+  '& h3': {
+    mb: '$xxx-small',
+    mt: 0,
+  },
+  '& p': {
+    mb: '$xxx-small',
+    mt: 0,
+  },
+  '& a': {
+    color: '$044-bff',
+    mt: 0,
+  }
+})
+
+const FormTitle = styled('h3', {
+  borderBottom: '1px solid #E7E9ED',
+  fontSize: 24,
+  fontWeight: 600,
+  pb: '$regular',
+  mb: '$regular'
+})
+
+const StyledForm = styled('form', {
+  maxWidth: 465,
+})
+
+const SaveButton = styled('button', {
+  bg: '$044-bff',
+  border: 'none',
+  borderRadius: '$radius-14',
+  color: 'white',
+  cursor: 'pointer',
+  fontSize: 16,
+  fontWeight: 600,
+  p: '$small $regular',
+})
+
 const FormSchema = z.object({
   username: z.string({ required_error: "This field is required", }).min(1, { message: "Username can't be empty" }),
   email: z
@@ -88,14 +160,15 @@ const Profle: DefaultSsrPage = () => {
 
   return (
     <Tabs.Root defaultValue="profile" orientation="vertical">
-      <Tabs.List aria-label="Profile Tabs">
+      <Title>Profile Configuration</Title>
+      <ProfileTabs aria-label="Profile Tabs">
         <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
         <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
         <Tabs.Trigger value="security">Security</Tabs.Trigger>
-      </Tabs.List>
-      <Tabs.Content value="profile">
+      </ProfileTabs>
+      <TabContent value="profile">
         {/* profile badge */}
-        <div>
+        <Badge>
           <ProfileBadgeImage>
             <Image
               src="/logo-icon.png"
@@ -109,9 +182,9 @@ const Profle: DefaultSsrPage = () => {
             <p>Select one of your NFTs as your profile picture</p>
             <Link href="#">Change profile NFT</Link>
           </div>
-        </div>
-        <h3>Account Details</h3>
-        <form onSubmit={handleSubmit(onSubmit)}>
+        </Badge>
+        <FormTitle>Account Details</FormTitle>
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
           <InputGroup>
             <FormLabel htmlFor="username">User Name</FormLabel>
             <FormInput
@@ -132,26 +205,26 @@ const Profle: DefaultSsrPage = () => {
           </InputGroup>
           <InputGroup>
             <FormLabel htmlFor="bio">Bio</FormLabel>
-            <FormInput
+            <FormTextarea
               id="bio"
               {...register("bio")}
             />
             {errors.bio && <FormStatusMessage>{errors.bio.message}</FormStatusMessage>}
           </InputGroup>
-          <button
-            type="button"
+          <SaveButton
+            type="submit"
             disabled={isSubmitting}
           >
             Save Changes
-          </button>
-        </form>
-      </Tabs.Content>
-      <Tabs.Content value="notifications">
+          </SaveButton>
+        </StyledForm>
+      </TabContent>
+      <TabContent value="notifications">
         <h1>Notifications</h1>
-      </Tabs.Content>
-      <Tabs.Content value="security">
+      </TabContent>
+      <TabContent value="security">
         <h1>Security</h1>
-      </Tabs.Content>
+      </TabContent>
     </Tabs.Root>
   )
 }