updated project settings ui

dashboard/src/components/SaveButton.tsx

@@ -123,7 +123,7 @@ const ButtonWrapper = styled.div`
 `;
 
 const Button = styled.button`
-  height: 40px;
+  height: 35px;
   font-size: 13px;
   font-weight: 500;
   font-family: 'Work Sans', sans-serif;

dashboard/src/components/Selector.tsx

@@ -114,7 +114,7 @@ const Option = styled.div`
   width: 100%;
   border-top: 1px solid #00000000;
   border-bottom: 1px solid ${(props: { selected: boolean, lastItem: boolean }) => props.lastItem ? '#ffffff00' : '#ffffff15'};
-  height: 35px;
+  height: 37px;
   font-size: 13px;
   padding-top: 9px;
   align-items: center;
@@ -161,11 +161,12 @@ const StyledSelector = styled.div<{ width: string }>`
 
 const MainSelector = styled.div`
   width: ${(props: { expanded: boolean, width: string, height?: string }) => props.width};
-  height: ${(props: { expanded: boolean, width: string, height?: string }) => props.height ? props.height : '30px'};
+  height: ${(props: { expanded: boolean, width: string, height?: string }) => props.height ? props.height : '35px'};
   border: 1px solid #ffffff55;
   font-size: 13px;
   padding: 5px 10px;
   padding-left: 12px;
+  border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: space-between;

dashboard/src/components/values-form/InputRow.tsx

@@ -58,7 +58,7 @@ const Required = styled.div`
 `;
 
 const Unit = styled.div`
-  margin-right: 8px;
+  margin-left: 8px;
 `;
 
 const InputWrapper = styled.div`
@@ -77,7 +77,7 @@ const Input = styled.input`
   width: ${(props: { disabled: boolean, width: string }) => props.width ? props.width : '270px'};
   color: ${(props: { disabled: boolean, width: string }) => props.disabled ? '#ffffff44' : 'white'};
   padding: 5px 10px;
-  height: 30px;
+  height: 35px;
 `;
 
 const Label = styled.div`

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -20,6 +20,8 @@ type StateType = {
   invalidEmail: boolean,
 }
 
