Apps grid

client/src/components/Apps/AppCard/AppCard.module.css

@@ -0,0 +1,34 @@
+.AppCard {
+  width: 100%;
+  /* height: 50px; */
+  /* max-width: 150px; */
+  /* border: 1px solid red; */
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.AppCardIcon {
+  width: 40px;
+}
+
+.AppCardDetails {
+  text-transform: uppercase;
+  /* display: flex;
+  flex-direction: column;
+  justify-content: center; */
+}
+
+.AppCardDetails h5 {
+  font-size: 1em;
+  font-weight: 500;
+  color: var(--color-primary);
+  margin-bottom: -8px;
+}
+
+.AppCardDetails a {
+  color: var(--color-accent);
+  font-weight: 400;
+  font-size: 0.8em;
+  opacity: 1;
+}

client/src/components/Apps/AppCard/AppCard.tsx

@@ -0,0 +1,18 @@
+import classes from './AppCard.module.css';
+import Icon from '../../UI/Icon/Icon';
+
+const AppCard = (): JSX.Element => {
+  return (
+    <div className={classes.AppCard}>
+      <div className={classes.AppCardIcon}>
+        <Icon icon='mdiBookOpenBlankVariant' />
+      </div>
+      <div className={classes.AppCardDetails}>
+        <h5>plex</h5>
+        <a href="/">plex.example.com</a>
+      </div>
+    </div>
+  )
+}
+
+export default AppCard;

client/src/components/Apps/Apps.module.css

@@ -0,0 +1,28 @@
+.Apps {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media (min-width: 430px) {
+  .Apps {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 670px) {
+  .Apps {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .Apps {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* 320px — 480px: Mobile devices.
+481px — 768px: iPads, Tablets.
+769px — 1024px: Small screens, laptops.
+1025px — 1200px: Desktops, large screens.
+1201px and more — Extra large screens, TV. */

client/src/components/Apps/Apps.tsx

@@ -1,16 +1,31 @@
-import { Link } from 'react-router-dom';
+import { Fragment } from 'react';
 
 import classes from './Apps.module.css';
 
 import { Container } from '../UI/Layout/Layout';
-import Headline from '../UI/Headline/Headline';
+import Headline from '../UI/Headlines/Headline/Headline';
+import AppCard from './AppCard/AppCard';
 
 const Apps = (): JSX.Element => {
   return (
-    <Container>
-      <Headline title='Welcome' />
-      <Link to='/settings'>settings</Link>
-    </Container>
+    <div className={classes.Apps}>
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+      <AppCard />
+    </div>
   )
 }
 

client/src/components/UI/Headlines/Headline/Headline.module.css

@@ -1,7 +1,10 @@
 .HeadlineTitle {
   color: var(--color-primary);
+  font-weight: 700;
 }
 
 .HeadlineSubtitle {
   color: var(--color-primary);
+  margin-bottom: 20px;
+  font-weight: 400;
 }

client/src/components/UI/Headlines/Headline/Headline.tsx

@@ -3,13 +3,13 @@ import classes from './Headline.module.css';
 
 interface ComponentProps {
   title: string;
-  subtitle?: string;
+  subtitle?: string | JSX.Element;
 }
 
 const Headline = (props: ComponentProps): JSX.Element => {
   return (
     <Fragment>
-      <h2 className={classes.HeadlineTitle}>{props.title}</h2>
+      <h1 className={classes.HeadlineTitle}>{props.title}</h1>
       {props.subtitle && <p className={classes.HeadlineSubtitle}>{props.subtitle}</p>}
     </Fragment>
   )

client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.module.css

@@ -0,0 +1,7 @@
+.SectionHeadline {
+  text-transform: uppercase;
+  color: var(--color-primary);
+  font-weight: 900;
+  font-size: 20px;
+  margin-bottom: 16px;
+}

client/src/components/UI/Headlines/SectionHeadline/SectionHeadline.tsx

@@ -0,0 +1,13 @@
+import classes from './SectionHeadline.module.css';
+
+interface ComponentProps {
+  title: string;
+}
+
+const SectionHeadline = (props: ComponentProps): JSX.Element => {
+  return (
+    <h2 className={classes.SectionHeadline}>{props.title}</h2>
+  )
+}
+
+export default SectionHeadline;

client/src/components/UI/Layout/Layout.module.css

@@ -1,4 +1,22 @@
 .Container {
   width: 100%;
-  padding: var(--space-p-x);
+  padding: 20px;
+}
+
+/* 320px — 480px: Mobile devices.
+481px — 768px: iPads, Tablets.
+769px — 1024px: Small screens, laptops.
+1025px — 1200px: Desktops, large screens.
+1201px and more — Extra large screens, TV. */
+
+@media (min-width: 769px) {
+  .Container {
+    padding: 25px 40px;
+  }
+}
+
+@media (min-width: 1201px) {
+  .Container {
+    padding: 50px 250px;
+  }
 }