Changed semantic-ui buttons to basic buttons

This is due to the demand of non-bordered task links.
Also added some styling for hover.

src/components/forms/AddSolutionForm.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Modal, Button, Form, Input, TextArea, Icon, Header } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { addSolution, writeSolution, writeSolutionFile, addDocument, clearWrite } from '../../actions/homework';
+import './Forms.css';
 
 class AddSolutionForm extends Component {
   constructor(props) {
@@ -24,10 +25,10 @@ class AddSolutionForm extends Component {
       <Modal
         open={this.state.showModal}
         trigger={
-          <Button basic color='blue' onClick={() => { this.setState({ showModal: true }); }}>
+          <button id='task' onClick={() => { this.setState({ showModal: true }); }}>
             <Icon name='external' />
             {this.props.tasktitle}
-          </Button>
+          </button>
         }
       >
         <Modal.Header>

src/components/forms/Forms.css

+#task {
+  border: none;
+  background-color: inherit;
+  color: teal;
+}
+
+#task:hover {
+  color: red;
+}

src/components/forms/SolutionDetailsForm.js

@@ -3,6 +3,7 @@ import { Modal, Button, Header, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import CorrectSolutionForm from './CorrectSolutionForm';
 import { emptyMessage } from '../pages/Homework';
+import './Forms.css';
 
 class SolutionDetailsForm extends Component {
   constructor(props) {
@@ -42,10 +43,10 @@ class SolutionDetailsForm extends Component {
       <Modal
         open={this.state.showModal}
         trigger={
-          <Button basic color='blue' onClick={() => { this.setState({ showModal: true }); }}>
+          <button id='task' onClick={() => { this.setState({ showModal: true }); }}>
             <Icon name='external' />
             {this.props.tasktitle}
-          </Button>
+          </button>
         }
       >
         <Modal.Header>