From b3abffa5b70554d0491c89b6957d71a591a68288 Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Fri, 17 Apr 2020 11:29:40 +0200
Subject: [PATCH] made some design changes

---
 .../dashboard/devices/DeviceSettingsModal.js  |  42 +++++--
 smart-hut/src/views/ConfirmForgotPassword.js  | 106 ++++++------------
 smart-hut/src/views/ConfirmRegistration.js    | 106 ++++++------------
 smart-hut/src/views/ConfirmResetPassword.js   | 104 ++++++-----------
 smart-hut/src/views/Forgot-password.js        |   2 +-
 5 files changed, 135 insertions(+), 225 deletions(-)

diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
index 037118a..44e160b 100644
--- a/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
+++ b/smart-hut/src/components/dashboard/devices/DeviceSettingsModal.js
@@ -4,10 +4,21 @@ import { connect } from "react-redux";
 import { RemoteService } from "../../../remote";
 
 const DeleteModal = (props) => (
-  <Modal trigger={<Button color="red">Remove</Button>} closeIcon>
+  <Modal
+    trigger={
+      <Button icon labelPosition="left" inverted color="red">
+        <Icon name="trash alternate" />
+        Delete device
+      </Button>
+    }
+    closeIcon
+  >
     <Header icon="archive" content="Are you sure ?" />
     <Modal.Actions>
-      <Button color="red">
+      <Button
+        color="red"
+        // onClick={this.closeModal}
+      >
         <Icon name="remove" /> No
       </Button>
       <Button onClick={() => props.removeDevice()} color="green">
@@ -38,17 +49,28 @@ const SettingsForm = (props) => {
           // {this.props.device.name}
         />
       </Form.Field>
-
       <Form.Field>
         <DeleteModal removeDevice={() => props.removeDevice(values)} />
       </Form.Field>
-      <Button
-        onClick={() => props.saveFunction(values)}
-        color="blue"
-        type="submit"
-      >
-        Save
-      </Button>
+      //{" "}
+      <Modal.Actions>
+        <Button
+          color="red"
+          // onClick={this.closeModal}
+        >
+          <Icon name="remove" />
+          Discard changes
+        </Button>
+        <Button
+          onClick={() => props.saveFunction(values)}
+          color="green"
+          type="submit"
+        >
+          <Icon name="checkmark" />
+          Save changes
+        </Button>
+        //{" "}
+      </Modal.Actions>
     </Form>
   );
 };
diff --git a/smart-hut/src/views/ConfirmForgotPassword.js b/smart-hut/src/views/ConfirmForgotPassword.js
index 99b194b..627b123 100644
--- a/smart-hut/src/views/ConfirmForgotPassword.js
+++ b/smart-hut/src/views/ConfirmForgotPassword.js
@@ -1,79 +1,43 @@
 import React, { Component } from "react";
 import HomeNavbar from "./../components/HomeNavbar";
