components + homepage

1 files changed, 34 insertions, 13 deletions

diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index b7f89794d..f2050dc61 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -8,6 +8,7 @@ import { StrCast } from "../../fields/Types";
 import { MainViewModal } from "../views/MainViewModal";
 import { GroupManager, UserOptions } from "./GroupManager";
 import "./GroupMemberView.scss";
+import { Button, IconButton, Size } from "browndash-components";
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -28,7 +29,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
         const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
 
         return (!this.props.group ? null :
-            <div className="editing-interface">
+            <div className="editing-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
                 <div className="editing-header">
                     <input
                         className="group-title"
@@ -38,28 +39,48 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                         disabled={!hasEditAccess}
                     >
                     </input>
-                    <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
-                        <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
+                    <div className={"memberView-closeButton"} >
+                        <Button
+                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                            onClick={action(this.props.onCloseButtonClick)}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     </div>
                     {GroupManager.Instance.hasEditAccess(this.props.group) ?
                         <div className="group-buttons">
-                            <div className="add-member-dropdown">
-                                <Select
+                            <div style={{border: StrCast(Doc.UserDoc().userColor)}} >
+                                <Select 
+                                    className="add-member-dropdown"
                                     isSearchable={true}
                                     options={options}
                                     onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)}
                                     placeholder={"Add members"}
                                     value={null}
                                     styles={{
-                                        dropdownIndicator: (base, state) => ({
-                                            ...base,
-                                            transition: '0.5s all ease',
-                                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
-                                        })
+                                        control: () => ({
+                                            display: 'inline-flex',
+                                            width: '100%',
+                                        }),
+                                        indicatorSeparator: () => ({
+                                            display: 'inline-flex',
+                                            visibility: 'hidden',
+                                        }),
+                                        indicatorsContainer: () => ({
+                                            display: 'inline-flex',
+                                            textDecorationColor: 'black',
+                                        }),
+                                        valueContainer: () => ({
+                                            display: 'inline-flex',
+                                            fontStyle: StrCast(Doc.UserDoc().userColor),
+                                            color: StrCast(Doc.UserDoc().userColor),
+                                            width: '100%',
+                                        }),
                                     }}
                                 />
                             </div>
-                            <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
+                            <div className={"delete-button"}>
+                                <Button text={"Delete Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            </div>
                         </div> :
                         null}
                     <div
@@ -69,7 +90,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                         Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
                     </div>
                 </div>
-                <hr />
+                <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
                 <div className="editing-contents"
                     style={{ height: hasEditAccess ? "62%" : "85%" }}
                 >
@@ -83,7 +104,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                             </div>
                             {hasEditAccess ?
                                 <div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
-                                    <FontAwesomeIcon icon={"trash-alt"} size={"sm"} />
+                                    <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
                                 </div>
                                 : null}
                         </div>