Merge pull request #143 from kpwags/feature/124-AddPageForIssues

Added a Page for Reporting Issues

frontend/src/App.tsx

@@ -23,6 +23,7 @@ import ManageMeats from '@components/Pages/ManageMeats';
 import ManageRecipes from '@components/Pages/ManageRecipes';
 import RecipeListing from '@components/Pages/RecipeListing';
 import Search from '@components/Pages/Search';
+import ReportAnIssue from '@components/Pages/ReportAnIssue';
 import PrivateFilter from '@components/PrivateFilter/PrivateFilter';
 
 import './styles/App.less';
@@ -141,6 +142,7 @@ const App = (): JSX.Element => (
  />
  </Route>
  <Route path="/search" element={(<PrivateFilter><Search /></PrivateFilter>)} />
+ <Route path="/report-an-issue" element={(<ReportAnIssue />)} />
  <Route path="/" element={<Landing />} />
  </Routes>
  </BaseLayout>

frontend/src/components/Elements/Footer/Footer.tsx

@@ -14,6 +14,7 @@ const Footer = (): JSX.Element => {
  <li><Link to="/">Home</Link></li>
  {siteSettings.isPublic || user !== null ? (<li><Link to="/search">Search</Link></li>) : null}
  {user !== null ? (<li><Link to="/recipes/add">Add Recipe</Link></li>) : null}
+ <li><Link to="/report-an-issue">Report an Issue</Link></li>
  </ul>
  <div className="copyright">&copy; {(new Date()).getFullYear()} {siteSettings.title}</div>
  </Layout.Footer>

frontend/src/components/Pages/Login/Login.tsx

@@ -23,7 +23,6 @@ const Login = ({
  const urlRedirect = query.get('redirect');
 
  const completeLoginProcess = (authResult: AuthResult) => {
- console.log({ redirectTo, urlRedirect });
  loginUser(authResult.accessToken);
  navigate(urlRedirect || redirectTo);
  };

frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.less

@@ -0,0 +1,13 @@
+@import (reference) '../../../styles/Theme.less';
+
+.report-an-issue {
+ .button-area {
+ margin-top: 2rem;
+ }
+
+ a.ant-btn-primary {
+ background-color: @color-green-01;
+ border-color: @color-green-01;
+ color: @color-white;
+ }
+}

frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.tsx

@@ -0,0 +1,33 @@
+import { Button, Space, Typography } from 'antd';
+
+import './ReportAnIssue.less';
+
+const { Link, Title, Paragraph } = Typography;
+
+const ReportAnIssue = (): JSX.Element => (
+ <div className="page-container report-an-issue">
+ <Title level={1}>Report An Issue</Title>
+ <Paragraph>As embarassing as it might be, this software is not perfect and there could of course be bugs and other less-than-favorable issues.</Paragraph>
+ <Paragraph>
+ If you run into a bug or other issue, please visit our <Link href="https://github.com/kpwags/digital-family-cookbook">GitHub Repository</Link> and
+ create an issue for it and I can look into it and hopefully quickly fix it.
+ </Paragraph>
+ <Paragraph>Also, feel free to create an issue if you see something that could be improved or if you have a feature you&apos;d like to request.</Paragraph>
+ <Space direction="horizontal" size={12} className="button-area">
+ <Button
+ type="primary"
+ href="https://github.com/kpwags/digital-family-cookbook/issues/new?assignees=&labels=&projects=&template=bug_report.md&title="
+ >
+ Report a Bug
+ </Button>
+ <Button
+ type="primary"
+ href="https://github.com/kpwags/digital-family-cookbook/issues/new?assignees=&labels=&projects=&template=feature_request.md&title="
+ >
+ Request a Feature
+ </Button>
+ </Space>
+ </div>
+);
+
+export default ReportAnIssue;

frontend/src/components/Pages/ReportAnIssue/index.tsx

@@ -0,0 +1,2 @@
+export * from './ReportAnIssue';
+export { default } from './ReportAnIssue';

frontend/src/styles/App.less

@@ -90,6 +90,10 @@ a:hover {
  text-decoration: underline;
 }
 
+.ant-typography a.ant-typography {
+ text-decoration: underline;
+}
+
 div.ant-typography,
 .ant-typogrpahy p {
  font-size: 1.1rem;
@@ -228,6 +232,13 @@ ul {
  min-height: calc(100vh - 64px - 138px);
 }
 
+.page-container {
+ width: min(100ch, 100vw - 2rem);
+ margin: 4rem auto 0 auto;
+ padding: 0 10px;
+ max-width: 100%;
+}
+
 .align-right {
  text-align: right;
 }