Account page improvements (#156)

* Fix text overlaping select arrow * Update button types * Create mobile flex row * Add mobile flex row * Add flex row to column * Remove unused flex row * Fix overlaping placeholder
lexicongovernance · Feb 9, 2024 · 9440365 · 9440365
1 parent ce577ac
commit 9440365
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 21 deletions.
diff --git a/packages/berlin/src/components/button/Button.styled.tsx b/packages/berlin/src/components/button/Button.styled.tsx
@@ -1,9 +1,5 @@
 import styled, { css } from 'styled-components';
-
-type StyledButtonProps = {
-  $color: 'primary' | 'secondary';
-  $variant: 'text' | 'contained' | 'outlined' | 'link';
-};
+import { StyledButtonProps } from './Button.types';
 
 export const StyledButton = styled.button<StyledButtonProps>`
   border-radius: 0.5rem;

diff --git a/packages/berlin/src/components/button/Button.types.ts b/packages/berlin/src/components/button/Button.types.ts
@@ -0,0 +1,4 @@
+export type StyledButtonProps = {
+  $color: 'primary' | 'secondary';
+  $variant?: 'text' | 'contained' | 'outlined' | 'link';
+};
diff --git a/packages/berlin/src/components/containers/FlexRowToColumn.styled.tsx b/packages/berlin/src/components/containers/FlexRowToColumn.styled.tsx
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+type FlexRowToColumnProps = {
+  $align?: 'flex-start' | 'center' | 'flex-end';
+  $gap?: string;
+  $justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+};
+
+export const FlexRowToColumn = styled.div<FlexRowToColumnProps>`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+
+  align-items: ${(props) => (props.$align && props.$align) || 'flex-start'};
+  gap: ${(props) => props.$gap || '1rem'};
+  justify-content: ${(props) => (props.$justify && props.$justify) || 'flex-start'};
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+  }
+`;
diff --git a/packages/berlin/src/components/iconButton/IconButton.tsx b/packages/berlin/src/components/iconButton/IconButton.tsx
@@ -1,18 +1,18 @@
 import Button from '../button';
+import { StyledButtonProps } from '../button/Button.types';
 import { Icon, IconContainer } from './IconButton.styled';
 
 type IconButtonProps = {
-  $color: 'primary' | 'secondary';
   icon: {
     src: string;
     alt: string;
   };
   onClick: () => void;
-};
+} & StyledButtonProps;
 
-function IconButton({ $color, icon, onClick }: IconButtonProps) {
+function IconButton({ icon, onClick, ...props }: IconButtonProps) {
   return (
-    <Button onClick={onClick} $color={$color} style={{ padding: 0 }}>
+    <Button onClick={onClick} style={{ padding: 0 }} {...props}>
       <IconContainer $height={24} $width={24}>
         <Icon src={icon.src} alt={icon.alt} height={24} width={24} />
       </IconContainer>

diff --git a/packages/berlin/src/components/select/Select.styled.tsx b/packages/berlin/src/components/select/Select.styled.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { FlexColumn } from '../containers/FlexColum.styled';
 
-export const SelectContainer = styled.div`
+export const SelectContainer = styled.div<{ $minWidth?: string }>`
   position: relative;
   width: 100%;
+  min-width: ${(props) => props.$minWidth && props.$minWidth};
 `;
 
 export const SearchInput = styled.input<{ $theme?: 'light' | 'dark' }>`
@@ -19,6 +20,7 @@ export const SearchInput = styled.input<{ $theme?: 'light' | 'dark' }>`
   color: var(--color-black);
   cursor: default;
   padding: 0.75rem 1rem;
