Merge pull request #9 from commons-stack/add-ui-separators

UI Separators and styles
commons-stack · Sep 28, 2023 · 8bb411f · 8bb411f
2 parents 51e6cfd + fe02298
commit 8bb411f
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 79 deletions.
diff --git a/apps/web/src/presentation/components/launchpad/abc/AugmentedBondingCurveSettings.tsx b/apps/web/src/presentation/components/launchpad/abc/AugmentedBondingCurveSettings.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, FormControl, FormLabel, HStack, Image, InputGroup, Select, Text, VStack } from "@chakra-ui/react";
+import { Divider, Box, Button, Flex, FormControl, FormLabel, HStack, Image, InputGroup, Select, Text, VStack } from "@chakra-ui/react";
 import { useEffect } from "react";
 import { DAOCreationRepository } from "../../../../domain/repository/DAOCreationRepository";
 import CustomInput from "../../shared/CustomInput";
@@ -124,6 +124,15 @@ export default function AugmentedBondingCurveSettings({ onStepCompletionChanged
                     </HStack>
                 </VStack>
             </HStack>
+            <Divider paddingTop="24px"
+                    borderColor="brand.900"
+                    borderBottomWidth="1px"
+                    width="100%"
+                    margin="0 auto"
+            />
+            <VStack pt="32px">
+                <Text fontSize="16px" color="brand.900">Todo: puc correct text. This is a placeholder.</Text>
+            </VStack>
         </VStack>
     );
 }
diff --git a/apps/web/src/presentation/components/launchpad/name/OrganizationName.tsx b/apps/web/src/presentation/components/launchpad/name/OrganizationName.tsx
@@ -4,6 +4,7 @@ import { DAOCreationRepository } from "../../../../domain/repository/DAOCreation
 import CustomInput from "../../shared/CustomInput";
 import CustomInputRightAddon from "../../shared/CustomInputRightAddon";
 import { useDAONameModelController } from "./DAONameModelController";