-import { Image, Divider, Message, Grid } from "semantic-ui-react";
-
-class Paragraph extends Component {
-  state = { visible: true };
-
-  handleDismiss = () => {
-    this.setState({ visible: false });
-
-    setTimeout(() => {
-      this.setState({ visible: true });
-    }, 2000);
-  };
+import {
+  Image,
+  Divider,
+  Message,
+  Grid,
+  Button,
+  Icon,
+  Header,
+  Container,
+} from "semantic-ui-react";
 
+export default class ConfirmForgotPasswrod extends Component {
   render() {
-    if (this.state.visible) {
-      return (
-        <Message
-          onDismiss={this.handleDismiss}
-          header="Link has been sent!"
-          content="An e-mail has been sent your address, please follow the
-            instruction to create a new password"
-        />
-      );
-    }
-
     return (
-      <p>
-        <br />
-        <i>The message will return in 2s</i>
-        <br />
-        <br />
-      </p>
+      <React.Fragment>
+        <Button circular style={{ margin: "2em" }} href="/">
+          <Icon name="arrow alternate circle left" />
+          Go Home{" "}
+        </Button>
+        <Grid
+          textAlign="center"
+          style={{ height: "70vh" }}
+          verticalAlign="middle"
+        >
+          <Grid.Column style={{ maxWidth: 450 }}>
+            <Header as="h2" color="blue" textAlign="center">
+              <Image src="img/logo.png" /> Link has been sent!
+            </Header>
+            <Container textAlign="center">
+              <p>
+                An E-mail has been sent to your address, please follow the
+                instructions to create a new password. If you don't find the
+                E-mail please check also the spam folder.
+              </p>
+            </Container>
+          </Grid.Column>
+        </Grid>
+      </React.Fragment>
     );
   }
 }
-
-const MessageReg = () => (
-  <Grid>
-    <HomeNavbar />
-    <Divider />
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}>
-      <Grid.Column width={6}></Grid.Column>
-      <Grid.Column width={10}>
-        <Image src="title5.png" />
-      </Grid.Column>
-      <Grid.Column width={3}></Grid.Column>
-    </Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Column width={3}></Grid.Column>
-    <Grid.Column width={4}>
-      <Image src="./img/logo.png" />
-    </Grid.Column>
-    <Grid.Column width={6}>
-      <Paragraph />
-    </Grid.Column>
-    <Grid.Column width={4}></Grid.Column>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}>
-      <Grid.Column width={3}></Grid.Column>
-      <Grid.Column width={10}>
-        <Divider />
-      </Grid.Column>
-      <Grid.Column width={3}></Grid.Column>
-    </Grid.Row>
-  </Grid>
-);
-
-export default class ConfirmForgotPasswrod extends React.Component {
-  render() {
-    return <MessageReg />;
-  }
-}
diff --git a/smart-hut/src/views/ConfirmRegistration.js b/smart-hut/src/views/ConfirmRegistration.js
index 13af1b5..a4ea1fe 100644
--- a/smart-hut/src/views/ConfirmRegistration.js
+++ b/smart-hut/src/views/ConfirmRegistration.js
@@ -1,79 +1,43 @@
 import React, { Component } from "react";
 import HomeNavbar from "./../components/HomeNavbar";
-import { Image, Divider, Message, Grid } from "semantic-ui-react";
-
-class Paragraph extends Component {
-  state = { visible: true };
-
-  handleDismiss = () => {
-    this.setState({ visible: false });
-
-    setTimeout(() => {
-      this.setState({ visible: true });
-    }, 2000);
-  };
+import {
+  Image,
+  Divider,
+  Message,
+  Grid,
+  Button,
+  Icon,
+  Header,
+  Container,
+} from "semantic-ui-react";
 
+export default class ConfirmRegistration extends Component {
   render() {
-    if (this.state.visible) {
-      return (
-        <Message
-          onDismiss={this.handleDismiss}
-          header="Congratulation!"
-          content="An e-mail has been sent your address, please confirm
-            your registration by following the enclosed link"
-        />
-      );
-    }
-
     return (
-      <p>
-        <br />
-        <i>The message will return in 2s</i>
-        <br />
-        <br />
-      </p>
+      <React.Fragment>
+        <Button circular style={{ margin: "2em" }} href="/">
+          <Icon name="arrow alternate circle left" />
+          Go Home{" "}
+        </Button>
+        <Grid
+          textAlign="center"
+          style={{ height: "70vh" }}
+          verticalAlign="middle"
+        >
+          <Grid.Column style={{ maxWidth: 450 }}>
+            <Header as="h2" color="blue" textAlign="center">
+              <Image src="img/logo.png" /> Congratulation!
+            </Header>
+            <Container textAlign="center">
+              <p>
+                An E-mail has been sent to your address, confirm your
+                registration by following the enclosed link. If you don't find
+                the E-mail please check also the spam folder.
+              </p>
+            </Container>
+          </Grid.Column>
+        </Grid>
+      </React.Fragment>
     );
   }
 }
-
-const MessageReg = () => (
-  <Grid>
-    <HomeNavbar />
-    <Divider />
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}>
-      <Grid.Column width={6}></Grid.Column>
-      <Grid.Column width={10}>
-        <Image src="title5.png" />
-      </Grid.Column>
-      <Grid.Column width={3}></Grid.Column>
-    </Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Column width={3}></Grid.Column>
-    <Grid.Column width={4}>
-      <Image src="./img/logo.png" />
-    </Grid.Column>
-    <Grid.Column width={6}>
-      <Paragraph />
-    </Grid.Column>
-    <Grid.Column width={4}></Grid.Column>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}>
-      <Grid.Column width={3}></Grid.Column>
-      <Grid.Column width={10}>
-        <Divider />
-      </Grid.Column>
-      <Grid.Column width={3}></Grid.Column>
-    </Grid.Row>
-  </Grid>
-);
-
-export default class ConfirmRegistration extends React.Component {
-  render() {
-    return <MessageReg />;
-  }
-}
diff --git a/smart-hut/src/views/ConfirmResetPassword.js b/smart-hut/src/views/ConfirmResetPassword.js
index 0d6123d..ea4d77a 100644
--- a/smart-hut/src/views/ConfirmResetPassword.js
+++ b/smart-hut/src/views/ConfirmResetPassword.js
@@ -1,79 +1,39 @@
 import React, { Component } from "react";
 import HomeNavbar from "./../components/HomeNavbar";