+const dummyInvites = [];
+
 export default class InviteList extends Component<PropsType, StateType> {
   state = {
     loading: true,
@@ -128,9 +130,7 @@ export default class InviteList extends Component<PropsType, StateType> {
   renderInvitations = () => {
     let { currentProject } = this.context;
     if (this.state.loading) {
-      return (
-        <Loading />
-      )
+      return <Loading />;
     } else {
       var invContent: any[] = [];
       for (let i = 0; i < this.state.invites.length; i++) {
@@ -150,7 +150,7 @@ export default class InviteList extends Component<PropsType, StateType> {
                 </CopyButton>
               </Td>
             </Tr>
-          )
+          );
         } else if (this.state.invites[i].expired) {
           invContent.push(
             <Tr key={i}>
@@ -179,7 +179,7 @@ export default class InviteList extends Component<PropsType, StateType> {
                 </CopyButton>
               </Td>
             </Tr>
-          )
+          );
         } else {
           invContent.push(
             <Tr key={i}>
@@ -214,10 +214,11 @@ export default class InviteList extends Component<PropsType, StateType> {
       }
       return (
         <>
-          <Subsubtitle>Collaborators</Subsubtitle>
+          <Heading>Invites & Collaborators</Heading>
+          <Helper>Manage pending invites and view collaborators.</Helper>
           {invContent.length > 0
             ? <Table><tbody>{invContent}</tbody></Table>
-            : <BodyText>This project currently has no collaborators.</BodyText>
+            : <Placeholder>This project currently has no invites or collaborators.</Placeholder>
           }
         </>
       )
@@ -228,21 +229,23 @@ export default class InviteList extends Component<PropsType, StateType> {
     return (
       <>
         <Heading isAtTop={true}>Share Project</Heading>
-        <Helper>Generate a project invite for another admin user:</Helper>
-        <CreateInvite>
-          <InputRow
-            value={this.state.email}
-            type='text'
-            setValue={(x: string) => this.setState({ email: x })}
-            width='calc(100%)'
-            placeholder='ex: mrp@getporter.dev'
-          />
+        <Helper>Generate a project invite for another admin user.</Helper>
+        <DarkMatter />
+        <InputRow
+          value={this.state.email}
+          type='text'
+          setValue={(x: string) => this.setState({ email: x })}
+          width='calc(100%)'
+          placeholder='ex: mrp@getporter.dev'
+        />
+        <ButtonWrapper>
           <InviteButton
+            disabled={false}
             onClick={() => this.validateEmail()}
           >
             Create Invite
           </InviteButton>
-        </CreateInvite>
+        </ButtonWrapper>
         {this.state.invalidEmail &&
           <Invalid>
             Invalid Email Address. Try Again.
@@ -256,6 +259,29 @@ export default class InviteList extends Component<PropsType, StateType> {
 
 InviteList.contextType = Context;
 
+const Placeholder = styled.div`
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  margin-top: 23px;
+  justify-content: center;
+  background: #ffffff11;
+  border-radius: 5px;
+  color: #ffffff44;
+  font-size: 13px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const DarkMatter = styled.div`
+  width: 100%;
+  margin-top: -10px;
+`;
+
 const Subtitle = styled.div`
   font-size: 18px;
   font-weight: 700;
@@ -290,9 +316,10 @@ const CopyButton = styled.div`
   font-size: 13px;
   margin-left: 12px;
   float: right;
-  width: 128px;
+  width: 120px;
   padding-top: 7px;
   padding-bottom: 6px;
+  cursor: pointer;
   border-radius: 5px;
   border: 1px solid #ffffff20;
   background-color: #ffffff10;
@@ -305,8 +332,32 @@ const CopyButton = styled.div`
   }
 `;
 
-const InviteButton = styled(CopyButton)`
-  margin-bottom: 14px;
+const InviteButton = styled.div<{ disabled: boolean }>`
+  height: 35px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: 'Work Sans', sans-serif;
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  margin-top: 10px;
+  text-align: left;
+  background: red;
+  float: left;
+  margin-left: 0;
+  justify-content: center;
+  border: 0;
+  border-radius: 5px;
+  background: ${props => !props.disabled ? '#616FEEcc' : '#aaaabb'};
+  box-shadow: ${props => !props.disabled ? '0 2px 5px 0 #00000030' : 'none'};
+  cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  user-select: none;
+  :focus { outline: 0 }
+  :hover {
+    filter: ${props => !props.disabled ? 'brightness(120%)' : ''};
+  }
+  margin-bottom: 10px;
 `;
 
 const Rower = styled.div`
@@ -317,8 +368,6 @@ const Rower = styled.div`
 `;
 
 const CreateInvite = styled.div`
-  flex-direction: row;
-  align-items: center;
   margin-top: -10px;
 `;
 
@@ -326,10 +375,10 @@ const ShareLink = styled.input`
   outline: none;
   border: none;
   font-size: 13px;
-  background: #ffffff11;
-  border: 1px solid #ffffff55;
-  width: 50%;
+  background: none;
+  width: 60%;
   color: #74a5f7;
+  margin-left: -30px;
   padding: 5px 10px;
   height: 30px;
   text-overflow: ellipsis;
@@ -345,13 +394,15 @@ const Table = styled.table`
   width: 100%;
   border-spacing: 0px;
   border: 1px solid #ffffff55;
+  margin-top: 22px;
   border-radius: 5px;
+  background: #ffffff11;
 `;
 
 const Td = styled.td`
   visibility: ${(props: { isTop: boolean, invis?: boolean }) => props.invis ? 'hidden' : 'visible'};
   white-space: nowrap;
-  padding: 20px 0px;
+  padding: 6px 0px;
   border-top: ${(props: { isTop: boolean, invis?: boolean }) => (props.isTop ? 'none' : '1px solid #ffffff55')};
   &:last-child {
     padding-right: 16px;
@@ -362,9 +413,9 @@ const Tr = styled.tr`
 `;
 
 const MailTd = styled(Td)`
-  padding-left: 16px;
-  max-width: 242px;
-  min-width: 242px;
+  padding: 0 12px;
+  max-width: 300px;
+  min-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #ffffff;

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
+import { Context } from '../../../shared/Context';
+
 import InviteList from './InviteList';
 import TabRegion from '../../../components/TabRegion';
-
-import { Context } from '../../../shared/Context';
+import Heading from '../../../components/values-form/Heading';
+import Helper from '../../../components/values-form/Helper';
 
 type PropsType = {
   setCurrentView: (x: string) => void,
@@ -37,24 +39,20 @@ export default class ProjectSettings extends Component<PropsType, StateType> {
     } else {
       return (
         <>
-          <Subtitle>Other Settings</Subtitle>
-          <Rower>
-            <BodyText>
-              Delete this project: 
-            </BodyText>
-            <DeleteButton
-              onClick={() => {
-                this.context.setCurrentModal('UpdateProjectModal', {
-                  currentProject: this.context.currentProject,
-                  setCurrentView: this.props.setCurrentView,
-                });
-              }}
-            >
-              Delete
-            </DeleteButton>
-          </Rower>
+          <Heading isAtTop={true}>Delete Project</Heading>
+          <Helper>Permanently delete this project. <Warning highlight={true}>This action cannot be undone.</Warning></Helper>
+          <DeleteButton
+            onClick={() => {
+              this.context.setCurrentModal('UpdateProjectModal', {
+                currentProject: this.context.currentProject,
+                setCurrentView: this.props.setCurrentView,
+              });
+            }}
+          >
+            Delete Project
+          </DeleteButton>
         </>
-      )
+      );
     }
   }
 
@@ -78,6 +76,11 @@ export default class ProjectSettings extends Component<PropsType, StateType> {
 
 ProjectSettings.contextType = Context;
 
+const Warning = styled.span`
+  color: ${(props: { highlight: boolean, makeFlush?: boolean }) => props.highlight ? '#f5cb42' : ''};
+  margin-left: 5px;
+`;
+
 const Title = styled.div`
   font-size: 24px;
   font-weight: 600;
@@ -148,15 +151,33 @@ const CopyButton = styled.div`
   }
 `;
 
-const DeleteButton = styled(CopyButton)`
-  background-color: #b91133;
+const DeleteButton = styled.div`
+  height: 35px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: 'Work Sans', sans-serif;
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+  margin-top: 10px;
+  text-align: left;
+  background: red;
+  float: left;
+  margin-left: 0;
+  justify-content: center;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px 0 #00000030;
+  cursor: pointer;
+  user-select: none;
+  :focus { outline: 0 }
+  :hover {
+    filter: brightness(120%);
+  }
+  background: #b91133;
   border: none;
-  width: 88px;
-  margin-left: 20px;
   :hover {
-    background-color: #b91133;
     filter: brightness(120%);
-    border: none;
   }
 `;
 
@@ -164,10 +185,4 @@ const ContentHolder = styled.div`
   min-width: 420px;
   width: 100%;
   margin-bottom: 55px;
-`;
-
-const Rower = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
 `;