+  padding-right: 2.25rem;
   width: 100%;
 
   &::placeholder {

diff --git a/packages/berlin/src/components/select/Select.tsx b/packages/berlin/src/components/select/Select.tsx
@@ -21,6 +21,7 @@ type SelectProps = {
   onBlur?: () => void;
   onOptionCreate?: (option: string) => void;
   value?: string;
+  $minWidth?: string;
 };
 
 function Select({
@@ -33,12 +34,13 @@ function Select({
   onOptionCreate,
   value,
   onBlur,
+  $minWidth,
 }: SelectProps) {
   const theme = useAppStore((state) => state.theme);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState(options.find((o) => o.name === value)?.name ?? '');
   const [selectedOption, setSelectedOption] = useState<string | undefined>(
-    options.find((o) => o.id === value)?.name
+    options.find((o) => o.id === value)?.name,
   );
   const [creatableOption, setCreatableOption] = useState<string>('');
 
@@ -82,7 +84,7 @@ function Select({
   };
 
   return (
-    <SelectContainer>
+    <SelectContainer $minWidth={$minWidth}>
       {label && (
         <LabelContainer>
           <Label $required={required}>{label}</Label>{' '}

diff --git a/packages/berlin/src/pages/Account.tsx b/packages/berlin/src/pages/Account.tsx
@@ -15,7 +15,7 @@ import {
 
 // Components
 import { FlexColumn } from '../components/containers/FlexColum.styled';
-import { FlexRow } from '../components/containers/FlexRow.styled';
+import { FlexRowToColumn } from '../components/containers/FlexRowToColumn.styled';
 import { Title } from '../components/typography/Title.styled';
 import Button from '../components/button';
 import IconButton from '../components/iconButton';
@@ -123,7 +123,7 @@ function Account() {
             field: '',
           },
         ],
-      } as UserAttributes
+      } as UserAttributes,
     ),
   };
 
@@ -268,7 +268,7 @@ function AccountForm({
           <FlexColumn $gap="0.5rem">
             <Label $required>Academic Credentials</Label>
             {fieldsCredentialsGroup.map((field, i) => (
-              <FlexRow key={field.id}>
+              <FlexRowToColumn key={field.id}>
                 <Controller
                   name={
                     `userAttributes.credentialsGroup.${i}.credential` as `userAttributes.credentialsGroup.${number}.credential`
@@ -297,10 +297,11 @@ function AccountForm({
                       onBlur={field.onBlur}
                       value={field.value}
                       onOptionCreate={field.onChange}
-                      placeholder="Select or create your credential"
+                      placeholder="Select or create credential"
                       errors={[
                         errors.userAttributes?.credentialsGroup?.[i]?.credential?.message ?? '',
                       ]}
+                      $minWidth="208px"
                     />
                   )}
                 />
@@ -325,7 +326,7 @@ function AccountForm({
                   $color="secondary"
                   icon={{ src: `/icons/trash-${theme}.svg`, alt: 'Trash icon' }}
                 />
-              </FlexRow>
+              </FlexRowToColumn>
             ))}
             <IconButton
               onClick={() => {
@@ -342,7 +343,7 @@ function AccountForm({
           <FlexColumn $gap="0.5rem">
             <Label $required>Publications</Label>
             {fieldsPublications.map((field, i) => (
-              <FlexRow key={field.id}>
+              <FlexRowToColumn key={field.id}>
                 <Input
                   placeholder="Add a relevant paper as a URL"
                   {...register(`userAttributes.publications.${i}.value` as const)}
@@ -352,7 +353,7 @@ function AccountForm({
                   $color="secondary"
                   icon={{ src: `/icons/trash-${theme}.svg`, alt: 'Trash icon' }}
                 />
-              </FlexRow>
+              </FlexRowToColumn>
             ))}
             <IconButton
               onClick={() => insertPublications(fieldsPublications.length, { value: '' })}
@@ -363,7 +364,7 @@ function AccountForm({
           <FlexColumn $gap="0.5rem">
             <Label $required>Contributions to MEV</Label>
             {fieldsContributions.map((field, i) => (
-              <FlexRow key={field.id}>
+              <FlexRowToColumn key={field.id}>
                 <Input
                   placeholder="Add an MEV contribution as a URL"
                   {...register(`userAttributes.contributions.${i}.value` as const)}
@@ -373,7 +374,7 @@ function AccountForm({
                   $color="secondary"
                   icon={{ src: `/icons/trash-${theme}.svg`, alt: 'Trash icon' }}
                 />
-              </FlexRow>
+              </FlexRowToColumn>
             ))}
             <IconButton
               onClick={() => insertContributions(fieldsContributions.length, { value: '' })}