-import { Image, Divider, Message, Grid } from "semantic-ui-react";
-
-class Paragraph extends Component {
-  state = { visible: true };
-
-  handleDismiss = () => {
-    this.setState({ visible: false });
-
-    setTimeout(() => {
-      this.setState({ visible: true });
-    }, 2000);
-  };
-
-  render() {
-    if (this.state.visible) {
-      return (
-        <Message onDismiss={this.handleDismiss}>
-          <Message.Header>
-            Congratulation<ins>s</ins>!
-          </Message.Header>
-          Your password has been successfully reset
-        </Message>
-      );
-    }
-
-    return (
-      <p>
-        <br />
-        <i>The message will return in 2s</i>
-        <br />
-        <br />
-      </p>
-    );
-  }
-}
-
-const MessageReg = () => (
-  <Grid>
-    <HomeNavbar />
-    <Divider />
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}>
-      <Grid.Column width={6}></Grid.Column>
-      <Grid.Column width={10}>
-        <Image src="title5.png" />
-      </Grid.Column>
-      <Grid.Column width={3}></Grid.Column>
-    </Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Column width={3}></Grid.Column>
-    <Grid.Column width={4}>
-      <Image src="./img/logo.png" />
-    </Grid.Column>
-    <Grid.Column width={6}>
-      <Paragraph />
-    </Grid.Column>
-    <Grid.Column width={4}></Grid.Column>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}></Grid.Row>
-    <Grid.Row height={3}>
-      <Grid.Column width={3}></Grid.Column>
-      <Grid.Column width={10}>
-        <Divider />
-      </Grid.Column>
-      <Grid.Column width={3}></Grid.Column>
-    </Grid.Row>
-  </Grid>
-);
+import {
+  Image,
+  Divider,
+  Message,
+  Grid,
+  Button,
+  Icon,
+  Header,
+  Container,
+} from "semantic-ui-react";
 
 export default class ConfirmResetPassword extends Component {
   render() {
-    return <MessageReg />;
+    return (
+      <React.Fragment>
+        <Button circular style={{ margin: "2em" }} href="/">
+          <Icon name="arrow alternate circle left" />
+          Go Home{" "}
+        </Button>
+        <Grid
+          textAlign="center"
+          style={{ height: "70vh" }}
+          verticalAlign="middle"
+        >
+          <Grid.Column style={{ maxWidth: 450 }}>
+            <Header as="h2" color="blue" textAlign="center">
+              <Image src="img/logo.png" /> Congratulation!
+            </Header>
+            <Container textAlign="center">
+              <p>Your password has been successfully reset.</p>
+            </Container>
+          </Grid.Column>
+        </Grid>
+      </React.Fragment>
+    );
   }
 }
diff --git a/smart-hut/src/views/Forgot-password.js b/smart-hut/src/views/Forgot-password.js
index 511a881..6ebc2a5 100644
--- a/smart-hut/src/views/Forgot-password.js
+++ b/smart-hut/src/views/Forgot-password.js
@@ -77,7 +77,7 @@ export default class ForgotPass extends Component {
               <Form.Input
                 icon="address card outline"
                 iconPosition="left"
-                placeholder="Username or E-mail"
+                placeholder="Enter your E-mail"
                 name="user"
                 type="text"
                 onChange={this.onChangeHandler}