UI Components

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;

client/src/components/Themer/ThemePreview.module.css

@@ -26,3 +26,10 @@
   width: 50px;
   height: 50px;
 }
+
+@media (min-width: 340px) {
+  .ColorPreview {
+    width: 40px;
+    height: 40px;
+  }
+}

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;
   }

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;
+}

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;

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>
   )
 }
 

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;

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;
+}

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;

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.