Invite users role dropdown size. Drag friction. icon button background

app/client/src/components/editorComponents/Dropzone.tsx

@@ -9,6 +9,7 @@ import { useSpring, animated, interpolate, config } from "react-spring";
 const SPRING_CONFIG = {
   ...config.gentle,
   clamp: true,
+  friction: 5,
 };
 const DropZoneWrapper = styled.div<{ width: number; height: number }>`
   width: ${props => props.width}px;

app/client/src/components/editorComponents/SelectComponent.tsx

@@ -10,6 +10,7 @@ type SelectComponentProps = {
   };
   options?: Array<{ id: string; name: string }>;
   placeholder?: string;
+  size?: "large" | "small";
 };
 
 export const SelectComponent = (props: SelectComponentProps) => {
@@ -34,6 +35,7 @@ export const SelectComponent = (props: SelectComponentProps) => {
             .name
         : props.placeholder,
       outline: true,
+      size: props.size,
     },
     openDirection: "down",
   };

app/client/src/components/editorComponents/form/fields/SelectField.tsx

@@ -27,6 +27,7 @@ type SelectFieldProps = {
   name: string;
   placeholder?: string;
   options?: Array<{ id: string; name: string; value?: string }>;
+  size?: "large" | "small";
 };
 
 export const SelectField = (props: SelectFieldProps) => {
@@ -36,6 +37,7 @@ export const SelectField = (props: SelectFieldProps) => {
       placeholder={props.placeholder}
       component={renderComponent}
       options={props.options}
+      size={props.size}
     />
   );
 };

app/client/src/index.css

@@ -52,7 +52,7 @@ div.bp3-popover-arrow {
   cursor: default !important;
 }
 
-.bp3-intent-primary, input:checked ~ span.bp3-control-indicator {
+.bp3-intent-primary:not(.bp3-icon), input:checked ~ span.bp3-control-indicator {
   background: #29CCA3 !important;
   box-shadow: none !important;
 }

app/client/src/pages/common/CustomizedDropdown/index.tsx

@@ -38,6 +38,7 @@ export type CustomizedDropdownProps = {
   sections: CustomizedDropdownOptionSection[];
   trigger: ButtonProps & {
     content?: ReactNode;
+    size?: "large" | "small";
   };
   openDirection: Direction;
   openOnHover?: boolean;
@@ -84,6 +85,7 @@ export const CustomizedDropdown = (
         <Button
           outline={props.trigger.outline}
           filled={props.trigger.filled}
+          size={props.trigger.size}
           icon={getDirectionBased.ICON_NAME(props.openDirection) as IconName}
           iconAlignment={Directions.RIGHT}
           text={props.trigger.text}

app/client/src/pages/organization/InviteUsersForm.tsx

@@ -134,6 +134,7 @@ const renderInviteUsersByRoleForm = (
                   name={`${field}.role`}
                   placeholder={INVITE_USERS_ROLE_SELECT_PLACEHOLDER}
                   options={roles}
+                  size="large"
                 />
               </FormGroup>
             )}