From f34bbd938dd390eb3fa13b5389a0b21ddf8b611c Mon Sep 17 00:00:00 2001
From: unknown <pawel999@icloud.com>
Date: Wed, 12 May 2021 18:31:02 +0200
Subject: [PATCH] UI Components
---
.../Apps/AppCard/AppCard.module.css | 2 +-
.../components/Themer/ThemePreview.module.css | 7 ++++
.../src/components/Themer/Themer.module.css | 10 ++++--
.../ActionButton/ActionButton.module.css | 31 ++++++++++++++++
.../UI/Buttons/ActionButton/ActionButton.tsx | 35 +++++++++++++++++++
.../SectionHeadline/SectionHeadline.tsx | 7 +++-
client/src/components/UI/Icon/Icon.tsx | 4 +--
.../src/components/UI/Modal/Modal.module.css | 21 +++++++++++
client/src/components/UI/Modal/Modal.tsx | 19 ++++++++++
client/src/index.css | 2 +-
10 files changed, 131 insertions(+), 7 deletions(-)
create mode 100644 client/src/components/UI/Buttons/ActionButton/ActionButton.module.css
create mode 100644 client/src/components/UI/Buttons/ActionButton/ActionButton.tsx
create mode 100644 client/src/components/UI/Modal/Modal.module.css
create mode 100644 client/src/components/UI/Modal/Modal.tsx
diff --git a/client/src/components/Apps/AppCard/AppCard.module.css b/client/src/components/Apps/AppCard/AppCard.module.css
index ae5e808..05dce47 100644
--- a/client/src/components/Apps/AppCard/AppCard.module.css
+++ b/client/src/components/Apps/AppCard/AppCard.module.css
@@ -26,7 +26,7 @@
margin-bottom: -8px;
}
-.AppCardDetails a {
+.AppCardDetails span {
color: var(--color-accent);
font-weight: 400;
font-size: 0.8em;
diff --git a/client/src/components/Themer/ThemePreview.module.css b/client/src/components/Themer/ThemePreview.module.css
index 2c54f42..11c8c64 100644
--- a/client/src/components/Themer/ThemePreview.module.css
+++ b/client/src/components/Themer/ThemePreview.module.css
@@ -25,4 +25,11 @@
.ColorPreview {
width: 50px;
height: 50px;
+}
+
+@media (min-width: 340px) {
+ .ColorPreview {
+ width: 40px;
+ height: 40px;
+ }
}
\ No newline at end of file
diff --git a/client/src/components/Themer/Themer.module.css b/client/src/components/Themer/Themer.module.css
index 6473c62..986f6c5 100644
--- a/client/src/components/Themer/Themer.module.css
+++ b/client/src/components/Themer/Themer.module.css
@@ -1,11 +1,17 @@
.ThemerGrid {
width: 100%;
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 1fr;
grid-auto-rows: 100px;
}
-@media (min-width: 900px) {
+@media (min-width: 340px) {
+ .ThemerGrid {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@media (min-width: 680px) {
.ThemerGrid {
grid-template-columns: 1fr 1fr 1fr;
}
diff --git a/client/src/components/UI/Buttons/ActionButton/ActionButton.module.css b/client/src/components/UI/Buttons/ActionButton/ActionButton.module.css
new file mode 100644
index 0000000..7c7dbf6
--- /dev/null
+++ b/client/src/components/UI/Buttons/ActionButton/ActionButton.module.css
@@ -0,0 +1,31 @@
+.ActionButton {
+ /* background-color: var(--color-accent); */
+ border: 1.5px solid var(--color-accent);
+ border-radius: 4px;
+ color: var(--color-primary);
+ padding: 5px 15px;
+ transition: all 0.3s;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ max-width: 250px;
+ margin-right: 10px;
+ margin-bottom: 20px;
+}
+
+.ActionButton:hover {
+ background-color: var(--color-accent);
+ color: var(--color-background);
+ cursor: pointer;
+}
+
+.ActionButtonIcon {
+ --size: 20px;
+ width: var(--size);
+ height: var(--size);
+ /* display: flex; */
+}
+
+.ActionButtonName {
+ display: flex;
+}
\ No newline at end of file
diff --git a/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx b/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx
new file mode 100644
index 0000000..9c9c335
--- /dev/null
+++ b/client/src/components/UI/Buttons/ActionButton/ActionButton.tsx
@@ -0,0 +1,35 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+
+import classes from './ActionButton.module.css';
+import Icon from '../../Icon/Icon';
+
+interface ComponentProps {
+ name: string;
+ icon: string;
+ link?: string;
+ handler?: () => void;
+}
+
+const ActionButton = (props: ComponentProps): JSX.Element => {
+ const body = (
+ <Fragment>
+ <div className={classes.ActionButtonIcon}>
+ <Icon icon={props.icon} />
+ </div>
+ <div className={classes.ActionButtonName}>
+ {props.name}
+ </div>
+ </Fragment>
+ );
+
+ if (props.link) {
+ return (<Link to={props.link}>{body}</Link>)
+ } else if (props.handler) {
+ return (<div className={classes.ActionButton} onClick={props.handler}>{body}</div>)
+ } else {
+ return (<div className={classes.ActionButton}>{body}</div>)
+ }
+}
+
+export default ActionButton;
\ No newline at end of file
diff --git a/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
index 5b9a7bd..8fd2a19 100644
--- a/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
+++ b/client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx
@@ -1,12 +1,17 @@
+import { Link } from 'react-router-dom';
+
import classes from './SectionHeadline.module.css';
interface ComponentProps {
title: string;
+ link: string
}
const SectionHeadline = (props: ComponentProps): JSX.Element => {
return (
- <h2 className={classes.SectionHeadline}>{props.title}</h2>
+ <Link to={props.link}>
+ <h2 className={classes.SectionHeadline}>{props.title}</h2>
+ </Link>
)
}
diff --git a/client/src/components/UI/Icon/Icon.tsx b/client/src/components/UI/Icon/Icon.tsx
index 3bdc420..2ea4350 100644
--- a/client/src/components/UI/Icon/Icon.tsx
+++ b/client/src/components/UI/Icon/Icon.tsx
@@ -11,7 +11,7 @@ const Icon = (props: ComponentProps): JSX.Element => {
let iconPath = MDIcons[props.icon];
if (!iconPath) {
- console.log('icon not found');
+ console.log(`Icon ${props.icon} not found`);
iconPath = MDIcons.mdiCancel;
}
@@ -19,7 +19,7 @@ const Icon = (props: ComponentProps): JSX.Element => {
<MDIcon className={classes.Icon}
path={iconPath}
/>
- )
+ )
}
export default Icon;
\ No newline at end of file
diff --git a/client/src/components/UI/Modal/Modal.module.css b/client/src/components/UI/Modal/Modal.module.css
new file mode 100644
index 0000000..200595b
--- /dev/null
+++ b/client/src/components/UI/Modal/Modal.module.css
@@ -0,0 +1,21 @@
+.Modal {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.ModalClose {
+ background-color: rgba(0, 0, 0, 0);
+ visibility: hidden;
+}
+
+.ModalOpen {
+ background-color: rgba(0, 0, 0, 0.7);
+ visibility: visible;
+}
\ No newline at end of file
diff --git a/client/src/components/UI/Modal/Modal.tsx b/client/src/components/UI/Modal/Modal.tsx
new file mode 100644
index 0000000..da350dd
--- /dev/null
+++ b/client/src/components/UI/Modal/Modal.tsx
@@ -0,0 +1,19 @@
+import classes from './Modal.module.css';
+import Icon from '../Icon/Icon';
+
+interface ComponentProps {
+ isOpen: boolean;
+ children: JSX.Element;
+}
+
+const Modal = (props: ComponentProps): JSX.Element => {
+ const modalClasses = [classes.Modal, props.isOpen ? classes.ModalOpen : classes.ModalClose].join(' ');
+
+ return (
+ <div className={modalClasses}>
+ {props.children}
+ </div>
+ )
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index 24c1877..5f82a6f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -27,7 +27,7 @@ body {
a {
color: var(--color-primary);
text-decoration: none;
- opacity: 0.75;
+ /* opacity: 0.75; */
}
/* 320px — 480px: Mobile devices.