porter/dashboard/src/components/SaveButton.tsx

import React, { Component } from "react";
import styled from "styled-components";
import loading from "assets/loading.gif";

type PropsType = {
  text: string;
  onClick: () => void;
  disabled?: boolean;
  status?: string | null;
  color?: string;
  helper?: string | null;

  // Makes flush with corner if not within a modal
  makeFlush?: boolean;
};

type StateType = {};

export default class SaveButton extends Component<PropsType, StateType> {
  renderStatus = () => {
    if (this.props.status) {
      if (this.props.status === "successful") {
        return (
          <StatusWrapper successful={true}>
            <i className="material-icons">done</i> Successfully updated
          </StatusWrapper>
        );
      } else if (this.props.status === "loading") {
        return (
          <StatusWrapper successful={false}>
            <LoadingGif src={loading} /> Updating . . .
          </StatusWrapper>
        );
      } else if (this.props.status === "error") {
        return (
          <StatusWrapper successful={false}>
            <i className="material-icons">error_outline</i> Could not update
          </StatusWrapper>
        );
      } else {
        return (
          <StatusWrapper successful={false}>
            <i className="material-icons">error_outline</i> {this.props.status}
          </StatusWrapper>
        );
      }
    } else if (this.props.helper) {
      return (
        <StatusWrapper successful={true}>{this.props.helper}</StatusWrapper>
      );
    }
  };

  render() {
    return (
      <ButtonWrapper makeFlush={this.props.makeFlush}>
        {this.renderStatus()}
        <Button
          disabled={this.props.disabled}
          onClick={this.props.onClick}
          color={this.props.color || "#616FEEcc"}
        >
          {this.props.text}
        </Button>
      </ButtonWrapper>
    );
  }
}

const LoadingGif = styled.img`
  width: 15px;
  height: 15px;
  margin-right: 9px;
  margin-bottom: 0px;
`;

const StatusWrapper = styled.div`
  display: flex;
  align-items: center;
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  color: #ffffff55;
  margin-right: 25px;

  > i {
    font-size: 18px;
    margin-right: 10px;
    color: ${(props: { successful: boolean }) =>
      props.successful ? "#4797ff" : "#fcba03"};
  }

  animation: statusFloatIn 0.5s;
  animation-fill-mode: forwards;

  @keyframes statusFloatIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }
`;

const ButtonWrapper = styled.div`
  display: flex;
  align-items: center;
  position: absolute;
  ${(props: { makeFlush: boolean }) => {
    if (!props.makeFlush) {
      return `
        bottom: 25px;
        right: 27px;
      `;
    }
    return `
      bottom: 0;
      right: 0;
    `;
  }}
`;

const Button = styled.button`
  height: 35px;
  font-size: 13px;
  font-weight: 500;
  font-family: "Work Sans", sans-serif;
  color: white;
  padding: 6px 20px 7px 20px;
  text-align: left;
  border: 0;
  border-radius: 5px;
  background: ${props => (!props.disabled ? props.color : "#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%)" : "")};
  }
`;