fix: bug new board design fixes (#889)

xgeekshq · Jan 17, 2023 · 2a52a1a · 2a52a1a
1 parent cc4ef30
commit 2a52a1a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/.../src/components/CreateBoard/RegularBoard/ParticipantsTab/RadioGroupParticipants/index.tsx b/.../src/components/CreateBoard/RegularBoard/ParticipantsTab/RadioGroupParticipants/index.tsx
@@ -26,22 +26,26 @@ const RadioGroupParticipants = ({ handleSelection }: RadioGroupParticipantsProps
       <FormStyled>
         <RadioGroupRoot defaultValue="team" aria-label="View density" onValueChange={handleSelect}>
           <Flex css={{ alignItems: 'center' }}>
-            <RadioGroupItem value="team" id="team">
+            <RadioGroupItem value="team" id="selectTeam">
               <RadioGroupIndicator />
             </RadioGroupItem>
             <Flex direction="column" gap={6}>
-              <LabelStyled htmlFor="team">Select Team</LabelStyled>
+              <LabelStyled htmlFor="selectTeam" css={{ cursor: 'pointer' }}>
+                Select Team
+              </LabelStyled>
               <Text size="sm" color="primary500" css={{ pl: '$14' }}>
                 Select a team for your new board.
               </Text>
             </Flex>
           </Flex>
           <Flex css={{ alignItems: 'center', mr: '$100' }}>
-            <RadioGroupItem value="participant" id="participants">
+            <RadioGroupItem value="participant" id="selectParticipant">
               <RadioGroupIndicator />
             </RadioGroupItem>
             <Flex direction="column" gap={6}>
-              <LabelStyled htmlFor="participants">Select Participants</LabelStyled>
+              <LabelStyled htmlFor="selectParticipant" css={{ cursor: 'pointer' }}>
+                Select Participants
+              </LabelStyled>
               <Text size="sm" color="primary500" css={{ pl: '$14' }}>
                 Select individual participants for your new board.
               </Text>

diff --git a/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx
@@ -45,11 +45,12 @@ const SettingsTabs = () => {
 
   return (
     <Flex direction="column">
-      <Text heading={3} css={{ mb: '$8', mt: '$12' }}>
+      <Text heading={3} css={{ mb: '$24', mt: '$32' }}>
         Settings
       </Text>
-      <Flex css={{ width: '100%' }} gap="24">
+      <Flex css={{ width: '100%', borderBottom: '1px solid $primary200' }} gap="24">
         <StyledTextTab
+          css={{ marginBottom: '-1.5px' }}
           color="primary300"
           data-activetab={currentTab === 1}
           size="md"
@@ -58,6 +59,7 @@ const SettingsTabs = () => {
           Participants
         </StyledTextTab>
         <StyledTextTab
+          css={{ marginBottom: '-1.5px' }}
           color="primary300"
           data-activetab={currentTab === 2}
           size="md"

diff --git a/frontend/src/components/CreateBoard/Select/index.tsx b/frontend/src/components/CreateBoard/Select/index.tsx
@@ -7,13 +7,12 @@ import { selectStyles, StyledBox, StyledSelect } from './styles';
 
 const Control = ({ children, ...props }: ControlProps) => (
   <components.Control {...props}>
+    {(props.selectProps.value as { label: string; value: string }).label && (
+      <Text color="primary300" size="xs">
+        Select Team
+      </Text>
+    )}
     <Flex direction="column" css={{ width: '100%', px: '$17' }}>
-      {(props.selectProps.value as { label: string; value: string }).label && (
-        <Text color="primary300" size="xs">
-          Select Team
-        </Text>
-      )}
-
       <Flex css={{ width: '100%' }}>{children}</Flex>
     </Flex>
   </components.Control>

diff --git a/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx b/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx
@@ -66,8 +66,12 @@ const Settings = () => {
 
   return (
     <Flex direction="column">
-      <Flex css={{ width: '100%' }} gap="24">
+      <Text heading={3} css={{ mb: '$24', mt: '$32' }}>
+        Settings
+      </Text>
+      <Flex css={{ width: '100%', borderBottom: '1px solid $primary200' }} gap="24">
         <StyledTextTab
+          css={{ marginBottom: '-1.5px' }}
           color="primary300"
           data-activetab={currentTab === 1}
           size="md"
@@ -77,6 +81,7 @@ const Settings = () => {
         </StyledTextTab>
 
         <StyledTextTab
+          css={{ marginBottom: '-1.5px' }}
           color="primary300"
           data-activetab={currentTab === 2}
           size="md"