+import "../../../../styles.css";
 
 interface OrganizationNameProps {
     onStepCompletionChanged: (completed: boolean) => void;
@@ -27,7 +28,7 @@ export default function OrganizationName({ onStepCompletionChanged , daoCreation
 
     return (
         <Box pt="100px" pb="75px">
-            <VStack spacing={0}>
+            <VStack spacing={0} className="abcs-newdao-step-content">
                 <Text fontFamily="VictorSerifTrial" fontSize="72px" color="brand.900">Name your DAO</Text>
                 <InputGroup mt="48px">
                     <CustomInput 

diff --git a/apps/web/src/presentation/components/launchpad/token/TokenSettings.tsx b/apps/web/src/presentation/components/launchpad/token/TokenSettings.tsx
@@ -1,10 +1,11 @@
 import { CloseIcon } from "@chakra-ui/icons";
-import { Button, FormControl, FormLabel, HStack, InputGroup, Text, VStack } from "@chakra-ui/react";
+import { Divider, Button, FormControl, FormLabel, HStack, InputGroup, Text, VStack } from "@chakra-ui/react";
 import React from 'react';
 import { DAOCreationRepository } from "../../../../domain/repository/DAOCreationRepository";
 import CustomInput from "../../shared/CustomInput";
 import CustomInputRightAddon from "../../shared/CustomInputRightAddon";
 import { useTokenSettingsModelController } from "./TokenSettingsModelController";
+import "../../../../styles.css";
 
 interface TokenSettingProps {
     onStepCompletionChanged: (completed: boolean) => void;
@@ -23,77 +24,83 @@ export default function TokenHoldersComponent({ onStepCompletionChanged, daoCrea
     } = useTokenSettingsModelController(daoCreationRepository, onStepCompletionChanged);
 
     return (
-        <VStack spacing={4} pt="130px">
+        <VStack spacing={4} pt="130px" className="abcs-newdao-step-content">
             <Text fontFamily="VictorSerifTrial" fontSize="72px" color="brand.900">Tokens</Text>
             <Text fontSize="24px" color="brand.900" pt="32px">Choose your Tokens settings below</Text>
-            {/* ADD DIVIDER */}
-            <HStack width="100%">
-                <FormControl width="70%">
-                    <FormLabel>
-                        <Text fontSize="16px" color="brand.900">TOKEN NAME</Text>
-                    </FormLabel>
-                    <CustomInput
-                        placeholder="My Organization Token"
-                        value={tokenSettings.tokenName}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                            handleChangeTokenName(e.target.value);
-                        }}
-                    />
-                </FormControl>
-                <FormControl width="30%">
-                    <FormLabel>
-                        <Text fontSize="16px" color="brand.900">TOKEN SYMBOL</Text>
-                    </FormLabel>
-                    <CustomInput
-                        placeholder="MOT"
-                        value={tokenSettings.tokenSymbol}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                            handleChangeTokenSymbol(e.target.value)
-                        }}
-                    />
-                </FormControl>
-            </HStack>
-            <HStack width="100%">
-                <FormControl width="70%">
-                    <FormLabel>
-                        <Text fontSize="16px" color="brand.900">TOKEN HOLDERS</Text>
-                    </FormLabel>
-                    {tokenSettings.tokenHolders.map((holder, i) => (
-                        <InputGroup key={i} mb="17px">
-                            <CustomInput
-                                rightAddon={true}
-                                name="address"
-                                placeholder="Account address"
-                                value={holder.address}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                    handleHolderChange(i, e, true)
-                                }
-                            />
-                            <CustomInputRightAddon onClick={() => handleRemoveHolder(i)} >
-                                <CloseIcon />
-                            </CustomInputRightAddon>
-                        </InputGroup>
-                    ))}
-                </FormControl>
-                <FormControl width="30%">
-                    <FormLabel>
-                        <Text fontSize="16px" color="brand.900">BALANCES</Text>
-                    </FormLabel>
-                    {tokenSettings.tokenHolders.map((holder, i) => (
-                        <InputGroup mb="17px" key={i}>
-                            <CustomInput
-                                name="balance"
-                                value={holder.balance}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                    handleHolderChange(i, e, false)
-                                }
-                                type="number"
-                            />
-                        </InputGroup>
-                    ))}
-                </FormControl>
-            </HStack>
-            <HStack w="45%" alignSelf="start" spacing={3}>
+            <Divider paddingTop="24px"
+                    borderColor="brand.900"
+                    borderBottomWidth="1px"
+                    width="100%"
+                    margin="0 auto"
+            />
+            <VStack width="90%">
+                <HStack width="100%">
+                    <FormControl width="70%">
+                        <FormLabel>
+                            <Text fontSize="16px" color="brand.900">TOKEN NAME</Text>
+                        </FormLabel>
+                        <CustomInput
+                            placeholder="My Organization Token"
+                            value={tokenSettings.tokenName}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                handleChangeTokenName(e.target.value);
+                            }}
+                        />
+                    </FormControl>
+                    <FormControl width="30%">
+                        <FormLabel>
+                            <Text fontSize="16px" color="brand.900">TOKEN SYMBOL</Text>
+                        </FormLabel>
+                        <CustomInput
+                            placeholder="MOT"
+                            value={tokenSettings.tokenSymbol}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                handleChangeTokenSymbol(e.target.value)
+                            }}
+                        />
+                    </FormControl>
+                </HStack>
+                <HStack width="100%">
+                    <FormControl width="70%">
+                        <FormLabel>
+                            <Text fontSize="16px" color="brand.900">TOKEN HOLDERS</Text>
+                        </FormLabel>
+                        {tokenSettings.tokenHolders.map((holder, i) => (
+                            <InputGroup key={i} mb="17px">
+                                <CustomInput
+                                    rightAddon={true}
+                                    name="address"
+                                    placeholder="Account address"
+                                    value={holder.address}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                        handleHolderChange(i, e, true)
+                                    }
+                                />
+                                <CustomInputRightAddon onClick={() => handleRemoveHolder(i)} >
+                                    <CloseIcon />
+                                </CustomInputRightAddon>
+                            </InputGroup>
+                        ))}
+                    </FormControl>
+                    <FormControl width="30%">
+                        <FormLabel>
+                            <Text fontSize="16px" color="brand.900">BALANCES</Text>
+                        </FormLabel>
+                        {tokenSettings.tokenHolders.map((holder, i) => (
+                            <InputGroup mb="17px" key={i}>
+                                <CustomInput
+                                    name="balance"
+                                    value={holder.balance}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                        handleHolderChange(i, e, false)
+                                    }
+                                    type="number"
+                                />
+                            </InputGroup>
+                        ))}
+                    </FormControl>
+                </HStack>
+                <HStack w="45%" alignSelf="start" spacing={3}>
                 <Button
                     onClick={() => {
                         handleAddEmptyHolder();
@@ -105,6 +112,16 @@ export default function TokenHoldersComponent({ onStepCompletionChanged, daoCrea
                     Import xls
                 </Button>
             </HStack>
+            </VStack>
+            <Divider paddingTop="24px"
+                    borderColor="brand.900"
+                    borderBottomWidth="1px"
+                    width="100%"
+                    margin="0 auto"
+            />
+            <VStack pt="32px">
+                <Text fontSize="16px" color="brand.900">This settings will determine the name and symbol of the token that will be created for your organization. Add members  to define the initial distribution of this token.</Text>
+            </VStack>
         </VStack>
     )
 }

diff --git a/apps/web/src/presentation/components/launchpad/voting/VotingSettings.tsx b/apps/web/src/presentation/components/launchpad/voting/VotingSettings.tsx
@@ -1,8 +1,9 @@
-import { FormControl, FormLabel, HStack, InputGroup, Slider, SliderFilledTrack, SliderThumb, SliderTrack, Text, VStack } from "@chakra-ui/react";
+import { Divider, FormControl, FormLabel, HStack, InputGroup, Slider, SliderFilledTrack, SliderThumb, SliderTrack, Text, VStack } from "@chakra-ui/react";
 import { DAOCreationRepository } from "../../../../domain/repository/DAOCreationRepository";
 import CustomInput from "../../shared/CustomInput";
 import CustomInputRightAddon from "../../shared/CustomInputRightAddon";
 import { useVotingSettingsModelController } from "./VotingSettingsModelController";
+import "../../../../styles.css";
 
 interface VotingSettingsProps {
     onStepCompletionChanged: (completed: boolean) => void;
@@ -21,10 +22,16 @@ export default function VotingSettings({ onStepCompletionChanged, daoCreationRep
     } = useVotingSettingsModelController(onStepCompletionChanged, daoCreationRepository);
 
     return (
-        <VStack spacing={4} pt="130px">
+        <VStack spacing={4} pt="130px" className="abcs-newdao-step-content">
             <Text fontFamily="VictorSerifTrial" fontSize="72px" color="brand.900">Voting</Text>
             <Text fontSize="24px" color="brand.900" pt="32px">Choose your voting settings below</Text>
-            <VStack width="80%">
+            <Divider paddingTop="24px"
+                    borderColor="brand.900"
+                    borderBottomWidth="1px"
+                    width="100%"
+                    margin="0 auto"
+            />
+            <VStack width="90%">
                 <FormControl pt="34px" pb="32px">
                     <FormLabel>
                         <Text fontSize="16px" color="brand.900">SUPPORT</Text>
@@ -109,10 +116,16 @@ export default function VotingSettings({ onStepCompletionChanged, daoCreationRep
                         <CustomInputRightAddon children="Minutes" />
                     </InputGroup>
                 </HStack>
-                <VStack pt="32px">
-                    <Text fontSize="16px" color="brand.900">All votes must reach the support and minimum approval threshold in order to pass. </Text>
-                    <Text fontSize="16px" color="brand.900">If one of both are not met, the vote will not be considered valid and will not be executed.</Text>
-                </VStack>
+            </VStack>
+            <Divider paddingTop="24px"
+                    borderColor="brand.900"
+                    borderBottomWidth="1px"
+                    width="100%"
+                    margin="0 auto"
+                />
+            <VStack pt="32px">
+                <Text fontSize="16px" color="brand.900">All votes must reach the support and minimum approval threshold in order to pass. </Text>
+                <Text fontSize="16px" color="brand.900">If one of both are not met, the vote will not be considered valid and will not be executed.</Text>
             </VStack>
         </VStack>
     );

diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
@@ -2,4 +2,13 @@
     font-family: 'VictorSerifTrial'; /* Specify the desired font family name */
     src: url('../public/VictorSerifTrial-40Regular.otf') format('otf'), /* URL to the font file */
     /* You can also specify font-weight and font-style here if needed */
+  }
+
+  :root {
+    --abcs-newdao-step-content-max-width: 800px;
+  }
+
+  .abcs-newdao-step-content {
+    max-width: var(--abcs-newdao-step-content-max-width) !important;
+    margin: 0 100px !important;
   }
diff --git a/bun.lockb b/bun.lockb