UX and style improvements

- add div with class=checkbox around checkboxes (fix spacing and color) - disable tabs - reworded info about need to pick an interaction - add links to reference pages after the second reference is given
Trustroots · Dec 13, 2018 · 1116c40 · 1116c40
1 parent 8794b6a
commit 1116c40
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 42 deletions.
diff --git a/modules/references/client/components/Info.js b/modules/references/client/components/Info.js
@@ -31,16 +31,14 @@ Duplicate.propTypes = {
   userTo: PropTypes.object.isRequired
 };
 
-export function Submitted({ isReported, isPublic, userTo }) {
+export function Submitted({ isReported, isPublic, userFrom, userTo }) {
   const name = userTo.displayName || userTo.username;
 
   const isPublicMessage = (isPublic) ?
     (
       <>
-      <div>Your reference for <UserLink user={userTo} /> is public now.</div>
-      {/* TODO add the links here */}
-      <div><a>See the reference.</a></div>
-      <div><a>See the reference from {name} to you.</a></div>
+      <div><a href={`/profile/${userTo.username}/references`}>Your reference</a> for <UserLink user={userTo} /> is public now.</div>
+      <div><a href={`/profile/${userFrom.username}/references`}>See the reference from {name} to you.</a></div>
       </>
     ) :
     (
@@ -57,6 +55,7 @@ export function Submitted({ isReported, isPublic, userTo }) {
 }
 
 Submitted.propTypes = {
+  userFrom: PropTypes.object.isRequired,
   userTo: PropTypes.object.isRequired,
   isReported: PropTypes.bool.isRequired,
   isPublic: PropTypes.bool.isRequired

diff --git a/modules/references/client/components/Interaction.js b/modules/references/client/components/Interaction.js
@@ -12,36 +12,40 @@ export default function Interaction(props) {
       </div>
       <div className="panel-body">
         <div role="group" aria-labelledby="howDoYouKnowThemQuestion">
-          <label>
-            <input
-              type="checkbox"
-              checked={props.reference.interactions.met}
-              onChange={() => props.onChange('met')}
-            />
-            Met in person
-          </label>
-          <br /><br />
-          <label>
-            <input
-              type="checkbox"
-              checked={props.reference.interactions.hostedThem}
-              onChange={() => props.onChange('hostedThem')}
-            />
-            I hosted them
-          </label>
-          <br /><br />
-          <label>
-            <input
-              type="checkbox"
-              checked={props.reference.interactions.hostedMe}
-              onChange={() => props.onChange('hostedMe')}
-            />
-            They hosted me
-          </label>
+          <div className="checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={props.reference.interactions.met}
+                onChange={() => props.onChange('met')}
+              />
+              Met in person
+            </label>
+          </div>
+          <div className="checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={props.reference.interactions.hostedThem}
+                onChange={() => props.onChange('hostedThem')}
+              />
+              I hosted them
+            </label>
+          </div>
+          <div className="checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={props.reference.interactions.hostedMe}
+                onChange={() => props.onChange('hostedMe')}
+              />
+              They hosted me
+            </label>
+          </div>
         </div>
         {(!isInteraction) ? (
           <div className="alert alert-warning reference-new-tabs-alert" role="alert">
-            Sorry, you cannot leave them a reference if you didn&apos;t have any previous interraction.
+            Please tell us about your interaction.
           </div>
         ) : null}
       </div>

diff --git a/modules/references/client/components/ReferencesNew.component.js b/modules/references/client/components/ReferencesNew.component.js
@@ -137,7 +137,7 @@ export default class ReferencesNew extends React.Component {
     if (this.state.isSubmitted) {
       const isReported = this.state.reference.recommend === 'no' && this.state.report;
       const isPublic = this.state.isPublic;
-      return <Submitted isReported={isReported} isPublic={isPublic} userTo={this.props.userTo} />;
+      return <Submitted isReported={isReported} isPublic={isPublic} userFrom={this.props.userFrom} userTo={this.props.userTo} />;
     }
 
     return (
@@ -151,10 +151,12 @@ export default class ReferencesNew extends React.Component {
           <Tab
             eventKey={0}
             title="How do you know them"
+            disabled
           >{tabs[0]}</Tab>
           <Tab
             eventKey={1}
             title="Recommendation"
+            disabled
           >{tabs[1]}</Tab>
         </Tabs>
         {/* <!-- Navigation for big screens -->*/}

diff --git a/modules/references/client/components/Report.js b/modules/references/client/components/Report.js
@@ -8,15 +8,16 @@ export default function Report(props) {
       <p className="lead">
         We&apos;re sad to hear you didn&apos;t have great experience using Trustroots! 😞
       </p>
-      <label>
-        <input
-          type="checkbox"
-          checked={props.report}
-          onChange={props.onChangeReport}
-        />
-        Report this person to moderators
-      </label>
-      <br /><br />
+      <div className="checkbox">
+        <label>
+          <input
+            type="checkbox"
+            checked={props.report}
+            onChange={props.onChangeReport}
+          />
+          Report this person to moderators
+        </label>
+      </div>
       {(props.report) ?
         <div>
           <label htmlFor="report-message" className="control-label">Message to moderators</label>